The Bohemian Bookshelf: Design and Implementation of a ... · 2.1 Serendipity and its Relation to Information Exploration It was a tale of the Three Princes of Serendip that inspired

LUDWIG-MAXIMILIANS-UNIVERSITÄT MÜNCHEN

Department “Institut für Informatik”Lehr- und Forschungseinheit Medieninformatik

Prof. Dr. Heinrich Hußmann

Projektarbeit

The Bohemian Bookshelf: Design and Implementation of aVisualization Prototype for Serendipitous Browsing

Alice [email protected]

Bearbeitungszeitraum: 1. 9. 2010 bis 18. 4. 2011Betreuer: Uta Hinrichs and Prof. Dr. Sheelagh CarpendaleVerantw. Hochschullehrer: Prof. Dr. Andreas Butz

mailto:[email protected]

Zusammenfassung

Der Einfluss von unvorhersehbaren Entdeckungen (engl. “serendipity”) wird bei der Informa-tionssuche im Allgemeinen noch unterschätzt. Obwohl dieser Faktor in der Literatur häufig alswichtige Quelle von Inspiration und Kreativität genannt wird, gibt es noch wenige Systeme diegezielt auf die Unterstützung solcher Entdeckungen ausgerichtet sind. Das Bohemian Bookshelfist eine Anwendung zum erkunden digitaler Bibliotheken, die speziell dazu entworfen wurde“serendipity” systematisch durch Informationsvisualisierung zu ermöglichen. Das BohemianBookshelf besteht aus fünf aneinander gekoppelten Visualisierungen, dem Cover Colour Circle,den Keyword Chains, dem Book Pile, den Timelines und der Author Spiral. Jede dieser Visu-alisierungen bietet eine Übersicht über den Datenbestand anhand eines bestimmten Metadaten-Attributes. Der Cover Colour Circle gruppiert Bücher nach Farbe, die Keyword Chains visual-isieren Verbindungen durch Schlüsselwörter, der Book Pile zeigt Seitenanzahlen, die Timelinessetzen das Erscheinungsdatum und die behandelte Zeitspanne in Beziehung und die Author Spi-ral ordnet Bücher alphabetisch nach Autor. Das Bohemian Bookshelf ist ein erster Schritt zurUntersuchung, wie “serendipity” durch Informationsvisualisierung unterstützt werden kann.

Abstract

The influence of serendipity is often underestimated in the information seeking process. Althoughserendipity has often been discussed as facilitator of inspiration and creativity, there are still veryfew systems that focus on supporting serendipitous discoveries. The Bohemian Bookshelf is an in-terface for the exploration of book collections, that is designed to systematically support serendip-ity though information visualization. It consists of five interlinked visualizations: The CoverColour Circle, the Keyword Chains, the Book Pile, the Timelines and the Author Spiral. Eachvisualization provides a unique overview of the collection, focusing on one aspect of the books.The Cover Colour Circle groups books according to colour, the Keyword Chains visualizes rela-tions between books based on keywords, the Book Pile visualizes the page count, the Timelinesshow the relation between publication year and time period in focus and the Author Spiral listsbooks in alphabetical order by author. The Bohemian Bookshelf is a first step to investigate howserendipity can be supported through information visualization.

Aufgabenstellung

When browsing the collection of a traditional physical library for a particular book or article,choices often rely not only on what one had in mind when entering the library but also on serendip-ity: book covers that one happens to walk by or books that happen to be adjacent to the book ofinitial interest. As libraries become digital, librarians are concerned about the loss of serendipity.We are currently investigating what serendipity might mean in a digital library and how interac-tive abstract visualizations might initiate or support new types of digital browsing serendipity. Theproject will be based on a modest data set consisting of a subset of book titles from the library col-lection. An interactive visualization prototype will be developed that explores some possibilitiesfor supporting digital serendipity. The prototype will be implemented in Flash and Actionscriptwhich enables the installation of the prototype on both direct-touch displays and/or on regulardesktop computers. The visualization prototype will consist of several interlinked visualizationswith each focusing on a different aspect of the data set (e.g. authors, popularity, publication timeetc.). Each visualization will present an overview of the data from a different perspective using adifferent visual representation. However, the exploration of one visualization will highlight relatedaspects within the other visualizations. This interconnectedness of the visualizations may createopportunities for serendipity and unexpected discoveries. The design and development of the vi-sualization prototype and individual visualizations will follow an iterative design process wherewe will in particular explore mechanisms of creating a pleasurable and playful user experience.

Ich erkläre hiermit, dass ich die vorliegende Arbeit selbstständig angefertigt, alle Zitate als solchekenntlich gemacht sowie alle benutzten Quellen und Hilfsmittel angegeben habe.

München, April 18, 2011

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Contents

1 Introduction 3

2 Concept 52.1 Serendipity and its Relation to Information Exploration . . . . . . . . . . . . . . 52.2 Exploring the Ways in which Visualization can Support Serendipity . . . . . . . 6

2.2.1 Providing a Variety of Different Ordering Criteria . . . . . . . . . . . . . 62.2.2 Overview of the Book Collection . . . . . . . . . . . . . . . . . . . . . 72.2.3 Showing Adjacencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.2.4 Visual Aesthetics and Playful Interaction . . . . . . . . . . . . . . . . . 82.2.5 Interconnectedness of the Visualizations . . . . . . . . . . . . . . . . . . 8

3 Visualizations of the Bohemian Bookshelf 113.1 Data Collection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113.2 Overall Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123.3 Cover Colour Circle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3.3.1 Overview of the Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143.3.2 General Browsing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153.3.3 Selecting a Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153.3.4 Detailed Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.3.5 Serendipity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3.4 Keyword Chains . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173.4.1 Showing Keyword Connections . . . . . . . . . . . . . . . . . . . . . . 183.4.2 Keyword Chain Animations . . . . . . . . . . . . . . . . . . . . . . . . 193.4.3 Selecting a Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203.4.4 Serendipity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.5 Timelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213.5.1 Overview of the Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213.5.2 General Browsing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223.5.3 Selecting a Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233.5.4 Zooming into Timelines . . . . . . . . . . . . . . . . . . . . . . . . . . 233.5.5 Serendipity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3.6 Book Pile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253.6.1 Overview of the Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263.6.2 Selecting a Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273.6.3 Serendipity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

3.7 Author Spiral . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283.7.1 Overview of the Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283.7.2 Selecting a Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293.7.3 Serendipity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

4 Related Visualization Approaches 314.1 Visualizations for Document Collections . . . . . . . . . . . . . . . . . . . . . . 314.2 Coordinated Views for Document Exploration . . . . . . . . . . . . . . . . . . . 314.3 Public Information Displays . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

I

CONTENTS CONTENTS

5 Discussion and Future Work 335.1 Appropriate Time for Serendipitous Content . . . . . . . . . . . . . . . . . . . . 335.2 Scalability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335.3 Alternate Visualizations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335.4 Application to Other Datasets . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335.5 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

2

1 INTRODUCTION

1 Introduction

The amount of information that we encounter every day is increasing continuously. The worldwide web offers an almost infinite amount of information, most people own huge music collec-tions with gigabytes of data and the digital libraries offer enormous collections of books. Mostinterfaces to these data collections rather focus on supporting accurate known item searches. Espe-cially librarians are concerned about a possible loss of serendipity, when their collections go dig-ital, as serendipity is considered a valuable factor in information seeking. Many ground-breakingdiscoveries—like Penicillin, the “New World”, and Picasso’s “blue period”—have been attributedto serendipity [37]. I introduce the Bohemian Bookshelf to support serendipity in digital datacollections.

LIBRARY

a b c

d e

Figure 1.1: Scenario.

