AniMap: An Interactive Visualization Supporting Serendipitous Discovery of Information about Anime

(1)

(2)

Abstract

It is a challenging task for interaction designers to find a way to design a digital artefact supporting serendipitous discovery. Its interdisciplinary nature requires sufficient knowledge of information visualization, social navigation and serendipity. Based on literature review and prior relevant works, several traces having potential to aid such exploration were defined. Through creating and testing AniMap, an interactive graph visualization for discovering new anime clips, in this thesis I argue that such an artefact has the potential to support serendipitous discovery, owing to its features of being information visualization, interactive and in a graph layout, coupled with users’ personal interests. Even so, finding details of how to influence serendipitous discovery remain an ongoing challenge considering the dynamic nature of serendipity.

Keywords – interaction design, serendipitous discovery, interactive graph visualization, information visualization, serendipity, social navigation

(3)

1. Introduction

‘How do I find a new anime clip worth watching?’

This was the initiating question for my research, which then evolved into the present thesis. Further detailing the initial inquiry, watching an anime, which is worth viewing, requires much effort from a person, for example, searching databases, looking up Wikipedia entries, asking around on forums and then locating the content online to finally view the video material. However, even after all these steps, viewers may still find something that was unsatisfactory and the aforementioned process starts over again. This matter touches upon many problem domains such as entertainment or information seeking; however, this thesis focuses instead on information visualization, navigation paradigms (such as recommender systems and social navigation) and serendipitous discovery.

Information visualization is an interesting focus domain considering current search interfaces are almost exclusively textual: they require users to input their query in order to present a list without any semantic meaning to them, and have limited capability of showing relations between individual items. During the present research, the emphasis shifted more towards the qualitative and quantitative aspects of the existing connections between the items represented within the visualization.

Social navigation is another compelling field of research, discussed in the present thesis in order to get a better understanding of the potential of combining it with serendipitous discoveries. We investigate recommender system theories first, followed by studies of social navigation to further unveil the attributes of a collaborative approach, in order to make design suggestions that could facilitate this perspective.

Serendipitous discovery, and serendipity in general, is a very inviting and challenging research subject. Academia does not have extensive literature on this topic (yet), and even fewer papers can be found that take both serendipity and interaction design into consideration. Additionally, serendipity has a provocative and fluid nature, as in how to define it and, from a designer’s perspective, what qualities and attributes should be included in such a design artefact.

Last but not least, I chose the genre of anime because, besides the fact that all data is accessible online, setting the focus on TV in general seemed too massive for such a project as

(6)

this. Instead, a small but interesting niche (ie. anime) could be well suited for an academic discussion of this magnitude, and had the benefit of some fans being very engaged with the content (eg. Eng, 2002). Furthermore, due to the fact that a large volume of anime is published on a regular basis with relevant meta-information and user generated content available, it seemed fruitful to design an interactive interface for letting people have intriguing experiences with the material.

1.1. Research Question

Integrating the designer’s perspective into the original question, a more adequate question would be: how to design such an interface? In other words, the research question can be articulated from a social aspect and considering anime as its context:

(7)

2. Research Framework

In this chapter, three relevant research areas are examined. The scope of the first is information visualization, as my design is fundamentally of a kind, which surveys graphs and interactive visualizations as a divergent genre more in depth. It was hinted in the literature that interactive visualizations can be an attractive choice to facilitate serendipitous discovery with great chance, therefore making a comprehensive survey is reasonable. Secondly, two navigation paradigms are elaborated to a limited extent to give a theoretical insight and provide possible design suggestions. Thirdly, serendipity is discussed as one of the focus points of my research. After covering all three research areas, related works will be examined, followed by the research method.

2.1. Information Visualization

It is almost a cliché that visualizations are important to cope with the information overload that surrounds us. Visualizations enable people to quickly overview many information bits as a whole, while inviting us to see stories that data can tell (Fry, 2008). Stories, by their nature, lead our imagination into a space that was unknown to us before, a place where we can meet brave or evil people, mysterious objects, and sometimes elements we cannot place into any category, something unexpected that surprises us. In other words, stories possess possibilities for serendipitous discoveries.

Information visualizations have impact on our minds much like stories, due to the fact that the outcome is usually not predictable, or by rearranging the information to provide additional insight (Spence, 2001). There are two main conclusions from this statement.

Firstly, a conclusion is that not being able to tell the outcome is a good soil for serendipitous discoveries, in order to have a fresh ground where people can ‘grow’ their thoughts freely, with the possibility of taking new, unexpected turns.

Another conclusion is the notion of using visualizations as a continuous activity, where users create their own internal mental model of the artefact helping them to formulate and execute their browsing strategy. Rearrangement, in this context, can be seen as an algorithm that enables people to view the same information in a different way by changing the presentation

(8)

(Spence 2001). This algorithm further enables people then to actively engage users, lets them have their own way of interpreting the visualized information as an internal cognitive model.

2.1.1. Graph Visualizations

This mental model is visualized by a graph layout in AniMap, and in order to get a better understanding how such designs operate, the field of graph visualization needs to be discussed in more details.

We can find a decent survey of graph layouts written by Gibson et al. (2012), where they examine the aesthetic and algorithmic aspect. They mention that drawing a graph can help make better sense of the structure of relationships, rather than viewing data in tabular form. Gibson et al. (2012) argue that the layout and the arrangement of a graph influence how users perceive the relationships within such an artefact. Blythe et al. (1995) also touch upon similar observations featuring centrality, prominence and other attributes of the nodes (circles) and edges (lines connecting the circles). This implies that when designing a graph, it should be noted which features or attributes are highlighted in order to support serendipitous discoveries (eg. relationship between items).

Ideally, upon perceiving a graph, its purpose is to represent the structure of a graph visually so users are enabled to see relationships, such as patterns and outliers (Perer and Shneiderman, 2008). This argument could be seen as a basis for Bezerianos et al. (2010:1) where they mention regarding their multivariate visualization design, GraphDice (see Figure 1), that ‘detecting, understanding and identifying unexpected patterns’ (2010:1) can take place and Gibson et al. (2012) makes the association true for graphs in general. If we take this into consideration, then it would seem that the unexpectedness of the patterns could be beneficial, if not crucial, for serendipitous discovery by presenting a new and surprising association.

(9)

Figure 1. The Graphical User Interface of GraphDice (Bezerianos et al. 2010)

