Examples of user centered design

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

2. Example 1:Virtual desktop

3. 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)

4. 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

5. 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

6. 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?

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

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

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

10. Michel Beaudouin-Lafon, 2001http://scholar.google.ca/scholar?q=%22Novel+interaction+techniques+for+overlapping+windows%22Video:http://www.acm.org/uist/archive/videos/2001/p153-beaudouin-lafon.mov

11. 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%22Video:http://www.youtube.com/watch?v=VAWnIGo9Kro

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

13. BumpTop (Agarawala et Balakrishnan, 2006)http://scholar.google.ca/scholar?q=agarawala+balakrishnan+keepin+%22Pushing+the+desktop+metaphor%22http://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

14. Example 2:Tape Drawing

15. Tape Drawing

19. Digital Tape Drawing (Balakrishnan et al. 1999)http://scholar.google.ca/scholar?q=balakrishnan+fitzmaurice+%22Digital+tape+drawing%22Video:http://www.dgp.utoronto.ca/~ravin/videos/uist99_tapetool.mpg

20. 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 DH Hands close: More variability NDH DH NDH Hands far apart: Smoother curve

21. 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

22. 3D Tape Drawing (Grossman et al. 2002)http://scholar.google.ca/scholar?q=grossman+balakrishnan+%223D+curves+with+digital+tape+drawing%22Video:http://www.dgp.utoronto.ca/~ravin/videos/chi2002_principle3dcurves.mpg

23. Example 3:Personal Digital Assistants (PDAs)

24. Apple Newton (≈1993) Video: http://www.youtube.com/results?search_query=apple+newton+getting+started http://oldcomputers.net/pics/newton-right.jpg http://cache.gizmodo.com/assets/images/4/2012/01/d0531a85c7fb57d39ebf0a88dd78778a.jpg

25. 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

26. 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?"

27. Palm Pilot • Size: must fit in a shirt pocket.Prototype made out of wood and paper:

28. 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!

29. Palm Pilot 1000

30. 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

31. Graffiti

32. Example 4:Redesign of bank machinesby IDEO

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

34. 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

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

37. The XO laptop

38. The XO laptop

39. 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)