# GalViz: Visualize Social Bookmark Management

Lilian Weng and Filippo Menczer
School of Informatics and Computing, Indiana University Bloomington, USA

# Context Visualization for Social Bookmark Management

Lilian Weng and Filippo Menczer
School of Informatics and Computing, Indiana University Bloomington, USA

###### Abstract

We present the design of a new social bookmark manager, named GalViz, as part
of the interface of the GiveALink system. Unlike the interfaces of traditional
social tagging tools, which usually display information in a list view, GalViz
visualizes tags, resources, social links, and social context in an interactive
network, combined with the tag cloud. Evaluations through a scenario case
study and log analysis provide evidence of the effectiveness of our design.

Keywords: social tagging, social links, Web content, visualization, interface,
layout, network, GiveALink

##  1 Introduction

Social tagging is a flexible and powerful way to assist users who
collaboratively organize and share Web resources, as is widely done in many
popular Web 2.0 applications. Various kinds of online resources can be tagged,
reflecting user interests and making such resources more easily accessible to
the public. The basic relationship in social tagging is defined by the triple,
a tripartite combination of a user, a tag and a resource. To clearly display
and manage a large number of triples is a pretty hard problem, since they
involve complicated relationships among objects of three different types.

Current social bookmark managers display collected resources in simple list
views, distributed across multiple pages. Such a linear display of resources
neglects contextual information and weakens the relationships between
resources and tags. Socio-semantic connections among users through shared
annotations driven by common interests are hidden, since most existing systems
completely separate the personal and global views. Semantic relationships
among related tags and among related resources are deemphasized as well. Our
design aims to ameliorate these problems for facilitating the management of
complex relationships hidden in the social annotations. In particular, the
design adds value to the user experience by visualizing tripartite
relationships as networks.

##  2 Motivation

Social tagging collections, also known as social bookmarks or _folksonomies_ ,
are generated by spontaneous behavior of users, helping people manage and
organize their resources [15]. Existing social tagging sites usually
incorporate components such as resource lists assisted with tag lists, tag
clouds and hierarchical clusterings. However, each display has deficiency
limiting its functionality and usability. The imperfection of current systems
encourages us to design and develop a better alternative application.

Figure 1: Interfaces of existing social bookmark managers: (a) Delicious.com
(b) Flickr (c) Firefox Bookmark Manager.

List View: List views are widely adopted for displaying a group of items of
the same type. The interface of Delicious, as an example, consists of a list
of resources and a list of all tags (Fig. 1a). The resource list occupies most
space of the page, emphasized as the main content. Tags are crowd-sourced
keywords for indexing resources, so the tag list is treated as an auxiliary
sidebar. In this case, resources and tripartite relationships are displayed
linearly. List views sequentially present the resources according to a certain
order, hiding the links among resources, other similar resources and
semantically related tags. Key contextual information, such as similar sites,
people who have interests in it, and their collections, could be very valuable
for fostering a better understanding of the site and the exploration of other
relevant and interesting objects; but it is missing.

Tag Cloud: The tag cloud is a visual depiction of tags in the whole collection
to facilitate tag browsing (Fig. 1b). Tags are arranged in alphabetical order;
font sizes and colors are configured to highlight the most popular ones. Tag
clouds provide users with a global view to learn which tags are used by most
people, but they possess several disadvantages too. Flat tag clouds are not
sufficient to provide a semantic, rich and multidimensional browsing
experience over large tagging spaces, due to their inefficient navigations,
downgrading of alternative views, and lack of emphasis on the semantic
relationships [11, 17]. Tag clouds obscure useful information by having a
strong bias towards very popular tags [7, 10]. They usually don’t have enough
space to contain all the tags, so a portion of resources still remain
inaccessible through the tag clouds [10].

Browser Bookmarks: The hierarchical display of tags is naturally embedded in
bookmark managers of Web browsers (Fig. 1c). The browser tagging system is
designed to be very similar to a file explorer, where tags are organized in a
folder-like hierarchical structure. Resource categorization is restricted by
the structure of tags, and only the child-parent relations get apparent.
Therefore, when the collections of bookmarks become larger, it is hard for
users to efficiently find a specific resource or discover related items [16].
Without support for cross references, each resource instance can only belong
to one folder. Although multiple copies of the same resource can be assigned
to different tags, they are distinct instances, leading to duplication and
inconsistency.

##  3 Related Work

