Visual Companion for Booklovers

10/31/2020 ∙ by Zona Kostic, et al. ∙ 0

An innumerable number of individual choices go into discovering a new book. There are unmistakably two groups of booklovers: those who like to search online, follow other people's latest readings, or simply react to a system's recommendations; and those who love to wander between library stacks, lose themselves behind bookstore shelves, or simply hide behind piles of (un)organized books. Depending on which group a person may fall into, there are two distinct and corresponding mediums that inform his or her choices: digital, that provides efficient retrieval of information online, and physical, a more tactile pursuit that leads to unexpected discoveries and promotes serendipity. How could we possibly bridge the gap between these seemingly disparate mediums into an integrated system that can amplify the benefits they both offer? In this paper, we present the BookVIS application, which uses book-related data and generates personalized visualizations to follow users in their quest for a new book. In this new redesigned version, the app brings associative visual connections to support intuitive exploration of easily retrieved digital information and its relationship with the physical book in hand. BookVIS keeps track of the user's reading preferences and generates a dataSelfie as an individual snapshot of a personal taste that grows over time. Usability testing has also been conducted and has demonstrated the app's ability to identify distinguishable patterns in readers' tastes that could be further used to communicate personal preferences in new "shelf-browsing" iterations. By efficiently supplementing the user's cognitive information needs while still supporting the spontaneity and enjoyment of the book browsing experience, BookVIS bridges the gap between real and online realms, and maximizes the engagement of personalized mobile visual clues.



There are no comments yet.


page 2

page 4

page 7

page 8

This week in AI

Get the week's most popular data science and artificial intelligence research sent straight to your inbox every Saturday.

1 Related Work

Figure 2: BookVIS system architecture and its components. The architecture is designed to be simple, dynamic, scalable, and portable.

This paper uses the terms bookstore and library interchangeably, assuming that the object of interest - book - is the same. Unlike in libraries that are more often used for directed information searches, bookstores are spaces where browsing takes place more often. Disregarding the obvious differences, it seems that domain expertise, daily need, or just curiosity would trigger all actions in any of these settings.

Book information search has been mostly performed in online scenarios, supporting efficient information retrieval [46]. However, current interfaces are too complex, narrowing possibilities to a targeted search rather than book exploration [16]. ”Shelf-browsing” as a common action in library information search has more traditionally been performed in a physical setting - “library shelves are ideally suited to browsing and they have no electronic equivalent” [29]. Online recommender systems support browsing efficiently, but they require prior knowledge of a user’s preferences and/or check-out history. Problems users face when browsing online could be improved when supported by additional more varied and random objects coming from a real-world environment [7].

Online systems have been created for more intuitive information search, but they can be too complex for users who still prefer interaction with objects in physical spaces. This inspired some online bookstores to create user-centered interfaces bringing physical bookstore experiences for more efficient target spotting [16], [28]. However, instead of looking to browse data and understand the entire data corpus [22], [14], and [2], book lovers browsing in a physical space will generally focus their interest on a single book at the time.

However, getting more on-point book recommendations from a massive selection of books is becoming an interesting and desirable challenge to overcome. Most of the scientific community was focusing on helping users with personalized book recommendation systems, supported by complex visual exploration interfaces [48]. This approach has improved information searches in state-of-the art systems for bookstores and libraries [62]. Goodreads [20]

has been classified as one of the best solutions for personalized information retrieval. Most of the users agree that the Goodreads is the most complete book database, offering a robust application programming interface despite the need for an UI improvement (more about this in the Evaluation section).

Emphasizing the use of digital media in bookstores and libraries was a pioneering approach in bridging the physical and digital arenas. Big panels and screens augment people’s experiences, involve more natural behaviour, and enable on the spot information retrieval. What’s more, the interfaces were designed with users in mind focusing on easy-to-use [26], playful [55] [47], artistic [51], spatially interactive [1], and tangible [24] interfaces to support direct contact [13], [15] with a book of interest. ”Design strategies that combine social, spatial, and digital augment users’ cognitive sense in libraries” [8]. To improve the bookstore or library experience, information about the books should be integrated into the structures that exist in physical settings [42].

Before the COVID-19 pandemic, libraries were used to target spaces for deployment of digital realities, aiming to provide the users with an immersive experience for consuming resources and related metadata [37]. The immersive systems significantly reduce the time to search for a given target [38], [30]. Smart features that are used to augment visualization in book space enhances the reading experience and provides more efficient manipulation with objects in the real-world [53], [32]. Locating, navigating [50], [54], and keyword searching [57] are supported by virtual reality applications to augment spatial context-driven visualizations. For example, wayfinding has been used in libraries to perform goal-oriented search tasks [23]. Exploring a physical library allows users to choose different paths in a large book collection [29] and experience how subsets of books create different visual expressions on a bookshelf [4].

However, as many of these endeavors have relied on specialized virtual-reality technology, not everyone has the opportunity to utilize such devices in everyday life. Unlike digital reality applications, mobile phones have rapidly gained popularity due to their wide range of functionality and portability. The powerful processors and high resolution displays accommodate high-quality graphics with a fine level of detail [12]. People routinely consume data via portable devices, from weather forecasting to sleep readings [11]. Combined with appropriate visual data analysis, they become vital for rapid decision making [45]. In contrast to desktop-based applications for information visualization, mobile devices offer the potential to provide a dynamic and user-centered interface [33].

Portable devices are available in different screen sizes, offering different types of opportunities for insight, particularly in information visualization as the requirements for anytime/anywhere data access increase [35]. Compared to cell phones, tablets provide significant space for augmented reality-based content. However, with tablets users need to use both hands, and our choice in utilizing mobile phones was based on the capability to perform bi-manual interaction with the book and the application simultaneously. Smart watches would be the best option, bridging the gap between hands-free and user-based applications, but they currently lack the device embedded camera.