Figure 1.1 shows a simple scenario for which the Bohemian Bookshelf was designed. Afterfinishing her project thesis, our character Lucy finally has time to read again, so she wants to startreading a new book (1.1 a). However, Lucy has no idea what kind of book she wants (1.1 b). Soshe heads for her favourite library (1.1 b) to get inspiration. But when she arrives there all thebookshelves have been replaced by search engines that require a query. As Lucy has no idea whatto look for, the search field stays empty and she starts missing the previous possibilities of casuallyexploring the bookshelves (1.1 d). The Bohemian Bookshelf aims to recreate the experience ofopen-ended browsing and exploring like in a physical library (1.1 e), that has been found to supportserendipity [10, 14, 24, 36].The Bohemian Bookshelf consists of 5 interlinked visualizations, thatsupport serendipity by providing a variety of ordering criteria of books, providing different visualoverviews of the book collection, highlighting adjacencies between books, and enticing curiosity

3

1 INTRODUCTION

through playful interaction and pleasing visual aesthetics.In the following I discuss the design and concepts behind the Bohemian Bookshelf in detail.

Chapter 2 defines how the concept of serendipity has been defined, and how it is addressed in thedesign of the Bohemian Bookshelf. In Chapter 3 the five visualizations of the Bohemian Bookshelfare explained in detail. Chapter 4 briefly describes related work. The thesis is concluded by adiscussion of possible future work.

4

2 CONCEPT

2 Concept

Browsing a digital library is a scenario in which serendipitous discoveries are very desirable. TheBohemian Bookshelf is a prototype to explore different ways of supporting serendipity in such adigital library through visualization. A system like this could be installed on a large touch devicein the entrance hall of a public library. But as it does not require multi-touch gestures it couldalso be integrated in the library’s web presence. The prototype can be seen as an example ofa system that facilitates the exploration of a data collection. It investigates concepts that mightinduce serendipitous discoveries. This chapter discusses the definition of the term serendipity inthe literature and how the Bohemian Bookshelf intends to support serendipity in detail.

2.1 Serendipity and its Relation to Information Exploration

It was a tale of the Three Princes of Serendip that inspired Horace Walpole 1745 to create theword ‘serendipity’ for what he described as “making discoveries, by accident and sagacity”. Afterthe word was only known among bibliophiles until the middle of the 20th Century, many ground-breaking discoveries—like Penicillin, the “New World” and Picasso’s “blue period”—have retro-spectively been designated serendipitous [37].

As the scientific interest in the nature of serendipitous discoveries evolved, so did the numberof different definitions and interpretations of the term. The Oxford English Dictionary definesserendipity as: “The faculty of making happy and unexpected discoveries by accident.” [30]. Thisrather broad description is refined in the search and information seeking literature. André [1]defines serendipity as:

1. the finding of unexpected information (relevant to the goal or not) while engaged in anyinformation activity, and

2. the making of an intellectual leap of understanding with that information to arrive at aninsight.

This definition refers to the original definition of Walpole, who not only mentions the fortuitous-ness of the discovery but also the sagacity that the discoverer has to gain from his finding.

Other authors see serendipity as a strategy to retrieve information [19]. In this contextserendipitous browsing is mentioned as an activity that is deliberately chosen to make unexpecteddiscoveries [3]. Toms also describes “the accidental, incidental, or serendipitous discovery of anobject” as one way of information acquisition [36].

The terms “browsing” and “exploration” are often mentioned in the context of serendipity.White et al. describe exploratory search as a technique to acquire information [39]. Bawden iden-tifies three categories of browsing activities: purposive browsing, which can be described as theactivity of looking for information in a broad subject area, capricious browsing, that is charac-terized as “random” and not goal-oriented and exploratory browsing “in search, quite literally ofinspiration” [4].

Rice et al. indicate the connection between serendipity and browsing. “Serendipitous findingsare one of the consequences of browsing in the library [...]” [33]. Morse also highlighted this af-filiation. Already 1971, long before web-browsing became a popular activity, he defined browsingas “a search, hopefully serendipitous” [28].

Visual interfaces are accredited to support exploration and browsing. Marchionini suggeststhem as possible tools for exploratory information seeking [25]. The potential of “integrating

5

2.2 Exploring the Ways in which Visualization can Support Serendipity 2 CONCEPT

exploratory search technologies with interactive information visualization” is also indicated byKules and Shneiderman [22]. Mercun suggests that “libraries should couple visualization withtextual data and implement simple and small-scale visualization that would give users some moreinsight into the library data and at the same time invite them to explore the collections.” [26]The design approach of the Bohemian Bookshelf is guided by these highly general and abstractrecommendations.

2.2 Exploring the Ways in which Visualization can Support Serendipity

The Bohemian Bookshelf (shown in Figure 2.1) consists of five unique visualizations. Each ofthem visualizes the data of a book collection in a different way. In this section the concepts thatwere applied when designing the visualizations are described in detail.

Figure 2.1: The Bohemian Bookshelf.

2.2.1 Providing a Variety of Different Ordering Criteria

Each visualization focuses on a different aspect of the books. Some of these attributes can be seenor experienced when browsing a physical library, for instance, the colour of the book covers orthe number of pages. By using familiar characteristics, I meant to bring back some of the infor-mation that is lost as physical libraries go digital. The design of the visualizations was inspiredby features, that people appreciate about having a physical copy of a book. It is possible to feelits weight, look at its cover, and see or even smell how old it is. Also, I tried to think of criteriathat might subconsciously influence people when choosing a book but that are not necessary usualsearch criteria to increase the chance of finding something unexpected.However, not all the aspects that were used are properties of physical books. An advantage ofdigital libraries is that it is possible to reveal connections that might be invisible in a traditionallibrary. I also included criteria that refer to the content of the books, for instance, the time in focusor keywords. This provides additional information about the books in the library collection.

6

2 CONCEPT 2.2 Exploring the Ways in which Visualization can Support Serendipity

By keeping the facets of the books that were used in the five visualizations as distinct as possibleI aimed to increase insights that someone gets when interacting with the Bohemian Bookshelf.When a book is selected the system shows this book in very diverse contexts. The variety of or-dering criteria also enhances the alternatives to browse the collection depending on the preferenceof the person who interacts with it. In the literature of information and library science it has beenhinted that providing multiple access points can foster serendipitous discoveries as it motivatespeople to view the the data from various perspectives [32, 34]

2.2.2 Overview of the Book Collection

Another concept I followed is to provide an overview of the book collection in the visualizations.All visualizations in the Bohemian Bookshelf do not only show one isolated book but put eachbook into the context of the whole library dataset. This provides the visitor with further insightabout the collection. It highlights, for example, the book with the largest page count or the colourthat most books in the collection have. But it also provides diverse information about a book thatis currently selected. How old is this book compared to the other books in the library? Are there alot of books from this author? Furthermore, the different overviews allow for drawing connectionsbetween the different facets of the books. Do the old books have certain colors that distinguishthem from the newer books? Is there a connection between the age and thickness of a book? It hasbeen found that a broad knowledge about a field increases the chance of serendipitous discoveriesas it helps to see connections between seemingly unrelated items [1, 24, 34, 36] Therefor providingpeople with interesting insights about the collection might increase their knowledge and in turnfacilitate the discoveries of unexpected information.

2.2.3 Showing Adjacencies

Figure 2.2: An Earthly Knight by Janet McNaughton - An Example Book.

Grouping books by similarity (regarding genre, author or publication year) is a common wayof organizing books in a traditional library. The resulting adjacency of books on the shelves is aoften discussed facilitator of serendipity in physical libraries [10, 14, 24].Each visualization in the Bohemian Bookshelf focuses on a different characteristic of books.Therefor, the chosen book is adjacent to other books regarding this characteristic. By showingthese adjacencies the Bohemian Bookshelf provides a view on other books that are related to thebook that is currently in focus. The juxtaposition of related information might lead to serendipi-tous discoveries [36].

7


Take the book “An Earthly Knight” (shown in Figure 2.2) as an example. It is written by JanetMcNaughton in 2003 and covers the time period from 1057 to 1603. It has 257 pages and is about“Tam Lin”, “Fairies”, “Magic”, “Courtship”, “Scotland”, and “History”. We do not know why thepersons who interact with the Bohemian Bookshelf became interested in this book. Maybe it wasbecause of its cover, maybe they like stories about magicians, maybe they like the author or areinterested in the medieval. The system provides the visitor with a lot of books that are similar tothis book in various ways. One visualization reveals books that also cover the medieval, anothervisualization shows different books about magic and fairies, and, yet another one brings up morebooks from Janet McNaughton. This variety of books that are similar in different ways mightincrease the chance of finding something that is new but interesting.

