1 / 39

Examples of user centered design

Explore user-centered design examples in document organization, from paper to virtual desktops, revealing user habits and technology challenges, ultimately aiming to enhance user experience.

ngomez
Download Presentation

Examples of user centered design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

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

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

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

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

  20. Example 3:Personal Digital Assistants (PDAs)

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

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

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

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

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

  26. Palm Pilot 1000

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

  28. Graffiti

  29. Example 4:Redesign of bank machinesby IDEO

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

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

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

  33. The XO laptop

  34. The XO laptop

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

More Related