The need for personalized information in the form of recommendations is moving beyond current recommendation systems and towards the search for a meaningful representation of the book [3], while providing visual support in the discovery process. From a bulk of raw data, the idea is to visualize single book-related or personal information in order to construct a taste framework. The user can check her visualization of the personal data and use it as a dataSelfie [36] to understand and communicate the taste to others.

Designing data visualization for mobile context-based applications that supports physical experiences has many challenges. In the next chapter we will decompose all of them into three groups: web application infrastructure, image recognition modeling, and UX/UI and information design.

2 System and Information Architecture

This section provides a detailed description of components of the BookVIS application. The full-stack redesign of the original BookVIS project [31] is described, focusing on the system’s architecture, user interface, user experience, and information design and visualization.

2.1 System Architecture

The application architecture (fig. 2) is designed to be simple, dynamic, scalable, and portable. The current iteration has been set up to run on Amazon Web Services (AWS) [5], and takes advantage of several technologies offered by that platform, including two EC2 server instances, an Elastic File System, and orchestration via Elastic Beanstalk.

A dedicated EC2 server instance houses the model developed using Tensorflow and Keras, to support the recognition process. The EC2 instance is powered by a GPU which is able to more quickly compute the model, make it available to the application, and periodically re-train using new images. These may be images that are uploaded directly by users of the application when scanning book covers, but they may also be covered from other data sources to improve the model. This will ensure that the model is capable of recognizing an ever-increasing number of book covers over time.

The file system is mountable as an Network File System (NFS) volume accessible from all EC2 instances, including both the model and the web application. An Elastic Beanstalk environment is used to orchestrate the web application, and its related resources. Furthermore, a database which includes a more user specific information is required to be persistently maintained. The BookVIS application uses MongoDB database [39] for unstructured user-related data storage.

The user interacts with the application thought the web interface that provides an option to upload an image, and returns resulting information, recommendations, predictions, and most importantly - ”d3.js”-based visualizations [18]. The system is designed to process information on the fly as efficiently as possible, and a portion of the data is retrieved directly from online sources. Once the model ”recognizes” a book cover, a point-in-time data call is made to populate information about the book. This information about the user is also accessible via API, with some parts (e.g. users’ likes) being stored locally due to inability to access the Goodreads private database.

Additional API calls are made to the user’s Goodreads bookshelves to access custom lists the user has created, that may include books previously read, or any of lists of any possible interest the user may have as a reader. These lists serve as a reference point to assess the compatibility of the current book to the user’s previously saved books. Finally, and utilizing on-the-fly API calls again, users may save books to any of their previously created Goodreads lists, or create a new list, using the application.

2.2 Image Recognition Model

Successful image retrieval should include image preprocessing, image segmentation, extracting image features, or similarity comparison. Previous research in the computer vision field emphasizes research in a content-based image retrieval, classification, and analysis


. In content-based image retrieval and image classification-based models, high-level image features in the form of vectors are extracted and numerical values compared.

In cases when the models’ transformations are known, an effective technique is to extract a scale-invariant or rotation-invariant features, match them, compute the transform, and calculate the distance. We implemented Scalable Vocabulary Tree for Object Recognition (SIFT) as described in this paper [41]. SIFT descriptors extracted from local image regions are hierarchically quantized in a vocabulary tree that allows for more discriminatory vocabulary to be used efficiently as well as integrates indexing and quantization, allocating weights for each SIFT feature used in scoring. When a book cover image is captured, the algorithm will find the cluster that it corresponds to, and then it will be compared with the images in the cluster. After the vocabulary tree was constructed, we took the SIFT descriptors of the image and compared them using the distances with cluster centers values at each node of the tree.

Extracting SIFT features (fig. 3, bottom) proves great for various sorts of cover transformations. With the SIFT technique, the input image was easily extracted from the bookshelf background where the book was placed. However, it is inefficient to retrieve the correct book edition if the same cover design was introduced. Thus we decided to improve it by adding an Optical Character Recognition (OCR) model [43]. The OCR served well for phrases like “2nd edition” or retrieving the book data solely based on the image of the book spine.

Despite additional functionalities that OCR brings, some of the limitations are evident. First, geometrical distortions caused by the camera or the photo rotations decrease the chances of good quality text recognition. Second, handwriting typefaces were inaccurately recognized. Finally, most of the “edition” words are on the books’ spines. Unless we start using the image sequence as the input parameter (e.g. the combination of spine and cover images) some information is lost in one-to-one image models like the one used in this work.

As mentioned, keypoint detectors and feature descriptors are successful in describing local image structures. In computer vision, Convolutional Neural Networks (CNN) models have been proven to be the best performing candidates. Despite the fact that CNNs are generally defined as regressors, making selection problems (like implementing detectors) is very challenging, and recent methods have used CNNs for very fast keypoint detection

[44]. In addition to keypoints and descriptors, the bag-of-words (BoW) CNN models are used for successful implementation of image retrieval applications.

We used [49], a CNN_BoW model as the third model for book cover recognition. After fine-tuning, the model was retrained on the same image training data to learn projections and detectors. The proposed method does not require any manual annotation and takes care of tilted, distorted, or images with poor resolution. Furthermore, this method helped eliminating the need for data augmentation, while still being fast and requiring less memory.

Figure 3: Different quality of images of a single book cover (top); Different languages, books’ spines, and ”2nd edition” detail (middle); The model retrieves correct book information from a tilted query image (bottom).