2.2.4 Visual Aesthetics and Playful Interaction

One important principle when designing the visualizations was to make them visually appealing.By designing for an attractive appearance of all visualizations, the aim is to catch the people’s at-tention and evoke curiosity that might lead them to interact with the system as suggested in severalpublications [16, 15, 17, 38]. To achieve this goal I used the colour of book covers consistentlyin every visualization, which gives the Bohemian Bookshelf a colourful and friendly look. I alsomade use of aesthetically pleasing shapes such as circles, spirals, and rounded rectangles.Furthermore, the design of the Bohemian Bookshelf aims for playful interaction. Immediate vi-sual feedback and fluid animated transitions make the interaction a rewarding experience. Theapplication is designed for a walk-up-and-use scenario, so I tried to keep interactions with thevisualizations as lightweight and simple as possible. By making the experience of interactingwith the Bohemian Bookshelf fun I intend to motivate people to spend time for more persever-ant use. With the time people invest in the interaction, the chances for serendipitous discoveriesincrease [24].

2.2.5 Interconnectedness of the Visualizations

As explained before, the visualizations each realize concepts that might support serendipity. Fur-thermore, the Bohemian Bookshelf integrates these individual visualizations into an interlinkedsystem. When interacting with one visualization, the others react to this interaction. This inter-connectedness shows the selected book from different contextual perspectives, which has beenfound to favour serendipitous discoveries [34]. When a new selection is made in one of the visu-alizations, all of them change accordingly.Firstly, this is important to provide a variety of adjacencies to the selected book at one time. Itis not necessary to switch to another view to examine a book under a different aspect. When anew book is selected, books that are adjacent to it in different ways are displayed right away. Thismakes it easy to get a broad overview of the relationship between one selected book and the restof the collection.Secondly, the interconnectedness of the visualizations enriches the interaction. As a person in-teracts with one of the visualizations, they can see something happening in the other ones. Thismight catch their attention and be a motivation to switch between the visualizations more often.The flexibility of the paths that a visitor can take through a physical library can be an importantfactor that facilitates serendipitous discoveries. The Bohemian Bookshelf recreates those flexiblepathways (as suggested e.g. by Huwe [18]) by allowing people to switch between the visualiza-tions whenever they see something intriguing in one of the peripheral views. For example, as the

8

2 CONCEPT 2.2 Exploring the Ways in which Visualization can Support Serendipity

book “An Earthly Knight” is selected, all the visualizations change to bring this particular bookinto focus. This animated transition might drag the people’s attention to another visualization thatshows, for instance, that the book is about magic. By directing people’s attention away from theone visualization they are currently interacting with, they might stumble upon an interesting factabout the book that might motivate them to either read this book or further explore the collectionfor something similar.

9


10

3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF

3 Visualizations of the Bohemian Bookshelf

The Bohemian Bookshelf (shown in Figure 2.1) is a prototype to explore how serendipitous brows-ing can be supported through information visualization. Five individual visualizations form thissystem: The Cover Colour Circle, the Keyword Chains, the Timelines, the Book Pile, and the Au-thor Spiral. Each of these interlinked visualizations provides a unique overview of the collection.The following section describes the visualizations in detail and explains how serendipity can besupported in each of them.

3.1 Data Collection

The Bohemian Bookshelf is based on a data set consisting of a subset of around 300 books takenfrom the open source online book collection Open Library. A lot of libraries, including the Uni-versity of Calgary library do not have a systems in place yet where a large variety of meta dataof library resources are centrally stored and accessible. Open Library nicely lends itself to thepurpose of creating a proof-of-concept prototype because it provides a large variety of metadatafor each book, such as the time in focus or the number of pages.

The Open Library API provides dumps of its entire records in JSON format. To operate furtherwith this data I transformed the JSON dump into a local SQL database. The database allows toformulate queries to select the books with particular metadata that were used as a dataset for theprototype visualization.

The resulting dataset is used as a small-scale example for a real-world library dataset. It canbe assumed that the metadata used in the visualizations will be available in the future and that theyare maintained properly. The Bohemian Bookshelf visualization uses the following metadata ofbooks:

• Title

• Author (first and last name)

• Publication year

• Cover (as a thumbnail image)

• Time period in focus (start year and end year)

• Keywords

• Number of pages

The selection of books from Open Library that contain the above metadata decreases the size ofthe dataset to 113.286 books. Furthermore, I eliminated books that had less than eight keywords.Additionally, I did not allow keywords with special characters. I limited the dataset to books wherethe time period in focus was provided in the format: [year–year]. Books that had a description suchas “Medieval” or “Third Republic” in their subject time field were taken out of the dataset. I alsoeliminated books with no or just a replacement cover (white page showing book title and author).After all these reductions a subset of approximately 800 books is achieved. To gain sufficientperformance for fluid interactions the Bohemian Bookshelf visualization is based on 300 of these800 remaining books.

11

3.2 Overall Interaction 3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF

3.2 Overall Interaction

The Bohemian Bookshelf consists of five interlinked visualizations. The visualization in the centreis the visualization currently in focus. Only this visualization is interactive while the smallervisualizations located in the corners just react to the selections that are made in the centered one.When a book is selected in the central visualization, all the other visualizations change accordinglyand reveal this book as part of their particular overview representation.

The visualizations in the corners can be brought into focus via mouse click or direct-touch.The visualization that was previously located in the centre switches places with the newly selectedone and transitions to the periphery. Now it is possible to interact with the selected visualizationin the centre.

As the visualizations can switch places upon selection, they have no fixed position in thelayout. Through selection, every visualization can shift its position to each of the corners. Thisway of repositioning the visualizations was chosen because it allows a more balanced layout withno gaps. If every visualization had a fixed position in the layout, its position would have to remainempty when this visualization is selected to the centre. As I wanted to make use of most of thespace available for the visualizations, the switching of positions seemed a sensible solution.

12

3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF 3.3 Cover Colour Circle

3.3 Cover Colour Circle

The Cover Colour Circle visualization provides an overview of all colours occurring in the coversof library books. When browsing through library books, the aesthetics of book covers can attractpeople’s attention and even influence their choice of books. This visualization therefore makes theaesthetics of a book’s colour a central point in the browsing experience. Books are grouped basedon the average colour of their cover. Browsing through the Cover Colour Circle reveals books thatare related to each other based on the colour of their cover.

(a) Overview. (b) General browsing.

(c) Selecting a book. (d) Detailed information.

Figure 3.1: The four states of the Cover Colour Circle.

13

3.3 Cover Colour Circle 3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF

Saturation

Hue

Value

(a) HSV Colour Cone.

Saturation

Hue

(b) HS-Circle with Cover Colour Circle.

Figure 3.2: Use of the HSV Colour Model for the Cover Colour Circle.

3.3.1 Overview of the Data

The Cover Colour Circle provides an overview of the colours occurring in all the covers of librarybooks as shown in Figure 3.1 a. For each book, the average colour is calculated as the meanpixel colour from the book’s cover image. In the remainder of this thesis a book’s average covercolour will simply be referred to as its colour. The books’ colour is used consistently throughoutall visualizations in the Bohemian Bookshelf. In the Cover Colour Circle, colours are distributedin a circular layout, based on the HSV colour model. Colours in the HSV model are arrangedbased on a three dimensional cone shape (see Figure 3.2 a). To display the HSV model in onlytwo dimensions, the value (V) is ignored for calculating the distribution of book cover colours.The resulting HS-Circle is divided into discrete colour points. These colour points are arrangedin concentric circles around the centre (see Figure 3.2 b). All points on one circle have an equaldistance (dist) to the next point. The position of each point is calculated like this:

xi, j = sin(ij) · j ·dist

yi, j = cos(ij) · j ·dist

with i = 0..2π j and j = 1..maxRad

dist(1)

The colour points are represented in form of circles where the circle radius represents thenumber of associated books. To assign a book to a circle, I calculate the position of its colour inthe HS-Circle.

