Transcript Personal Web Library - Symposium on Communicating Complex

PERSONAL WEB LIBRARY:
ORGANIZING AND VISUALIZING WEB BROWSING
HISTORY
6th Annual Symposium on
Communicating Complex Information (SCCI 2017)
Yingjie Chen
Weidan Du
Zhenyu Qian
Computer Graphics Technology,
Interaction Design
{victorchen, du97, qianz}@purdue.edu
Introduction
As more and more activities rely on the Internet…
Web browsing History
A collection of personal online resource & behavior
Searching but forget the exact keywords?
Use the history page in Chrome?
Long list…
No time filter…
Not a visual and effective way
No overview and patterns
How can web browsing history be utilized to enhance users’ web browsing experiences?
• Can we re-organize all browsed webpages into a personal resource collection?
• How can users see and use the collection?
• What insight can the user get from her browsing history?
Research on Web Browsing History
• Analyze why and how users create, use, and organize bookmarks (Abrams et al. 1998)
• Explore users’ revisitation patterns (Tauscher, 1996; Adar, Teevan, & Dumais, 2008)
• Build personalized search engines (Matthijs & Radlinski, 2011; R. Kumar & Sharan, 2014)
• A “contextual web history” study summarized the order of website aspects that could easily be remembered by users (Won
et al., 2009)
Information Visualizations of Web Browsing History
• People’s web browsing trails can reflect people’s interests, needs, and what they do in their daily lives (Van Kleek et al., 2010)
• VISVIP: website nicknames as nodes to present network relationships (Cugini & Scholtz, 1999)
• WebComets: support the understanding and analysis of parallel browsing behavior based on navigation among multiple tabs
(Cernea et al., 2013)
• Eyebrowse: a stacked bar chart to indicate the most visited URLs for a period of time (Van Kleek et al., 2010)
GOAL: Design and develop a visualization system that helps users to…
Get aware of web
browsing patterns
Identify points of
interests
Help with retrieving
pages & context
User Study – Memory
2 weeks before
Just google it again
Have general impression
3 days before Now
Remember accurate time period
Design Work – Data Collection and Processing
Data available:
visit time, visit count, URLs , title, keywords, and
website favicons
<meta name="keywords" content=“word1,word2">
<meta name="title" content="page-title">
Favicon： “https://www.google.com/s2/favicons?domain=” with domains
Organize by topics (keywords)
Display the overwhelming number of
keywords
The aim of using text:
• Provide a overview,
• help users recognize the keywords rather than recall
Ambiguous organization schemes in IA
• when users don’t know what they’re looking for,
• support information sought by grouping items in meaningful
Other constrains from users: no more than three levels
Clustering keywords
In the same page in
groups
• maximize the display
• without confusing
users with a deep
system structure
Cluster Keywords
Group K: 20
Design Work – History Records Analysis &Graphic Design
Week View
Content
Section
Trend section
Day View
URL List
Content
Section
1. The content section: show the keyword group to help reduce users’ memory workload.
2. The trend section: show users’ browsing patterns, including visit counts and time distribution
3. The URL list: allow users to find a particular website.
Trend section
URL List
Theme river
Small multiples
Circular style: sun burst
Bar chart-crossfilter
Multiple bipartite diagram
Calendar representation
Design Work –
Sketch to explore
interface design
Design Challenge 1: Topics/Keywords
How to provide an overview for so many words with different
counts in limited screen.
• not the exact visit count of each word, but which words are more important than others.
• using word clouds
• Size—count
• All in one view
Design Challenge 2: Temporal Trend & Patterns
How to represent the visit trend and pattern appropriately
• A lot of groups
• Being aware of the trend of each topic group and together is more meaningful and clear than only
seeing the trend of each single word
• Stacked chart? Theme river?
• Time granularity
Design Work – Visual and interaction design
Interactions should support:
• Have a overview,
• Brushing and linking all sections
• Observe patterns of groups,
• Group differentiation in the word cloud
• Gain information about point of interests,
• Use content and time to filter out URL
• Help with the revisitation
• Similar interactions in day view, but more hover and
click effect on the density chart
Demo: https://va.tech.purdue.edu/webHistory/demo_MainPage.php
Graphic Design – Different granularity with groups
Per Day:
too coarse to show the hourly count
Per Hour:
too detailed and difficult to see clearly in this two-week-view
Every six hours
see trends on the week level, but also gain the pattern within different
days in general
Prototype System Development
Coding Languages:
•
HTML,CSS , JavaScript（D3.js, JQuery),
•
PHP, MySQL
Usability Test
• Observation on tasks and past-task questionnaire
• Video record the process & note-taking
• Qualitative data analysis on the recordings and notes
Usability Test – Initial explore
Become familiar with the visualization system without any guidance.
Easily understood by new users?
Understand very well:
word cloud, URL list, day selector chart, density chart,
and the brushing and linking interaction
Usability Test – Week view
Describe interested features and trends
”In chrome, the only way that I can see the history is to keep scrolling
and scrolling. For this one, it’s very obvious that I use it a lot on
Wednesday and Tuesday…and so much on the weekend.”
• Provides a quick overview that never been
provided before
• Categorizes data pretty well
• Easier than before to skip useless websites
The most interest pattern types :
• Distribution of a topic of interest
• User activity from a specific time period
• Detail on special/obvious patterns : e.g.
websites inside a big area
Usability Test – Week view (cont.)
Patterns & details of an interested group
Find specific information
– Most were interested in a topic in their
mind
– hot words, hot topics, & busy day
Select group: theme river & word cloud
Find hot words: word cloud
Find area and count: area chart
Find hot topics & busy days: theme river
Find related websites: URL list
?
Theme river: area or height?
Usability Test – Day view (cont.)
Observe features and trends for a day
Participants could describe their one day procedure in detail, better than Chrome.
• Recalled some contexts of website visiting
(during class, what other topics visit at same time.)
More participants preferred to use the density chart in the day view to understand
the time distribution than the theme river in this task. –more accurate, more trust
“These small bars tell you the timing when you have visited each website”
Unexpected patterns let the participants know that their schedule needed to be
improved
or some websites were worth noticing.
Usability Test – Retrieve previous visited page and context
Retrieve previous visited page and context
Chrome:
• Searching the keywords
• Scrolling to describe the context
Th visualization design is able to:
• Filter function is convenient
• Find the website: theme river, word cloud and URL list
• Density Chart is useful for multiple memories and recalling context
“It’s like a triangulating based on the memory”
• Find ambiguous webpages: keywords & context
Usability Test – About Grades
Participants thought that tasks were quite easy to complete.
The clearest parts of this design:
the interface layout, structure, and interaction among graphs.
Three words to describe:
eye catching
SIMPLE
INTUITIVE
pleasing aesthetically
……
EASY TO USE
organized
fast finding information
a lot data which represented in different ways.
Usability Test – Likes
• The participants thought this visualization provide more information and better way to utilize the
browsing history.
• People thought using word clusters, time distribution and URL list is a great way to organize the
history.
• They really liked to have an overview of their patterns, and multiple interactions to filter or
access detailed information.
• Many people especially liked the day view because they can see detailed information for a
particular time on a certain day to be aware of what they was doing.
Usability Problems
• How to read the accurate count and time period of the theme river on the main page.
->Make the legend bigger or lighter
->Change the day button to help recognize
Day
• The bars on the density chart were too small to hover over or click
->have a zoom in function
• Big group
-> interaction or other cluster methods
3
2
1
Split the large group into subgroups
Delete the large group
Keep it
• Some interaction is not so obvious
show all button—>follow users habits in website, clicking blank space to deselect
day button—>change design
• Add a search function
Discussion & Conclusion
• Integrated different data dimensions & used suitable graphics
Reuse URL list
• A simple two-interface structure with different time granularities
Keep consistency
Visual information seeking mantra
• Flexible interaction--“brushing and linking”
• Complementary graph to overcome weakness of some graphs
Density and URL list
Area chart for Theme river
• A new revisitation method --reconstructs the visiting context
Other activities rely on memory…
Discussion & Conclusion (cont.)
Organize and visualize the web browsing history, effectively support:
• Get aware of web browsing patterns
• Identify points of interests
• Help with retrieving pages & context
Provides a panorama of user’s web browsing history, which is not only a knowledge
collection of users, but also a behavior checking tool and reminder.
Future works:
• Finding or creating a more suitable clustering algorithm
• Fix the problems according to the suggestion and discussion, test to see whether they work
• Explore to use this visualization or the useful design method in other areas.
Thank You !
Any Questions ?