Our final model consists of the combination of the three techniques, SIFT + OCR + CNN_BoW into an ensemble. Additionally, if a special word like “edition” is detected, it is stored in the database for further processing. Taking images of the books’ spines proved inefficient for unseen images with handwriting typefaces. Our focus was to resolve the most challenging cases like recognizing books from images taken at different angles or retraining the model with poor quality uploaded images from the user. Some additional steps were considered for further model improvement.

Figure 4: User Interface and User Experience Design. A set of available gestures has been presented with the top row; UX design to support a ”dashboard”-like narrative respecting Material Design guides (middle); thumb usability and transitions are presented with a bottom row illustrations.

2.3 UI/UX and Information Design

Unlike previous subsections, the design process cannot be translated into linear thinking nor be fully planned in advance. In needs to rely on the constraints imposed by the web application’s main concept. The BookVIS design ”converts” predominantly textual data into graphics, that should be visually symbolic and meaningful to the user, similar to the way that visual encoding in a lineup of five stars is immediately symbolic of a ranking. We started from an assumption that people can learn a lot about something using associations and quick visual interpretations (”glanceables”) will lead to more engagement with the physical objects and data browsing, while repeating the same actions will help understanding its symbolic.

To meet all the mentioned goals, we defined a set of design challenges that helped focus our design process: how to make information easily viewable at a glance; how to provide information that complements the object (a book in hand); how to create personal and visual database with easy to navigate user interface; how to generate a unique image of a personal taste as the novel visual communication language; and how to store a “physical experience” in a digital form. In order to respond to these challenges, the design process needed to be conducted under three separate subdomains: user interface, user experience, and information visualization.

2.3.1 User Interface and Experience Design

Data visualization designers often work across different specialisms, designing the overall user experience, organizing information architecture, and considering the granular representation of the user interface. For an efficient experience, we explored the way to translate users’ needs by considering their journeys and intentions in order to establish an overall aesthetic. All of the components heavily depend on the overall BookVIS concept, composition, device, and data. We are focusing on mobile phones as devices that can be easily manipulated with one hand, while at the same time think of a consistent user interface and enjoyable user experience.

When first introduced, mobile phones enabled an entirely new experience based on innovative applications. Good quality UI and UX design helped accustom users to naturally and intuitively using the devices. Still, some of the disadvantages of mobile phone’s exist, such as thumb size affecting touch points, small screen sizes, no mouse-like precision, no hover functionality, and shorter audience attention spans. Most of the anticipated behaviors from smartphone users is through gestures such as clicking, scrolling, or pinching. Although there is considerable progress in data visualization, we do not think that we are seeing the full spectrum of possibilities with gestural inputs on mobile applications perfectly integrated with visual representations [61].

An efficient UI and UX for small screen sizes, limited gestures, and maximum support for the user’s physical experience served as a guidance for the design choices, as did browsing over traditional information searches. To address the potential need for use in bookstores, delivering the experience of multiple visual representations was a priority. Some previous research in this space has explored the dashboard-like experience for small screens in the form of the multiple tiles, where each one is like a separate, portable device [33]. Using multiple linked charts was demonstrated one way to overcome screen limitation. However, typical interfaces on smartphones usually present thumbnail images or charts in a sorted list. Furthermore. using such a grid-based approach can become tiresome as typically much scrolling is involved to find a specific detail.

One of the key points of designing for mobile phones is the sense of presence. It is critical for creating a high performing experience. Apart from limited gestures, we needed to consider how transitions are handled from one view to another to provide relevant feedback by the UI components. Taking into account guides summarized with Google Material Design [21] and Adobe Design [56], we decided to take the traditional data dashboard-like organization and transform it into a meaningful narrative of connected pages. Following the predetermined and easy to remember connections between pages, the UI was designed for seamless navigation and an effective UX presence-awareness (fig. 4). While complex desktop applications typically use the concept of nested lists to accommodate this, in our case the user has to be able to access the information instantly and easily on the spot.

One possible approach to create touch-based interactions is to develop touch-traced patterns, which can then be recognized and used to trigger specific interface responses. These touch-gestures can quickly become complex and can be hard to learn and remember. Instead, our goal is to keep the touch interactions simple, with easy manipulation and navigation.

The BookVIS experience design concentrates around both user’s hands at the same time: one will hold the book and another the cell-phone. In such scenarios with limited focus and attention, users have to be able to navigate using only thumb fingers. That narrows down the already limited number of touch gestures we can implement. We decided to use the swipe similar to scrolling as the main gesture to move in between the pages, drag for the hover-like functionality, tap to select, and long press to save. Double-tap has been excluded, due to a very slow manipulation if the phone was used by a non-dominant hand.

Next, the organization of visualizations has to follow some meaningful order, for the sake of the easy navigation, memorization, and self-awareness. The user experience follows the organization presented with the figure 4, subsection ”navigation”. The pages will be populated with visualizations, and then, the suggested navigation will be translated into a meaningful visual narrative. The windows are divided into two groups: ”left-hand side” pages show the book-related information; ”right-hand side” pages are reserved for user-related visualizations. The switch between these two groups can take place with swiping left-right, while navigating in-between the groups takes place with swiping up-and-down.

2.3.2 Information Design

Visual exploration is a time-consuming and complex process, and a single analysis session can consist of hundreds of individual steps. Visualizing data on mobile phones is increasingly prevalent in practice, yet it has attracted little attention from the visualization research community [34]. Moreover, the users of our applications are not domain experts, making visualizations hard to grasp by the general audience [17]. We lack guidance on how to effectively design visualizations on small displays [11]. Spanning the contexts of informal data analysis, the BookVIS application specifically considers scenarios in which people encounter visual representations of multivariate data on mobile phones.

Figure 5: Iterations of the dataSelfie and How-it-fits creation process.

