Frontier A Directed Graph System for Web Navigation by Harish Vangavolu, Hayden Wood, Joseph Newman Seth Polsley, Tracy Hammond

The Perfect Browser Browses the web Finds jobs Gives you the news Plays cat videos Fast Rendering HTML Running JavaScript Delivers useful content Site prediction and search Support for 3 rd party extensions Bookmark and history

The Perfect Browser Browses the web Finds jobs Gives you the news Plays cat videos Fast Rendering HTML Running JavaScript Delivers useful content Site prediction and search Support for 3 rd party extensions Bookmark and history

The Perfect Browser Browses the web Finds jobs Gives you the news Plays cat videos Fast Rendering HTML Running JavaScript Delivers useful content Site prediction and search Support for 3 rd party extensions Bookmarks and history

Why you need web history Go back to recent pages Find sites visited long ago Back and Forward (Chrome) History

Why you need web history Go back to recent pages Find sites visited long ago Back and Forward (Chrome) History

Why you don’t need history Recent pages are easy to remember Better prediction You bookmark important pages You can search the keywords

Why you don’t need history Recent pages are easy to remember Better prediction You bookmark important pages You can search the keywords

Web History Today History Stack View of History (Chrome) Time of Visit View of History (Firefox)

Information is Power View of History (Chrome) As a user you can: See websites by date Sort sites by domain Search for key words As a coder you can: Export HTML elements as raw data Group open tabs and display as folders Rewrite the interface

Information is Power As a user you can: See websites by date Sort sites by domain Search for key words As a coder you can: Export HTML elements as raw data Group open tabs and display as folders (TooManyTabs for Chrome) Rewrite the interface Better History By Roy Kolak

Related Works Issue Based Information System By Jeff Conklin Vizter: Visualizing Online Social Networks By Jeffrey Heer Contextual Web History using Visual and Contextual cues to improve Web Browser History By SS Won, J. Jin, J. I. Hong

Frontier More than just history Modern and easy More than just an extension

Rethink Storage Rebuild history as adjacency list Better at representing context Supports existing features + more Compressed, more accessible

Frontier More than just history Modern and easy More than just an extension

Enhanced Navigation Extended back/forward controls Shows all back/forward links from history of current page Page navigation menu

Frontier More than just history Modern and easy More than just an extension

It’s a Platform

Design in Information Quick View App (Site Specific) Detailed Quick View App (Site Specific) Full App (All information)

User Study Evaluation Sampling individuals from: CS background Non-CS background Provided pre and post evaluation questionnaires. Sentiment is largely that graph abstraction is intuitive and mirrors users’ mental model of page relationships (28 users studied to date).

Ethical Concerns Data is kept from advertisers We keep data local Users and data are not associated

Thanks to JavaScript Chrome extension APIs jQuery d3.js Materialize.js...and more as needed HTML5/CSS3 Scalable Vector Graphics (SVG) Git (version control)

Future Work Use MVC Framework (AngularJS) Design API for app development Establish Message Passing Protocol for inter-app communication Port to other browsers

What is Frontier Novel rethinking of browser history Solution with minimal performance impact Simple and intuitive controls Growing browser platform Retrieve Traverse Apply

References Paulsami, Prabakar, and Bikram Singh Gill. "Hierarchical model for web browser navigation." U.S. Patent No. 8,433, Apr Kellar, Melanie, Carolyn Watters, and Michael Shepherd. "The impact of task on the usage of web browser navigation mechanisms." Proceedings of Graphics interface Canadian Information Processing Society, Khoury, Raymes, Tim Dawborn, and Weidong Huang. "Visualising web browsing data for user behaviour analysis." Proceedings of the 23 rd Australian Computer-Human Interaction Conference. ACM, Mills, Chris. "Chrome and Firefox Users Make Better Employees." Gizmodo. N.p., 18 Mar Web. 20 Mar Shipman III, Frank M., and Catherine C. Marshall. "Spatial hypertext: an alternative to navigational and semantic links." ACM Computing Surveys (CSUR) 31.4es (1999): 14.

Special Thanks to Dr. Tracy Hammond Cassandra Odoula CHItaly

Software Architecture Message passing architecture Partition functionality into separate software components Communicate through Chrome runtime’s message passing infrastructure Better modularity because software components encapsulate their state Privileged access in one component does not leak to others UI

Back End Query web session. Build core data structure. Service requests from front end. Provide vertices and edges to visualization. Broker request for privileged objects. Frontier Architecture Adjacency List

Digraph Pros Simple construction and clean implementation Edges and vertex ids not ambiguous Convey relationships between page content more concisely (referring links, cycles, …) Fewer nodes -> less occlusion Cons Traversal/transition type info is not visualized Not necessarily important to users Force directed layout computationally expensive for larger graphs

Hypertree Pros Explicit representation of document transition types (forward/back buttons, refresh, typed in, …) Visually appealing D3.js cluster layout Cons Node is generated every time a URL is visited More nodes -> Visual occlusion More complicated data structure Edge and vertex multisets Transition type ambiguity chrome.history API limitations

Graph structure principles Two possible implementation strategies: Hypertree explicitly represent page transitions traversal-centric approach Digraph (with cycles) Represent relationships between content

Software Architecture Functional Programming Lambda functions and lexical closures Graph manipulation and event handlers Higher-order functions (map, reduce, …) Declarative programming style Simplifies testing

Challenges UI Simple, intuitive frontend that improves Chrome navigation Performance Produce efficient JavaScript implementations of graph construction and layout Security Do not to leak sensitive user information Prevent malicious sites from performing code injection

Vocabulary Session: Activity of a user within the browser during a specified period of time. Forward Link: An outgoing hyperlink from one web page to another website logged within the session. Back Link: An incoming hyperlink from one web page to another website logged within the session.

Software Architecture Chrome Extension Architecture Frontier Architecture

chrome://history Build graphics container Inject node data into d3.js Transform layout to SVG Early build of graph structure

The State of the Web Browser features have remained relatively unchanged since the late 90’s. Features are representative of 90’s tech., where interactive visualization was too demanding of computers at that time (history, navigation, JavaScript rendering). Web history should reflect new model of navigation…more INTERACTIVITY!

Agenda A graph based solution to web browsing Principles and tools Chrome extension development

“Not all those who wander are lost” -J.R.R. Tolkien

The Target Market Who it’s for: Users who frequently use the back and forward utility of a browser. Users who frequent the history page in search of previously visited web pages.

A Note on Graphs In mathematics, computer science, biology it is the principal tool used to model the pairwise relationship of entities. Search Engines Social Networking Network communication Internet activity across the globe

User Studies Sampling individuals from: CS background Non-CS background Providing pre and post evaluation questionnaires. Sentiment is largely that graph abstraction is intuitive and mirrors users’ mental model of page relationships. Time spent to complete a task doesn’t necessarily indicate deeper understanding. We provide more insight into page level relationships that aren’t currently available in browsers today.

Introduction Current browsers do not integrate visualization into their interface Graph theory is prominently featured in modeling of web page relationships Hyperlink graphs Social network graphs Our project uses graphs to provide insight into browsing the web Graph visualization of Twitter during Arab Spring