There is sparse literature on the design principles of social tagging tools
[7, 9, 20]. Some work has been done on building hierarchy structure from the
social tagging to uncover the hidden child-parent semantics [4, 19].
Visualization, as a powerful type of social bookmarking tool, has been studied
and utilized in several existing designs. Visualization of hyperlinks between
Web pages was adopted to enhance adaptive navigation [21]. Cluster Map, a
social bookmark visualization tool, highlighted the relationships among users
and bookmarks to identify tag and community structures [12]. Unlike
ClusterMap, GalViz is designed to emphasize the semantic relationships between
tags and resources to help users manage existing resources and discover new
ones. Besides, the graphical interface was shown to be useful for distributed
collaborations and interactions on social bookmarking [6]. Graphical
visualization of concept networks was integrated into several Web applications
as an innovative interactive user interface [2, 3]. Most of such existing
applications display context of items of the same type, but GalViz is able to
provide the visualization of heterogenous networks among two different
objects, tags and resources.

GiveALink.org, as a research-oriented social tagging platform, broadly
examines several aspects of social tagging to foster the construction and
applications of socially driven semantic annotation networks. Previous
research includes the design of effective similarity relationships [14],
social spam detection [13], and social tagging games as incentive for
collecting high-quality annotations [22]. Former work in GiveALink on
exploratory navigation interfaces [8] and bookmark management [18] have
significant influence on the new design presented in the paper.

##  4 Design Goals

_GalViz_ is an innovative bookmark management tool in the _GiveALink_ system
(Fig. 2). We aimed to achieve several design goals, to help overcome the
weakness of existing systems and improve user experience. Network display,
contextual maps, and social relationships are three core concepts.

Figure 2: Implementation of _GalViz_ : (a) Choose from two modes, either the
traditional list view or the network visualization. (b) Tag cloud of all
personal tags; the font size of a tag is proportional to its popularity. (c) A
switch between the personal view and the social view. The social view displays
additional relevant resources and tags based on other people’s collections.
The local items are green nodes, and the global items are purple ones. (d) The
filter allows one to expand available resources in the network with more
related tags. (e) Visualization of tags and resources. (f) Contextual menu of
a node. The sample menu is for a local resource, so the user has full control
over it, including editing the title, changing the tags, or removing it. If
the resource doesn’t belong to the user, she has to add it to her local
collection prior to making further changes.

###  4.1 Facilitate Annotation Management with Visualization

_GalViz_ visualizes personal bookmarks in an interactive network. Each node
represents a Web resource or a tag; related objects are connected. The default
network is centered at selected tags, and gets expanded by relevant triples.
It is easier to interpret than pure text [5]. Furthermore, users only need to
concentrate on a small area of the visualization, and therefore they can
quickly spot the target node by the text or favicon. The network provides an
interactive way to easily edit or remove any node through a contextual menu.
The menu shows different options according to the characteristics of the node:
whether it is a resource or a tag, and whether it belongs to the user’s
personal collection. Dragging and dropping nodes create operation shortcuts. A
GalViz bookmarklet allows users to easily add new resources and view their
semantic context.

###  4.2 Provide Contextual Maps

Currently, neither browsers nor popular social tagging sites visualizes a
page’s semantic context beyond its content. Therefore, when users need to tell
what a page is about, they learn based on the information inside the page
itself. To improve this, GalViz strives to provide valued and helpful
knowledge by exposing links with correlated tags and resources. Users are
therefore provided with contextual maps of semantic relationships of a tag or
Web page in terms of related tags and pages. Users can use such a map as an
alternative channel to understand the content and context of the target, as
well as to navigate the Web by visiting or exploring related objects.

###  4.3 Highlight Social Relationships

In social tagging systems, no matter whether users communicate directly, they
are always potentially connected by shared interests in certain resources or
similar agreements on the resources’ descriptions. One limitation of the
current interface [1] is that personal resources and the global repository are
completely separated, and consequently users cannot easily discover their
social connections with others. People have different views of same resources,
so learning others’ annotations can help improve one’s understanding and
optimize one’s collection. GalViz brings the idea of social view instead of
global view. The social view expands the local (personal) resources and tags
of a user with globally related triples, making it easier to find out what
other people view as similar objects.

###  4.4 Do Not Overwhelm Users with Information

Information overload is a common problem faced by many crowdsourcing sites.
Once a large group of users get into the system and contribute to the
knowledge repository, it is impossible for anyone to browse every piece of
information. Therefore, customization of the results becomes necessary. To
avoid overwhelming users, we propose a set of content filters in the design to
limit the network expansion, and to switch between personal and social view.

##  5 Implementation