Before starting to read a new book, most users would take careful consideration of its genre, ratings, or reviews. Synopsis is also of interest to users, but given that it is usually presented with the book, we excluded it from our variables. Users also like to use applications to save their reading history. After a few consecutive sessions in libraries, if considering digital data (using cell-phones to gain more information) booklovers would most probably like to see:

  • More info about a particular book

  • Similar books to a book of interest

  • Other books from the same author

  • Store a book on device for later review

Additionally, after being given as an option, users would also like to know if a book is the “right” choice for them, will they like it, or how will it fit their tastes. More about this in the Evaluation section.

Besides having the user interface that helps user’s orientation and promotes effective user experience, the biggest challenge was to reach visualization goals while dealing with the small screen size and limited gestures to present information in a way that doesn’t distort it. Furthermore, we wanted to help users navigate data with context that emphasizes comparison. We also wanted to adapt visualizations which anticipate user needs on data depth, complexity, and modality. To overcome these dynamic design challenges, our goal was data visualizations that use custom styled shapes to make understanding on the fly easier, in ways that suit the user’s needs in a given context. Charts can additionally benefit from customizing the graphical elements like composition and typography, and we used our domain experiences to maximize its utilization. Following these new set of constraints, we crafted the three visualization scenarios: (1) learn more about the book in hand (ratings, likes, reviews… etc); (2) Visualize immediate connections such as similar books, popular shelves, or other books from the same author; (3) visualize personal taste in the form of visual data selfies [27] based on data from personal shelves, as well as use selfies to visualize how the newly discovered book fits the overall user’s taste. Finally, use similar colors to enable easy transitions between the states.

Unlike in some of the previous data selfie research [27], we included additional UI/UX constraints based on the teams’ previous experiences with graphics as well as Google and Adobe design principles. The fact that the vast majority of portable devices interactions last just under 5 seconds [9], brought an additional design constraint. Unlike with very simple charts, it hasn’t been widely determined what people can actually perceive from such “glanceable visualizations” during short periods of time and a limited display space. Thus, the data visualization design had to follow visual symbolism (associativity that symbols like logos bring) rather than complex data exploration for effective information retrieval of custom made charts. At the same time it had to provide visual clarity, bring associativity and personalization, and enable a symbol or a ”brand” expression and memorisation.

As with the UI/UX design, information design choices were determined by the two primary navigation choices (Fig. 4): book-related and user-related sections. Book-related “symbols” are using a book of interest as an anchor point, while user-related “selfies” consider the user’s personal shelf’s data. Personal shelves are all books users stored in their libraries, and among them are usually previously read books that users love, course materials or school books, books users would love to read, books the user wrote, or foreign books (including user’s native language or second language of interest). To support the division of book-related and user-related visualizations as well as to back the high-quality UI/UX design to support awareness, data design employed the application of unique visual marks.

The first visualization called a bookSelfie as its name implies, should tell something about that particular book, while following the symbolic pattern (fig. 1). Pattern will always change, but symbolic stays the same (similar how bar-charts change height or length, but the composition of ordered bars stays the same). Taking into account what majority of users would like to see (if interested in that particular book), we decided to visualize the following important components, in a clockwise manner: (1) information about the author; (2) book average ratings and total ratings; (3) book ratings distance (weighted average); and (4) book review’s count.

Furthermore, in order to maintain the color consistency throughout the application, we picked up and used the same colors as the cover of the book in the user’s hand. This way, the BookVIS application UI will always resemble the book cover, benefiting from a good color choices set by the book cover designers. Some examples of the book colors, covers, and selfies are presented with the image 6. To establish a set of colors that stand out from a perceptual perspective on the book cover, we used the k-means clustering algorithm

[59]. K-means categorizes a set of data points into ’k’ groups working on effective distance calculations in an unsupervised manner (the k-means python-module communicated directly with Flask application; for more information about the application architecture see Section 3).

The second visualization shows other books from the same author. According to this research for visualizing temporal data [11], bar-like charts are the most effective visualizations for mobile phones. Following this recommendation, we decided to come up with the stacked-barchart timeline pattern. Here, we extracted the cover colors (the top row) and emphasised the use of typography. The visualization follows the carousel principle, putting the book of interest on the timeline and allowing users to scroll left and right to explore more from the same author. Each time the user chooses another book, the background and the overall color scheme changes to the dominant cover colors. If the author has no more than two books (e.g. Tamara Munzner), “hidden” tiles will compensate for a lack of data (following a good strategy for design choices where data dictates the appearance of visualizations [58]).

For the “similar books” visualization, we used the matrix organization in which we rescaled the ratings and publication years into 5 x 5 fixed grid. For designing “glanceable visualizations” the intuition about the overall timeline is more important than the accurate scale. The combination of the book ratings and publication years always produces a semi-custom regression visualization. Patterns of this approach always differ for different book collections. Also, the Goodreads API retrieves similar books with almost the same ranges for similar books ratings (between 3.8 and 4.5 stars), assuming users would like to see highly rated books. This enabled us to focus on designing and visualizing other variables. The color scheme is consistent, and the depth of the color approximates the “trust” in rating (how many ratings are there per book). The color itself suggests that books are coming from the same genre.

On the right side (fig. 4, navigation), there are user-related data and the corresponding visualizations: How-it-fits, dataSelfie, and myRose, following a circle as a guiding visual symbolism. Once the user has taken a photo of the book, the BookVIS application will generate visualizations following the described color scheme. The How-it-fits visualization takes saved books from the user’s Goodreads account, stores them in the local app’s database, and generates the dataSelfie. Then, the selfie is used as the basis for the How-it-fits visualization, to compare the newly discovered book to the rest of the user’s library. The final design choice for this visualization is based on the intersections between genres the group belongs to and clipping the inner section of it. Here, we allow for dynamic design to take place, given the inconsistent number of genres associated with a single book. Amid the underlined color, it should always be clear how close or far the newly discovered book is from the user’s taste.