In order to understand why users employ information visualizations in casual context, Sprague and Tory (2012) elaborate on users’ motivations through their Promoter-Inhibitor Motivation Model. With their study, they found out that users continuously perform cost-benefit evaluation when using visualizations and identified factors influencing such artefacts along their usage as promoters encouraging or inhibitors discouraging it. What they conclude is that their participants were always achieving a goal, even if it was curiosity. Out of the five defined promoters (personal interest, usefulness, aesthetics and self-reflection, reduced learning costs, communities and socializing) they recognized that personal relevance is the most fundamental.

This observation has the potential of confirming that people who like anime would probably use AniMap and overcome the initial difficulties of learning and using the visualization by the drive of personal interest.

2.1.2. Interactive Visualizations

Up until now, there was no difference between static and interactive artefacts; still, many researchers have realized (Buja et al., 1991; Becker et al., 1995; Matsushita and Kato, 2001) that dynamic visualizations have more potential (and are suited) for visualizing networks and

(10)

exploring and understanding data sets. Unfortunately, even the more recently published literature fails to make this distinction (eg. Gibson et al., 2012).

User studies of the original dynamic query interface (Ahlberg and Shneiderman, 1994) support the claim of ‘tight coupling’ facilitates explorative behaviour, thus serendipitous discovery, and even going further to describe it as a principle for visual information seeking. An example can be seen in Figure 2, with (alpha)sliders and genre buttons.

Figure 2. Dynamic Queries in FilmFinder (Ahlberg and Schneiderman, 1994)

From an interaction design point of view, the term ‘pliability’ was introduced by Löwgren (2007) through Sens-A-Patch (Figure 3), which is closely related to tight coupling. As a use quality attributed to interactive visualizations, he implies that such artefacts could be seen as a different interaction design genre than static information visualization. According to him, pliable interaction has an immersive element to itself (pp.1762) because of the ‘tight connection between action and outcome, the pseudo-tactile sense of manipulating the interface and shaping the information, the sense of being drawn into the material under exploration – all of this points to a rather highly involved and immediate experience at the focus of attention.’

(11)

Figure 3. Pliability envisioned in Sens-A-Patch (Löwgren, 2007)

Relating to tight coupling and pliability, Spence (2001:70) mentions that ‘real-life problems invoke dynamic exploration thanks to lack of knowledge and therefore formulating a problem is as important as solving it.’ According to him, visualizations are meant to support both activities while showing information in a relevant way so that dynamic queries can contribute the problem articulation process.

Tight coupling, pliability and dynamic queries are all important to serendipitous discoveries because they provide multiple visual paths or entry points by the rearrangement of information and thus raise the probability for serendipitous discovery. By this same notion, we can say that interactivity adds another dimension to support such explorations, and confirms Löwgren’s argument (2007:1761), that there is a ‘tendency of more pliable interactive visualizations to encourage exploration of the underlying data and to create conditions for serendipitous discoveries.’ This said, it can be argued that interactive visualizations have great potential for aiding serendipitous discovery.

Dörk et al. (2008) also mention dynamic queries as an integral part of interactive visualizations, further supporting the notion as being part of interactive visualizations, and argue that this genre improves the exploration of data with the notion of swift and playful approach. Interactive visualizations are discussed by them to elaborate on coordinated visualizations for web-based

(12)

information explorations and discoveries through their working prototype, VisGets. They arrive from web-based search interfaces and provide multiple visualizations (cf. Thudt et al., 2012) that facilitate temporal, spatial and topical data filters. Their reason to design a prototype was to enable ‘information seekers to orient themselves within online information spaces and to incrementally build complex filtering queries’ (pp. 7). As a consequence of this design decision the focus is more on (exploratory) search and filtering, in other words interacting, than about (explicit) serendipitous discoveries. However, the chance of spotting something unexpectedly is not excluded if a person comes with an open mind (eg. Roberts, 1989). Their main contribution to interactive visualizations (and to interaction design) is what they call ‘weighted brushing’ to represent varying degrees of relatedness between items. (see Figure 5 at the chapter on related works)

2.2. From Recommender Systems to Social Navigation

Interactivity suggests that visualizations are not static, but rather change dynamically upon user input. As a consequence of this change, there are more than one ways to explore the artefact – suggesting a usage that is, for the sake of clarity and consistency, labelled as navigation. Within AniMap, this activity materializes in user recommendations and other social meta data that determine fundamental attributes of the layout, and are thus relevant to the research field of recommender systems and social navigation.

We have all probably seen at least an example of recommender systems such as Amazon’s ‘people who bought this also bought that’, or the one behind the movie recommendations for Netflix. These systems have complex algorithmic calculations to automate what users would probably like to consume, in order to increase profit or enhance service quality. From the amount of research done in this area, it can be safely said that it is an ongoing and very stimulating concern.

Resnick and Varian (1997) introduce the term ‘recommender systems’ based on previous studies (eg. Resnick et al. 1994; Shardanand and Maes, 1995). They made a brief, yet very insightful reflection by comparing five products with built-in recommendations along the implications and challenges of trustworthiness of the recommendations, for example. More relevantly, they mention the problem of recommending for people with different tastes (similarly to Shardanand and Maes, 1995) and how users can receive recommendations only

(13)

after having a decent profile set up. By their definition, recommender systems use the insights of a user community to help individuals within that group identify content of interest from a potentially overwhelming set of choices more effectively. This definition is not far from social navigation, with the subtle, nevertheless ‘game-changing’ fact that traces are generated automatically, not by users.

Recommender systems raised questions of how they could support serendipitous discoveries by automating recommendations (cf. Herlocker et al., 2004). After evaluating existing solutions, Herlocker et al. make a practical distinction between novelty and serendipity. Their definition of the first is that a user already knows an attribute of the item, for example has a favourite director, but has not seen a movie from him, and using the same example, the latter is when a user discovers a new movie from a director who was not known previously. In their terms, serendipity means to recommend something that is both attractive and surprising, and consequently broadens a user’s taste over time. As a conclusion, they state that there is no overlap between recommender systems and serendipitous discoveries: ‘the potential for serendipitous recommendations is one facet of collaborative filtering that traditional content-based information filtering systems do not have’ (pp. 39). However, driven by instinct, we can argue that these systems can support serendipitous discoveries, although to a limited extent (eg. similar items that not necessarily broaden the user’s taste). Further hypothetical questions could be asked, as to where the border of broadening is and to what extent this action should or could be used or forced. However, this discussion is not in the scope of this thesis.