_GalViz_ incorporates two styles of browsing, the _list_ mode and the
_visualization_ mode, as well as a _bookmarklet_ (Fig. 3(a)) gadget helping
add new resources.

Visualization: The visualization of bookmarks as a network with rich
contextual information is the core design of GalViz. As Fig. 2 shows, the
visualization mode is formed of a tag cloud on the left and a main bookmark
network canvas on the right. Several options on the top endow users with the
ability to switch between different views or filter out the results.

List: We provide a traditional list view to assist users gradually accommodate
to the new interface. The list view is also used for evaluation by comparison
between the two modes. Similar to the visualization mode, the list interface
has a tag cloud on the left, and the main content on the right where resources
of selected tags are listed. Personal and social view separate the local
resources and globally popular ones, with a switch similar to Fig. 2(a).

Bookmarklet: The bookmarklet is a small applet, working as a normal bookmark
item but with customized javascript code to provide additional functions
beyond simply opening a Web page. The GalViz bookmarklet is an extension of
the visualization service providing easy access to the contextual map of the
current Web page.

##  6 Case Study

Scenario:

A friend recommends the site Engadget.com.

Goal:

To learn the content and context of _Engadget_ through the social tagging
system, and then annotate it with a set of proper tags in the personal
bookmark collection.

Solution:

Let us consider how a user accomplishes the task through _Delicious_ and
GalViz, respectively:

(1) Through Delicious: First, the user visits Delicious and searches for
“engadget.com”. She should be able to see top popular tags about Engadget.
Second, the user clicks on “Save this site” on the top right corner and fills
in the pop-up dialog box to tag the bookmark.

(2) Through GalViz: While browsing the Engadget site, the user can access
GalViz by simply clicking the GalViz bookmarklet (Fig. 3a). After choosing
“View context visualization” (Fig 3b), he can see the contextual information
about Engadget. Through the right-click menu, the target site, as the center
of the visualization, is added into the personal view (Fig. 3c) with tags
customized on the system recommendations (Fig. 3d). The final visualization
will be the personal view of Engadget associated with user tags and other
relevant Web resources (Fig. 3e).

Users need to type in the required information and read the text in detail to
look for proper links in _Delicious_. GalViz provides a more transparent and
embedded service through the bookmarklet, and visualizes the contextual
information in a simple but insightful way.

##  7 Preliminary Log Study

During an evaluation period, we assigned _GiveALink_ users with equal chances
to see either the list or the visualization mode when they navigated to the
bookmark manager. Users are allowed to do any task they attend to do. Our log
recorded 38,181 actions by 6,310 users. Analysis of the log reveals several
advantages of the visualization interface. For each mode, a series of
continuous clicks is defined as a session. As shown in Table 1, the
visualization can attract more usage, as there are more sessions in the
visualization mode (1,192) than in the list view (960). Each session in the
visualization mode lasts 172.3 seconds on average, 25 seconds shorter than the
average session length of the list. With the help of the interactive network
visualization, users are shown to interact more with the system during a
shorter time period. With a reasonable assumption that users start using the
_GiveAlink_ bookmark manager with a certain goal and leave once the goal is
achieved, we can infer that the visualization mode can facilitate user tasks
more efficiently. Clicks involving tag selection, resource selection and
content editing are considered as content-related actions. 83.1% of clicks in
the visualization mode are content-related, much higher than 57.6% in the list
mode. The visualization encourages more interactions with the content, as the
graph visualization simplifies the management operations with an intuitive
representation. Finally, the visualization and list view have approximately
equal chances to lose users to the other mode during usage sessions.

Table 1: Statistics through log analysis. Mode | List | Visualization
---|---|---
Number of sessions | 960 | 1,192
Time per session (sec) | 197.4 | 172.3
Clicks per session | 12.4 | 17.3
Content-related clicks | 57.6% | 83.1%
Switch to other mode | 32.3% | 33.4%
Figure 3: Find out the context of the site Engadget.com and add it into the
personal collection through GalViz: (a) Use GalViz bookmarklet; (b) Choose to
see the context; (c) Add it into the personal collection; (d) Customize
recommended tags; (e) Check the final visualization.

##  8 Conclusion and Future Work

To complement the weaknesses of current social tagging tools, we designed and
implemented a new social bookmark manager. It visualizes the tripartite
relationships in a more accessible and friendly display, and incorporates
richer contextual information. Our design goals include facilitating
annotation management with visualization, providing contextual maps, and
highlighting social relationships while avoiding information overwhelming. A
case study on a common scenario and the system log analysis suggest that these
goals have been achieved by our design and implementation. _GalViz_ smoothens
the process of examining the contextual information and adding new resources;
at the same time, users are encouraged to interact with the system and explore
the information more efficiently. The GalViz social bookmark manager
(GiveALink.org/collection/show) is part of the GiveALink platform.