Figure 6: From the top to bottom: dominant colors, How-it-fits for a single user, bookSelfies, dominant colors, and different users myRose diagrams.

The biggest challenge for us was creating the dataSelfie

, as the main and leading visualization to illustrate the relatedness of a user’s reading preferences. The idea behind the selfie design started from collecting the genres into histogram (fig. 5). Each book has many genres associated with it thus, piling up and stacking genres would give us the overall idea of the most attractive user’s choices. Book lovers do not necessarily like books coming from one or two genres, more the range of it, and the suggested bell-curved genre distribution was selected to estimate it. This idea was nicely aligned with newly discovered books for

How-it-fits visualization. A fitness of a new book to the user’s taste can be measured by utilizing visual distances from the genre “peaks” a book belongs to. The book is situated by locating the position of genres it belongs to, constructing the shape that connects them, and placing the dot in the middle of it. Furthermore, the bigger the peak, the “stronger” the force that will move the dot towards it, penalizing the “less” important genres.

Maintaining a bell-like curve, we employed a circular radial chart to avoid path overlapping and to visually decouple the exterior genre count from the interior multi-genre coordinate position indicators. This idea evolved when dot density was measured and used to form topographic contours with distinct shapes and coloring. The resultant visual symbol serves as a unique personal ”logo” or dataSelfie for each user and was further optimized for the comparative interpretation of a ”book of interest” in the the How-it-fits visualization, by toggle-sorting genre count. Sorting became an important first step of undoing the misleading side-effects of alphabetical ordering and for shifting contour alignments away from the circle center. A standard reading would lift high genre books to top of the chart and sink low genre books to the bottom. However, without improved genre hierarchical classification and rating-based genre refactoring, certain test books yielded confusing results for users.

The final visualization, myRose, takes the eponymous form of a rose diagram, comparing user ratings and average ratings for each book in a user’s library. This strategy highlighted several important trends, including indications of individual taste, ’average’ taste, and of the range of a user’s critical lean. The Evaluation section shows various patterns encountered from readers with different reading and rating habits. Transitions between visualizations as well as interactions also allow users to immediately perceive that the chart was updated to a revised view and to rebase readings according to anchor variables (e.g., ’user rating’ or ’average rating’).

3 Evaluation

We conducted two different types of surveys: internal and external. First, we used all of our own private book collections to help understand certain design choices, emphasizing obviously different reading tastes between authors. We benefited from unique book collections to help us design selfie symbols. Different personal libraries helped designing visually consistent, yet unique shapes of personal tastes.

Afterwards, we conducted an external survey with 6 participants. Figure 8 (appendix) shows all the tasks and questions asked, as well as the responses we got from the participants. We worked with these participants to understand the impactfulness of our visualizations. We asked them to evaluate some of the book-related data including the cover color resemblance and the personal data in the form of selfies.

All participants in the evaluation are experts in the field of information and library sciences and none of them had any experience with data visualization. They provided a large number of book collections stored in Goodreads, which although they highly recommended, also commented on its poor UI. We used their private collections to create personal selfies, rose, and personal taste diagrams, while for the book-related data we picked a single set and passed the same questions to all participants. During the evaluation process, we asked users to emphasise their home libraries in order to measure the importance of suggested visualizations to the quality of a physical experience. Participants were not recruited in a bookstore due to a restricted recruiting timeline.

At the beginning of the process, participants were only informed that we were developing an application for booklovers and bookhunters, but were not aware of its final design, look, nor intent. As such, we felt we got varied responses related to the visualizations’ usability as well as the look of dataSelfie, which will be beneficial for the next redesign cycle. For How-it-fits visualizations, we used the same 10 books with all participants, combined with their personal book placements for each book to ”understand” the taste. Books are coming from different genres, all of them are highly rated, and with similar (and large) number of ratings. We tried to pick the generally “likable” books as these tend to be the books more prominently displayed in bookstores’ prime spots, but not necessarily according to everyone’s taste.

In general, participants thought it was a nice touch that book-related visualizations followed the colors of the book cover image. Most of the participants (5 out of 6) were able to read and understand the bookSelfie visualization. However, stacked-barcharts timeline visualizations were not immediately clear, although the bars with colors were recognized as cover colors. The dataSelfie visualization was also not clear at first glance. One of the participants said - It is showing some trend outside the circle, but I am not sure if there is any relationship between the part that’s outside the circle and the dots that are inside. However, after providing more information about what the dataSelfie is - This is the ”look” of all the books coming from your Goodreads library, participants were able to read it without problems. Most of them expressed the excitement regarding the personal taste visualization idea.

The effectiveness of the book placement algorithm that generates the How-it-fits visualization was highly rated. All 6 participants claimed the new book placement indicator (the ”black dot”) within a selfie corresponded to their personal taste and well described the probability of ”likeness”.

Figure 7: Subjective analysis and evaluation of dataSelfies with designers.

Lastly, we asked 3 experienced graphics designers to share some thoughts regarding the selfie patterns. We present the summary in the form of a subjective analysis. As we looked more closely into the dataSelfies in order to spot obvious similarities or differences, we noticed a couple of “trends” as shown in the fig. 7. Participants “a” and “b” had nearly identical book tastes. That is evidenced by “peaks” concentrated around the same genres (dataSelfie is extracted by ordering genres alphabetically). Selfies also show some visual similarity in their construction as well as orientation. For example the number of outline shades as well as the inner black areas are very similar. Furthermore, user “c” also shows a huge interest in books similar to users “a” and “b”. However, user “c” also has a broad interest in other topics. Usually, having interest in many different genres is shown by less “dense” contours, that is present with users “c”, “d”, “e”, and “f”. We could argue that users “a” and “b” have a very clear reading taste, unlike user “d” for example. Users “e” and “f‘ provided very large Goodreads book collections (800 and 1200 books respectively), and the similarity between these two dataSelfies is evident in the same inner circle size and two obvious outline shades.

