Tools for Web Design and for Ubiquitous Computing Jason I. Hong Computer Science Division University of California, Berkeley

Talk Overview Tools for web design –DENIM, a sketch-based web design tool –WebQuilt, a remote web usability evaluation tool Tools for ubiquitous computing –Topiary, a prototyping tool for location-enhanced apps –Confab, a toolkit for privacy-sensitive ubicomp

Outline DENIM web design tool WebQuilt web evaluation tool Topiary location-enhanced prototyping tool Confab toolkit for privacy-sensitive ubicomp

DENIM Motivation Web designers sketch a lot in early stages of design –Fast, easy, fun –Allows greater exploration of design space

Informal vs. Formal Representations Informal visual representation –communicates “unfinished” –encourages creativity –faster to create Formal visual representation –communicates “finished” –inhibits creativity (detailing) –slower to create

DENIM Overview DENIM, a prototyping tool for web design Usage scenario –Sketch out web pages –Draw links to create storyboards of pages –Get real users and then “run” the sketched pages –Iterate on design Key research ideas –Prototyping tool rather than production tool –Minimize computer recognition of sketches, focusing on human-human communication

DENIM Video

DENIM Summary DENIM is a rapid prototyping tool for web design Informal user interfaces for human-human communication ~47000 downloads since April 2000 – Publications –CHI2000 Lin, Newman, Hong, Landay –Human-Computer Interaction 18(3) (2002), Newman, Lin, Hong, Landay

Outline DENIM web design tool WebQuilt web evaluation tool Topiary location-enhanced prototyping tool Confab toolkit for privacy-sensitive ubicomp

WebQuilt Motivation Many Web sites have severe usability problems –Users cannot complete tasks or have difficulty finding info Mobile computing adds further challenges –Small screen sizes –Limited and/or new interaction techniques –Devices used in environments beyond the desktop Problems with existing evaluation techniques –Time & effort are costly –Small sample sizes –> harder to get significant results –Unrealistic test situations

WebQuilt Overview Remote usability testing –Large number of participants in “natural” settings –Semi-automatic – requires one time set up of tasks/questions Proxy-based logger rewrites links –Keeps track of clickstream –Can be used in conjunction with online survey tools Advantages over client & server side solutions –Multi-platform, multi-device compatibility –Fast & easy to deploy on any Web site –Nearly invisible to user

Running a Remote Usability Test with WebQuilt Recruit users Design & distribute tasks (via ) Users follow link & start performing tasks Proxy logs clickstream data Visualize and analyze data Use results to redesign

WebQuilt Visual Analysis Goals –Link page elements to user actions –Identify behavior & navigation patterns –Highlight potential problems areas Solution –Interactive graph from logged data –Designers can indicate expected paths –Color code common usability interests –Filtering to show only target participants –Zooming for analyzing at varying granularity

Overview

Storyboard view

Page view

Slider Filter

WebQuilt Summary Web proxy for remote logging of usability tests Visualization tools for aggregating log data 800 downloads since May 2001 – Publications –WWW10 Hong, Landay –ACM TOIS, Hong, Heer, Waterson, Landay –AVI2002, Waterson, Hong, Landay

Outline DENIM web design tool WebQuilt web evaluation tool Topiary location-enhanced prototyping tool Confab toolkit for privacy-sensitive ubicomp

Topiary Motivation Location-enhanced devices and apps are coming But takes high level of technical expertise to build Topiary, a prototyping tool for location-enhanced apps E911Find Friends

Topiary Overview Create a map of people, places, and things Demonstrate scenarios depicting location contexts –“Alice enters room 525” –“Alice is near Bob” Create storyboards using these location contexts –Automatically show this page when “Carol enters room 525” “Run” the storyboards, faking location thru Wizard of Oz

Topiary Video

Topiary Overview Active Map Workspace Canvas Place Person Person w/ Proximity Scenario Repository Thing Scenario Producer

Topiary Overview Creating a Scenario in the Active Map Workspace

Topiary Overview Storyboard Workspace Canvas Toolbox Radar View Scenarios Active Map Component Nearest Friends Component Time Component Implicit Link Explicit Link

Topiary Overview Test Workspace Wizard UI Copy of End-User UI Copy of Active Map

Topiary Evaluation 7 participants in task-based evaluation Training tasks –In/Out board, Find Nearest Printer, Find Nearby Friends Judged task –Tourguide for UC Berkeley or San Francisco –$100 for best design Issues raised –Storyboard has difficulties scaling up beyond dozen pages –Need better support for covering possible scenarios

