Recommendation Centre: inspecting and controlling recommendations with radial layouts Gianni Fenu Abstract Department of Mathematics and In this paper we propose to use radial layouts for Computer Science representing the matching between the user’s interest and University of Cagliari particular objects and/or categories. The technique Via Ospedale 72, 09124, supports the visualization of different data: we discuss here Cagliari, Italy fenu@unica.it the relationships on social networks, the related videos on YouTube and topics in Wikipedia. The user can change the position of the object in the representation, which can be used in recommender systems for providing a fine-grained Lucio Davide Spano control over its internal preference representation. Department of Mathematics and Computer Science ACM Classification Keywords University of Cagliari H.5.m. [Information Interfaces and Presentation (e.g. HCI)]: Via Ospedale 72, 09124, Miscellaneous Cagliari, Italy davide.spano@unica.it Author Keywords Human Computer Interaction, Recommendation Systems, Visual Interfaces, Radial Layout, Inspection, Control Introduction End users often see recommender systems as black boxes, which suggest them objects, people or concepts while they are trying to find something inside a huge amount of data. Copyright is held by the author/owner(s). EICS’16, June 21-24, 2016, Bruxelles, Belgium. On the contrary, recommender systems have difficulties in collecting the user’s opinion on the suggested contents, since they mostly rely on explicitly expressed preferences, which are known to be biased [1]. Explicit preferences 54 express love or hate, without helping much for intermediate circles. The main node is positioned in the layout centre: it values. In addition, how to collect the information (e.g. represents the person, object or concept the user is through rating scales) has an impact on the overall currently focusing-on. The different concentric circles give recommendation performances [3]. immediately a feeling of the distance between the main node and the other ones. Our position with respect to this problem is that advanced techniques coming from the Human Computer Interaction Currently, the visualization displays only the nodes that are field may help both the system and the users. A possible directly connected with each other. This means that, solution is to make the two communication endpoints more differently from the original version in [15], the circles are transparent to each other. If the user would be able to not related to the graph depth, but it represent a weight understand, through a simplified representation, how the associated to the edge. recommender system is currently “reasoning” while providing suggestions, she would be encouraged in fixing More in detail, the position of a node inside the visualization possible prediction errors. On the other hand, the fixing depends on two factors. The first one is related to the action can be exploited by the system not only for changing “distance” we want to represent, e.g. how many times we a parameter related to a single user, but also for updating interact with a social network friend, how close a topic is future predictions, either for the same or for similar users. related to another in Wikipedia, etc. We can define different ways for calculating such distances and consequently We developed a visualization technique for displaying a assign a value graph edges, according to the considered summary of the social network interactions through a radial domain. Such definition would position continuously the layout [5]. The user can both inspect and control the different objects in the radial layout. representation, and the content filtering is updated accordingly. In this paper, we discuss how a similar In addition, we included a discretization step in order to help approach may be applied to recommender systems, in the user in identifying the different levels of relationship, order to support the end-users in understanding their while keeping the visualization tidy. Therefore, the object internal state. In addition, the users should be able to position depends on discrete distance levels, whose modify the position of the object in view. The system should number is established according to the application domain. update its internal model accordingly. We describe two Both the distance and the levels are defined through two early application prototypes and we define the direction of functions that control the visualization layout. future work. In the following sections we discuss the application of the radial layout to different case studies. Visualization In this section we discuss the visualization technique, which Example applications exploits a radial layout [15] for showing the relationships between object and/or users. It positions a set of nodes, Social Networks each one representing an object, inside a set of concentric We show the first example in figure 1, where we represented a user’s ego network on a social network 55 3. The friend likes one of the user’s post on her wall 4. The user likes one of the friend’s post on her wall After this counting step, we normalized the distance value by the maximum value of interactions with a single friend. Such sum gives us a value between 0 and 1 that is higher for friends that communicate with our user very often, and lower for the others. The visualization confirms the results in [10]: a user communicates often with a small set of friends, while with most of them has less than one interaction per year. In figure 1 most people is contained into the last circles, while in the inner ones are less crowded. YouTube Videos In this example, we allow the user to visualize the results of keyword search on YouTube. The resulting visualization is shown in figure 2. The icons are video key-frames, hovering Figure 1: Social Network radial layout visualization the mouse on top of each video result, the tool shows more information on the selected video, magnifying the key-frame and showing the full title (the bigger icon in figure 2, top part). Clicking on an icon, the tool plays the video, showing according to an interaction distance between the main user it on a modal window. (show in the centre) and his/her friends. In this case, we defined the distance function according to We represented each friend using a square icon including three different parameters, which we obtain invoking the profile image. Each icon belong to a different circle services from the YouTube Data API v3 [11]: according to the distance function value. The continuous distance was defined counting the following events: 1. Relevance: match between the query and the result. 1. The friend comments one of the user’s posts on her 2. View count: number of times the video has been wall watched by any user. 2. The user comments one of the friend’s posts on her 3. Date: publication date. wall 56 The three parameters are considered hierarchically in order to establish the visualization distance. This means that we first consider the semantic matching, secondly a crowd-based ranking of the different videos and then we consider the content age. Wikipedia We considered to apply the visualization to the Wikipedia content, in order to apply it in showing the semantic distance between concepts. In this case we used the Wikipedia API [13] for accessing the data. Similarly to the previous example, we focused on the visualization of a keyword search result. We considered the following properties in order to define the distance function: 1. Query matching: the similarity between the Wikipedia page and the keyword 2. Last page update. With respect to the usual result list visualization of the search results, the layout in figure 3 provides the user with the possibility to understand how distant the results are from each other. Indeed, the search result page shows the ranking, but the matching-distance between the results is not uniform. For instance, it is possible that the distance between the 10th and the 11th is smaller than the distance between the first and the second. The graph nodes are represented through both the Wikipedia article title and its thumbnail image. Since not all articles have an associated image, we used the first image Figure 2: YouTube videos related to the “Queen” keyword included in the article if any, otherwise we used a default image, i.e. the Wikipedia logo. 57 As in the YouTube application, the tool shows a small preview when the user overs the mouse on a node, showing the full article title and a bigger thumbnail image (figure 3, top part). In addition, if the user clicks on a node, the tool shows the corresponding article (figure 3, bottom part). Control features The possibility to visualize a distance between friends or objects according to the internal system representation is useful for the user, since it helps her to understand what the recommendation support has learned from the data analysis. However, this is not enough: users may want to change the system internal representation when she is not satisfied with it. This would have a twofold positive effect on the interaction. On the one hand, the system would gain an explicit feedback, and this would be useful for both creating a more precise user’s model. In addition, the same feedback can be propagated to similar users. On the other hand, the user will be more satisfied with a system that allows her to change the representation of her interests, which would result in more relevant recommendations. Considering this, we inserted in the visualization tool the possibility for the user to change the node position. We show an example of this manipulation in figure 4. The user selects one of the nodes in the visualization, and then she can change the position inside the distance levels either dragging the node or changing the slidebar values. Such action has an effect not only in the visualization, but it can be exploited also by the recommender system for Figure 3: Wikipedia keyword search updating its internal representation. Indeed, the system may invert the distance function and let the user to specify directly the matching value, without the need for her to understand how the system internally calculates it. 58 In figure 4 example, we show a sample case for such manipulation. The user, inspecting his social network, sees that one of his best friends is quite distant from him. They do communicate few times through the social network, but they see each other at least once or twice a day. So the user decides to change his friend’s position. The system updates his internal representation consequently. This has an impact for instance on the content that the social network application shows on the user’s news feed: the content published by the considered friend should be visualised immediately in the first positions, even if from the collected data the interaction between the two users is weak. Conclusion and future work In this paper we discussed a simple example application of Human Computer Interaction techniques for increasing the user’s understanding of a recommender system. In our opinion, providing simple yet effective visualization of the their internal state to the user may have different advantages. First of all, the user would be able to inspect the recommender system state and to fix possible prediction errors that cause incorrect suggestions. While the user would receive better content, the recommender system would learn from the user’s feedback and use it also for similar users. In addition, the user would trust more a system that explains how it suggests a content, with respect to other ones where she cannot find out if it is relevant for Figure 4: Distance control functionality her or it is simply advertised. We described an early application of a radial visualization from the distances between users in the same social network to contents such as videos and Wikipedia articles. In addition, we discussed how control techniques on such 59 visualization may have impact on the recommender system [4] Gianni Fenu and Marco Nitti. 2011. Strategies to carry data. and forward packets in VANET. In International Conference on Digital Information and Communication In future work, we plan to study more in detail the End User Technology and Its Applications. Springer, 662–674. Development techniques [12] that may be used for defining [5] Gianni Fenu and Lucio Davide Spano. 2013. Mobile other internal aspects, such as recommendation algorithms Web Information Systems: 10th International and data collection. In this case the user would not develop Conference, MobiWIS 2013, Paphos, Cyprus, August new algorithms or directly manipulate the data, but it would 26-29, 2013. Proceedings. Springer Berlin Heidelberg, be useful for graphically describing how the system work. Berlin, Heidelberg, Chapter Circlebook: Visual Display This would guide further user’s control actions on the of Friend Proximity, 129–142. DOI: recommendation interface. http://dx.doi.org/10.1007/978-3-642-40276-0_11 [6] Giovanni Garibotto, Pierpaolo Murrieri, Alessandro References Capra, Stefano De Muro, Ugo Petillo, Francesco [1] Xavier Amatriain, Josep M. Pujol, and Nuria Oliver. Flammini, Mariana Esposito, Cocetta Pragliola, 2009. User Modeling, Adaptation, and Personalization: Giuseppe Di Leo, Roald Lengu, and others. 2013. 17th International Conference, UMAP 2009, formerly White paper on industrial applications of computer UM and AH, Trento, Italy, June 22-26, 2009. vision and pattern recognition. In International Proceedings. Springer Berlin Heidelberg, Berlin, Conference on Image Analysis and Processing. Heidelberg, Chapter I Like It... I Like It Not: Evaluating Springer, 721–730. User Ratings Noise in Recommender Systems, [7] Giuseppe Ghiani, Fabio Paternò, Carmen Santoro, and 247–258. DOI: Lucio Davide Spano. 2009. A location-aware guide http://dx.doi.org/10.1007/978-3-642-02247-0_24 based on active rfids in multi-device environments. In [2] Paolo Boi, Gianni Fenu, Lucio Davide Spano, and Computer-Aided Design of User Interfaces VI. Valentino Vargiu. 2016. Reconstructing UserâĂŹs Springer, 59–70. Attention on the Web through Mouse Movements and [8] Giuseppe Ghiani, Fabio Paternò, and Lucio Davide Perception-Based Content Identification. ACM Spano. 2011. Creating mashups by direct Transactions on Applied Perception (TAP) 13, 3 (2016), manipulation of existing web applications. In 15. International Symposium on End User Development. [3] Paolo Cremonesi, Franca Garzottto, and Roberto Springer, 42–52. Turrin. 2012. User Effort vs. Accuracy in Rating-based [9] Giuseppe Ghiani, Fabio Paternò, Lucio Davide Spano, Elicitation. In Proceedings of the Sixth ACM and Giuliano Pintori. 2016. An environment for Conference on Recommender Systems (RecSys ’12). End-User Development of Web mashups. International ACM, New York, NY, USA, 27–34. DOI: Journal of Human-Computer Studies 87 (2016), http://dx.doi.org/10.1145/2365952.2365963 38–64. 60 [10] Scott A. Golder, Dennis M. Wilkinson, and Bernardo A. http://dx.doi.org/10.1007/1-4020-5386-X_1 Huberman. 2007. Communities and Technologies [13] MediaWiki. 2016. Wikipedia API. (2016). 2007: Proceedings of the Third Communities and https://www.mediawiki.org/wiki/API:Main_page/it accessed Technologies Conference, Michigan State University 6 April 2016. 2007. Springer London, London, Chapter Rhythms of [14] Fabrizio Mulas, Andrea Acquaviva, Salvatore Carta, Social Interaction: Messaging Within a Massive Online Gianni Fenu, Davide Quaglia, and Franco Fummi. Network, 41–66. DOI: 2010. Network-adaptive management of computation http://dx.doi.org/10.1007/978-1-84628-905-7_3 energy in wireless sensor networks. In Proceedings of [11] Google. 2014. YouTube API v3. (2014). the 2010 ACM Symposium on Applied Computing. https://developers.google.com/youtube/v3/ accessed 6 ACM, 756–763. April 2016. [15] Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, and [12] Henry Lieberman, Fabio Paternò, Markus Klann, and Marti Hearst. 2001. Animated exploration of dynamic Volker Wulf. 2006. End User Development. Springer graphs with radial layout. In InfoVis. IEEE, 43. Netherlands, Dordrecht, Chapter End-User Development: An Emerging Paradigm, 1–8. DOI: 61