After observing selfie patterns, we looked more closely at participants’ answers (Fig. 8, Appendix), in order to understand the level of excitement and practicality of the application. One of the questions prompt participants to estimate their next most probable move - You are in a bookstore looking for a new book to buy. After taking a look at a random book and obtaining more information using ”glanceable” visualizations, what would be your most probable next step?. Out of all 6 participants, the user “f” had the most unique response to the question. She stated: After considering the How-it-fits, the book selected is NOT to according to my taste, so I continue to browse the [physical] shelves. The user “f” selfie specifically shows the largest inner dark area, indicating a real book-lover with an unspecified preferable genre. After a few ”checks” performed with How-it-fits visualization, readers gained trust with the placement model that, not only supports their decision process, but also motivates new browsing cycles.

4 Conclusion and Future Work

In this paper we have presented the results of the BookVIS application, which keeps track of the user’s reading preferences and generates a dataSelfie as an individual snapshot of a personal taste that grows over time. The app behind this insight is a product of several iterations of design evolution, and includes an efficient image recognition algorithm, system and information architecture model, and mobile data design and visualization. Usability testing has also been conducted and has demonstrated the app’s ability to identify distinguishable patterns in readers’ tastes that could be further used to communicate personal preferences in new “shelf-browsing” iterations.

The complexity of such a system highlighted some limitations and many future avenues for improvement. Among them are making comparisons between multiple books, taking pictures of books situated together, and generating multiple overview dashboards. We envision enabling users to simultaneously input more context, i.e., by taking a picture of the entire stack or a bookshelf. More contextual information about the books could be provided, such as the location of the book or similar books within a physical space. These approaches would challenge our smart-phone based visual dashboard, with a new set of contributions provided in the information design, UI, and UX domain.

After exploring users’ surveys, we noticed a couple of edge cases that we didn’t take into account and we would love to address them in the application’s future iterations. We focused all visualizations on a single author, but some books have two and more authors. In this BookVIS version, if the book has more than one author, we extracted only the first one. However, the overall visualization concept needs to address this issue. This change will influence not only a redesign of the visualizations, but also components of the system architecture.

As mentioned above, users we tested with seemed to like that the application colors mimic the cover image, but they were unsure how multiple cover designs of the same book would be handled. For the recognition algorithm this is actually a minor issue, but what we are truly interested in is the effect of different covers and colors on differing users’ palettes, perception and cognition, and the subsequent overall “reading” of the BookVIS visual symbols. The dominant color picker doesn’t always pick up colors that serve as preattentive visual features. We tested the extraction of more than four dominant colors, but even then, we are not necessarily extracting the most dominant features. Also, more than four colors significantly hardens the coloring of all visualizations. One possible solution to this problem would be using different unsupervised learning techniques or exploring visual saliency techniques and preattentive attention modeling.

