Tools for Web Design and for Ubiquitous Computing

Jason I. HongComputer 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– http://guir.berkeley.edu/denim

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 email)

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– http://guir.berkeley.edu/webquilt

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 OverviewActive Map Workspace

Canvas

Place

Person

Person w/Proximity

ScenarioRepository

Thing

Scenario Producer

Topiary OverviewCreating a Scenario in the Active Map Workspace

Topiary OverviewStoryboard Workspace

Canvas

Toolbox

Radar View

Scenarios

Active Map Component

Nearest FriendsComponent

Time Component

Implicit Link

Explicit Link

Topiary OverviewTest Workspace

Wizard UI

Copy of End-User UI

End-User UICopy 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 http://guir.berkeley.edu/topiary

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 risksEveryday Risks Extreme Risks

Stalkers, Muggers_________________________________

Well-beingPersonal safety

Employers_________________________________

Over-monitoringDiscrimination

Reputation

Friends, Family_________________________________

Over-protectionSocial obligationsEmbarrassment

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-usersI 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

PersonalData Store

PersonalData Store

LocName

App

On Operators

SourceSourcesOut OperatorsIn Operators

My Computer

LoggingInvisible ModeEnforce AccessUser Interface

Garbage CollectPeriodic Reports

Physical / Sensor LayerIntel’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

A

B

C

–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 LayerConfab’s Built-in MiniGIS Operator

People and apps need semantically useful names– “Meet me at 37.875, -122.257”

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 StatesRegion Name = CaliforniaCity Name = BerkeleyZIP Code = 94709Place Name = Soda HallLatitude/Longitude = 37.875, -122.257MapPoint

Preferred

Putting it Together #1Location-Enhanced Messenger

Putting it Together #1Location-Enhanced Messenger

Putting it Together #2Location-Enhanced Web Proxy

Auto-fills location information on existing web sites

Starbucks

MapQuest

PageModificationURL =http://www.starbucks.com/txtCity=CityNametxtState =RegionCodetxtZip =ZIPCode

Putting it Together #3Emergency 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 #3Emergency Response Service

Trusted third party (MedicAlert++ or home server)

MedicAlert++MedicAlert++

Loc

“ABC”

“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