From this discourse of recommender systems, we can conclude that the relationship between them and serendipitous discovery is an ongoing matter, with literature contributing to the present research.

2.2.1. Social Navigation

In addition to recommender systems, another navigation type is the social navigation paradigm, which started to emerge in early forms alongside recommender systems. Researchers note that ‘user filtering’ is something that suggests social navigation (Goldberg et al., 1992) or that ‘unoriented wandering’ (Dieberger, 1997) is something that relates to a prerequisite state of mind for serendipity.

(14)

Dieberger et al. (2000:3) extend the definition with information traces, as the information about what others are doing guide and inform (but not control) a decision. The notion of leaving traces of information to guide people who are facing a similar issue are, by their intentions, mainly designed for repeated problems. The latter can be related to the notion of finding an anime clip worth watching.

They also bring up that personalization (eg. the notion of a user being in the centre of the focus) and dynamism (eg. something that is not pre-planned or have undefined outcome, cf. Spence, 2001) is how advice is given to the ‘navigator’ and that recommendation paths should be transformable. The latter can be interpreted with the example of a forest path – the more people walking on it, the more visible it gets. They even go further by questioning the existence of one so-called path if there is nobody using it. In accordance with this and Lindstedt et al.’s (2009) research, Löwgren (in press) also articulates that social navigation is solely reasonable when the aiding social cues change with time, and that this type of navigation can materialise in numerous forms, from locating a most popular item and following the advice of those similar to us to following those who are experts in the field.

Dieberger et al. (2000:10) clearly define that recommender systems, which use traces of other people with similar taste, are clearly different, and should be distinguished from social navigation, which turns 'information spaces we have now into more humane environments.’ Another piece of relevant social navigation research was OurNewsOurWays (Lindstedt et al., 2009), where the researchers introduced a navigation system with social implications or attributes. They argue that 'successful navigation and access mechanisms emerging in the online communities all draw heavily on social mechanisms and participation' (pp. 19). This would be a valid reason for basing such a system on anime, which has devoted and engaged users across the world.

They also refer to tribes as social units (also in eg. Maffesoli 1990 and Godin, 2008), as a 'relatively small group of people who know each other and are willing to do things for each other, secure in the knowledge that their altruism will be reciprocated.' Lindstedt et al. distinguish this type of navigation from large-scale anonymous social navigation mechanisms (eg. Amazon or Netflix). They also draw attention to using social metadata (explicit links, comments and activity) combined with factual metadata, what they call conventional meta data

(15)

(content annotations or tags, date, time and location). Their emphasis on connecting friends together with only partially overlapping interests and provide an extra layer of 'pathfinders' (named 'leaders' in Godin, 2008), people whose activity can be followed. Furthermore, it adds a valid argument for raising the chance of spotting something unexpected but genuinely interesting, which notion is valuable for supporting serendipitous discoveries.

2.3. Serendipity

Serendipity, according to its original meaning from Horace Walpole (Remer, 1965: 20), refers to heroes who 'were always making discoveries, by accidents and sagacity, of things they were not in quest of.' In everyday life we usually tend to associate the term with the joyful and unexpected aspects, and sagacity is more often than not neglected or pushed to the background (cf. Thudt et al. 2012).

Scholarly writing about the subject is quite limited, though descriptive and invaluable for the research of the present thesis. It is mentioned in research papers, mainly centred on information seeking and exploration (Erdelez, 1999; Cooksey, 2004; Lawley and Tompkins, 2008; McCay-Peet and Tom, 2010; Rubin et al. 2011) from an empirically grounded theory viewpoint (Foster and Ford, 2003; Makri and Blandford, 2012) and from a visualization perspective (Thudt et al., 2012) or with an interdisciplinary nature (de Bruijn and Spence, 2008).

Erdelez (1999) examines (serendipitous) information encounters within the context of library and information science. She presupposes passive and opportunistic browsing along with the already known active and problem oriented attributes for information encounters. According to her argument, serendipity appears in two contexts of activity, namely browsing and environmental scanning.

Erdelez recognizes the importance of the role of personal characteristics in serendipity by arguing prior to information encounters users may be in ‘information acquisition mood’, followed later by similar acknowledgments and affirmation from several other researchers (Foster and Ford, 2003; Cooksey, 2004; Lawley and Tompkins, 2008; McCay-Peet and Tom, 2010; Makri and Blandford, 2012). By further characterizing four tentative groups of users, she hints that different types of personalities invoke different level of serendipity.

(16)

These observations suggest that browsing is more related to serendipity than searching and further implies prerequisite personality traits or qualities. However, descriptors of the phenomenon are rather explained in a limited manner, and need further detailing and validation through empirical exploration.

Foster and Ford (2003) conducted such an empirical study to capture the existence of serendipity amongst interdisciplinary researchers. Additionally, they differentiated many levels and types of serendipity, which can be consciously influenced. They conclude that it can go beyond a purely accidental nature and can be actively sought to some extent. Thus they hint at serendipity is something more active, yet still operating at the boundaries of consciousness. Foster and Ford also mentioned that serendipity depends upon the behaviour and skills involved and they took note of certain attitudes and strategic decisions that proved to be effective for their participants in grasping serendipity. Some influencing factors are deliberate randomness, persistence, adjacencies (in the context of library usage) and influence of information systems (ie. logical order of a library). They observed user attitudes supporting serendipity such as consciously being open and receptive to information encounters, and conscious strategic decisions to step back and take a broader view.

De Bruijn and Spence (2008) make a relevant distinction between opportunistic and involuntary browsing, the former being intentional, yet the user is unaware of any goal being pursued (“let’s see what’s there”). The latter in contrast, is unintentional, though the user is still unaware of any latent goal that might be pursued. For example, a user’s eye gaze, naturally moving rapidly between a series of fixations, serendipitously fixates on an information item that may lead to the answer to her query. Makri and Blandford (2012) also outlined several factors that served as a good basis for serendipity based on their empirical results, such as being relaxed, alert, in a good mood and willing to deviate from the current task.

De Bruijn and Spence (2008:2) argue that while searching (or for example formulating a search query) the ‘user always has to be consciously aware of both the need for information and the means of its acquisition. This is an interesting parallel to the findings of Foster and Ford (2003) about users having a mindset and stressing the importance of to what extent is a person conscious when discovering information serendipitously