Good design promotes unlimited opportunities for further redesign. For BookVIS, the selfies extraction and the insights they produce need more iterations in order to be truly mature. The dynamic redesign - the possibility to encounter for the current as well as the future variables - makes this significantly more complex. Furthermore, we’ll need to run more experiments with a larger and more diverse pool of users to be able to estimate certain selfie shapes and patterns with more confidence. Conducting such experiments demand a well-designed user study with a large number of carefully selected participants. This is the most probable future path for the next BookVIS redesign.



  • [1] M. Allalouf, D. Mendelsson, and E. Mishustin. Visfacet: Facet visualization module for modern library catalogues. 2014.
  • [2] A. Almjawel, S. Bayoumi, D. Alshehri, S. Alzahrani, and M. Alotaibi. Sentiment analysis and visualization of amazon books’ reviews. In 2019 2nd International Conference on Computer Applications Information Security (ICCAIS), pp. 1–6, 2019.
  • [3] S. Anvari and H. Amirkhani. Book2vec: Representing books in vector space without using the contents. In

    2018 8th International Conference on Computer and Knowledge Engineering (ICCKE)

    , pp. 176–182, 2018.
  • [4] I. Aslan, M. Murer, F. Primessnig, C. Moser, and M. Tscheligi. The digital bookshelf: Decorating with collections of digital books. In Proceedings of the 2013 ACM Conference on Pervasive and Ubiquitous Computing Adjunct Publication, UbiComp ’13 Adjunct, p. 777–784. Association for Computing Machinery, New York, NY, USA, 2013. doi: 10 . 1145/2494091 . 2497318
  • [5] A. W. S. (AWS). Cloud computing services. (accessed: 09.28.2020).
  • [6] C. Barliant. The art of browsing. (accessed: 09.28.2020).
  • [7] M. J. Bates. Information needs and seeking of scholars and artists in relation to multimedia materials. (accessed: 09.28.2020).
  • [8] M. Bilandzic and D. Johnson. Hybrid placemaking in the library: designing digital technology to enhance users’ on-site experience. The Australian Library Journal, 62(4):258–271, 2013. doi: 10 . 1080/00049670 . 2013 . 845073
  • [9] T. Blascheck, L. Besançon, A. Bezerianos, B. Lee, and P. Isenberg. Glanceable visualization: Studies of data comparison performance on smartwatches. IEEE Transactions on Visualization and Computer Graphics, 25(1):630–640, 2019.
  • [10] K. Blumenstein, C. Niederer, M. Wagner, G. Schmiedl, A. Rind, and W. Aigner. Evaluating information visualization on mobile devices: Gaps and challenges in the empirical evaluation design space. In Proceedings of the Sixth Workshop on Beyond Time and Errors on Novel Evaluation Methods for Visualization, BELIV ’16, p. 125–132. Association for Computing Machinery, New York, NY, USA, 2016. doi: 10 . 1145/2993901 . 2993906
  • [11] M. Brehmer, B. Lee, P. Isenberg, and E. K. Choe. Visualizing ranges over time on mobile phones: A task-based crowdsourced evaluation. IEEE Transactions on Visualization and Computer Graphics, 25(1):619–629, 2019.
  • [12] M. Brehmer, B. Lee, P. Isenberg, and E. K. Choe. A comparative evaluation of animation and small multiples for trend visualization on mobile phones. IEEE Transactions on Visualization and Computer Graphics, 26(1):364–374, 2020.
  • [13] B. Brinkman and S. Brinkman. Ar in the library: A pilot study of multi-target acquisition usability. In 2013 IEEE International Symposium on Mixed and Augmented Reality (ISMAR), pp. 241–242, 2013.
  • [14] M. Burch, D. Pompe, and D. Weiskopf. An analysis and visualization tool for dblp data. In 2015 19th International Conference on Information Visualisation, pp. 163–170, 2015.
  • [15] D. Chen, S. Tsai, C. Hsu, J. P. Singh, and B. Girod. Mobile augmented reality for books on a shelf. In 2011 IEEE International Conference on Multimedia and Expo, pp. 1–6, 2011.
  • [16] H. Chen, W. Lin, and B. Chen. Bookwall: Visualizing books online based on user experience in physical bookstores. In 2016 IEEE Pacific Visualization Symposium (PacificVis), pp. 249–253, 2016.
  • [17] E. K. Choe, B. Lee, and m. c. schraefel. Characterizing visualization insights from quantified selfers’ personal data presentations. IEEE Computer Graphics and Applications, 35(4):28–37, 2015.
  • [18] D3.js. Data-driven documents. (accessed: 09.28.2020).
  • [19] A. L. et al.

    Content-based image retrieval and feature extraction: A comprehensive review. (accessed: 09.28.2020).
  • [20] Goodreads. The the world’s largest site for readers and book recommendations. (accessed: 09.28.2020).
  • [21] Google. Material design. (accessed: 09.28.2020).
  • [22] M. Halbert and A. Krowne. An initial evaluation of automated organization for digital library browsing. In Proceedings of the 5th ACM/IEEE-CS Joint Conference on Digital Libraries (JCDL ’05), pp. 246–255, 2005.
  • [23] G. Hibberd. Speculative metaphors : a design-led approach to the visualisation of library collections. Master’s thesis, University of Technology, Sidney, 2018.
  • [24] U. Hinrichs, S. Butscher, J. Müller, and H. Reiterer. Diving in at the deep end: The value of alternative in-situ approaches for systematic library search. In Proceedings of the 2016 CHI Conference on Human Factors in Computing Systems, CHI ’16, p. 4634–4646. Association for Computing Machinery, New York, NY, USA, 2016. doi: 10 . 1145/2858036 . 2858549
  • [25] D. Huang, M. Tory, B. Adriel Aseniero, L. Bartram, S. Bateman, S. Carpendale, A. Tang, and R. Woodbury. Personal visualization and personal visual analytics. IEEE Transactions on Visualization and Computer Graphics, 21(3):420–433, 2015.
  • [26] Y. Huang, K. Wu, and S. Tsau. A study on information seeking behaviors of differing age groups using e-book walls in a library. In 2017 International Conference on Applied System Innovation (ICASI), pp. 177–180, 2017.
  • [27] N. W. Kim, H. Im, N. Henry Riche, A. Wang, K. Gajos, and H. Pfister. Dataselfie: Empowering people to design personalized visuals to represent their data. In Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems, CHI ’19. Association for Computing Machinery, New York, NY, USA, 2019. doi: 10 . 1145/3290605 . 3300309
  • [28] T. Kim. Best book shelf. (accessed: 09.28.2020).
  • [29] E. Kleiner, R. Rädle, and H. Reiterer. Blended shelf: Reality-based presentation and exploration of library collections. In CHI ’13 Extended Abstracts on Human Factors in Computing Systems, CHI EA ’13, p. 577–582. Association for Computing Machinery, New York, NY, USA, 2013. doi: 10 . 1145/2468356 . 2468458
  • [30] Z. Kostic. Hololibrary: Augmented reality information visualization system for bookstores and libraries. (accessed: 09.28.2020).
  • [31] Z. Kostic, N. Weeks, J. P. Dreessen, J. Dowey, and J. Baglioni. Bookvis: Enhancing browsing experiences in bookstores and libraries. In SIGGRAPH Asia 2019 Posters, SA ’19. Association for Computing Machinery, New York, NY, USA, 2019. doi: 10 . 1145/3355056 . 3364594
  • [32] S. Kumar. Nimble - augmented reality book-based library. (accessed: 09.28.2020).
  • [33] R. Langner, T. Horak, and R. Dachselt. Vistiles: Coordinating and combining co-located mobile devices for visual data exploration. IEEE Transactions on Visualization and Computer Graphics, 24(1):626–636, 2018.
  • [34] B. Lee, E. Choe, P. Isenberg, K. Marriott, and J. Stasko. Reaching broader audiences with data visualization. IEEE Computer Graphics and Applications, 40(02):82–90, mar 2020. doi: 10 . 1109/MCG . 2020 . 2968244
  • [35] B. Lee, P. Isenberg, N. H. Riche, and S. Carpendale. Beyond mouse and keyboard: Expanding design considerations for information visualization interactions. IEEE Transactions on Visualization and Computer Graphics, 18(12):2689–2698, 2012.
  • [36] G. Lupi. Data selfies. (accessed: 09.28.2020).
  • [37] C. Malinchi, A. Ciupe, S. Meza, and B. Orza. A mobile exploration solution for virtual libraries in higher education. In 2017 IEEE 17th International Conference on Advanced Learning Technologies (ICALT), pp. 490–492, 2017.
  • [38] e. a. Mi Jeong Kim. Implementing an augmented reality-enabled wayfinding system through studying user experience and requirements in complex environments. In Visualization in Engineering, 3, 14, 2015. doi: 10 . 1186/s40327-015-0026-2
  • [39] MongoDB. Database for web applications. (accessed: 09.28.2020).
  • [40] T. Munzner. Visualization Analysis and Design. AK Peters Visualization Series. CRC Press, 2015.
  • [41] D. Nister and H. Stewenius. Scalable recognition with a vocabulary tree. In

    2006 IEEE Computer Society Conference on Computer Vision and Pattern Recognition (CVPR’06)

    , vol. 2, pp. 2161–2168, 2006.
  • [42] L. Norrie, M. Koelle, R. Murray-Smith, and M. Kranz. Putting books back on the shelf: Situated interactions with digital book collections on smartphones. In Proceedings of the 12th International Conference on Mobile and Ubiquitous Multimedia, MUM ’13. Association for Computing Machinery, New York, NY, USA, 2013. doi: 10 . 1145/2541831 . 2541871
  • [43] T. OCR. Google. (accessed: 09.28.2020).
  • [44] U. Ozaydin, T. Georgiou, and M. Lew. A comparison of cnn and classic features for image retrieval. 2019 International Conference on Content-Based Multimedia Indexing (CBMI), Sep 2019. doi: 10 . 1109/cbmi . 2019 . 8877470
  • [45] A. Pattath, B. Bue, Y. Jang, D. Ebert, X. Zhong, A. Ault, and E. Coyle. Interactive visualization and analysis of network and sensor data on mobile devices. In 2006 IEEE Symposium On Visual Analytics Science And Technology, pp. 83–90, 2006.
  • [46] J. Pearce and S. Chang. Exploration without keywords: The bookfish case. In Proceedings of the 26th Australian Computer-Human Interaction Conference on Designing Futures: The Future of Design, OzCHI ’14, p. 176–179. Association for Computing Machinery, New York, NY, USA, 2014. doi: 10 . 1145/2686612 . 2686639
  • [47] e. a. Peter Gall Krogh. ”help me pull that cursor” a collaborative interactive floor enhancing community interaction. Australasian J. of Inf. Systems, 11, 2004.
  • [48] D. Qian, C. Yang, and C. Li. The application of visualization techniques in recommendation systems. In 2015 8th International Conference on Biomedical Engineering and Informatics (BMEI), pp. 656–660, 2015.
  • [49] F. Radenovic, G. Tolias, and O. Chum. CNN image retrieval learns from bow: Unsupervised fine-tuning with hard examples. CoRR, abs/1604.02426, 2016.
  • [50] Z. Rashid, E. Peig, and R. Pous. Bringing online shopping experience to offline retail through augmented reality and rfid. In 2015 5th International Conference on the Internet of Things (IOT), pp. 45–51, 2015.
  • [51] A. Rohde, B. Sundararajah, S. Bech-Petersen, and K. GrOnbaek. Infogallery: informative art services for physical library spaces. In Proceedings of the 6th ACM/IEEE-CS Joint Conference on Digital Libraries (JCDL ’06), pp. 21–30, 2006.
  • [52] Z. I. Saleh and A. S. Mashhur. The impact of e-books on the printed books: e-books popularity, growth and future. In 2015 Fifth International Conference on e-Learning (econf), pp. 125–130, 2015.
  • [53] e. a. Sam Wander. Enlight: Augmented reading. (accessed: 09.28.2020).
  • [54] P. Siddappa. librari - interactive experience at library with augmented reality. (accessed: 09.28.2020).
  • [55] A. Thudt, U. Hinrichs, and S. Carpendale. The bohemian bookshelf: Supporting serendipitous book discoveries through information visualization. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, CHI ’12, p. 1461–1470. Association for Computing Machinery, New York, NY, USA, 2012. doi: 10 . 1145/2207676 . 2208607
  • [56] url address for Adobe Blog. Adobe user interface and user experience guides. (accessed: 09.28.2020).
  • [57] url address for Ben Burgh. Book browse for ar library application. (accessed: 09.28.2020).
  • [58] J. Walny, C. Frisson, M. West, D. Kosminsky, S. Knudsen, S. Carpendale, and W. Willett. Data changes everything: Challenges and opportunities in data visualization design handoff. IEEE Transactions on Visualization and Computer Graphics, 26(1):12–22, 2020.
  • [59] J. Wu. Advances in K-means Clustering: A Data Mining Thinking. Springer Publishing Company, Incorporated, 2012.
  • [60] T. Yamamoto, H. Aida, D. Yamashita, Y. Honda, and M. Miki. E-book browsing method by augmented reality considering paper shape. In 2017 International Symposium on Ubiquitous Virtual Reality (ISUVR), pp. 30–33, 2017.
  • [61] Q. Yang. Not all gestures are created equal: Gesture and visual feedback in interaction spaces. (accessed: 09.28.2020).
  • [62] H. Zhang, Y. Xiao, and Z. Bu. Personalized book recommender system based on chinese library classification. In 2017 14th Web Information Systems and Applications Conference (WISA), pp. 127–131, 2017.


Figure 8: Evaluation