This gives each book a specific location in the circle. A book is then assigned to the circle thathas the shortest distance to its position in the HS-Circle as shown in Figure 3.3. Thus, a circle mayrepresent one or more books from its immediate vicinity. After assigning the books to each colourcircle, the radius of the circles that have a number of associated books greater than 0 is calculatedas follows:

radius =log(associatedBooks)

log(maxBooks)∗maxRadius+minRadius (2)

14

3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF 3.3 Cover Colour Circle

book

dmind

d

associatedcolor circle

Figure 3.3: Assigning books to the Colour Circles.

The logarithmic scale is applied to reduce the differences between the sizes of circles that havemany associated books and circles that have very few associated books.

3.3.2 General Browsing

Moving the mouse or finger across the Colour Cover circle causes the books under the contactpoint to reveal themselves in form of a circular preview showing their covers — I call this circularbook preview “Cover Bubbles”. As mentioned before, every book has a particular position inthe HS-Circle depending on its colour. The Cover Bubble of each book is placed at its positionin the colour circle. When the contact point comes close to a position where a Cover Bubble islocated, this Bubble is scaled up. As the mouse moves away it shrinks until it is invisible again.This behavior creates the impression of book covers bubbling up to the surface and disappearingagain (see Figure 3.1(b)). This particular look-and-feel was inspired by the “Etsy - Shop by Color”website 1.

3.3.3 Selecting a Book

(a) Spiral with 3 adjacent books. (b) Spiral with 5 adjacent books. (c) Spiral with 8 adjacent books.

Figure 3.4: Spirals with different numbers of adjacent books.

Selecting a Cover Bubble, puts the corresponding book into focus: the selected Cover Bubbleis enlarged. It is possible that many books are associated with one colour circle. Thus, in additionto the selected book, up to eight books that are related to the same colour circle are arranged in

1http://www.etsy.com/color.php

15

3.3 Cover Colour Circle 3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF

a spiral layout around the chosen Cover Bubble as shown in Figure 3.1(c). Since these adjacentbooks are associated with the same colour circle they have very similar colours. If a colour circlehas less than eight associated books the last positions in the spiral remain empty (see Figure 3.4).When a book has been selected and its Cover Bubble is enlarged, a colour-wise adjacent bookfrom the current selection’s spiral can be selected. In this case the new selection becomes thefocus, displaying its own Cover Bubble and its own associated spiral. Any books that were also inthe previous spiral are simply animated directly to their new position.

3.3.4 Detailed Information

The book cover in focus can be selected to bring up additional information about the book. Thedetail view shows the full cover of the book together with its title, author, and year of publication(see Figure 3.1(d)). People who have become interested in a book by looking at its cover canaccess the full information about it. Selecting the cover again brings you back to the spiral view.From every view you can go back to the browsing view by selecting the background.

3.3.5 Serendipity

Books are usually searched for by their title or author. The cover colour is a rather unusual searchcriterion. However, as we know from our experiences at a library or bookstore, the aesthetics ofa book cover can influence people’s decision, especially when they are browsing a library withouthaving a particular book in mind. With the Cover Colour visualization, I deliberately providean unusual categorization of library books based on colour that might increase the possibility forunexpected discoveries. The Cover Colour visualization aims to support serendipity in differentways:

Unusual Categorization. It encourages people to explore books based on aesthetic criteriarather than content. A Cover Bubble shows only a small sample of the cover. It gives a firstimpression of the book but does not show title or author. While this form of browsing might leadto a large number of books irrelevant to the visitor it supports serendipitous discoveries that tar-geted search cannot provide: it has the potential to reveal a book that the visitor did not even knowthat they were interested in, because it shows books that might never have come up in a targetedsearch.

Showing Adjacent Books. Even if a selected book turns out to be irrelevant, other colour-wiseadjacent books are shown in close proximity. This view of books with similar colours raises thechance of finding something that is actually of interest. It also supports a more guided form ofexploration of the library catalogue that the general browsing of the colour circle cannot provide.For example, visitors can systematically go through all books in their favourite colour. Sincethese books are likely to focus on very different topics, there are many opportunities of makingserendipitous discoveries.

Visual Aesthetics. The ordered colours, circular layout, and Cover Bubbles that dynamicallychange size based on interaction make the visualization aesthetically pleasing. By providing dy-namic and visually appealing aesthetics, I aim to attract the curiosity of people and make thevisualization look inviting and interesting. It is more likely that people become curious in a visu-alization when it is visually pleasing [16, 15, 17, 38].

16

3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF 3.4 Keyword Chains

Playful Interaction. Interaction with the Cover Colour Circle visualization is deliberatelylightweight and playful. Every interaction with the interface provides immediate visual feedbackand, therefore, a rewarding experience. Fluid animated transitions provide a dynamic look-and-feel of the interface. By supporting lightweight and fun walk-up-and-use interaction techniques, Iaim to increase the time people spend with the Cover Circle visualization. The longer people aremotivated to browse, the more relevant books they can discover [24].

3.4 Keyword Chains

The Keyword Chains visualization shows the relations between books according to their keywords.Keywords are a common search criterion for books. In digital search catalogs keywords are usedto give an overview of the topics of a book. Keywords can indicate similarity of books: themore keywords books have in common, the more similar their content is likely to be. A singlekeyword is often not enough to fully characterize a book. For example a book that has the keyword“India” can be a travel guide about India, a novel that takes place in India, or an essay aboutIndian culture. Usually, books are therefore characterized by several keywords. The KeywordChains visualization shows connections between books that have at least one keyword in common.Following Keyword Chains can lead to interesting and sometimes very surprising discoveries.

Figure 3.5: Keyword Chains.

17

3.4 Keyword Chains 3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF

3.4.1 Showing Keyword Connections

The Keyword Chains visualization shows the selected book in the centre and up to eight KeywordChains that are arranged around the selected book in a wave-like manner (see Figure 3.5). Theselected book is shown by its title, author, and year of publication. Each of the eight KeywordChains starts with to one keyword (k1) of the selected book (the keywords closest to the centre).The keyword k1 is followed by a book title (t1) that belongs to the first book in the dataset thathas k1 in its list of keywords. The book title t1 is then followed by another keyword (k2) thatrepresents the first item of the keyword list for t1 (other than k1). Again, k2 is followed by abook title t2 that represents the first entry of the dataset that has k2 in its keyword list. To avoidrepetitions of book titles or keywords, items that have already been used in a Keyword Chain areexcluded from the selection for this chain. Keywords are shown in capital letters while book titlesare shown in small caps to make it easier to distinguish between both. A Keyword Chain endseither after the second book title (t2) or if one of the keywords has no more associated books. Asshown in Figure 3.5, there is no book that has the keyword “Irish Republican Arm” (KeywordChain pointing to the left) other than the selected one.

If the Keyword Chains visualization is not in focus, it only shows the selected book with itskeywords. No elaborate keyword chains are shown to maintain readability despite of the mini-mized view of the Keyword Chain visualization (see Figure 3.6).

(a) Keyword Chains with 8 keywords. (b) Keyword Chains with 5 keywords.

Figure 3.6: Keyword Chains visualization in unfocused state.

The font colours of the selected book and the other book titles represent their colour. Thebrightness of the original colour is reduced in order to make the text easier to red.The Keyword Chains visualization — other than the Cover Colour Circle — does not provide anoverview over the whole dataset. It shows a vignette of up to 17 books that are related by theirkeywords. By selecting a book title from a Keyword Chain and then following the chains of thistitle, it is possible to navigate through the dataset.

18

3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF 3.4 Keyword Chains

3.4.2 Keyword Chain Animations

Subtle animations are used to provide the Keyword Chains with an aesthetically pleasing organicappearance. Every chain constantly undulates, which gives reminiscent of the movement of astarfish or a sea anemone. The animation steps of one chain are shown in Figure 3.7. The wave-form is based on a mathematical function:

xi = xi−1 + letterspacing+ sin(aδ + cos(bδ ))

yi = yi−1 + sin(δ + sin(cδ ))∗ letterspacingwith δ = i · speed + charindex ·waves (3)