Topiary Summary First prototyping tool for location-enhanced applications –Introduces Active Map for prototyping –More sophisticated visual language for storyboarding –More sophisticated Wizard of Oz for sensed data (location) With Yang Li and James Landay Download Topiary at

Outline DENIM web design tool WebQuilt web evaluation tool Topiary location-enhanced prototyping tool Confab toolkit for privacy-sensitive ubicomp

Confab Motivation Advances in wireless networking, sensors, devices –Greater awareness of and interaction with physical world Many benefits, but introduces new range of privacy risks Everyday RisksExtreme Risks Stalkers, Muggers _________________________________ Well-being Personal safety Employers _________________________________ Over-monitoring Discrimination Reputation Friends, Family _________________________________ Over-protection Social obligations Embarrassment Government __________________________ Civil liberties

Confab Overview Confab toolkit for privacy-sensitive ubicomp apps –Analysis of end-user needs for ubicomp privacy –Analysis of interaction design for ubicomp privacy –Capture, processing, and presentation of personal info Evaluation thru building three apps and user studies –Location-enhanced messenger, location-enhanced web proxy, emergency response app

Confab Toolkit for Privacy-Sensitive Ubicomp Confab for privacy-sensitive ubicomp apps A toolkit needs to support all three of these layers –Must capture, store, process, & share in privacy-sensitive manner Physical / Sensor Infrastructure Presentation I might present choices well to users… …but not have control over how the info was acquired or processed …but not help developers process it safely or provide visibility to end-users I might acquire information privately…

Confab High-Level Architecture Capture, store, and process personal data on my computer as much as possible (laptops and PDAs) Provide greater control and feedback over sharing Personal Data Store Personal Data Store LocName App On Operators Source Sources Out OperatorsIn Operators My Computer Logging Invisible Mode Enforce Access User Interface Garbage Collect Periodic Reports

Physical / Sensor Layer Intel’s Place Lab Location Source Determine location via local database of WiFi Access Points –Unique WiFi MAC Address -> Latitude, Longitude –Periodically update your local copy ABC –Works indoors and in urban canyons –Works with encrypted nodes –No special equipment –Privacy-sensitive –Rides the WiFi wave

PlaceLab Data at SF Bay Area SF Bay Area ~60000 Nodes (~4 Megs)

PlaceLab Data at UC Berkeley Berkeley Campus ~1000 Nodes

Infrastructure Layer Confab’s Built-in MiniGIS Operator People and apps need semantically useful names –“Meet me at , ” MiniGIS operator transforms location info locally –Using network-based services would be privacy hole Whittled down to 30 megs from public sources –Places hardest to get, 3 ugrads + me scouring Berkeley Country Name= United States Region Name= California City Name= Berkeley ZIP Code= Place Name= Soda Hall Latitude/Longitude= , Highlight what is Being revealed Example of something that can Be done at the infrastructure layer MiniGIS case Network-service case MapPointPreferred

Putting it Together #1 Location-Enhanced Messenger

Putting it Together #2 Location-Enhanced Web Proxy Auto-fills location information on existing web sites Starbucks MapQuest PageModification URL= txtCity=CityName txtState=RegionCode txtZip=ZIPCode

Putting it Together #3 Emergency Response Service Field studies and interviews with firefighters [CHI2004] Finding victims in a building –“You bet we’d definitely want that.” –“It would help to know what floor they are on.” But emergencies are rare –How to balance privacy constraints with utility when needed?

Putting it Together #3 Emergency Response Service Trusted third party (MedicAlert++ or home server) Data Sharer Location Building BEARS Service Link 1 2 Trusted BEARS Third- Party Trusted BEARS Third- Party Location 3 4 Medic Alert++ Medic Alert++ Loc “ABC” On Emergency

Confab Summary Toolkit for privacy-sensitive ubicomp –Physical / Sensor, Infrastructure, Presentation Layers Three applications –Location-enhanced messenger, Location-enhanced web proxy, Emergency Response app User evaluations in progress Publications –Mobisys2004, Hong and Landay

Summary Tools for web design –DENIM web design tool –WebQuilt web evaluation tool Tools for ubicomp –Topiary location-enhanced prototyping tool –Confab privacy-sensitive ubicomp toolkit