Tools for Web Design and for Ubiquitous Computing

1
Tools for Web Design and for Ubiquitous Computing

• Jason I. Hong
• Computer Science Division
• University of California, Berkeley

2
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

3
Outline

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

4
DENIM Motivation

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

5
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

6
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

7
DENIM Video
8
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

9
Outline

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

10
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 gt harder to get significant
  results
• Unrealistic test situations

11
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

12
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

13
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

14
Overview
15
Storyboard view
16
(No Transcript)
17
Page view
18
Slider Filter
19
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

20
Outline

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

21
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

E911
Find Friends
22
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

23
Topiary Video
24
Topiary OverviewActive Map Workspace
Canvas
Thing
Person w/ Proximity
Place
Scenario Repository
Person
Scenario Producer
25
Topiary OverviewCreating a Scenario in the
Active Map Workspace
26
Topiary OverviewStoryboard Workspace
Radar View
Canvas
Implicit Link
Scenarios
Nearest Friends Component
Active Map Component
Time Component
Explicit Link
Toolbox
27
Topiary OverviewTest Workspace
Wizard UI
Copy of Active Map
End-User UI
Copy of End-User UI
28
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

29
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/topia
  ry

30
Outline

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

31
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

32
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

33
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

but not help developers process it safely or
provide visibility to end-users
I might present choices well to users
Presentation
Infrastructure
but not have control over how the info was
acquired or processed
I might acquire information privately
Physical / Sensor
34
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

Loc
Name
My Computer
Personal Data Store
App
35
Physical / Sensor LayerIntels Place Lab
Location Source

• Determine location via local database of WiFi
  Access Points
• Unique WiFi MAC Address -gt Latitude, Longitude
• Periodically update your local copy

• Works indoors and
• in urban canyons
• Works with encrypted nodes
• No special equipment
• Privacy-sensitive
• Rides the WiFi wave

36
PlaceLab Data at SF Bay Area
SF Bay Area 60000 Nodes (4 Megs)
37
PlaceLab Data at UC Berkeley
Berkeley Campus 1000 Nodes
38
Infrastructure LayerConfabs Built-in MiniGIS
Operator
Highlight what is Being revealed Example of
something that can Be done at the infrastructure
layer MiniGIS case Network-service case

• 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 States Region Name
California City Name Berkeley ZIP Code
94709 Place Name Soda Hall Latitude/Longitude
37.875, -122.257
39
Putting it Together 1Location-Enhanced Messenger
40
Putting it Together 1Location-Enhanced Messenger
41
Putting it Together 2Location-Enhanced Web Proxy

• Auto-fills location information on existing web
  sites

PageModification URL http//www.starbucks.com/ tx
tCity CityName txtState RegionCode txtZip ZIPCo
de
MapQuest
Starbucks
42
Putting it Together 3Emergency Response Service

• Field studies and interviews with firefighters
  CHI2004
• Finding victims in a building
• You bet wed 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?

43
Putting it Together 3Emergency Response Service

• Trusted third party (MedicAlert or home server)

Medic Alert
Loc
ABC
ABC
On Emergency
Data Sharer
1
Location
2
Link
4
Building BEARS Service
Trusted BEARS Third-Party
3
Link
Location
Link
44
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

45
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