(17)

McCay-Peet and Toms (2010) introduce ‘bisociation’, a surprining association between two different and previously unconnected pieces of information. How they describe this action and finding a solution covers certain aspects of serendipitous discovery, the process, however, is rather vague, and neglects the procedural nature of the phenomenon, and influencing such an environment (in ways as introduced by Foster and Ford) would seem impossible.

Makri and Blandford argue (2012:2) that ‘different people have different understandings of serendipity and these understandings are likely to change and perhaps evolve as they are challenged by new (and different) experiences.’ This contributes to the difficult nature of the phenomenon and adds a dynamic layer to our understanding of the phenomenon.

They accumulated several models as a basis for their empirically grounded framework, borrowing from two models in particular. One framework, that strongly influenced their work is authored by Lawley and Tompkins (2008), who grasped the process nature of serendipity. Another model was used in order to describe the essence of serendipity (Rubin et al., 2011). When Rubin et al. mentions the notion of serendipity separately the conclusion can be drawn that as a ‘reframing of events,’ an experience can only be considered serendipitous upon reflection (Makri and Blandford, 2012:3). They designate the outcome of a discovery as an ‘iterative process of projecting the potential value of the outcome, taking action to exploit this connection and reflecting on the value gained’ (pp. 7). According to the researchers, the latter argument implies that the value of the outcome can be apparent only with time. This model is very informative and valuable, especially for its notion of combining the procedural and reflective nature of serendipity. We can argue that, using their own findings, another empirical study would show different aspects of serendipity depending how participants approach the phenomenon.

From a visualization point of view Thudt et al. (2012) also considers serendipity to be more than just coincidence. Their factors, drawn from literature review, are personal traits, observational skills, knowledge, perseverance, environmental factors, coincidence and influence of people and systems. This is a decent summary, yet we cannot find additional elements of serendipity and they also miss the procedural and reflective parts. Their main contribution is the notion of how serendipity can be supported through information visualizations.

(18)

We can conclude that while serendipity is ‘by definition not particularly susceptible to systematic control and prediction' (Foster and Ford 2003:26), such experiences can be, however, supported while knowing the existence of certain prerequisite skills or attributes needed from people. We also identified that the definition of serendipity is dynamic and far from exact.

2.4. Related Work

There are many examples that cover one or some aspects of AniMap listed in this section; however, there are two closely related works that are mentioned first and in more depth, as they utilize interactive visualization (Dörk et al. 2008) or connect that to serendipity (Thudt et al. 2012).

Bohemian Bookshelf, as shown in Figure 4, is a first and daring attempt to draw the connection between information visualization and serendipitous discoveries. Thudt et al. propose the artefact as a possible solution to their five proposed design goals based on literature of information and library sciences. According to them, information visualizations supporting serendipitous discoveries should

i. offer multiple visual access points by providing visualizations of different perspectives on the collection,

ii. highlight adjacencies between items,

iii. provide flexible visual pathways for exploring,

iv. entice curiosity through abstract, metaphorical, and visually distinct representations of the collection, and

v. enable a playful approach to information exploration.

Their idea of designing for serendipity is thus literature-driven and their results showed that people have a diverse image of what is serendipity and how it could be implemented (cf. Foster and Ford, 2003; Makri and Blandford, 2012). Unfortunately, the use context was not thoroughly discussed or the fact why they decided on designing for a large touch-interactive display. They concluded (pp. 7) that the short average interactions time, which was around a minute (1’06’’), is ‘realistic in libraries where visitors often approach information displays spontaneously.’ This argument raises questions as what other studies they used as a reference, if they deliberately

(19)

designed the artefact for short duration and if there were people who tried Bohemian Bookshelf several times within the user test period. Additionally, as the artefact was a physical installation, and as such involves placement, it would be reasonable to further inquire about the logic behind the placement.

Figure 4. Bohemian Bookshelf (Thudt et al. 2012)

AniMap benefited from this work greatly, as it is a very relevant research project that is unprecedented. Out of the five design goals four were explicitly considered or implemented in AniMap, with the exception of providing multiple visual access points. This decision was based on two insights. Firstly, users asked for one visualization at the testing period and secondly, the fact that exploration of one visualization was not made before in the context of serendipity. VisGets (Dörk et al., 2008) as a coordinated visualization for web-based information exploration and discovery is related to AniMap because it utilises an interactive visualization as a means of information seeking (Figure 5). Serendipity is not discussed by the researchers, they discuss ‘exploratory search’ as an extension of the habit of ‘berrypicking’, which they see as a starting point with a vague information need that leads to a learning process over time.

(20)

In addition to exploratory search, another important feature of their interactive visualization was the notion of visual information seeking (VIS). They argue (pp. 1206) regarding visualizing large amount of data that ‘the spatial distribution of items along the attributes that can be filtered with sliders are not visualized and the whole data necessary for the visualization has to be loaded at once, making exploration of larger information spaces impossible.’ This remark can be challenged to a reasonable extent due to the fact that, by now, computational power has increased considerably since then, and more techniques were implemented in order to visualize larger dataset more effectively (eg. the D3 framework). Furthermore, scalability usually arises when talking about visualizing collections (just see previous example), however scaling down or limiting the number of visible objects is a possible solution for coping large amount of data.

Figure 5. VisGets (Dörk et al. 2008)

From a technical angle, the web-based essence of VisGets is notable and a similar architecture could be considered as the information about anime can be gathered online. We should note that this solution does not require any browser extensions, thus can be set as a preferred over other solutions (eg. Java-based applications) requiring users to install additional extensions. By their addition of colours, sliders, buttons, advanced mouse hover effects and multiple facets, a reasonable question could be asked of how users would perceive using the product along the cost-benefit axes (cf. Sprague and Tory, 2012).

(21)

What connects Bohemian Bookshelf and VisGets together is the fact that both neglect the fact of graph layout as a visualization type. However, we can see that there are examples that use graph layout or clustered layout (Vlachos and Svonava, 2013) that merit from information technology and more oriented towards the idea of recommender systems.

Two web-based examples with interactive graph include Visual Thesaurus and LivePlasma. Firstly, VisualThesaurus.com is an interactive small-scale graph for exploring dictionary entries, with one word in the centre, and related expressions around it (Figure 6). As a standalone product, it has an immersive effect that entices curiosity, supported by additional options. This can be considered as a canonical example for interactive graph visualization.