a = 0.3, b = 8, c = 0.4, letterspacing = 7, speed = 0.01, waves = 0.2

Figure 3.7: Animation of one Chain.

i is a counter that is increased every frame. Adjusting the constants a, b and c changes theshape of the wave. The speed can be manipulated using the constants speed and waves. Theconstant letterspacing defines the space for one letter including whitespace in pixels.

19

3.4 Keyword Chains 3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF


Selecting a book from a Keyword Chain via mouse click or direct-touch moves the selected bookinto the centre of the visualization and new Keyword Chains representing the keywords of thisnewly selected book are created. An animation that scales up the new chains is used to make thistransition smooth and to create the impression of arms growing out of the selected book title in thecentre. The keywords in the Keyword Chains are selectable too. If a keyword is selected, the firstbook with this keyword becomes the centre of the visualization.

Figure 3.8: Stretched Keyword Chain.

Due to the wavelike shape and the slow undulation of the chains, the words shown in theKeyword Chain visualization can be hard to read. To improve the legibility, chains can be interac-tively straightened and stretched out. Each chain has a handle on the end. By pulling this handlethe corresponding chain can be straightened, stretched, and freely moved around without losingits connection to the centre (see Figure 3.8). When the handle is released, the chain returns to itsoriginal shape again. This transformation is animated in to give the impression of Keyword Chainsconsisting of a rubber-like material.

3.4.4 Serendipity

Keywords are a common way to categorize books. In a targeted search keywords can be used assearch criteria if the book title or author are unknown. In the Keyword Chains visualization thiscommon criterion is used in an unusual way. Showing books in chains of ever-changing keywordscan lead to surprising results and might increase opportunities for unexpected discoveries. TheKeyword Chains visualization aims to support serendipity in the following ways:

Showing Adjacent Books. Adjacency in this visualization manifests itself as similarity accord-ing to keywords. The Keyword Chains visualization shows two levels of adjacency. Firstly, itconnects books that share at least one keyword with each other. Although books within one Key-word Chain are related to each other, they might be very different in content. The further booktitles in a Keyword Chain are located from the centre (the selected book), the more likely they dif-fer in content. Secondly, the Keyword Chains visualization shows related keywords and associatesthem with each other through book titles. This can be useful when researching a broader topic:certain keywords might be related that one has not thought of and lead to related book titles.

A Keyword Chain forms a path through the dataset. Following the Keyword Chains of onebook might lead to the discovery of completely unexpected but interesting titles. It offers anexperience similar to traveling through the library using keywords as virtual connections betweenbooks.

20

3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF 3.5 Timelines

Visual Aesthetics. The organic and continuous movement of the chains and the sea-creature likeappearance give the Keyword Chains visualization an aesthetically pleasant look. Even if no oneinteracts with this visualization the chains slightly undulate. This subtle animation might attractthe attention of people walking by and intrigue them to read the Keyword Chains and explore themfurther through interaction.

Playful Interaction. The animated interaction invites for playful exploration. The elasticity ofthe chains when stretching them and the animated growth of the Keyword Chains when selectinga new book add to the playful and lightweight interaction that might extend the exploration of thebook collection and enhance the chance for useful and inspiring discoveries.

3.5 Timelines

The Timelines visualization represents temporal aspects of the book collection from two differentperspectives. For each book it visualizes (1) the year of publication and (2) the time period thatthe book is about. The time period a book focuses on is an interesting characteristic—in particularof fictional literature or history books, as their content time period often differs a lot from the timeof their publication. Showing this aspect in combination with the publication date indicates if abook has been written in the time period that it is about, if it is a future vision, or about past timeslong before its publication. The organization of books in bookshelves that we find in traditionallibraries can usually not provide this relation between publication year and time period in focus.Even if the books in a library are ordered by publication year, a library visitor usually cannot seethe time period that a particular book covers.

Figure 3.9: Timlines visualization.


The Timelines visualization consists of two parallel timelines (see Figure 3.10). The upper time-line represents the publication years of books in the book collection; the lower timeline represents

21

3.5 Timelines 3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF

the time period that the books focus on. Each book appears on each of these timelines, representedby a small circle coloured in the book’s colour and positioned based on publication year (uppertimeline) and starting point of time period in focus (lower timeline). For each book a thin trans-parent line connects these small circles. Therefore, both timelines are connected through thin linesmarking the publication year and the beginning of the time period in focus. The lines form a pat-tern that provides an overview of the range and density of publication dates (upper timeline) andtime periods covered by library books (lower timeline). Trends can easily be identified: prominentyears of publication or time periods of particular interest are connected to dense clusters of lines.

Figure 3.10: Trends in the Timelines visualization.

Figure 3.10 shows two clusters of lines on the “content” timeline: not surprisingly, 1933 and1945—the time period where World War II took place—are times that are frequently covered inthe books in the library dataset.

3.5.2 General Browsing

Moving the mouse cursor across the connecting lines between the timelines reveals the title ofeach book along with its year of publication and the start year of the time period it focuses on (seeFigure 3.11). In this way, visitors can lightly browse through the books and get a broad overviewof what kind of books are presented, without selecting a particular one.

Figure 3.11: Hover-Effect for the lines.

22

3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF 3.5 Timelines


Visitors can select particular books via mouse click or by touching the corresponding connectionline. A selected book is represented by a triangle. The corners of this triangle are defined by theyear of publication and the start and end year of the time period the book focuses on. These keyyears are also shown in form of labels on both timelines. The book’s time period triangle takes thecolour of its cover (see Section 3.3). The triangle is slightly transparent to not completely occludethe lines of other books shown in the timelines. The title of the book is written within the triangle.In Figure 3.9 the book “Republique xenophobe” is selected so its red triangle is visible. This bookis written in 2001 and is about the time period between the years 1914 and 1940.

3.5.4 Zooming into Timelines

(a) Original state of the timelines.

(b) State after dragging the upper timeline to the left.

(c) State after dragging the upper timeline further to theleft.

Figure 3.12: Zoomig into the upper timeline increases the start year and shortens the displayedtime period.

23

3.5 Timelines 3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF

With many books and a wide range of time periods and publication dates, the Timelines Visu-alization can become quite dense. It therefore provides mechanisms to zoom into both timelinesindependently. I use the metaphor of an elastic rubber band that is fixed on the right end of eachof the timelines to reduce the number of additional control elements. Moving the mouse cursor inthe light grey area of a timeline to the left, causes the time zones in this timeline to stretch out.The more the cursor moves to the left, the more the year on the left increases and the more thebooks on the timeline are stretched out. The overall displayed time frame (start and end time ofthe timeline) becomes shorter, while books with particular publication years or time periods ofinterest can spread out more. Moving the cursor to the right pushes the rubber band together sothe shown timeframe enlarges. Figure 3.12 shows three steps of zooming into the upper timeline.

When zooming in far, some years disappear from the timeframe. Books that have endpointsoutside of the shown timeframe disappear from the visualization. Books (represented by lines)are only displayed in the Timelines visualization if their endpoints on both timelines are withinthe shown timeframe. However, if a book has been selected, it will not disappear but, instead, its“time period triangle” is truncated if its corner points are out of the range of the displayed timeperiod (see Figure 3.13).

Figure 3.13: Truncated Triangle.

3.5.5 Serendipity

Correlating the publication year with the time period in focus allows further insights into the data.Both the publication year and time period in focus can be important selection criteria. In particularthe time period in focus is one characteristic of a book that is usually difficult to grasp at a glancein traditional libraries. Visualizing these temporal perspectives on books in relation to each otherand to the other aspects like colour and keywords merges benefits of both digital library cataloguesand traditional libraries’ bookshelves.

Temporal Trends. The Timelines visualization can show curious aspects of a book collection,for instance, time periods that are particularly well covered, as well as certain highlights suchas the oldest books of the library. Books that have different temporal parameters than the ma-jority of books in the collection become very obvious as their lines are isolated from the others.

24

3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF 3.6 Book Pile