We presented a set of preliminary evaluations. To learn more about the
limitations of _GalViz_ and possible improvements in future versions, a more
thorough and complete evaluation should be considered. As part of the future
work, we plan to employ Amazon’s _Mechanical Turk_ , a crowd-sourcing
marketplace, to measure the usability of the system with several specifically
designed tasks. Close user studies, including face-to-face conversations and
user behavior observations, are necessary as well for gaining a deeper
understanding of user requirements.

## References

  * [1] Delicious, http://delicious.com.
  * [2] Infomous, http://infomous.com.
  * [3] Visuwords, http://www.visuwords.com.
  * [4] G. Begelman, P. Keller, and F. Smadja.  Automated tag clustering: Improving search and exploration in the tag space.  In Proc. Intl. Conf. on World Wide Web, 2006.
  * [5] E. H. Chi.  Improving web usability through visualization.  Usability and the Web, 2002.
  * [6] M. Collomb and M. Hasceet.  Synchronous cooperation and visualization for social bookmarking systems.  In Proc. Intl. Conf. on Advanced Visual Interfaces, 2010.
  * [7] S. Deutsch, J. Schrammel, and M. Tscheligi.  Comparing Different Layouts of Tag Clouds: Findings on Visual Perception.  Springer, 2009.
  * [8] J. Donaldson, M. Conover, B. Markines, H. Roinestad, and F. Menczer.  Visualizing social links in exploratory search.  In Proc. ACM Conf. on Hypertext and Hypermedia, 2008.
  * [9] U. Farooq, T. G. Kannampallil, Y. Song, J. M. Carroll, and L. Giles.  Evaluating tagging behavior in social bookmarking systems: metrics and design heuristics.  In Proc. Conf. on Supporting Group Work, 2007.
  * [10] M. Gupta, R. Li, Z. Yin, and J. Han.  An overview of social tagging and applications, chapter 16.  Springer, 2011.
  * [11] M. A. Hearst and D. Rosner.  Tag clouds: Data analysis tool or social signaller?  In Proc. Hawaii Intl. Conf. on System Sciences, 2008.
  * [12] J. Klerkx and E. Duval.  Visualising social bookmarks.  In Journal of Digital Info., volume 10, 2009.
  * [13] B. Markines, C. Cattuto, and F. Menczer.  Social spam detection.  In Proc. Intl. Workshop on Adversarial Info. Retrieval on the Web, 2009.
  * [14] B. Markines, C. Cattuto, F. Menczer, D. Benz, A. Hotho, and G. Stumme.  Evaluating similarity measures for emergent semantics of social tagging.  In Proc. Intl. Conf. on World Wide Web, 2009.
  * [15] D. Millen, J. Feinberg, and B. Kerr.  Social bookmarking in enterprise.  ACM Queue - Social Computing, 2005.
  * [16] T. B. Passin.  Browser bookmark management with topic maps.  In Proc. Extreme Markup Languages, 2003.
  * [17] E. Quintarelli, A. Resmini, and L. Rosati.  Information architecture: Facetag: Integrating bottom-up and top-down classification in a social tagging system.  Bulletin of American Society for Info. Sci. and Tech., 33:10–15, 2007.
  * [18] H. Roinestad, J. Burgoon, B. Markines, and F. Menczer.  Incentives for social annotation.  In Proc. ACM SIGIR Intl. Conf. on Research and Development in Information Retrieval, page 838, 2009.
  * [19] A. Shepitsen, J. Gemmell, B. Mobasher, and R. Burke.  Personalized recommendation in social tagging systems using hierarchical clustering.  In Proc. ACM Conf. on Recommender Systems, 2008.
  * [20] A. Shiri.  An examination of social tagging interface features and functionalities: An analytical comparison.  Online Info. Rev., 2009.
  * [21] M. Tomša and M. Bieliková.  Hyperlinks visualization using social bookmarking.  In Proc. ACM Conf. on Hypertext and Hypermedia, 2008.
  * [22] L. Weng, R. Schifanella, and F. Menczer.  Design of social games for collecting reliable semantic annotations.  In Proc. IEEE Intl. Conf. on Computer Games: AI, Animation, Mobile, Interactive Multimedia, Educational & Serious Games, 2011.