Figure 6. Visual Thesaurus

Secondly, LivePlasma.com (Figure 7) provides an interactive graph visualization that allows users to explore music, movies or books after inputting a query first with a catchy tagline stating that ‘discovery is the new search.’ However, by requiring input from users that defines the entry point, we can safely say that this notion is not designed to support ‘just browsing’ or serendipitous discoveries. Pliability, or tight coupling, materialises in two ways. Hovering over an item presents actions to each node and clicking on an action, when applicable, instantly

(22)

triggers audiovisual material (in the form of an embedded Youtube video) within the browser window.

Figure 7. LivePlasma.com Playing Adele’s Daydreamer

Two additional examples should be mentioned as they give supplementary insight about serendipitous discovery.

One example is Musicover.com (Figure 8), where a user is presented with multiple facets at the entry point. Out of these facets, one could be labelled as ‘mood matrix’, which helps users defining a starting point for their discovery. Users can immediately recognise the simple and familiar Cartesian matrix visualization and use it naturally. After selecting an entry point, the system creates a playlist of the selected artist by mixing it with recommended authors, thus users are seamlessly introduced to new artists, allowing them to have serendipitous discoveries.

However, when it comes to audiovisual material, it should be indicated that longer time frame is required for exploring videos, and it also suggests that users are supposed to watch them, and not only listening to the audio playing in the background.

(23)

Figure 8. Using the Mood Matrix in Musicovery

Another example is Linked Jazz (Figure 9), where Pattuelli (2012) investigates how Linked Open Data can be applied to encourage discovering digital cultural heritage materials. It is mainly relevant because of the similarities in implementation and interactions, which served a valuable inspiration and resource.

(24)

2.5. Research Method

In order to get a hold of the question of how to design a digital artefact to support serendipitous discovery, the following research sources and analysis was used.

2.5.1. Data Sources

Three types of data sources was employed in the study, (1) mainly from repository perspective, a compilation of information visualization types in order to ‘map out’ the possibilities of a projected artefact, (2) an anime database site assembling different kinds of meta information, and (3) after designing a prototype, user test interviews to evaluate the designed artefact. Each interview, lasting between thirty minutes and an hour, started with short warm-up questions that led to a section where users were asked to perform a task to see their reactions, with follow-up questions wrapping it up. The interviews were recorded and transcribed, and additional comments were made after the interviews to describe the nature of it and to find behavioural patterns of the interviewees.

2.5.2. Data Analysis

After defining use scenarios to imagine and project ways of potential usage, I listed existing and available information about anime clips in order to know what can be visualized. From this list, relevant, limited number of items was chosen that fit the scope of the project. Afterwards, I gathered various information visualizations (data source no.1) and selected one that had promising potential for serendipitous discovery. With the data from source no.2, I started developing a prototype, considering relevant theories to further strengthen the grounding for the design decisions. In an iterative manner, two working prototypes were made following the suggestions articulated at the user tests (source no.3) and a final, suggested version is proposed as a possible design solution having the ability to support serendipitous discovery.

(25)

3. Design Process

3.1. Ideation and Exploration

As a first step, to set up the research environment by defining a use quality in order to give a certain direction to the design study, I chose serendipitous discovery. This decision was motivated by the small number of relevant academia and by the drive to create a novel way of discovering new video clips.

In addition to the definition of a use quality for the interactive visualization, it is as much important to define the potential user group at an early stage to give the project a more solid grounding and further direct and to customize the visualization to the user needs.

3.1.1. Users and Scenarios

People between the age of 16 and 35 are the ideal user group. They have a habit and confidence in navigation and browsing online content, and are accustomed to process large amount of digital information. This could be seen as necessary attribute to understand (complex) visualizations. The interactive visualization further suggests that its users have at least a minimal knowledge of anime in order to make sense of the artefact or somewhat have interest in the field , so they can overcome the initial stages of the learning curve.

When it comes to distinguishing users regarding anime consumption, I made a practical distinction based on users’ anime watching practices.

One group is called ‘basic users’, who have interest in anime, possibly watched anime series or films but its members are not regular consumers (eg. watching at least an anime clip in 2-3 months).

Another user group is what I call ‘advanced users,’ who have a more regular routine of watching anime (eg. in waves that can be daily, weekly or monthly) in any kind of media forms (TV or film). They might be interested in manga or in Japanese culture in general, but it is not a necessity. A person at the extreme of this group is called ‘otaku’ and is used by fans in Japanese and English communities to address each other, however, in the context of the present thesis it

(26)

means that such a user is consuming any kind of media or news about anime, manga or Japanese culture. The term is well discussed amongst many researchers mainly from sociological and anthropological point of view (eg. Grassmuck, 1990; Eng, 2002) associating anime fans with hackers and ‘geeks’ to better understand the phenomenon.

I describe two use situations to better understand the context of approaching and having AniMap in a casual context.

One scenario is when a person, Anna, has seen a few anime, and, as university started, she finds herself with less time to look for anime clips. She discovers the interactive visualization by a friend and starts to use it. She begins with selecting familiar episodes and, based on that, she quickly finds other clips and creates a list of planned-to-watch series. Anna starts with the one that has the highest rank, thus she discovers another genre that she was not aware of before. Peter, another user of the interactive visualization, loves anime and spends at least a couple of hours per week on average watching new video clips. He is active on forums, answering queries from other people, and discovers the interactive visualization through a forum thread. Peter spends an hour browsing and making comments and recommendations. He finds some anime clips that he has not seen and immediately schedules them to watch. He makes several playlists for his own use and some for public consumption. Peter realises after much positive feedback that his recommendations were really useful for some people, so he feels more appreciated and spends even more time making and fine-tuning playlists.

From these scenarios, we can see that both Anna and Peter find the visualization convenient while using it for slightly different purposes. Furthermore, these scenarios suggest the potential of serendipitous discovery, finding something new (ie. anime clip) that is put in a different perspective (through visualization) and is not presented in a common or usual way (ie. interactive instead of tables and lists) – thus would create a good basis for serendipity.

3.1.2. Existing Information about Anime

After defining the use quality, user groups and sketching scenarios, it is essential to gather forms of information about anime in order to know what could be visualized or left out from it. With ‘painting the information canvas,’ we will be able to define an optimum amount of

(27)