Such a general overview based on temporal aspects of books can be a motivation to browse thebook collection as it enhances people’s knowledge about the collection. Knowledge can fosterserendipitous discoveries, as it enables people to draw connections between seemingly unrelateditems [1, 24, 34, 36]. The possibility of comparing the time periods can attract the attention ofvisitors that are not only interested in finding a book to read but also want to learn somethingabout the books that the collection has to offer in general.

Temporal Adjacency. The Timelines visualization provides two aspects of adjacency: (1) ad-jacency by publication year and (2) adjacency by time period in focus. These adjacencies areindicated by clusters of lines between the timelines. Showing trends is interesting in the sensethat it might induce people to explore particular clusters or outlier books in the dataset. Visitorsthat are already interested in a certain time period will find books that are related by time periodin focus but that come from different disciplines. For instance, if a visitor is interested in booksabout the medieval, the visualization can lead to books from a variety of disciplines (for instancehistory, literature, or art) that focus on this particular time frame. It also provides a clear overviewof publication years of these books. This holds the potential of revealing books that might neverhave come up in a targeted search and can therefore support unexpected discoveries.

3.6 Book Pile

The Book Pile visualization is based on the number of pages in a book. In a physical library thethickness of a book can easily catch visitors’ eye. Similarly, the page number is closely related tothe weight of a book—an important physical characteristic that influences the reading experience.Although the weight of a book is very seldom a search criterion its visual representation caninfluence the experience of presented books. Organizing books in a library based on the amountof pages numbers can put books with fundamentally different content or author in close proximity.This can facilitate serendipitous discoveries where visitors stumble upon something they did noteven know they were interested in.

Figure 3.14: The Book Pile visualization.

25

3.6 Book Pile 3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF


The visualization uses the metaphor of a pile of books to show how many pages the books in thelibrary catalogue have. Each book is represented by a square in its colour. The width and heightof each square represents the number of pages that a book contains. To position each book withinthe visualization, I wanted to maintain a certain amount of randomness that visually reminds of aphysical pile of books (see Figure 3.14). The position of books is therefore determined as follows:books are categorized according to their number of pages into ten categories with intervals of100 pages each. That is, the first category contains books with 100 pages or less and the lastcategory books with 901 to 1000 pages. The ordering of books within each category remainsrandom. Based on this categorization, each book can be organized into a two dimensional ar-ray according to its number of pages. The positioning (stacking) is now achieved by this algorithm:

xMaxLeft = 0xMaxRight = 0for all books do

if book does not fit in the width of the vis thenxMaxLeft = 0xMaxRight = 0

end ifif bookindex mod 2 = 0 then

book.x = xMaxRight + book.width/2xMaxRight = xMaxRight + book.width

elsebook.x = xMaxLeft - book.width/2xMaxLeft = xMaxLeft - book.width

end ifyMax = 0for all y values between book.x-book.width/2 and book.x+book.width/2 do

if y > yMax thenyMax = y

end ifend forbook.y = yMax - book.width/2

end for

width/2

(x,y)

xMaxRight

yMax yMax

xMaxRight

Figure 3.15: Stacking the squares.

26

3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF 3.6 Book Pile

The algorithm consecutively takes books from the array and places them next to each other,starting from the centre of the visualization canvas. Alternately the squares are placed left andright of the centre. The x value is the right/left corner (depending on which side the square isplaced) of the just positioned square. For the y value the highest y value of the squares that areplaced directly underneath of this square is taken.


Books can be selected via mouse click or direct-touch on the squares. When selected, the squarereveals the book’s cover (see Figure 3.16). A speech bubble appears above the selected square thatshows the accurate number of pages of the book and the book title. Books with similar page count(plus/minus five pages), are highlighted by showing their covers. In Figure 3.16 the book “Asianloot” has been selected. It has 319 pages. Adjacent books are located in close proximity to theselected book due to the stacking algorithm described above.

Figure 3.16: The selected book and adjacencies.

3.6.3 Serendipity

The page count of a book is a rather unusual criterion for organizing books. However, the weightand thickness of a book are physical characteristics that can influence its visual appearance andpeople’s reading experience. For example, a big and heavy book can seem important and difficultwhereas a thin paperback novel might appear like an easy read. The page count might thereforebe one factor that can influence the first impression that people get from a book, in particular, ifthe reader has never heard of the title before. The Book Pile visualization has the potential ofsupporting serendipity in the following ways:

Unusual Categorization. Similarly to the Cover Colour Circle and the Timelines visualization,the Book Pile allows visitors to get an overview of the large book collection of a library from anrather unusual but interesting perspective. For instance, the largest or thinnest books within thelibrary can be easily identified. Visualizing the page count does not provide any information aboutthe books’ content. However, it provides one visual criterion that people can start their explo-ration with. They might be tempted to click on the largest or the smallest book of the collection.From there, other books are revealed that happen to contain interesting content and serendipitousdiscoveries can emerge.

Showing Adjacent Books. With each selected book, adjacent books are highlighted. On theone hand this gives information about the amount of books with similar page counts in the library

27

3.7 Author Spiral 3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF

catalogue. On the other hand showing books with a similar page count increases the chance offinding something that is actually of interest. It also allows to systematically browse through allshort books in the library, for example, if someone searches for a short read for a vacation. Thecovers that are revealed for each selected and adjacent books might guide the exploration further.As these books are very likely to differ in content, it creates opportunities for unexpected findings.

Visual Aesthetics. By maintaining some randomness in the design of the Book Pile I aim togive the visualization a visually pleasing organic appearance. Using the books’ colours for thesquares and adding a white border creates an aesthetic reminiscent of a mosaic. Providing visuallypleasing aesthetics in this way might attract the attention and curiosity of library visitors to comecloser and start to browse through the library catalogue [16, 15, 17, 38].

3.7 Author Spiral

The Author Spiral organizes books alphabetically by author—similarly as they are normally orga-nized in a physical library on bookshelves. By providing this common organization in combinationwith the familiar bookshelf metaphor, I aim to enable a rather traditional perspective on a bookcollection that visitors expect from a library or bookstore. People are used to alphabetical order-ing of items from other interfaces such as file systems or bookshelves from physical libraries. Thebookshelf metaphor—the linear presentation of item based on title or author—is also common incomputer interfaces, such as the iTunes cover flow for CD covers. The goal of the Author Spiralis to provide a visually interesting representation that people can instantly understand by relatingit to previous experiences with computers and/or libraries.

Figure 3.17: Author Spiral visualization.


The Author Spiral provides an overview of the entire book collection by presenting a list of allbooks, ordered alphabetically based on a book’s author. Each book is represented by a text labelrotated by 90 degrees showing its author’s first and last name. The font colour for the author labelsis based on the book’s colour. The author labels are aligned on top. As the labels all have differentlengths, the author listing in the Spinal Bookshelf is evocative of paint dripping from the rim ofa paint pot (see Figure 3.17). In order to show larger collections, the author listings roll up into

28

3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF 3.7 Author Spiral

(a) Selected book at the beginning of the dataset. (b) Selected book at the end of the dataset.

Figure 3.18: Adjusting the Spirals according to the position of the selected book.

spirals on both ends of the Bohemian Bookshelf. Due to space constraints, author listings withinthe spirals are not represented as labels but as filled circles coloured based on the book’s colour.Circles become smaller the closer the get to the spiral’s centre.We use the following formula to calculate the spirals:

rMax = MINRADIUS+ b points2c (4)

step =

√rMax ·SCALEpoints−1

(5)

α = step · (points−1) (6)

xi = (i · step)2 ·SCALE · sin((i · step)−α)

yi =(i · step)2 ·SCALE · cos((i · step)−α)

3

with i = 0..points (7)

MINRADIUS = 20, SCALE = 10000

SCALE adjusts the number of turns of the spiral and MINRADIUS is the minimal radius thata spiral can have. The formulas on top apply for the left spiral. The right spiral is just mirroredhorizontally. The radius of the circles is calculated as follows:

rDot =2i

points+1(8)

The two spirals are reminiscent of a role of parchment. Similar to a parchment role the sizeof the spirals is adjusted depending on the number of book listings one each side. The numberof books shown in the stretched middle of the parchment stays constant. This makes it easy tosee if a selected book is located more at the beginning or more at the end of the book collection.Figure 3.18 shows the Author Spiral with different selected books and how the spirals changeaccordingly.


