1 / 69

WebQuilt Capturing and Visualizing the Web Experience

WebQuilt Capturing and Visualizing the Web Experience. Jason I. Hong James A. Landay Group for User Interface Research EECS Department University of California at Berkeley World Wide Web 10. Motivation. Many websites have usability problems 62% web shoppers gave up past month (Spool)

zion
Download Presentation

WebQuilt Capturing and Visualizing the Web Experience

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WebQuilt Capturing and Visualizing the Web Experience Jason I. Hong James A. Landay Group for User Interface Research EECS Department University of California at Berkeley World Wide Web 10

  2. Motivation • Many websites have usability problems • 62% web shoppers gave up past month (Spool) • 39% failed in buying attempts (Creative Good) • Two problems all web designers face • Understanding users' tasks • Understanding obstacles in completing tasks • Many methods for understanding tasks • E.g. interviews, ethnographic observations, surveys, focus groups • Focus here is on understanding obstacles

  3. Understanding Obstacles Today • Traditional usability tests • Extremely useful qualitative information • Lots of time, small websites, few people, local • Server-side logging • Easy to collect, remote testing, lots of tools • Restricted access, little on tasks and problems • Client-side logging • Can track everything, remote testing • Installation, platform-dependent, analysis tools

  4. Streamlining Current Practices • Fast and easy to deploy on any website • Compatible with range of OS and browsers • Better tools for analyzing the data

  5. Client Browser Web Server Request Response WebQuilt Approach • Fast and easy to deploy on any website • Compatible with range of OS and browsers • Better tools for analyzing the data

  6. WebQuilt Approach • Fast and easy to deploy on any website • Compatible with range of OS and browsers • Better tools for analyzing the data Proxy Client Browser Web Server WebQuilt Log

  7. WebQuilt Approach • Fast and easy to deploy on any website • Compatible with range of OS and browsers • Better tools for analyzing the data

  8. WebQuilt Usage • Setup several tasks, recruit 20–100 people • Email participants a URL that uses the proxy • Ask them to complete the predefined tasks • Collect lots of remote (or local) data • Aggregate, view, and interact with data • Find problems, fix, repeat Design Evaluate Prototype

  9. Outline • Background and Motivation • WebQuilt Architecture • Usage Experience and Visualizations • Summary and Future Work

  10. Proxy Logger Online Action Inferencer Offline Graph Merger Graph Layout Viz Overall Architecture Log Files

  11. Proxy Logger Action Inferencer Graph Merger Graph Layout Viz Proxy • Lies between browser and server http://domain.com/webquilt?replace=http://www.yahoo.com • One log file per user session • Currently use Java servlets • Important part is log file format

  12. Log File Format Time (ms) From TID To TID Parent ID HTTP Response Frame ID Link ID HTTP Method URL + Query 6062 0 1 -1 200 -1 -1 GET http://www.google.com 11191 1 2 -1 200 -1 -1 GET http://www.phish.com/index.htmq=Phish&btnI=I%27m+Feeling+Lucky 167525 2 3 -1 200 -1 1 GET http://www.phish.com/bios.html 31043 3 4 -1 200 -1 2 GET https://www.phish.com/bin/catalog.cgi 68772 2 5 -1 200 -1 15 GET http://www.emusic.com/features/phish

  13. Log File Format Time From TID To TID Parent ID HTTP Response Frame ID Link ID HTTP Method URL + Query 6062 0 1 -1 200 -1 -1 GET http://www.google.com 11191 1 2 -1 200 -1 -1 GET http://www.phish.com/index.htmq=Phish&btnI=I%27m+Feeling+Lucky (ms) 167525 2 3 -1 200 -1 1 GET http://www.phish.com/bios.html 31043 3 4 -1 200 -1 2 GET https://www.phish.com/bin/catalog.cgi 68772 2 5 -1 200 -1 15 GET http://www.emusic.com/features/phish

  14. Log File Format Time (ms) From TID To TID Parent ID HTTP Response Frame ID Link ID HTTP Method URL + Query 6062 0 1 -1 200 -1 -1 GET http://www.google.com 11191 1 2 -1 200 -1 -1 GET http://www.phish.com/index.htmq=Phish&btnI=I%27m+Feeling+Lucky 167525 2 3 -1 200 -1 1 GET http://www.phish.com/bios.html 31043 3 4 -1 200 -1 2 GET https://www.phish.com/bin/catalog.cgi 68772 2 5 -1 200 -1 15 GET http://www.emusic.com/features/phish

  15. The Proxy at Runtime Store

  16. The Proxy at Runtime 1. Process Client Request Store

  17. The Proxy at Runtime 2. Retrieve Requested Document Store

  18. The Proxy at Runtime 3. Process and return the page Store

  19. The Proxy at Runtime Start with: <A HREF="computers.html"> End up with: <A HREF="http://tasmania.cs.berkeley.edu/webquilt? replace=http://www.yahoo.com/computers.html &tid=1&linkid=12">

  20. The Proxy at Runtime 4. Store the page 5. Log the transaction Store

  21. Proxy Logger Action Inferencer Graph Merger Graph Layout Viz Additional Proxy Functionality • Handling Cookies • Cookies only sent from browser back to web server that put it there User ID Domain Cookie AAA yahoo.com xyzzy AAA google.com asdfg BBB yahoo.com abcde

  22. Proxy Logger Action Inferencer Graph Merger Client Browser Web Server Graph Layout Viz Additional Proxy Functionality • Handling Cookies • Cookies only sent from browser back to web server that put it there • Handling Secure Socket Layer • Encrypts page requests and data • E.g. Shopping Carts, Financials SSL

  23. Proxy Logger Action Inferencer Graph Merger Graph Layout Viz Additional Proxy Functionality • Handling Cookies • Cookies only sent from browser back to web server that put it there • Handling Secure Socket Layer • Encrypts page requests and data • E.g. Shopping Carts, Financials • Split into two SSL requests Proxy Client Browser Web Server SSL SSL

  24. Proxy Logger Action Inferencer Graph Merger Graph Layout Viz Action Inferencer • Takes a single log file and converts into a list of actions • "Clicked on link" or "Hit back button" • Inference because still must guess • Back and forward actions local

  25. Re-Assembling User Actions Time From TID To TID Parent ID HTTP Response Frame ID Link ID HTTP Method URL + Query 6062 0 1 -1 200 -1 -1 GET http://www.google.com 11191 1 2 -1 200 -1 -1 GET http://www.phish.com/index.htmq=Phish&btnI=I%27m+Feeling+Lucky 167525 2 3 -1 200 -1 1 GET http://www.phish.com/bios.html 31043 3 4 -1 200 -1 2 GET https://www.phish.com/bin/catalog.cgi 68772 2 5 -1 200 -1 15 GET http://www.emusic.com/features/phish

  26. Re-Assembling User Actions 1 1 2 2 3 3 4 2 5 Time From TID To TID Parent ID HTTP Response Frame ID Link ID HTTP Method URL + Query 6062 0 1 -1 200 -1 -1 GET http://www.google.com 11191 2 -1 200 -1 -1 GET http://www.phish.com/index.htmq=Phish&btnI=I%27m+Feeling+Lucky 167525 3 -1 200 -1 1 GET http://www.phish.com/bios.html 31043 4 -1 200 -1 2 GET https://www.phish.com/bin/catalog.cgi 68772 5 -1 200 -1 15 GET http://www.emusic.com/features/phish

  27. Re-Assembling User Actions From TID To TID URL + Query 1 0 1 http://www.google.com http://www.phish.com/index.htmq=Phish&btnI=I%27m+Feeling+Lucky 1 2 2 3 http://www.phish.com/bios.html 2 3 3 4 https://www.phish.com/bin/catalog.cgi 3 4 2 5 http://www.emusic.com/features/phish 2 5

  28. Re-Assembling User Actions From TID To TID URL + Query Start 1 1 0 1 http://www.google.com http://www.phish.com/index.htmq=Phish&btnI=I%27m+Feeling+Lucky 1 2 2 3 http://www.phish.com/bios.html 2 3 3 4 https://www.phish.com/bin/catalog.cgi 3 4 2 5 http://www.emusic.com/features/phish 2 5

  29. Re-Assembling User Actions From TID To TID URL + Query Start 1 2 1 0 1 http://www.google.com http://www.phish.com/index.htmq=Phish&btnI=I%27m+Feeling+Lucky 1 2 2 3 http://www.phish.com/bios.html 2 3 3 4 https://www.phish.com/bin/catalog.cgi 3 4 2 5 http://www.emusic.com/features/phish 2 5

  30. Re-Assembling User Actions From TID To TID URL + Query Start 1 2 3 1 0 1 http://www.google.com http://www.phish.com/index.htmq=Phish&btnI=I%27m+Feeling+Lucky 1 2 2 3 http://www.phish.com/bios.html 2 3 3 4 https://www.phish.com/bin/catalog.cgi 3 4 2 5 http://www.emusic.com/features/phish 2 5

  31. Re-Assembling User Actions From TID To TID URL + Query Start 1 2 3 4 1 0 1 http://www.google.com http://www.phish.com/index.htmq=Phish&btnI=I%27m+Feeling+Lucky 1 2 2 3 http://www.phish.com/bios.html 2 3 3 4 https://www.phish.com/bin/catalog.cgi 3 4 2 5 http://www.emusic.com/features/phish 2 5

  32. Re-Assembling User Actions From TID To TID URL + Query Start 1 2 3 4 1 0 1 http://www.google.com http://www.phish.com/index.htmq=Phish&btnI=I%27m+Feeling+Lucky 5 1 2 2 3 http://www.phish.com/bios.html 2 3 3 4 https://www.phish.com/bin/catalog.cgi 3 4 2 5 http://www.emusic.com/features/phish 2 5

  33. Action Inferencer Start 1 2 3 4 5

  34. Action Inferencer Start Case 1 1 2 3 4 5 Start 1 2 3 4 3 2 5 Link Back Link

  35. Action Inferencer Start Case 2 1 2 3 4 5 Start 1 2 3 4 3 2 1 2 5 Link Back Fwd Link

  36. Action Inferencer Start Case 1 by default (shortest path) 1 2 3 4 5 Start 1 2 3 4 3 2 5

  37. Proxy Logger Action Inferencer Graph Merger Graph Layout Viz Merger • Combines multiple log files into a single directed graph • Web pages are nodes • Actions are edges

  38. Proxy Logger Action Inferencer Graph Merger Graph Layout Viz Graph Layout • Assign (x,y) to all nodes • Force-directed placement • Keep connected nodes close • Push unconnected nodes far apart • Edge-weighted depth-first • Most traffic along top • Less followed paths below • Grid to help organize and align • Plug-in new algorithms here

  39. Proxy Logger Action Inferencer Graph Merger Graph Layout Viz Visualization

  40. Future Work • More sophisticated logging • Lower level events (e.g. AT&T WET) • Personalized web pages • More sophisticated visualizations • More use of semantic zooming • Dynamic filtering • Continue getting feedback from designers • Initiated interviews with web designers • Still need to do evaluations

  41. Take Home Ideas • Need more tools for improving web site usability • Proxy logging • Logging where task is already known • Any website, any browser, remote testing • Visualizing logged data • Aggregates large data sets • Interact with in a zooming interface • Pluggable architecture

More Related