information that will serve as a base for the visualization. Moreover, it is also valuable to get an insight of what kind information users choose to have access to in order to further investigate the basis for the visualization. There are three types of logical information groups: video footage, meta data and user generated content, as the following.

1. Video Footage

a. opening and ending credits (with songs) b. video material

2. Meta data

a. factual meta data i. title ii. year(s)

iii. staff (producer, voice actor, composer etc.) iv. type of footage (TV or film)

v. number of episodes vi. genres and tags vii. duration

viii. description ix. cover art

x. related media produced (adaptation, prequel, sequel) xi. news about media

xii. opening and ending songs xiii. merchandise available b. social meta data

i. number of views ii. ranking / rating

iii. review or testimonial (written or audiovisual) iv. recommendation (to other video materials)

v. social network pages / entries and related pages (facebook) and aggregated posts (twitter)

(28)

3. User-Generated Content a. Fan Art b. Wallpaper c. Blog post d. Fan Comic e. Forum discussion

f. Fan Sub (subtitles for the video material) g. Fan Club (documents)

h. Cosplay (costume)

i. Miscellaneous (e-card, quiz ...)

As we can see, there are numerous forms of content available that could be included in the visualization, and it would be valuable to gain insight what forms people use for their anime discovery process. It should be noted that these forms of content are almost exclusively digital, and therefore can be collected in direct or representational level (eg. photos).

3.1.3. Various Visualizations

These existing types of information mentioned above serve as contribution for a starting point; however, there is also the need of getting a sense of what kind of visualizations should be pursued. As an exploratory effort, I collected or created fourteen types of visualizations in order to determine what their strong and weak points are. The list of visualizations which have been sampled are the following: (see Figure 10 below for reference)

1. Cartesian matrix 2. Scatterplot

3. Scatterplot – with connections (like starfield) 4. Histogram

5. Hyperbolic tree 6. Parallel coordinates 7. Treemap

(29)

9. Dendrogram (treemap) 10. Keyword tree or ‘tag explorer’ 11. Timeline

12. Graph or semantic network 13. Force-directed graph 14. Art cover flow

15. Hierarchical edge bundling

We covered some of the required areas in the exploration phase by defining • two user groups,

• potential use situations,

• kinds of related information and • several visualization types.

With having this in mind, it is time to start narrowing down the project in forms of analysing and development.

(30)

(31)

3.2. Analysis and Development

We have numerous visualizations that could be used for an interactive visualization; however, it is necessary to select one to be the basis for development. It would be unlikely to test out all of them within this research project, mainly because of time and resource constraints. Therefore, based on which visualization could potentially support serendipity more, the amount of information that it can hold and would best represent the relationship between clips, I chose six types of visualizations that seemed to fit these criteria. These were grouped in three practical groups: timeline, tag- explorer and graph layouts (force-directed, semantic network and scatterplot).

One visualization that I selected as a potential candidate for development was timeline (no.11 in Figure 10 above). Reasons for this type of implementation were that (i) it suggests a very convenient way for making separations on a temporal level (ii) with the potential of supporting another dimension (axis) that could be ranking, for example, (iii) browsing the (popular) series episodic continuations, and (iv) discovering new items on a chronological basis.

I identified four drawbacks for this type of application, as (i) holding very limited number of represented items, (ii) discovery is restricted to time features with holding limited qualitative details for each item, (iii) browsing would be possible only on a temporal basis and (iv) it is mainly suited for regular, most probably advanced users that would exclude the other type of user group that this supposed to be under consideration. This is why this method was set aside as an imaginary extension, rather than serving as a basis for development.

Another type of visualization considered for developing was ‘tag explorer’, which basically realizes keyword tree (no.10 in Figure 10 above). One of the main justifications for embracing this utilization was that by limiting the number of items radically, it allowed an easy understanding of the artefact and potentially would not overwhelm the user with massive amount of information in a similar, yet more organized way to hyperbolic trees. Other reasons included (i) discoveries along tags or genres that could potentially serve as an educative feature, (ii) enticing exploration by the notion of the quest-like nature of ‘one step at a time’ that could be compared to Visual Thesaurus, mentioned at the chapter about related works, (iii) visualizing titles and some details to be directly accessible without any actions required from the user and (iv) discoveries can happen along different genre tags, which would suggest

(32)

something with the potential of unexpectedness or surprise, potentially resolving in serendipitous discovery.

Three shortcomings of the tag explorer are that (i) it does not provide an overview, raising the chance of serendipitous discoveries (eg. Foster and Ford, 2003 or de Bruijn and Spence, 2008) or visual information seeking (Schneiderman, 1996), (ii) the entry point is questionable, suggesting some form of input from the user that is not the essence of browsing potentially leading to serendipitous discovery and (iii) the fact that the relationships between individual items are not well represented or emphasized. This is why tag explorer was declined as a potential candidate.

As a third option, graph layout was determined as a promising type of visualization, which was identified among three examples: force-directed graph, semantic network and scatterplot (no.13, no.12 and no.3 in Figure 10 above, respectively).

Having a force-directed graph was supported by the arguments that (i) it provides a quick overview of titles with similar attributes (eg. position and colour) with a reasonable amount of interconnected items, (ii) a central piece can be dynamically defined as a reference point if necessary (eg. temporal, topical) as suggested by the sample visualization. The question of how to represent massive amount of information with this example is a valid argument considering a force-directed layout, coupled by the fact that no direct access is available for viewing attributes of the items (eg. title, year, genre, etc.).

Semantic network, as presented in the example, is similar to the aforementioned instance with the addition that it could be a suitable technique to present massive amount of items having more advanced referential system (proximity relates to amount of activity between objects, size stands for popularity and position with the colour embodies similarity attributes such as country of origin and degree of relation). A shortcoming of this model is that it requires efforts action-wise (eg. zooming and panning, hovering and clicking), resource-action-wise (hundreds of thousands of pictures to present with) and knowledge-wise (eg. n-body simulation theory).

Scatterplot or starfield visualization is another type of visualization loosely related to graph that was envisioned with visualizing connections upon hovering over an object. Similarly to the two previously mentioned graph types, it provides a quick overview of many articles with the addition of adjustable parameters for axes (instead of popularity could be rank, length etc.).

(33)

With having surveyed the three practical visualization groups (timeline, tag- explorer and graph layouts such as force-directed, semantic network and scatterplot) and given the limited timeframe and knowledge resources force-directed graph layout was chosen in order to give more space for development.