Books can be selected via mouse-click or direct-touch on an author label or on a circle within oneof the spirals. Since circles in the centre of the spiral are small and can be hard to select, a hovereffect facilitates the selection process: circles that are directly below the mouse cursor or finger

29

3.7 Author Spiral 3 VISUALIZATIONS OF THE BOHEMIAN BOOKSHELF

are enlarged (see Figure 3.19 a). To provide feedback about selections while moving the cursor orfinger across the author labels, the author label directly below the contact point is slightly indented(see Figure 3.19 b). The selected book is highlighted by displaying its cover, title, and publicationyear in addition to the author.

(a) Selecting a book from a spiral. (b) Selecting a book from the list.

Figure 3.19: Hover-Effects in the Author Spiral.

3.7.3 Serendipity

Ordering the books by author is a common way to organize books in a traditional library. In theAuthor Spiral this familiar categorization is combined with metaphors that are closely related tobooks. Books are aligned similarly to books on a shelf and the shape of the visualization remindsof a parchment role. The Author Spiral aims to support serendipity in the following ways:

Familiar Metaphors and Categorization. The familiar organization of books makes it possibleto rely on experiences with traditional list-based interfaces and libraries to explore the visualiza-tion. By using a common ordering of books I aim to create an easy entry point for visitors. Afterthis familiar start they can focus their attention on the other visualizations with their more unusualrepresentations and perspectives. The goal is to keep the audience as wide-ranging as possible.

Showing Adjacent Books. The visualization shows the selected book in the centre. Since booksare organized by author name, books from the same author appear directly next to each other. Thisenables visitors to quickly find an author of interest and to browse systematically through all thebooks from this author. This increases the chance of finding other books of interest. By hidingall the information about books within the spirals I pursue the converse approach. Each book isrepresented by only a small circle. While visitors can estimate the first letter of the book’s authorfrom the book’s position in the spiral, the lack of further information might lead to serendipitousdiscoveries, for instance, when visitors tentatively select a circle within the spiral and discover abook of interest.

Visual Aesthetics. The spiral shape lends itself to represent a large amount of items in a compactand visually appealing way. The parchment metaphor of the Author Spiral allows to view thewhole book collection at once and, at the same time, provides for a visually pleasing and invitingrepresentation. Similarly, the varying lengths of the author labels evoke the association of drippingpaint, but at the same time make it easy to identify particularly long or short author names or longblocks of books from the same author.

30

4 RELATED VISUALIZATION APPROACHES

4 Related Visualization Approaches

Serendipity has not been discussed a lot in the information visualization literature. There areno visualization interfaces that are deliberately designed to systematically support serendipity.However, the concept of the Bohemian Bookshelf was influenced by other systems that weredesigned for the exploration of data collections.

4.1 Visualizations for Document Collections

There has been extensive research on the visualization of search results (e.g. [6, 11, 35]). Thesesystems require a search query and therefore reduce the visualized data, instead of providing anoverview of the whole collection. In opposition to these approaches, Machionini suggests thatthe “maximizing of possibly relevant objects” facilitates serendipity [25]. Most visualizations fordocument collections are rather focused on analysis of the data than on playful approaches. Forthis purpose they make use of traditional visualization techniques like scatterplots, pie charts ortree maps [9, 12, 20, 21]. Some systems work with metaphors that are taken directly from thewell-known scenario of visiting a physical library [5, 31]. The more abstract metaphors in theBohemian Bookshelf are designed to attract the attention of passers-by and promote curiosity.

4.2 Coordinated Views for Document Exploration

Coordinated views are interlinked visualizations that react on each other [7]. By providing mul-tiple perspectives on the same data these systems can address a diverse audience with variouspreferences [2]. North and Shneiderman even found that coordinated views facilitate unforeseendiscoveries [29]. Examples of systems that use this technique for text or document exploration areVisGets and EMDialog. VisGets enables to browse through blog entries [8]. EMDialog visualizesthe discourse about an artist from temporal and contextual perspectives [16]. Unlike the BohemianBookshelf, these systems are not deliberately designed to support serendipity.

4.3 Public Information Displays

Many visualization systems for public spaces like libraries or institutions are ambient informationdisplays. As these systems lack the possibility to narrow down the exploration to personal needs,they have to rely on randomness to promote serendipity. The “News Wall” displays pictures andkeywords of recent news [27]. “Research Wave” is an installation for large research organizationsto provide awareness of current activities [15]. An example of a system for a library is “MakingVisible the Invisible”. This installation visualizes checked out books in the Seattle Library [23].“Info Gallery” is an interactive display that shows digital document collections of a physical libraryto promote awareness for this content [13]. Like the Bohemian Bookshelf the systems for publicspaces use subtle animations to attract the curiosity of people walking by [27, 15, 23, 13]. Whilethese systems rely on coincidence, the Bohemian Bookshelf facilitates serendipitous discoveriesin a more systematical way.

31

4.3 Public Information Displays 4 RELATED VISUALIZATION APPROACHES

32

5 DISCUSSION AND FUTURE WORK

5 Discussion and Future Work

The Bohemian Bookshelf takes a very unconventional approach to visualize book collections. Inthe following I discuss further questions that arise from the work that I have done.

5.1 Appropriate Time for Serendipitous Content

The approach of the Bohemian Bookshelf does not aim to replace interfaces for targeted searchstrategies. Its use can even be frustrating in the context of a known item search. Therefore, theappropriate time and place for such an application has to be carefully considered. A possiblescenario could be a combination with query-based interfaces, e.g. in a web application. Thiswould allow people to display potentially serendipitous content on request, as recommended byAndré et al. [1]. This approach implies that people have to decide between targeted search andexploration, while a physical library supports both strategies at the same time. Another way tocombine targeted search and exploration is an integration of a query-interface into the BohemianBookshelf, that allows to narrow down the data that is displayed in the visualizations to a subsetof interest. Another recommendation from the literature is to display serendipitous content at idlemoments [1]. A possible realization could be the installation of the Bohemian Bookshelf on adirect touch display in a library to serve as a digital replacement for physical bookshelves.

5.2 Scalability

The Bohemian Bookshelf prototype is implemented in Flash Actionscript and does only work witha small dataset of about 300 books. The ability to handle a much larger dataset of a real digitallibrary could be provided by using programming languages and implementation techniques thatallow for higher performance. However, some visualization need to be adjusted to work with sucha dataset. Problems with larger datasets would occur in visualizations like the Book Pile that donot show books in aggregated for. Yet, these problems could be solved by using aggregations ofbooks like in the Cover Colour Circle.

5.3 Alternate Visualizations

The variety of metadata, available in digital libraries could inspire the design of additional visual-izations. One interesting example would be the visualization of popularity or other user-generateddata. Of course, the metadata attributes that were used for the Bohemian Bookshelf could be vi-sualized in different ways. For example, one could imagine different visualizations for authors orkeywords of a book. Also, the visualizations of the Bohemian Bookshelf could be enhanced byintroducing additional features, such as animated browsing of the Author Spiral or more playfulinteraction in the Book Pile that could not be realized within the time constraints of this projectthesis.

5.4 Application to Other Datasets

The scenario of a digital library suggests itself to investigate how serendipity could be supportedthrough information visualization. However, book collections are not the only datasets that couldprofit from interfaces that allow open-ended exploration and encourage unexpected discoveries.Nowadays, we own huge personal collections of digital material like photos, videos or music.

33

5.5 Evaluation 5 DISCUSSION AND FUTURE WORK

Many people cannot keep track of the vast amount of data they own. The approach of the Bo-hemian Bookshelf could be used to explore these personal collections and allow for rediscoveringitems that have been long forgotten. Online stores could use similar application to recreate the ex-perience of shopping in a physical store. Similar to a digital library the common online shoppinginterfaces lack the possibility to rummage.

5.5 Evaluation

