AniMap: An Interactive Visualization Supporting Serendipitous Discovery of Information about Anime
74
Transcript of AniMap: An Interactive Visualization Supporting Serendipitous Discovery of Information about Anime
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
Contents
1. Introduction ............................................................................................................................. 1
1.1. Research Question ........................................................................................................... 2
2. Research Framework .............................................................................................................. 3
2.1. Information Visualization ................................................................................................. 3
2.1.1. Graph Visualizations ................................................................................................. 4
2.1.2. Interactive Visualizations .......................................................................................... 5
2.2. From Recommender Systems to Social Navigation ........................................................ 8
2.2.1. Social Navigation....................................................................................................... 9
2.3. Serendipity ......................................................................................................................11
2.4. Related Work ...................................................................................................................14
2.5. Research Method ............................................................................................................20
2.5.1. Data Sources ............................................................................................................20
2.5.2. Data Analysis ............................................................................................................20
3. Design Process .......................................................................................................................21
3.1. Ideation and Exploration .................................................................................................21
3.1.1. Users and Scenarios ................................................................................................21
3.1.2. Existing Information about Anime ...........................................................................22
3.1.3. Various Visualizations ..............................................................................................24
3.2. Analysis and Development ..............................................................................................27
3.2.1. Drawing a Graph ......................................................................................................29
3.2.2. Development ............................................................................................................34
3.3. Phase 3: Evaluation and Results .....................................................................................35
3.3.1. Alpha Version ...........................................................................................................35
3.3.2. Beta Version .............................................................................................................41
3.3.3. Design Proposal .......................................................................................................46
4. Conclusion and Discussion .....................................................................................................51
4.1. Discussion .......................................................................................................................52
4.2. Future work .....................................................................................................................53
Acknowledgements ......................................................................................................................... 1
References ...................................................................................................................................... 2
Appendix ........................................................................................................................................... i
Anime Resources in English ........................................................................................................ i
Interview Questions ...................................................................................................................... i
HTML Source Code ...................................................................................................................... iii
1
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
2
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:
How to design a digital artefact to support serendipitous discovery?
3
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
4
(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.
5
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
6
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.’
7
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
8
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
9
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.
10
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
11
(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.
12
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
13
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.
14
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
15
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.
16
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).
17
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
18
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.
19
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.
Figure 9. An interactive graph visualization, Linked Jazz
20
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.
21
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
22
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
23
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)
24
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
8. Radial treemap
25
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.
26
Figure 10. Visualization Examples
27
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
28
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-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.).
29
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-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
30
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.
31
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.
32
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.
33
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
34
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).
35
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.
36
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
37
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.”
38
"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.
39
USAGE TIME DIFFERENCE
Comparing the spreadsheet with the information visualization seemed to be fitting for the sake
of testing, understanding serendipity and its distinct enticing factors (eg. use duration). All of
the participants found that while the spreadsheet was more familiar and easily understandable,
the information visualization was more intriguing to use, and the notable increase of usage time
suggests a more immersive setting (table usage ca. 1 min. visualization usage ca. 5-10 min.),
even though the table was, to a certain extent, dynamic. Users found AniMap’s interface more
aesthetically pleasing. This observation resonates well with Löwgren’s (2007) findings about
Sens-A-Patch, where he performed a user study to compare dynamic and static visualizations.
His results showed that people spent remarkably more time on dynamic than static
visualization. Sprague and Tory (2012) also identified that when it came to personal interest,
usage was rarely examined under time constraints. Additionally, using the taxonomy of
Krippendorff’s (2006) model of artefact usage, users of AniMap showed signs for a swift change
from recognition and exploration to reliance, and this process happened faster with advanced
users than with members from the basic user group. Longer usage duration would also raise
the chance for (serendipitous) discovery.
OPPORTUNISTIC BROWSING
When participants were comparing the tabular format with AniMap, they chose browsing in both
cases, even though the spreadsheet had integrated searching, filtering and sorting features.
While testing the beta version, participants used all of the functions of AniMap and mentioned
that the filtering options would be particularly helpful. According to the user evaluation,
information visualizations in general are more suitable for browsing than tables (quicker to spot
interesting things). Interestingly, some participants did not want to sort the spreadsheet on
purpose, and preferred to browse and see if they can find something they might like (cf.
opportunistic browsing in de Bruijn and Spence, 2008 and stimulated browsing in Foster and
Ford, 2003). This would also suggest that serendipity mood is relevant and applicable for
browsing for a new anime clip.
STARTING POINTS AND TARGETED SEARCH
Some users asked how they could find a certain item they had in mind when it came to defining
a starting point for discovery. For basic users, it was more important to find a familiar title as an
entry point because otherwise they could not make sense of the information they are presented
(as indicated previously at the findings regarding complexity).
40
During the user tests, the very first entry points were almost exclusively (around) the largest
nodes. These objects can be seen as a reference point for advanced users, so they could branch
out from there, and for basic users they proved to be less helpful. An insight from Herlocker et
al. (2004) is beneficial to understand the role of the bigger circles. They discuss that removing
‘obvious recommendations’ could be problematic, because the fact that they are ambiguous and
depends on what the user perceives as obvious.
FINDING NEW CLIPS AROUND KNOWN ITEMS
When letting users locate new anime clips that they would find interesting, all participants
pointed towards items nearby the node representing what they have already seen. While basic
users were more likely to label an anime interesting if the cover art or a title attracted their
attention, advanced users were more concerned about the reference points they already knew.
‘When you like this and this you can decide on something easily’.
'I would choose something that I haven't watched ... I liked this and that one, so
the ones in between I would probably try...'
THE NEED FOR FILTERS
All of the participants, but particularly advanced users, reported prior discoveries by genre.
When asked, (advanced) users told scenarios of ideally looking based on genre tags.
“... for example, I want comedy ... and drama, but not action and slice of life. It
would be really interesting to see something like that...”
‘[I miss] keywords, some hints about what does it stand for’
Again, this would reinforce the fact that strategies for discoveries are fluid in term of open-
ended and targeted search. Furthermore, it can be argued that dynamic queries are important
to enhance serendipitous discoveries, as noted previously in the chapter describing the
analysis.
THE GESTALT LAW OF PROXIMITY
Because of the lack of background knowledge of programming, unfortunately the problem of
the position of the nodes could not be solved, and it was confirmed that people thought that the
closer the nodes, the more similar they were, even if there were no actual relationship. This
observation seems to be in parallel with the law of proximity within the gestalt theory
41
(Wertheimer, 1923) that was discussed in relation to graph visualizations as well (McGrath et al.
1996). The position of the nodes should be based on genre specific tags and the number of
recommendations, so people would find something they are genuinely interested in quicker.
We can see from the user testing of the alpha version that there are seven areas mentioned by
the participants, namely that
i. the dynamic or interactive visualizations support serendipity by their nature,
ii. personal interest helps to overcome complexity,
iii. usage time difference is apparent between tabular and visual representations,
iv. opportunistic browsing is a preferred way for discovery,
v. difficulties of starting points can be eased by targeted search without excluding
serendipity,
vi. filters are necessary to assist browsing,
vii. users are likely to find new clips around items they already know and
viii. items closer to each other are interpreted as similar, and serve as a starting area for
discovery.
Concerns suggested by these points were addressed within the beta version to a rational extent.
3.3.2. Beta Version
Some minor details were modified before the user testing (Figure 17a). For example, nodes in
the beta version were no longer draggable, as none of the participants used this function and it
proved to be causing latency problems with the visualization. Hovering over an item now
revealed related nodes (highlighting edges and details of titles, see Figure 17b). Clicking
showed a popup-like box fixed in the top left corner, intentionally covering the function buttons,
with information of the clicked object such as title, genre, description and link to the first
episode of the anime (Figure 17c). From technical point of view this link opened within the same
page as a modal dialog (overlay) with the contents displayed in an iframe (website within a
website, see Figure 17d). I made additional adjustments such as the colouring of the edges from
red to grey to put them more to the background, and their maximum thickness was further
limited to draw more attention to the circles. The maximum size of the bigger nodes was also
decreased in order to lessen the contrast between these and the smaller circles.
42
To accommodate the concerns from the ‘alpha testing,’ two sample genre filter buttons were
placed along with a search box as well as two extra buttons with experimental features. These
exploratory features were either simulating a user’s watchlist or her rankings to demonstrate
dynamic node sizes.
A live demo of the beta version can be found at www.balazsgobel.com/projects/animap.
As for the interviews, I revised the questions so users were given time to get a hold of the
visualization (ca. 10 minutes). This modification improved the understanding of how could it
support serendipity.
Figure 17a. Beta Version Figure 17b. Beta Version — Highlighting
Figure 17c. Additional Information After Mouse Click Figure 17d. Screen After Clicking On Anime Link
43
SERENDIPITY AND NOSTALGIA
Interestingly, one user was engaged in the visualization in a twofold manner. Firstly, he found
many interesting looking titles was through browsing. Secondly, he stumbled upon some of the
TV shows that he already watched.
“I can imagine to find an anime clip serendipitously with this, yes. And it's going
to cost me dearly on my animetorrents ratio.* Now I have to download a lot of
stuff ... I've written down like ten shows that could be interesting ... it was fun to
stumble across a few shows I've watched a few years ago.”
ADDITIONAL FILTERS
The concern over the dynamic nature of the visualization was adjusted in this version by having
genre filters and targeted search box, yet it was hinted that there could be more design space
for rearranging nodes along other details like other tags or release dates.
“Okay, this is like ... exactly what I was missing before. Now I could just spend
hours finding fresh stuff [she laughs]. But I guess it needs more buttons with
these tags.”
“For example, I would like one [button] for adult characters ... and then exclude
buttons like »no fanservice.« Oh, boy, that completely destroyed Highschool of
the Dead ... and I actually like Kore wa no Zombie, so I don't hate fanservice, but
there is a limit to pointless pantyshots.”
“For example, I want to see all the animes that were released in 2011. Or, say,
like to see when a specific anime was released. I think if there are more ways to
see these, I would probably find something that I was not really looking for.”
This would suggest that (mainly advanced) users would prefer to interact with the content in a
more progressive way.
ANIMAP AS DICTIONARY
Basic users also mentioned that they learned something new about anime by discovering
previously unfamiliar genres.
“... okay, I’ve never seen this one [shoujo] or this one [shounen]. What does it
mean? ... I think I will probably google these words to find out what they are.”
* This refers to the notion that he intends to download many anime clips
44
This would suggest that serendipity can not necessarily and exclusively happen when finding a
new anime clip but rather finding new details on the way. This was confirmed after reflecting
upon serendipity.
“... when I found out stuff about these new genres, like this [one here], yes. I
think I wasn’t really looking for them [tags] especially, but it just happened
naturally. I think you could call this serendipity too.”
Relevant to this notion, an advanced user compared AniMap to a quick reference dictionary
suggesting an attractive shortcut for an extensive search for a new anime clip.
“I like it also because it is like a dictionary: you look it up and instantly
understand if you want to see it or not. I would not have to ask people on the
forums to find an anime that I want to watch.”
ADDRESSING THE GESTALT LAW OF PROXIMITY
Previously it was an issue that objects close together accounted as similar by the users. By
implementing the highlight function this gap was bridged. However, it is rather covering another
problem, which is the position of the nodes.
ALL INFORMATION AT ONCE: MORE OR LESS
As there were more than 300 nodes, each having at least 2 edges, users were faced with a lot of
information at once. However, they did not mind the amount of particles, on the contrary, they
were even more motivated to understand the overview, and used it for a longer period of time.
“This is a lot of information, but I like that it comes at me at once. I can pick
what I want to see.”
“I don’t mind if there is so much information out there. Probably not use all of it
but it doesn’t matter.”
The last reflection suggests that once a mental model is made, the ease of locating an anime
clip becomes more rewarding in a complex environment. Some users went even further by draw
attention to possible missing elements. Some suggested adding social meta data, like
testimonials. One participant even suggested an analytical standpoint that would involve
smarter interaction with the information.
45
“I would like to see the relationship, let’s say between this and that [pointing to
two circles], including the other data around it. So, say, if I click on that and that
the graph kind of rearranges itself, so it shows these two are in common, and
how common is everything else around them in response to that. That way, I
think there would be more chance for a pleasant surprise or ... serendipity”
This could imply that people engaging with an interactive visualization have more chance for
serendipitous discovery, as rearrangement can lead to finding unexpected patterns, for
example.
PERSONALIZATION
Regarding personalization options, advanced users imagined this as having insightful statistics
visualized of their anime watching habits.
“For example, I would like to see how many horror movies I watched. I hate
horror movies but I know that I watched some over the years ... That kind of
data that I would like to be able to see from probably this kind of visualization.”
Basic users felt that browsing is already personalized and happened while highlighting items
and by fading out the ones that are not related.
“As soon as I start using it, it is already personalized – it is following my interest
somehow.”
AUTHORSHIP
Authority was also considered along the automated and user-generated axes.
'If a computer recommends it, then it is not interesting for me at all, but
[recommendations] from people who watched it and loved it, that would be
interesting to see.'
This statement is a good point to argue the validity of a visualization that supports user input
such as rankings and other details that change over time (eg. popularity). Basic users are more
dependent on experts who know which are the good films and why, and are likely to follow
suggestions as indicated by one of the participants.
“I found a really big list from ... anime experts ... [with] 50 different movies and
now I am watching some of that list right now. They explained in a few words
what it is about and why it’s worth watching ... They were not like these teenage
46
girls, like »ah, that’s so cute, let’s watch it,« but [it was from a] more
professional point of view ...”
We can conclude from the user tests involving the beta version that
• serendipitous discoveries, by a user’s definition, can be somehow unexpected and
pleasant, but not necessarily novel,
• additional filters allow people to engage with the content at a deeper lever, giving more
space and chance for serendipity,
• AniMap, as a dictionary, can be a base for learning new things, which actively contributes
to unexpectedness,
• by addressing the gestalt law of proximity a gap in the mental model was bridged,
• people do not shy away from having all information at once, instead they require more
information or other ways for visualization,
• regarding personalization users’ reactions were mixed as to what counts as
customization and
• authorship is concerned in the axes of user and computer generated recommendations.
3.3.3. Design Proposal
Before elaborating on the design proposal, two outstanding ideas should be further noted. One
characteristic is that social navigation would have been more integral element of the
visualization, for example, in forms of playlists. Another facet of an ideal scenario is that AniMap
would extract and combine data from external online resources, which could be then later
customized. These elements of the visualization were not implemented because of the time
constraints or the scope of the thesis project did not allow further explorations of the area.
SOCIAL NAVIGATION — CONNECTING PEOPLE TOGETHER
It was not discussed extensively during the interviews, but after finishing transcribing them, a
pattern emerged that involving influence by friends or experts. This notion of (inter)dependency
should be emphasized, as almost all participants mentioned that they asked other people (eg.
friends) for advice. The question of implementing this feature is valid and it would be interesting
to see how AniMap could facilitate a social network-like system, which would allow people (eg.
friends) to directly communicate with each other and with the content (eg. discussions,
debates).
47
A voting and editing feature should be added in order to emphasize the network of people. For
example, ‘reputation systems,’ meaning the more reputation you have the more influence you
can have (similar to Q/A sites like Reddit or Digg), for example, on playlists; however, this
invokes many other topics (eg. what to record, how to compute, what to influence, external
network attacks etc.) that are worth a different thesis discussion.
Editing your AniMap should be possible by converting it to one’s already made scores and
possibly track the time and the number of episodes of an anime, so if there are unfinished
series or new episodes than there could be some sort of feedback or report to the user in order
to encourage the usage of AniMap.
Figure 18. Ideas of Social Functions (engaging with friends, chat and like/dislike)
SOCIAL NAVIGATION — PLAYLISTS
This could be supported by letting advanced users to create pre-made playlists for basic users
so the latter group could decide on an entry point and start discovering more easily (Figure 20).
Certain playlists could be made (by users and letting them vote for good ones) to provide flexible
visual pathways for exploring (cf. Thudt et al. 2012) to further support serendipitous discoveries.
These playlists could be general (eg. top 10-50 movies/shows) so basic users could feel relieved
of discovering something that is valued and approved by many people. For more advanced
users, there could be genre specific (top 10-50 movies/shows with 'Mecha' tag) or style specific
48
playlists (from same/similar studio work), allowing people to create their own tribes or
communities.
Figure 19. Playlist represented by connected nodes
DYNAMIC LAYOUT
Users mentioned that they prefer multiple ways of viewing the same information. This is why
more than one visualization types should be supported (eg. three layouts as the existing one,
timeline and simple layout, similar to alpha reference visualization, see Figure 21).
There are two other minor changes considered. One is that proximity should be calculated on
similarity (genre tags and recommendations) so people would find something that they are
genuinely interested in quicker (eg. clustered layout, Figure 22). The other one is that the graph
layout could be more simple at the first glance so mental model would be made quicker and the
usage frustration could be lessened (eg. Figure 23).
49
Figure 20. Buttons to Change the Layout
Figure 21. Clustered Layout For Easier Navigation
50
Figure 22. Simpler layout by having same radius for all nodes
51
4. Conclusion and Discussion
We have seen that AniMap, an interactive graph visualization is one design solution that
supports serendipitous discoveries when looking for new anime clips for three reasons.
One reason is that AniMap is an information visualization, and as such, reveals patterns that
were unknown to users before. This is why, even static, information visualizations support
discovery. Moreover, we saw that by adding interactivity, chances for such explorations raise
because users uncover and understand underlying patterns better. Interactions allow people to
enter the artefact from multiple visual pathways, and its usage adds a shade of playfulness,
both being a prerequisite for the state of mind of serendipitous discoveries. Users are engaged
in a different level, compared to static artefacts. Additionally, graph layout further stressed
relationship of the nodes, contributing to serendipitous discoveries.
Another reason why AniMap supports serendipitous discovery is that personal interest is
involved. People browsed the artefact longer (cf. factor of persistence), allowing themselves to
be exposed of the information longer, thus raising the chance of serendipitous discovery.
Moreover, users showed motivation to overcome initial difficulties, and were actively engaged to
look for patterns and motifs that could lead them into unexpected explorations.
The third reason why AniMap aids such discoveries is thanks to the context of the exploration.
Users look for material for their entertainment (in forms of anime clips), thus they are more
opened mentally to unexpectedness, and prepared to take a step back to have a broader view on
the collection. This is rather different from involuntary or only targeted search, giving more
chance for serendipitous discovery.
As a final note, it has to be said that serendipity is a difficult matter to get a hold of, and one
claiming total control of it is irrational. What could be a logical answer is that there are
interactions that support serendipity in various ways and although they are designed to give
happy and beneficial discoveries, users may not necessarily get the desired outcome because
they are not opened mentally for such explorations. Agreeing with the words of Makri and
Blandford (2012:2) about serendipity, that ‘just as we think we have pinned down a precise
definition of it, we realise that its essence has escaped us.’
52
4.1. Discussion
AniMap fits well into the limited number of research papers on serendipitous discoveries. In this
section, I describe how it relates to two existing works, mention scalability, usage outside of
academia and reflect upon the methods used in this thesis project.
In contrast of an existing work by Thudt et al., I have used one visualization to accommodate my
research goal and that proved to be a fruitful decision in terms of increasing the chance for
‘happy chances’ by not requiring one to understand and create a mental model for each
visualization. However, user tests showed that they would prefer to have multiple visualizations
on demand.
Another work by Dörk et al, VisGets used weighted brushing for representing varying degrees of
relatedness, instead AniMap utilized different line thicknesses for the edges. This proved to be a
factor that made the comprehension more difficult, thus the goal was to avoid them at the first,
and add as an on-demand feature.
Scalability is another issue when discussing complexity. AniMap had 327 items displaying 637
connections; however, the amount of available items is significantly more than that. There are
at least two ways of resolving this matter.
One way is limiting the amount of available and visible items to a reasonable number (eg. 300),
so overcrowding would not be an issue at any time. However, this raises more questions of what
should be visible after selection, and if that is the case, then how the visualization should adapt
to show 300 relevant items, the calculation of these and why certain items should be visible.
Another way to address scalability is to issue a smaller scaled visualization (eg. with 10-20
items), which reveals more items upon user input. Questions arise as how this would support
serendipity, would it entice or engage people more into making serendipitous discoveries and
how the starting point should be defined. Scaling down is a possible solution particularly for
basic users, to help them feel more comfortable and get used to the interface.
Initial reactions of AniMap were encouraging, hinting that such a tool could be used outside of
academia and after an interview, a user suggested that there is a need for such an interactive
visualization on the market.
53
‘I would love to see this as a real site that I could actually use’
The method of designing AniMap raises three questions that should be addressed here.
One question is that a different approach to user tests would have been more fruitful, to learn
more about serendipitous discoveries generally, and see if factors derived from it could be
applicable to a more casual environment such as finding new anime clips.
Another problematic area is the limited number of people available for evaluation. This was
because of the nature of my research goal that I should test it with the desired user group,
which involved people with interest for and/or knowledge of anime. It was only in the latest
phases of the project when AniMap was in a presentable way and it was already past time for
starting other evaluations. It would be ideal to test different layouts in earlier phases, so it
would be more grounded why to select a certain type of visualization, and see if people would
also choose the one that is most suited by design (eg. graph).
Yet another field that could be discussed method-wise is the source of information. The source
website (myanimelist.net) had most of the data, however the quality could be questionable
opposed to different sites (like eg. anidb.net). Therefore, it raises the question if a different
database source would have been used (with richer semantic tags or category descriptors),
would the interconnectedness of the nodes have been more visible or meaningful.
4.2. Future work
By research through designing AniMap, many other issues that were revealed that were not
part of my original research goal; however, they were intriguing.
One interesting point is the notion of how limiting the interaction or the control over it could
lead to unexpected explorations. For example, if looking for a certain item in the collection,
there would be another entry shown in the main focus while having the searched element
nearby. By giving limited control over the interaction, it would seem rational that the number of
accidental encounters is raised. However, it also raises concerns of to what extent could it be
limited, and what would be the reactions from users for such a feature.
Social navigation is another problem this present thesis did not have scope to analyse in more
depth. Nevertheless, it is stimulating research-wise to take this type of navigation into
54
consideration and to examine this aspect. For example, the tribal nature of groups could be
exploited and evaluated with users to see and reveal group dynamics that could influence
serendipity. This would be rational to try it with anime fan clubs or other more informal
communities.
AniMap provided one type of visualization and it would be fruitful to further investigate how
multiple access points or different perspectives could be provided to the information. Does one
visualization having more options have more fruitful ground to serendipitous discoveries, or
multiple visualizations with fewer alternatives?
Big data and data integration are both very attractive fields of research that came up during the
writing of the present thesis, however, without sufficient time, these concepts were not
expressed in detail. It would be interesting to look at this matter from the perspective of big
data, how AniMap could be applied to other research fields and other datasets.
While carrying out this research, the connection between visual information seeking and
serendipity seemed to be a promising field that was not found in relevant literature, but enough
theories exist to make a rich bond between the two fields.
Hinted by Foster and Ford (2003), that serendipity is a natural phenomenon within
interdisciplinary studies, it would be very interesting to see a research about the relationship of
serendipity and interaction design.
Informal comments on the present thesis were hinting towards a direction that AniMap could be
used in a more general context such as music, TV shows etc. It would be interesting to expand
the scope of AniMap to a more general level and see users’ reactions for that.
The amount of future work propositions shows that there is much to be explored around the
overlapping area of serendipity and (interaction) design, and these research efforts have great
potential.
Acknowledgements
I would like to show my gratitude towards Jonas Löwgren who, as a supervisor, helped me
through the jungle-war of writing this thesis by encouraging me with his insightful ideas and
suggestions. I would like to thank the study participants for their valuable feedback, in
particular Tais Glukhova and Anton Lindblad for their engagement and enthusiasm. Special
thanks go to David Cuertielles for directing me towards the right direction and Simon
Niedenthal for proofreading the whole document as an examiner.
References
Ahlberg C. and Shneiderman B. (1994) 'Visual information seeking: Tight coupling of dynamic
query filters with starfield displays', Proceedings of Human Factors in Computing Systems
(CHI ’94), New York: ACM Press, pp. 313-317.
Austin, J. H. (2003) Chase, Chance, and Creativity: The Lucky Art of Novelty, Cambridge: The
MIT Press, pp. 84–86.
Bernstein M. S., Teevan J., Dumais S., Liebling D. and Horvitz E. (2012) ‘Direct answers for
search queries in the long tail’, Proceedings of the SIGCHI Conference on Human Factors in
Computing Systems (CHI '12), New York: ACM, pp. 237-246.
Bezerianos A., Chevalier F., Dragicevic P., Elmqvist N., Fekete J.D. (2010) 'Graph-Dice: a system
for exploring multivariate social networks', Computer Graphics Forum, vol. 29, June, pp. 863-
872.
Blythe J., McGrath C. and Krackhardt D. (1995) 'The effect of graph layout on inference from
social network data', Proceedings of the symposium on graph drawing (GD ’95), Springer-
Verlag: London, pp. 40-51.
Cooksey E.B. (2004) ‘Too Important to Be Left to Chance – Serendipity and the Digital Library’,
Science and Technology Libraries, vol. 25, issue 1-2, pp. 23-32.
Cory K. A. (1999) 'Discovering hidden analogies in an online humanities database', Library
Trends, vol. 48, Summer, pp. 60-71.
Cosley D., Lam S. K., Albert I., Konstan J. A. and Riedl J. (2003) ‘Is Seeing Believing? How
Recommender Interfaces Affect Users’ Opinions’, Proceedings of the SIGCHI Conference on
Human Factors in Computing Systems (CHI '03), New York: ACM, pp. 585-592.
de Bruijn O. and Spence R. (2008) ‘A New Framework for Theory-Based Interaction Design
Applied to Serendipitous Information Retrieval’, ACM Transactions on Computer-Human
Interaction (TOCHI), vol. 15, May, no. 5.
Dieberger A. (1997) ‘Supporting Social Navigation on the World Wide Web’, International
Journal of Human Computer Studies, vol. 46, pp. 805-825.
Dieberger A., Dourish P., Höök K., Resnick P. and Wexelblat A. (2000) ‘Social navigation:
techniques for building more usable systems’, interactions, vol. 7, November, pp. 36-45.
Dörk M., Carpendale S., Collins C. and Williamson C. (2008) ‘VisGets: Coordinated Visualizations
for Web-based Information Exploration and Discovery’, IEEE Transactions on Visualization and
Computer Graphics, vol. 14, November, pp. 1205-1212.
Eng L. (2002) Otak-who? Technoculture, youth, consumption, and resistance. American
representations of a Japanese youth subculture, [Online], Available:
http://www.cjas.org/~leng/otaku.pdf [22 Apr 2013].
Erdelez S. (1999), ‘Information Encountering: It's More Than Just Bumping into Information’,
Bulletin of the American Society for Information Science and Technology, vol. 25, pp. 26-29.
Availble: http://www.asis.org/Bulletin/Feb-99/erdelez.html [24 Apr 2013]
Foster A. and Ford N. (2003) ‘Serendipity and Information Seeking: an Empirical Study’, Journal
of Documentation, vol. 59, pp. 321-340.
Fry B. (2008) Visualizing Data, Sebastopol: O’Reilly Media
Gibson H., Faith J. and Vickers P. (2012) ‘A survey of two-dimensional graph layout techniques
for information visualisation’, Information Visualization, [Online], Available:
http://ivi.sagepub.com/content/early/2012/09/04/1473871612455749 [20 May 2013]
Gleicher M., Albers D., Walker R., Jusufi I., Hansen C. and Roberts J. (2011) ‘Visual comparison
for information visualization’, Information Visualization, [Online], Available:
http://ivi.sagepub.com/content/10/4/289 [20 May 2013]
Godin S. (2008) Tribes: We Need You to Lead Us, New York: Portfolio.
Goldberg D., Nichols D., Oki B. and Terry D. (1992) ‘Using Collaborative Filtering to Weave an
Information Tapestry’, Communications of the ACM, vol. 35, pp.61-70.
Graham M. and Kennedy J. (2010) ‘A survey of multiple tree visualisation’, Information
Visualization, vol. 9, pp. 235-252.
Herlocker J. L., Konstan J. A., Terveen l. G. and Riedl J. T. (2004) ‘Evaluating Collaborative
Filtering Recommender Systems’, ACM Transactions on Information Systems, vol. 22, pp. 5-53.
Herman I., Melançon G. and Marshall M. S. (2000) 'Graph visualization and navigation in
information visualization: a survey', IEEE Transactions on Visualization and Computer Graphics,
vol. 6, pp. 24-43.
Höök K. and Löwgren J. (2012) ‘Strong concepts: Intermediate-level knowledge in interaction
design research’, ACM Transactions on Computer-Human Interaction (TOCHI), vol. 19, October,
article no. 23.
Keulen M. and Keijzer A. (2009) ‘Qualitative effects of knowledge rules and user feedback in
probabilistic data integration’, The VLDB Journal, vol. 18, pp. 1191–1217.
Krippendorff K. (2006) The semantic turn: A new foundation for design, Boca Raton: CRC Press.
Krzywinski M., Birol I., Jones S. JM. and Marra M. A. (2012) 'Hive plots—rational approach to
visualizing networks', Briefings in Bioinformatics, vol. 13, September, pp. 627-644.
Lawley J. and Tompkins P. (2008) Maximising Serendipity: The Art of Recognising and fostering
Potential, [Online] Available: www.cleanlanguage.co.uk/articles/articles/224/1/Maximising-
Serendipity/Page1.html [02 June 2013]
Lenzerini M. (2002) Data Integration: A Theoretical Perspective, Proceedings of the twenty-first
ACM SIGMOD-SIGACT-SIGART symposium on Principles of database systems (PODS '02), New
York: ACM, pp. 233-246.
Liestman, D. (1992) 'Chance in the midst of design: approaches to library research serendipity',
Reference Quarterly, vol. 31, pp. 524-536.
Lindstedt I., Löwgren J., Reimer B. and Topgaard R. (2009) ‘Nonlinear News Production and
Consumption: A Collaborative Approach’, Computers in Entertainment (CIE), vol. 7, issue 3,
September, article no. 42.
Löwgren J. and Stolterman E. (2004) Thoughtful Interaction Design: A Design Perspective on
Information Technology, Cambridge: The MIT Press.
Löwgren J. (2007) ‘Pliability as an experiential quality: Exploring the aesthetics of interaction
design’, Artefact, vol. 1, pp. 1749-3463.
Löwgren J. and Reimer B. (2013) ‘The Computer is a Medium, Not a Tool: Collaborative Media
Challenging Interaction Design’, Challenges, vol. 4., pp. 86-102.
Makri S. and Blandford A. (2012) ‘Coming across information serendipitously – Part 1: A
process model’, Journal of Documentation, vol. 68, pp. 684-705.
McCay-Peet L. and Toms E.G. (2010) ‘The Process of Serendipity in Knowledge Work’,
Proceedings of the third symposium on Information interaction in context (IIiX '10), pp. 377-
382, New Brunswick: ACM Press.
McGrath C., Blythe J. and Krackhardt D. (1996) 'Seeing groups in graph layouts', Connections,
vol. 19, pp. 22–29.
Newman, M. W., Sedivy, J. Z., Edwards, W. K., Smith, T. F. Marcelo, K., Neuwirth, C. M. et al.
(2002) ‘Designing for Serendipity: Supporting End-user Configuration of Ubiquitous Computing
Environments’, Proceedings of the 4th conference on Designing interactive systems:
processes, practices, methods, and techniques (DIS '02), London: ACM, pp. 147-156.
Pattuelli M.C. (2012) ‘Personal name vocabularies as linked open data: A case study of jazz
artist names’, Journal of Information Science, vol. 38, no. 6, December, pp. 558-565.
Perer A. and Shneiderman B. (2008) Integrating statistics and visualization. New York: ACM
Press.
Remer, T. G. (1965) Serendipity and the three princes, from the peregrinaggio of 557, Norman:
University of Oklahoma Press.
Resnick, P., Iacovou, N., Suchak, M., Bergstrom, P., Riedl J. (1994) ‘GroupLens: An Open
Architecture for Collaborative Filtering of Netnews’, Proceedings of the 1994 ACM conference
on Computer supported cooperative work (CSCW '94), New York: ACM, pp. 175-186.
Resnick, P. and Varian, H. R. (1999) ‘Recommender Systems’, Communications of the ACM, vol.
40(3) pp.56-58.
Rosenman M. F. (1988) 'Serendipity and scientific discovery', Journal of Creative Behaviour, vol.
22, pp. 132-138.
Rubin V.L., Burkel J. and Quan-Haase A. (2011) ‘Facets of serendipity in everyday chance
encounters: A grounded theory approach to blog analysis’, Information Research, vol. 16, issue
3, September, [Online], Available: http://informationr.net/ir/16-3/paper488.html [02 June 2013]
Shneiderman B. (1996) ‘The Eyes Have It: A Task by Data Type Taxonomy for Information
Visualizations’, Proceedings of the 1996 IEEE Symposium on Visual Languages (VL '96),
Washington: IEEE Computer Society, pp. 336-343.
Shardanand, U. and Maes P. (1995) ‘Social information filtering: algorithms for automating
“word of mouth”’, Proceedings of the SIGCHI Conference on Human Factors in Computing
Systems (CHI '95), New York: ACM Press/Addison-Wesley Publishing Co., pp. 210-217.
Spence, R. (2001) Information Visualization, Essex: Pearson Education Ltd.
Sprague and Tory, 2012 ’Exploring how and why people use visualizations in casual contexts:
Modeling user goals and regulated motivations’, Information Visualization, [Online], Available:
http://ivi.sagepub.com/content/11/2/106 [20 May 2013]
Teyseyre A. R. and Campo M. R. (2009) 'An overview of 3D software visualization', IEEE
Transactions on Visualization and Computer Graphics, vol. 15, pp. 87–105.
Thudt, A., Hinrichs, U. and Carpendale, S. (2012) ‘The bohemian bookshelf: supporting
serendipitous book discoveries through information visualization’. Proceedings of the SIGCHI
Conference on Human Factors in Computing Systems (CHI '12), New York: ACM, pp. 1461-1470.
Vlachos, M. and Svonava D. (2013) ‘Recommendation and visualization of similar movies using
minimum spanning dendrograms’, Information Visualization, [Online], Available:
http://ivi.sagepub.com/content/12/1/85 [20 May 2013]
Wertheimer M. (1923) A source book of Gestalt psychology, pp. 71-88, translated from German
by W.Ellis, 1938 London: Routledge & Kegan Paul.
i
Appendix
Anime Resources in English
Databases AniDB.net, AnimeNewsNetwork.com, MyAnimeList.net, AnimePlanet.com
User-Generated-Content AnimeForum.com, TheOtaku.com, ZeroChan.net, ThatAnimeBlog.com, Baka-Raptor.com,
Blog.Draggle.org, Kurogane.AnimeBlogger.net, PSGels.net, JesuOtaku.com,
GlassReflection.net, CharlyShades.WordPress.com, FanPop.com/Clubs/Anime, Kotaku.com
Tumblr.com/Tagged/Anime%20Fanart, Fanfiction.net/Anime, Anime-Backgrounds.Tumblr.com,
YouTube.com/User/GRArkada, Muse.JHU.edu/Journals/Mechademia, CJAS.org
Video Hosting Sites (free) AnimeUltima.tv, GoGoAnime.com, GoodAnime.net, AnimeFreak.tv
Video Hosting Sites (subscription-based) Funimation.com, CrunchyRoll.com, NetFlix.com,
Interview Questions
FOR USER TESTING OF ALPHA VERSION
Warm-up questions
Since when do you watch anime?
How often do you watch anime?
How do you find an anime you want to watch? (browse-search, specific site-google) Please show it.
Could you give me an example of how do you decide on which anime you will see next usually?
Excercise
Find something interesting that you would like to watch in (1) the spreadsheet and (2) in the visualizations (show small, customized as part of this)
Follow-up questions
Which method do you prefer to find an anime? Why?
What did you like the most in each of them?
What was the most annoying thing in each of them?
Did you feel something was missing in any of the representations?
What did you expect to happen on clicking / hovering? How do you feel that they accomplished what you envisioned?
Would this experience influence your decision what to watch next? How and Why?
How would you personalize it more to your needs?
ii
How did you interpret the sizes of the circles? Why?
How did you interpret the distances between the circles? Why?
Did you find anything that surprised you that you were not explicitly looking for? How?
Let's imagine that you could somehow see (related manga, fan art, backgrounds, leaders, extra info). How would you like it? How would that affect your browsing/searching?
REVISED ALTERNATIVE FOR USER TESTING BETA VERSION
Warm-up Questions
Since when do you watch anime?
How often do you watch anime?
Please give an example scenario of how do you find an anime you want to watch. (going to a certain website, googling etc.)
Usually how do you decide which anime you will see next (interest, recommendation from friends, online etc.)? Why?
How would you describe serendipity?
Could you give me an example of a serendipitous discovery?
Have you found an anime clip in a serendipitous way? If yes how did that happen? If no, how would you imagine it to happen?
Exercise — General
What are your first impressions?
What did you like?
What did you find annoying?
Did you use the search function? If yes, when (eg. beginning, middle, end)?
Did you feel that something was missing? How would you extend it?
Exercise — Specific
What do you think why were the circles in different sizes? What does size represents?
What do you think how is it determined where is a circle?
What did you expect to happen on hovering over a circle?
What did you expect to happen on clicking a circle?
How do you feel that they accomplished what you envisioned?
You might have noticed also that there are different lines with different thicknesses. What do you think it stands for?
Exercise — Serendipity & Extra Details
How can you imagine to find an anime clip serendipitously (based on your definition) with this visualization?
How would you like it if you could have extra information like related manga, fan art, backgrounds, or any other extra info you can imagine?
iii
HTML Source Code
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>AniMap</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link href="css/tipsy.css" rel="stylesheet" type="text/css" /> <link href="css/jquery.fancybox.css" rel="stylesheet" type="text/css" /> <script src="js/d3.v3.js" type="text/javascript"></script> <script src="js/jquery-1.9.1.js" type="text/javascript"></script> <script src="js/jquery.tipsy.js" type="text/javascript"></script> <script src="js/jquery.fancybox.js" type="text/javascript"></script> </head> <body> <form class="changers"> <input type="button" value="Names" onClick="toggleNames()" /> <!--<input class="changers" type="button" value="Connections" onClick="toggleConnections()" style="top:25px;" />--> <input type="text" id="findInput" placeholder="Search..." size="20" /> <button onClick="FindNext(); return false;" class="myButton"> <img src="images/search-icon.png" width="17" height="17" alt="find"> </button> <input type="button" value="Horror" onClick="toggleGenre('Horror')" style="top:25px;width: 57px;left: 2px;" /> <input type="button" value="Mystery" onClick="toggleGenre('Mystery')" style="top:25px;left:65px;" /> <input type="button" value="Watched" onClick="toggleMyList()" style="top:50px;" /> <input type="button" value="My Ranks" onClick="toggleMyRank()" style="top:50px;left:65px;" /> </form> <script> var width = window.innerWidth -10; height = window.innerHeight -10; //SCALES var x = d3.scale.linear() .domain([0, width]) .range([0, width]); var y = d3.scale.linear() .domain([0, height]) .range([height, 0]); var svg = d3.select("body").append("svg:svg") .attr("width", width) .attr("height", height) .append("svg:g") .call(d3.behavior.zoom().x(x).y(x).scaleExtent([-1, 8]).on("zoom", zoom)) .append("svg:g"); svg.append('svg:rect')
iv
.attr('width', width+10) .attr('height', height+10) .attr("class", "overlay"); function zoom() { svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); } var color = "#1f77b4"; var highlight = "#d62728"; var gray = "#ccc"; var linkVisible = "visible"; var titleVisibility = "hidden"; var alreadySelected = false; var myListVisible = false; var loading = svg.append("text") .attr("x", width / 2) .attr("y", height / 2) .attr("dy", ".35em") .attr("text-anchor", "middle") .text("simulating. a moment, please..."); d3.json("json/anime.json", function(json) { var distanceScale = d3.scale.linear() .domain([1, d3.max(json.links, function(d) {return d.value;})]) .range([100,10]); var force = self.force = d3.layout.force() .nodes(json.nodes) .links(json.links) .gravity(.1) .linkDistance( function(d) { return distanceScale(d.value); }) .charge(-120) .size([width, height]); var strokeWidth = d3.scale.linear() .domain([1, d3.max(json.links, function(d) {return d.value;})]) .range([0.1,8]); var link = svg.selectAll(".link") .data(json.links) .enter().append("svg:g") .append("line") .attr("class", "link") .style("stroke", gray) .style("stroke-width", function(d) { return strokeWidth(d.value); }) .attr("visibility", linkVisible); var rankScale = d3.scale.linear() .domain([1, d3.max(json.nodes, function(d) {return d.rank;})]) .range([3,35]);
v
var r = function(d) { return rankScale(d.rank);} var node = svg.selectAll(".node") .data(json.nodes) .enter().append("svg:g") .attr("class", "node") .on("mouseover", mouseover) .on("mouseout", mouseout); node.append("svg:circle") .attr("r", r) .style("fill", color) .attr("rel", "hide") .on("click", function(d) { return toggleInfo(this) }) .attr("rank", function(d) { return d.id+1; }) .attr("nodeTitle", function(d) { return d.name; }) .attr("cover", function(d) { return d.cover; }) .attr("genres", function(d) { return d.genres; }) .attr("description",function(d) { return d.description; }); node.append("text") .attr("dx", -2) .attr("dy", -5) .attr("class", "titles") .attr("visibility", titleVisibility) .style("pointer-events","none") .text(function(d) { return d.name }) .append("title") .text(function(d) { return d.name; }); function fade(opacity) { var linkedByIndex = {}; json.links.forEach(function(d) { linkedByIndex[d.source.index + "," + d.target.index] = 1; }); function isConnected(a, b) { return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index; } return function(d) { node .style("opacity", function(o) { thisOpacity = isConnected(d, o) ? 1 : opacity; //this.setAttribute('fill-opacity', thisOpacity); this.setAttribute('opacity', thisOpacity); return thisOpacity; }); link .style("stroke-opacity", opacity) .style("stroke-opacity", function(o) { return o.source === d || o.target === d ? 1 : opacity;}); }; } function showTitles(visibilityProperty){
vi
var linkedByIndex = {}; json.links.forEach(function(d) { linkedByIndex[d.source.index + "," + d.target.index] = 1; }); function isConnected(a, b) { return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index; } return function(d) { node.select("text") .attr("visibility", function(o) { thisVisibility = isConnected(d, o) ? 'visible' : titleVisibility; this.setAttribute('visibility', thisVisibility); return thisVisibility; }); } } function mouseover(){ d3.select(this).select("circle").transition() .duration(150) .style("fill", highlight); d3.select(this).select("circle").each(fade(.05)); d3.select(this).selectAll(".link").attr("stroke", highlight); d3.select(this).select("text").each(showTitles("hidden")); } function mouseout(){ d3.select(this).select("circle").transition() .duration(150) .style("fill", color); d3.select(this).select("circle").each(fade(1)); d3.select(this).selectAll(".link").attr("stroke", gray); d3.select(this).select("text").each(showTitles("visible")); } // Use a timeout to allow the rest of the page to load first. setTimeout(function() { // Run the layout a fixed number of times. // The ideal number of times scales with graph complexity. // Of course, don't run too long—you'll hang the page! var n = link.length + node.length + 50; force.start(); for (var i = n * n; i > 0; --i) force.tick(); force.stop(); link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; });
vii
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); loading.remove(); }, 10); $('svg circle').tipsy({ gravity: 'b', trigger: 'manual', html: true, opacity: 1, fade: true, delayIn: 0, delayOut: 0, title: function() { var thisRec = this.getAttribute('rank'); var thisTitle = this.getAttribute('nodeTitle');// var thisTitle = this.__data__.name var cover = this.getAttribute('cover'); var genres = this.getAttribute('genres').replace(/,/g ,", "); var myDescription = this.getAttribute('description'); var linkTitle = this.getAttribute('nodeTitle').replace(/ /g,"-"); //var videoLink = 'http://www.animeultima.tv/search.html?searchquery=' + thisTitle; var videoLink = 'http://www.animeultima.tv/' + linkTitle + '-episode-1-english-subbed'; return '<div class="popDiv">' + '<img src="covers/'+ cover + '" alt="Anime Cover Art" />' + '<p class="header"> <span>' + thisTitle + '<span> </p>' + '<p class="header">Rank: <span>' + thisRec + '</span> out of 327</p>' + '<p class="header"><span>' + genres + '</span></p>' + '<p>' + myDescription +'</p>' + '<p> <a class="videoLink" href="' + videoLink + '" target="videoFrame">Watch Anime</a></p>' + '</div>'; } }); }); var count = 0; function toggleInfo(ele){ //hide tooltip if($(ele).attr("rel")=="show") { $(ele).tipsy("hide"); $(ele).attr('rel','hide'); count--; } //swap tooltips else if($(ele).attr("rel")=="hide" && count == 1){ $('.tipsy').remove(); $(ele).tipsy("show"); $(ele).attr('rel','show');
viii
count = 0; } //show tooltip else { $(ele).tipsy("show"); $(ele).attr('rel','show'); count++; } $(".tipsy").click(function () { $('.tipsy').remove(); }); return false; } function toggleNames() { if(titleVisibility == "visible") { d3.selectAll(".titles").attr("visibility","hidden"); titleVisibility = "hidden"; } else { d3.selectAll(".titles").attr("visibility","visible"); titleVisibility = "visible"; } } function toggleConnections(){ if(linkVisible == "visible") { d3.selectAll(".link").attr("visibility","hidden"); linkVisible = "hidden"; } else { d3.selectAll(".link").attr("visibility","visible"); linkVisible = "visible"; } } function FindNext () { var str = document.getElementById ("findInput").value; if (str == "") { alert ("Please enter some text to search!"); return; } /*if (window.find(str, true)) { document.execCommand("hiliteColor", false, "#f00"); //while (window.find(str, true) {document.execCommand("hiliteColor", false, "#ff0");} }*/ if (window.find) { // Firefox, Google Chrome, Safari var found = window.find (str); found.mouseover(); if (!found) { alert ("The following text was not found:\n" + str);
ix
} else { alert ("Your browser does not support finding text!"); } } } function toggleGenre(theGenre){ if(!alreadySelected){ /*d3.selectAll("circle").attr("visibility", function(d) { return d.genres.filter( function(item){ return typeof item == 'string' && item.indexOf(theGenre) > -1; }) == theGenre?"visible":"hidden"; });*/ d3.selectAll("circle") .transition().duration(1000).style("opacity", function(d) { return d.genres.filter( function(item){ return typeof item == 'string' && item.indexOf(theGenre) > -1;}) == theGenre?1:0;}); alreadySelected = true; } else if(alreadySelected) { d3.selectAll("circle").transition().duration(1000).style("opacity","1"); alreadySelected = false; } } function toggleMyList(){ if(!myListVisible){ d3.selectAll("circle").transition() .duration(1000) .style("fill", function(d, i) { return i%25==0 ?'rgb(255,30,30)':'rgb(190,190,190)'; }); myListVisible = true; } else { d3.selectAll("circle").transition() .duration(1000) .style("fill", color); myListVisible = false; } } var myRankVisible = false; function toggleMyRank(){ if(!myRankVisible){ d3.selectAll("circle").transition() .duration(1000) .attr("r", function(d, i) { return i%25==0 ?(Math.random()*20)+3:this.getAttribute('r'); }); myRankVisible = true; } else { var rankScale = d3.scale.linear() .domain([1, 100]) .range([3,35]); d3.selectAll("circle").transition()
x
.duration(1000) .attr("r", function(d, i) { return i%25==0 ?rankScale(d.rank):this.getAttribute('r'); }); myRankVisible = false; } } </script> <script> $(document).ready(function(){ $(".videoLink").fancybox({ 'width' : '80%', 'height' : '80%', 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'iframe' }); }); </script> </body> </html>