3.2.1. Drawing

a Graph

Having chosen a force-directed layout, we should reason about additional design decisions that lead to development of AniMap.

For example, when considering drawing the graph, it should be discussed why I chose a two-dimensional (2D) format over a three-two-dimensional (3D) one. We can find various compilations from academia (Herman et al., 2000; Teyseyre and Campo, 2009) arguing that 3D graph visualisation methods have a main integral cognitive paradox, because they require users to navigate in a 3D space on a 2D screens and with 2D input devices. This is why a 2D graph should be preferred.

We should also be able to define what interactions could have the potential of influencing serendipitous discoveries. Interactions like filtering and searching would seem to go against the nature of serendipity at a first glance, but when it comes to using an interactive visualization, refining a search query proved to encourage discovering underlying relations in the dataset (ie. tight coupling in Ahlberg and Schneiderman, 1994, dynamic queries in Spence, 2001 and pliability in Löwgren, 2007) therefore, it has the potential for supporting serendipitous discovery.

Dynamic queries (Spence, 2001) are especially useful, considering the nature of browsing, because the amount of anime clips is far beyond the capability of human memory. By discovering previously unknown connections within the compilation, one would be supported in the mental model creation process, one thus more successfully define a browsing strategy (Spence, 2001) that would lead to unexpected discovery.

Thudt et al. (2012) suggests highlighting adjacencies between items (also shown in Visual Thesaurus in the chapter about related works). This resembles the notion of refining search query, and this should be implemented as a ‘highlighting effect.’ Highlighting could mean, for

(34)

example, drawing edges for a hovered item, so only the selected node and its neighbouring items would be visible. This was also mentioned under the topic of focusing and linking by Buja et al. (1991) to offer a solution for visual overload.

Gibson et al. (2012) argue that the layout and the arrangement of the nodes influence how the user perceives the relationships in a graph (also in Blythe et al., 1995). This is important when designing a graph layout, such as AniMap, as the connectedness of the clips are important to show and to be easily understandable. Additionally, it is essential to know to what features of the anime clips should be stressed: for example, their relationship to each other, their popularity or their genre.

Relevant to dynamic queries, searching in general was explicitly discussed in relation to visualization by Thudt et al. (2012), where they found that open-ended and targeted browsing are both significant for discoveries, and people use both of them when exploring a dataset. This also confirms the fluid nature of serendipity. This would imply building up expectation and anticipation in the user, aiding the mental model to be built easier.

It cannot be avoided to discuss the nature of similarity. According to the gestalt law of proximity (Wertheimer, 1923), items close together will be seen as similar, implying that nodes with considerable similarity should be drawn closer to each other. Inevitably, the question rises as how to define similarity. For the sake of simplicity, I define similarity as items having the same genre tags and (the number of) user recommendations. Therefore, if two items have a same tag they are drawn closer to each other, and if a user recommended one item for another one, then they also should be drawn in that way.

As mentioned in the section about related works, the question of using multiple visualizations came up as a solution for supporting explorative search (Dörk et al.) or serendipitous discovery (Thudt et al.). Despite the theory-based suggestion by Thudt et al. (2012) that creating multiple visualizations supports serendipitous discoveries they have found out that users often felt the need for simplicity, and preferred having one visualization instead of many. Dörk et al. did not reflect upon this matter unfortunately. In addition to the discussion of Thudt et al., another reason for creating a single artefact is because of the lack of time and knowledge resources. As a conclusion, I chose to have one visualization with more options.

(35)

Most of the literature on serendipity mentions prerequisite skills or state of mind from a person (eg. Rosenman, 1988; Liestman, 1992; Austin, 2003), which I call ‘serendipity mood’. Also the use scenarios mentioned in the previous section suggests that a user is in the mental state for discovery. This raises questions about serendipitous discoveries from interaction design point of view such as: what kind of interactions support serendipity and pique curiosity? Do interactions and the presented information raise the level of engagement?

Enticing curiosity is mentioned in Thudt et al. (2012:1), suggesting that it can be reached through ‘abstract, metaphorical, and visually distinct representations of the collection’. It could be hard to interpret this statement as a precise design direction; nevertheless, it is supportive because it hints that visualizing information in a graph layout could support curiosity because it has all the attributes they mention. Along these lines, they also suggest enabling a playful approach to information exploration (cf. Dörk et al.). Playfulness is interpreted as interactivity in the context of the development. This interactive nature enables to change the layout dynamically, in order to guide users to previously unknown clips.

When it comes to implementing massive amounts of information, all network visualizations are challenged and few recent propositions were made. A notable exception (Figure 11), being understandably from the field related to bioinformatics (Krzywinski et al. 2012), is an effort to visualize biological information in a sensible and understandable manner. However, as discussed in Sprague and Tory (2012), familiar visualizations presumably require less effort to recognize, thus giving us reasons why force-directed is a more reasonable choice. This touches upon scalability, which is also discussed in relation to serendipitous discoveries in Thudt et al. (2012) where they use information of 250 books. As a conclusion, it should be argued that while using a force-directed layout, the matter of scalability should be at least considered if not applied.

(36)

Figure 11. Hive Plots, as Introduced by Krzywinski et al. (2012)

Social navigation has to be seen as a projected addition to AniMap as it is beyond my implementation capabilities. In an ideal situation, social navigation traces are visible through, for example, changing node position and size, edge width and possibly playlists (further details in the proposed design section); however, as of now, these social cues should be simulated to avoid possible delays.

I made four implementation scenarios in relation to the amount of information types (listed under the exploration phase), and to better accommodate my expertise of programming. These were labelled as bare minimum, enough, good and superb, respectively, and the first three were accompanied by sketches (see Figure 12 from top to bottom). For instance, a way to include as much information as possible can be seen at Figure 13, and was the reason for the birth of the four aforementioned implementation scenarios. The bare minimum scenario was accepted to allocate enough time resources for the development.

(37)

Figure 12. Development scenarions labelled as 'bare minimum', 'enough' and 'good'

Figure 13. One way of implementing having much related information

I also made a quick sketch for representing the usage of a small scale visualization (Figure 14), resembling Visual Thesaurus, with the intention of solving the issue if there are more than one type of information available (eg. anime title, director, staff etc.). Clicking on an object would

(38)

place that in the centre, rearranging the content of the graph. While this being an attractive possibility, it was refused because of programming difficulties.

Figure 14. A Possible Way of Handling Multiple Types of Information

