Examples of user centered design A few examples of systems (partially) inspired by studying users.

Examples of user centered design

A few examples of systems (partially) inspired by studying

users

Example 1:Virtual desktop

Study of document organizationin a physical office/on a desk

Malone (1983) http://scholar.google.ca/scholar?q=malone+%22How+do+people+organize+their+desks%22

•At time of study, virtual desktop was still a recent innovation•Malone wanted to identify problems with paper media to inform designs of computerized interfaces•He found “subtle but useful aspects” of paper media “that might inadvertently be lost in the new technology”•Office workers have difficulty categorizing papers, and identifying what categories are appropriate to use•Use of both piles and folders for organizing papers

• The former is looser, and can serve as a reminder, allowing categorization decisions to be left until later

•Documents are placed not only to allow later retrieval, but to serve as reminders of tasks to be done (approx. 2/3 of piles)

How can computers help ?

• Allow users to defer decisions about classification• Allow documents to be members of more than one

collection simultaneously• Perform automatic classification / support for

searching• Allow users to use documents as visual reminders of

tasks to do

Studies of Document Organizationon Computers

Barreau and Nardi (1995) http://scholar.google.ca/scholar?q=barreau+nardi+%22Finding+and+reminding%3A+file+organization%22

•Studied habits of users with respect to searching•Users overwhelmingly prefer “location based” search (e.g. browsing folders), and use “logical search” (e.g. by keyword) as a last resort•Users have trouble remembering what names they give files•Users use documents as reminders

• Leaving email messages in inbox• Placing documents on the desktop in a special location

•Users keep “ephemeral” information (short lived todo lists, memos, etc) loosely filed, as opposed to “working” information or “archived” information•Management of ephemeral information is a major stumbling block

Status quo: virtual desktop

• Was this designed to afford the habits described? Or simply as a familiar metaphor?

• Is this scalable to large numbers of files?

Piles (Mander et al. 1992, Xerox PARC) http://scholar.google.ca/scholar?q=mander+salomon+wong+pile+metaphor

Piles (Mander et al. 1992, Xerox PARC) http://scholar.google.ca/scholar?q=mander+salomon+wong+pile+metaphor

Piles (Mander et al. 1992, Xerox PARC) http://scholar.google.ca/scholar?q=mander+salomon+wong+pile+metaphor

Michel Beaudouin-Lafon, 2001http://scholar.google.ca/scholar?q=%22Novel+interaction+techniques+for+overlapping+windows%22

Video: http://www.acm.org/uist/archive/videos/2001/p153-beaudouin-lafon.mov

Fold-n-drop (Pierre Dragicevic, 2004)https://www.lri.fr/~dragice/foldndrop/

http://scholar.google.ca/scholar?q=dragicevic+%22Combining+Crossing-Based+and+Paper-Based%22

Video: http://www.youtube.com/watch?v=VAWnIGo9Kro

BumpTop (Agarawala et Balakrishnan, 2006)http://scholar.google.ca/scholar?q=agarawala+balakrishnan+keepin+%22Pushing+the+desktop+metaphor%22

http://bumptop.com

Videos:•Prototype: http://www.youtube.com/watch?v=M0ODskdEPnQ

•Hip-hop version: http://www.youtube.com/watch?v=oUVpSY4eBCc

•Parody: http://www.youtube.com/watch?v=kQL9V2dnKFY

•TED talk: http://www.ted.com/talks/anand_agarawala_demos_his_bumptop_desktop

•Commercial version: http://www.youtube.com/watch?v=6jhoWsHwU7w

BumpTop (Agarawala et Balakrishnan, 2006)http://scholar.google.ca/scholar?q=agarawala+balakrishnan+keepin+%22Pushing+the+desktop+metaphor%22

http://bumptop.com

Example 2:Tape Drawing

Tape Drawing

Digital Tape Drawing (Balakrishnan et al. 1999)http://scholar.google.ca/scholar?q=balakrishnan+fitzmaurice+%22Digital+tape+drawing%22

Video: http://www.dgp.utoronto.ca/~ravin/videos/uist99_tapetool.mpg

DH = dominant hand (usually, the right hand)

NDH = non-dominant hand (usually, the left hand)

Implicit mode changes:

• DH fixed: straight line

• DH moving: curve

– Distance between hands determines curvature

Hands close: More variability

DH

NDH

NDH DH

Hands far apart: Smoother curve

User reactions

• Demonstrated to 5 auto design studios in France, UK, and USA

• Approx. 20 artists tried the system

– After only 1 minute of instructions, the artists were able to produce output that was superior to that of the designers of the system who had had hours of experience

– The skill of the artists transcended the technological limitations (cables, lag, and calibration problems)

– They exhibited common gestures, like sighting down a line

• Asked for a 3D version

3D Tape Drawing (Grossman et al. 2002)http://scholar.google.ca/scholar?q=grossman+balakrishnan+%223D+curves+with+digital+tape+drawing%22

Video: http://www.dgp.utoronto.ca/~ravin/videos/chi2002_principle3dcurves.mpg

Example 3:Personal Digital Assistants (PDAs)

Apple Newton (≈1993)

http://oldcomputers.net/pics/newton-right.jpg http://cache.gizmodo.com/assets/images/4/2012/01/d0531a85c7fb57d39ebf0a88dd78778a.jpg

Video: http://www.youtube.com/results?search_query=apple+newton+getting+started

Why was the Newton not successful?

• Focus groups said that handwriting recognition would be cool !

• But the handwriting recognition was not reliable enough

• Device too big• Too expensive

Palm Pilot (≈1997)Basic requirements:• Size: must fit in a shirt pocket• Price: 299 $• Can be synchronized with a desktop computer• Speed: must be as fast as a physical notepad for

writing down an appointment or a person’s contact info. Also :– No wait cursors– No error dialog boxes, especially messages like

"Error xyz, Abort or Cancel?"

Palm Pilot• Size: must fit in a shirt pocket.

Prototype made out of wood and paper:

Palm Pilot

Chosen design principles:• Less is more• Avoid adding features• Strive for fewer steps• Simplicity is better than complexity

The "Zen of Palm"Screen had 160x160 pixels!

Palm Pilot 1000

Graffiti

• Idea: instead of recognizing handwriting,have very reliable recognition of gestures

• Goal is not speed of input• Main goals are reliability and ease of learning

Graffiti

Example 4:Redesign of bank machines

by IDEO

“Future of Self-Service Banking” (IDEO, BBVA)http://www.youtube.com/watch?v=x-DLQp9xb20

Observations• The redesign started with observing users, and

then proceeded with prototypes made from cardboard to simulate use cases

• Terminals are rotated 90° for privacy• Only one slot for money and receipts• User-specific options are displayed, such as

most frequently used accounts• Smooth animations show progress and when

money will come out

Exemple 5:“One laptop per child”http://one.laptop.org/

The XO laptop

The XO laptop

The XO laptop• Screen that can be flipped, supporting

three usage modes: laptop, tablet, and gamepad

• Keyboard is sealed to protect against sand and water

• Optional hand crank to charge the battery

• Antennas for mesh network• Distinctive colors to discourage theft• Target price: $100• Linux with educational software

(drawing, music, photos, programming)