Studying the use of the Bohemian Bookshelf will help to better understand how people engagewith serendipitous content and if the goal of creating possibilities for serendipitous discoveries isactually achieved. An evaluation can provide further insight on how the design of the BohemianBookshelf can be refined. The university library in Calgary plans to install the Bohemian Book-shelf on a large touch display in the entrance hall of the new “Digital Library” building on campus.The interest of the librarians in this application shows that there is an actual need for the conceptsthat were introduced with the Bohemian Bookshelf. Furthermore, the installation in the libraryoffers the chance to study the Bohemian Bookshelf in use. A study in collaboration with theuniversity library is already planned.

34

REFERENCES REFERENCES

References

[1] P. André, M. C. Schraefel, J. Teevan, and S. T. Dumais. Discovery is never by chance:Designing for (un)serendipity. In Proc. of Creativity and Cognition, pages 305–314, 2009.

[2] M. Q. W. Baldonado, A. Woodruff, and A. Kuchinsky. Guidelines for Using Multiple Viewsin Information Visualization. In Proc. of AVI’00, pages 110–119, 2000.

[3] S Batley. Visual information retrieval: browsing strategies in pictorial databases. In Interna-tional online information meeting. 12, London (06/12/1988), pages 373–381, 1988.

[4] D Bawden. Information systems and the stimulation of creativity. J. Inf. Sci., 12:203–216,September 1986.

[5] Michael Christoffel and Bethina Schmitt. Accessing libraries as easy as a game. In VisualInterfaces to Digital Libraries [JCDL 2002 Workshop], pages 25–38, London, UK, 2002.Springer-Verlag.

[6] E. C. Clarkson, K. Desai, and J. D. Foley. ResultMaps: Visualization for Search Interfaces.IEEE TVCG, 15(6):1057–1064, 2009.

[7] C. Collins and S. Carpendale. Vislink: Revealing relationships amongst visualizations. IEETVCG, 13(6):1192–1199, 2007.

[8] M. Dörk, S. Carpendale, C. Collins, and C. Williamson. Visgets: Coordinated visualizationsfor web-based information explorations and discovery. IEEE TVCG, 4(6):1205–1212, 2008.

[9] Naomi Dushay. Visualizing metadata : A virtual book spine viewer. D-Lib Magazine, 10(10),2004.

[10] A. Foster and N. Ford. Serendipity and information seeking: An empirical study. Journal ofDocumentation, 59(3):321–340, 2003.

[11] E. A. Fox, F. Das Neves, X. Yu, R. Shen, S. Kim, and W. Fan. Exploring the ComputingLiterature with Visuailzation and Stepping Stons & Pathways. Communications of the ACM,49(4):53–58, 2006.

[12] Lance Good, Ashok C. Popat, William C. Janssen, and Eric Bier. UC: A Fluid TreemapInterface for Personal Digital Libraries. In Proc. of JCDL’05, pages 408–408, 2005.

[13] Kaj Grønbæk, Anne Rohde, and Sidsel Bech-Petersen. Infogallery: Interactive art servicesfor physical library spaces. In Proc. of JCDL’06, pages 21–30, 2006.

[14] T. Gup. Technology and the end of serendipity. The Education Digest, 6:48–50, 1998.

[15] U. Hinrichs, D. Fisher, and N. Henry Riche. ResearchWave: An ambient visualization forproviding awareness of research activities. In Proc. of DIS, 2010.

[16] Uta Hinrichs, Holly Schmidt, and Sheelagh Carpendale. EMDialog: Bringing informationvisualization into the museum. IEEE TVCG, 14(6):1181–1188, 2008.

35


[17] E. M. Huang, A. Koster, and J. Borchers. Overcoming assumptions and uncovering practices:When does the public really look at public displays. In Proc. of the conf. on PervasiveComputing, 2008.

[18] T. K. Huwe. New search tools for multidisciplinary digital libraries. Online, 23(2):67–74,1999.

[19] Joseph W. Janes and Louis B Rosenfeld. From security to serendipity, or, how we may haveto learn to stop worrying and love chaos. In Proceedings of the ASIS Mid-Year Meeting,pages 75–82, 1992.

[20] David K. Johnson. Knowledge mining with vxinsight: Discovery through interaction. Jour-nal of Intelligent Systems, 11(3), 1998.

[21] Peter Klein, Harald Reiterer, Frank Müller, and Tobias Limbach. Metadata visualisation withVisMeB. In Proc. of IV’03, pages 600–605, 2003.

[22] Bill Kules and Ben Shneiderman. Users can change their web search tactics: Design guide-lines for categorized overviews. Inf. Process. Manage., 44:463–484, March 2008.

[23] G. Legrady. Making visible the invisible. http://www.mat.ucsb.edu/ g.legrady/glWeb-/Projects/spl/spl.html, 2005. Website visited March, 2011.

[24] Daniel Liestman. Chance in the midst of design: approaches to library research serendipity.RQ, 31(4):524—536, 1992.

[25] G. Marchionini. Exploratory search: From finding to understanding. Communications of theACM, 49(4):41–46, 2006.

[26] T. Mercun and M. Žumer. Visualizing for explorations and discovery. In Proc. of the conf.on Libraries in the Digital Age (LIDA), pages 104–115, 2010.

[27] Ayman Moghnieh, Ernesto Arroyo, and Josep Blat. The news wall: Serendipitous discoveriesin dynamic information spaces. In Proc. of IUI’08, 2008.

[28] P. M. Morse. On browsing: The use of search theory in the search of information. Bulletinof the Operations Research Society of America, 19, 1971.

[29] C. North and B. Shneiderman. A Taxonomy of Multiple Window Coordinations. TechnicalReport CS-TR-3854, Univ. Maryland Computer Science Dept., 1997.

[30] Oxford English Dictionary. Website: http://www.oed.com/view/Entry/176387?redirectedFrom=serendipity#eid.visited March 2011.

[31] A. Rauber and H. Bina. A metaphor graphics based representation of digital libraries on theworld wide web: using the libviewer to make metadata visible. In Proc. of DEXA’99, pages286–290, 1999.

[32] J. Rice. Serendipity and holism: the beauty of opacs. Library Journal, 113(3):38–41, 1988.

[33] R. E. Rice, M. M. McCreadie, and S. L. Change. Accessing and Browsing Information andCommunication. MIT Press, Cambridge, 2001.

36


[34] M. F. Rosenman. Serendipity and scientific discovery. Journal of Creative Behavour,22:132–138, 1988.

[35] B. Shneiderman, D. Feldman, A. Rose, and X. F. Grau. Visualizing Digital Library SearchResults with Cathegorical and Hierarchical Axes. In Proc. of Digital Libraries, pages 57–65,2000.

[36] E. Toms. Serendipitous information retrieval. In DELOS workshop on "Information seeking,searching and querying in digital libraries", pages 17–20, 2000.

[37] P. van Andel. Anatomy of unsought finding. serendipity: Origin, history, domains, tradi-tions, appearances, patterns, and programmability. The British Journal for the Philosophy ofScience, 45(2):631–648, 1994.

[38] F.B. Viégas, E. Perry, E. Howe, and J. Donath. Artifacts of the presence era: Using informa-tion visualization to create an evocative souvenir. In Proc. Of the IEEE Symp. On InformationVisualization, pages 105–111, 2004.

[39] R. W. White, B. Kules, S. M. Drucker, and M.C. Schraefel. Supporting exploratory search.Communications of the ACM, 49(4):37–39, 2006.

37


38

Disc Content

BohemianBookshelfVideo.m4v A video of the final project

DBScripts Scripts to setup the database

Images Images used in the thesis

Presentations Presentations of the project in Calgary and in Munich

Program Runnable Versions of the Program including a description of how to run it

Screencaptures Screen captures of the program, also used in the final presentation

Sketches Early sketches, drawn during the design phase

Sourcecode The source code of the program

Thesis.pdf A pdf version of the thesis writeup

Thesis.tex The source file of the thesis writeup

ThesisBib.bib The bib-file of the literature used in the thesis

Documents

The Bohemian Bookshelf: Design and Implementation of a ... · 2.1 Serendipity and its Relation to Information Exploration It was a tale of the Three Princes of Serendip that inspired