3.2.2. Development

Having the ideation, exploration, analysis and sketches in mind, we are set to start coding AniMap. We should consider the programming framework and formatting the data in order to visualize it.

Currently there are many ways of implementing a visualization, I chose D3, Data-Driven Documents, as a programming environment because of my limited knowledge of programming and the extensive and customisable library of examples, and the easy-to-use API reference. D3 is a JavaScript framework, developed especially for data visualizations with data-driven approach to DOM manipulation in mind. Another reason for choosing D3 is that all data is available and accessible online; therefore a web-based visualization makes sense if, in an ideal situation, it would be scaled up so the information would be dynamically collected and presented to the user from external websites (databases).

(39)

For AniMap, I hand-picked the information of 100 items and for each object, I extracted 6 recommendations for the sake of simplicity, summing up to 327 nodes in total. By having 100 titles the information collected had to be limited to title, genre, description, rank, popularity, score, recommendation title and recommendation value. The remaining 227 elements share the same rank, popularity and score (indicated as ‘rank’ in the design). MyAnimeList.net served as the source for all the aforementioned information elements, as those could be found and extracted easily.

I accumulated the information collected into an excel spreadsheet, so it could be later tested and compared to the visualization. In order to visualize the collected data, the excel table was converted to JavaScript Object Notation (JSON), to let D3 access it.

3.3. Phase 3: Evaluation and Results

Overall, I was able to make two iterative design versions; both tested and evaluated, which I call alpha and beta versions, respectively. The results of the user evaluation are reported in this chapter. Two people out of the four had tested both the alpha and beta versions.

3.3.1. Alpha Version

The first version (referred to as ‘alpha’) had 327 nodes with title and rank details and 637 edges (connecting lines) with recommendation value details as line thickness (Figure 15). The sizes of circles were calculated by rank, the position was generated automatically by the built-in physics engine and could be dragged. Edge thickness was calculated by the number of recommendations between items. There were two buttons, one of which could toggle visibility of the titles (of the nodes) and similarly with the edges.

Along with the alpha version, an additional smaller scale visualization was presented to people (Figure 16) with the essence of interactivity (draggable nodes and information popup box with extra details) – serving as a presentation of the potential of the full-scale artefact. This small-scale visualization had one node fixed in the middle, and all the recommended items were surrounding it in equal distance, which were draggable. By hovering the mouse over a node, additional information was revealed about the specific item, namely, the title and how many people recommended it with a placeholder text for the description.

(40)

Figure 15. Alpha Version

Figure 16. Reference For Alpha Version

DYNAMISM

One concern was that the layout for the alpha version felt somehow static. When reflecting upon tabular and visual layout, users seemed to expect similar functions. They also made suggestions that suggest a re-consideration of timeline visualization.

“I want to have the same dynamic layout as the table, like how it sorts out data dynamically in relation to something specific and how to apply that here [in the visualization]. ... if I click those two [items] and then on release date [button], it will show perhaps all the different anime that happened in between in a chronological order or something that changes the layout. Right now the layout

(41)

is very static. Which is okay but if I want to see the data more from ... certain other factors that are important to me, then I would probably find something that I was not looking for ... something unexpected.”

This helped me to better understand how users needed fluency and change in the surroundings. Furthermore, it can be argued that this is a confirmation of Thudt et al.’s findings concerning multiple visualizations. While this feature was not implemented because of shortcomings of knowledge and time resources, it would be valuable for exploring possibilities of how dynamism could take forms within the context of interaction design.

COMPLEXITY AND PERSONAL INTEREST

Complexity made a big difference between the two user groups. While basic users were mostly confused, advanced users ‘made it through’ easier despite the perplexing initial moments. Two participants explicitly associated AniMap with games, reporting that it is inviting to look for something (cf. playful approach in Thudt et al. 2012).

“This is a site for people who know what is anime. If you just started [watching them], then it could be confusing.”

“At first, I don’t really get it, though when I start to spot shows that I watched years ago I feel ... nostalgic ... and it’s interesting to find shows that I didn’t see before. Almost like a game.”

Advanced users were engaged in an active discussion about the relationships of the items, and reason their argument even though they did not understand the concept fully in the beginning. Sprague and Tory (2012) also mentioned that trust in the data’s accuracy mattered when the data were personally meaningful.

“[user is pointing at two circles] If I like this why do you recommend me this? Sometimes it is a little bit confusing, like people who like this and this probably would not like that, because it is for a different kind of group [of people], you know.”

“I guess a show that is similar to many shows is a bigger circle. Lone shows, like Pani Poni have small circles. Though I don't get why Pani doesn't have a line to Lucky Star.”

(42)

"I guess the thicker the line is the more bond of a connection has. Which makes me wonder what Saint Seiya has in common with Kyou kara Maou! and Kiba. Kiba which is very artistic ...”

Basic users had mixed reactions to the complexity of the layout and had to make cognitive effort to understand it. They contrasted with the search interface of Google.

“I don’t understand why this is big and this is smaller and ... the length of the lines makes no sense and ... actually ... if I just googled for this and look through maybe three or four top links, then I would get kind of the same information, but maybe with more visual and verbal [written] explanation why this and this are connected and why should I watch [them]. If I like this why should I watch that one? I don’t understand...”

For reference, the smaller scale visualization was shown to see the other end of the axis of complexity. Based on their reactions, it would seem that this version was more suited for basic rather than advanced users, because of its nature of finding information swiftly.

“I think this is better ... now I’m using this tool instead of googling ... yeah, definitely. Because now I clearly see [by] looking at two of them ... that the thickness of the lines mean how many people recommended it and I see the picture, which is super important to me. And the three sentences of the description that I really ... like ... because I don’t want to read through some crazy forums of some fans but I want just this. Like if I have just 10 minutes to choose, this is really good...”

After realizing these details in the smaller scaled version, they felt more enabled to freely discover AniMap (with its full-scaled complexity) even though they had a very little knowledge about the items.

This suggests that somehow the understanding (ie. creation of the internal cognitive model) should be better supported, especially when considering basic users. For example, this could be achieved by making the information visualization layout simpler at the first time (eg. same size for nodes, same thickness of edges or no edges at all) and later letting users make the visualization more complex (eg. vary size of the nodes with buttons or sliders or reveal edge thickness only when hovering over a circle) or give further feedback for why different node sizes and edge thicknesses are given.