1 / 67

SE 204 – Human Computer Interaction

SE 204 – Human Computer Interaction. Lecture 6 : Prototypes Lecturer: Gazihan Alankuş. Please look at the last slides for assignments (marked with TODO ). What we talked about before. Collecting requirements Identifying the current workflow Using a storyboard to propose a new workflow

landon
Download Presentation

SE 204 – Human Computer Interaction

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. SE 204 – Human Computer Interaction Lecture 6: Prototypes Lecturer: Gazihan Alankuş Please look at the last slides for assignments (marked with TODO)

  2. What we talked about before • Collecting requirements • Identifying the current workflow • Using a storyboard to propose a new workflow • Drawing UI sketches

  3. What we will talk about • More about UI sketches • Prototypes

  4. Motivation • Why are we doing all this? • Why not just create the software? • after collecting the requirements • finding a better workflow • Why take the time to draw? • storyboards • design sketches • paper prototypes (user interfaces made with paper)

  5. Spiral Model: smaller scale iterations Design Requirements Design Requirements Design Start Requirements Develop Develop Test Test Develop Test Deliver $$$$$$$

  6. Spiral Model: smaller scale iterations Design • If we create the real software instead of its representations on paper, we will lose a lot of time! • We want to get feedback from users as early as possible • Talking about possible solutionsis not enough to get valuable feedback, you have to show them possible solutions and get usersto experience them Requirements Design Requirements Design Start Requirements Develop Develop Test Test Develop Test Deliver $$$$$$$

  7. Motivation • We want early feedback • The process has to be • Quick • Inexpensive • So that we can • rapidly explore the set of possible solutions • quickly improve promising ones via iteration

  8. Things that we can do quickly • Consider alternative workflows and create storyboards for them • Get feedback about them • Improve them • Create UI sketches for promising storyboards • Get feedback about them • Improve them • Create paper prototypes for promising sketches • Get feedback about them • Improve them

  9. Iterate quickly Design Requirements Design Requirements Design Start Requirements Develop Develop Test Test Develop Test Deliver $$$$$$$

  10. Motvation • How do you get feedback for something you drew on paper? • Is it enough for the user to look at it and voice his opinions? • We know that users usually don’t know what they need • We need to watch them use the interface • If we had the actual software, we could let the user use it and clearly see what needs to be improved. • How can we do this when all we have is things that are drawn on paper? • Users can’t use paper interfaces, can they? • Let’s watch a video http://www.youtube.com/watch?v=GrV2SZuRPv0

  11. Motivation • Oh, users can use interfaces drawn on paper! • Maybe it’s not the same as real software, but definitely better than simply asking for their opinions • Using paper prototypes, we can get feedback from users that is comparable with feedback that we would get by using the actual software!

  12. Prototypes

  13. Prototypes • Remember playing with your toys when you were 6 years old? • Toys + imagination = loads of fun! • Let’s play cars! • Shared imagination • Make your friend experience a car race • He can step into your imagination and contribute • Any other board game • Same idea • Create a low-fidelity interactive experience that enables you to share imagination with others

  14. Why Prototype? • Communicate (with users and other team members) • Demonstrate • Make them experience rather than convince • Decide (yourself and with team members) • You are stateful! • Decisions about the interface are better made when playing/using. Not when staring at Microsoft Word.

  15. Communicate: Talking is not enough! • “A picture is worth a thousand words” -Napoleon • You are not a painter. You are designing interactive experiences! • “A one-minute user experience is worth a thousand pictures!” -ME!

  16. Decide • Use -> Better decisions • How can you use it before creating it? • PAPER PROTOTYPE! • Paper prototypes allow you to simulate using the interface you want to create, so that you can make better decisions without using the actual interface

  17. Prototypinginotherareas • Houses Spring2010 CMSC434IntroductiontoHumanComputerInteraction 13

  18. Prototypinginotherareas • Car Spring2010 CMSC434IntroductiontoHumanComputerInteraction 14

  19. Childrencollaboration • Users: – Children • Task: – Makingseatingarrangementcollaboratively seating • Technology: – Tabletop Spring2010 CMSC434IntroductiontoHumanComputerInteraction 16

  20. Spring2010 CMSC434IntroductiontoHumanComputerInteraction 17

  21. Spring2010 CMSC434IntroductiontoHumanComputerInteraction 18

  22. Hybridmuseumexperience • Users: – Museumvisitors • Task: – Obtainmoreinformationaboutanartifact • Technology: – Somekindofdigitaldisplay Spring2010 CMSC434IntroductiontoHumanComputerInteraction 19

  23. Spring2010 CMSC434IntroductiontoHumanComputerInteraction 20

  24. WirelessP2P • Users: – Teenagers • Tasks: – Sharedatawithothers • Technology: – Mobiledevices Spring2010 CMSC434IntroductiontoHumanComputerInteraction 21

  25. Spring2010 CMSC434IntroductiontoHumanComputerInteraction 22

  26. Cell-phonerobot • User: – Cellphoneusers • Task: – Interactingwithacellphone • Technology: – Robot Spring2010 CMSC434IntroductiontoHumanComputerInteraction 23

  27. Spring2010 CMSC434IntroductiontoHumanComputerInteraction 24

  28. Spring2010 CMSC434IntroductiontoHumanComputerInteraction 25

  29. Paper prototypes • If you are mainly creating software, creating user interfaces on paper is usually sufficient • Paper prototypes are actively used in many design firms to mock up the user interface before actually creating it

  30. Howshould we create paper prototypes? • Start with the design sketches • Improve them a bit, enough to make it possible for someone to use it. • Don’t try to improve the visual look, we want our prototypes to be low fidelity as well

  31. How should we create prototypes? • Don’t get attached • Plan to throw one or two away • Throwing away is not easy. Force yourself at least once. • The whole point of prototypes is to feel free! • Forget about it and create a new one with a different idea, rather than trying to force things to work together • Parallelize them • Keep more than one working paper prototype when you have multiple really good options

  32. Buliding paper prototypes • To simulate a working interface, drawing is not enough • Pieces of user interfaces change • Menus appear • Popups are shown • Text is entered • Warnings are shown • Build paper prototypes from multiple pieces of paper, post-it notes, etc. • Be creative!

  33. Elements of a possible prototype • Windows,background • Poster board,large table top • Menus,window content,dialog boxes • Index cards • Text fields,checkboxes,short messages • Write on tapes,masking tapes • Highlighting,user typing • Transparencies • Animation • Move with hands • Sound • Make noises

  34. Ideas for tools that you can use • White poster board • Big index cards • Restickableglueand post-it notes • White correction tape • Overhead transparencies • Photocopiers • Pens,markers,scissors,tape

  35. Makeitlarge pointing=clicking Spring2010 CMSC434IntroductiontoHumanComputerInteraction 47

  36. Keepit(mostly)blackandwhite Spring2010 CMSC434IntroductiontoHumanComputerInteraction 48

  37. KeepUIcomponentsorganized Spring2010 CMSC434IntroductiontoHumanComputerInteraction 49

  38. Makephotocopiesof componentsformultipleruns Spring2010 CMSC434IntroductiontoHumanComputerInteraction 50

  39. Usertransparencyfortextinput Spring2010 CMSC434IntroductiontoHumanComputerInteraction 51

  40. Stickynotes Spring2010 CMSC434IntroductiontoHumanComputerInteraction 52

  41. Useindexcardsfordifferent dataitems Spring2010 CMSC434IntroductiontoHumanComputerInteraction 53

  42. Dialogboxesandpopup messages Spring2010 CMSC434IntroductiontoHumanComputerInteraction 54

  43. Highlighting Spring2010 CMSC434IntroductiontoHumanComputerInteraction 55

  44. Fidelity • Paper prototypes should be “low fidelity” • They should evolve into “high fidelity” prototypes through iterations • What does that mean?

  45. Fivefidelitydimensions 1.Levelofvisualrefinement 2.Breadthoffunctionality 3.Depthoffunctionality 4.Richnessofinteractivity 5.Richnessofdatamodel Spring2010 CMSC434IntroductiontoHumanComputerInteraction 5

  46. 1.Levelofvisualrefinement High • Theprototypelooks verysimilartothefinal product. • Pixel-accuratemockups Low • Theprototypedoesnot looklikethefinal product. • Hand-drawnsketches • Box-and-linewireframes • Brick Spring2010 CMSC434IntroductiontoHumanComputerInteraction 6

  47. 2.Breadthoffunctionality Low • Theprototypeonly supportsasmallsubset oftasks. High • Theprototypesupports allthetasks. • Horizontalprototype Spring2010 CMSC434IntroductiontoHumanComputerInteraction 7

  48. 3.Depthoffunctionality Low • Theprototypeallows userstoperformonly partsofatask. High • Theprototypeallows userstocompleteatask. • Verticalprototype Spring2010 CMSC434IntroductiontoHumanComputerInteraction 8

  49. 4.Richnessofinteractivity Low • Theprototypegives userslimitedwaysto interact. High • Theprototypeprovides afullyinteractive experience. Spring2010 CMSC434IntroductiontoHumanComputerInteraction 9

  50. 5.Richnessofdatamodel Low • Theprototypeincludesa smallamountoffake data. High • Theprototypeincludesa largeamountofreal data. Spring2010 CMSC434IntroductiontoHumanComputerInteraction 10

More Related