1. SE365 Human Computer Interaction Week 8 Basit Qureshi

2. About! Types of Prototypes Prototype Fidelity Course Specs & assessments What is expected from you Preamble!

3. Acknowledgements Dr. James Landay (Stanford University) Dr. Jeff Huang (Brown University)

4. TYPES OF PROTOTYPES

5. There is no universal vocabulary for prototyping When you’re out in the “real world”, you will probably find that any one of these words can refer to many things – And that one sort of prototype can have many names even within the same team It’s a good idea to double-check that you and your coworkers are on the same page Language Caveat

6. Visual representations of an interface’s intended layout, typically without its actual content Good for evaluating content placement Wireframes http://uxmatters.com/mt/archives/2007/03/wireframing- with-patterns.php

7. Static prototypes which focus on graphic design decisions, including colors, fonts, layouts, logos, media, etc. Good for evaluating aesthetic choices Compositions (“Comps”) http://anthonysanders.us/blog/2009/05/comp-designs-for-ganache- restaurant-and-bakery/

8. Inspired by storyboards used by animators Series of images which represent how an interface would be used to accomplish a task – Could be a FSM or a narrative Good for evaluating workflow Storyboards http://net.typepad.com/net/2007/07/storyboards-as-.html

9. Paper representations of an interface used to simulate interaction Good for evaluating general concept, specific workflows, and usability Paper Prototypes http://felixberger.info/wp-content/uploads/2008/09/br_online_- _prototype.jpg

10. Interactive—but not necessarily functional—user interfaces created with any of a number of platforms – E.g. Adobe Flash, HTML/CSS, etc. Good for evaluating a working design which has been derived from a few rounds of less costly prototypes Digital Prototypes

11. PROTOTYPE FIDELITY

12. Traditionally, prototypes are categorized as either lo-fi (low fidelity) or hi-fi (high fidelity) Fidelity can be thought of as how close of an approximation of the final product is being attempted In this class, we will be using lo-fi as a synonym for paper prototyping and hi-fi as a synonym for digital prototyping – But as you are about to see, it’s actually more complicated than that! Lo-Fi vs. Hi-Fi

13. Fidelity can be broken down into four basic dimensions: – Breadth – Depth – Look – Interaction Dimensions of Fidelity http://www.sapdesignguild.org/editions/edition7/proto_design.as p http://six-16.com/ux/index.html

14. The “breadth” of a prototype refers to how much of the product’s functionality is represented in the prototype – A very narrow prototype only represents a single feature – A broad prototype represents all intended functionality – Prototypes should generally be as broad as needed to cover basic tasks, but not much more Breadth

15. The “depth” of a prototype refers to how much of the prototype’s backend is functional, and how robust it is – A very shallow prototype has no backend at all and is hard-coded to respond as though the user had provided ideal input – A deep prototype has some logic and error- handling capabilities – At first glance, depth may seem unimportant, but it affects the amount of exploration a user can do – Thus depth can actually have a profound influence on user testing! Depth

16. “Look” is probably what most people think of when they think of prototype fidelity It refers to how accurately a prototype represents the product’s intended appearance, including fonts, colors, and graphics It’s generally a good idea to hold off on something which has a high fidelity look until later in the design process Look

17. “Interaction” refers to how the prototype handles input and output For example, you might create a digital prototype for an iPad application which runs on your desktop and responds to traditional a traditional mouse and keyboard Do not confuse interaction with depth! Interaction

18. IN PRACTICE

19. Who are your users? What tasks are they trying to accomplish? Don’t guess—do your research! – Observe users in their natural habitats – Check out solutions that already exist (even hacky ones) Make sure you are focusing on a problem at the right level of detail – At this stage, don’t think “bicycle cup holders” – Think “helping cyclists stay hydrated without getting hit by a car” Gathering Data

20. It can be helpful to do some sort of warm-up before you start brainstorming You could allot ~5 minutes to free-form chatter about related products or tasks Or you could encourage your team to start thinking creatively and feeling comfortable sharing their thoughts with an associations game – Examples: “Songs David Hasselhoff should cover”, “Mythological animal which would be most lucrative to own” Brainstorming Warm-Up

21. One conversation at a time Stay focused Encourage wild ideas Defer judgment Build on ideas from other brainstormers Brainstorming: IDEO Rules None of this.

22. Affinity diagramming is one way to sort ideas It can be used to identify and group desired functionality The steps: 1.Solicit ideas; write each of them on a Post-It note 2.Stick Post-It notes on a wall 3.Have participants get up and rearrange notes into relational clusters without speaking to one another 4.As a group, discuss what the clusters represent (you might want to give them catchy names) Sorting ideas Affinity diagramming is like card sorting, but will produce nonhierarchical results.

23. Define the importance of each idea: – Does it address the problem? – Will target users like it? – Are the technical requirements available? – Is it affordable to implement? Rank ideas by importance Pick the top N ideas Valuing Ideas

24. Now that you’ve got some ideas, you can start making a paper prototype It may seem difficult to represent something as complicated as a modern software interface with something as old school as paper But the good news is, a lot of metaphors common to UI design were inspired by paper! Lo-Fi

25. Example: Tabbed Panel Images from: http://www.alistapart.com/articles/paperprototyping/

26. Example: Drop-down Menu

27. Example: Dynamic Web Content

28. Example: Pop-Up Windows

29. Lo-fi prototypes don’t require any technical skill, so anyone can participate in creating them You can get user feedback early on in the design process Paper prototypes can seem less intimidating than digital prototypes They can also result in more creative feedback – …and less nitpicky feedback Why Go lo-fi?

30. Critique is a method of soliciting feedback which was developed by studio art educators You display whatever lo-fi prototype(s) you have developed for your product to a small group of peers They share their immediate reactions to your ideas and weigh in on whatever open questions you have identified Critique http://www.flickr.com/photos/pjchmiel/2972140234

31. Be clear about what sort of feedback you’re looking for – Overall idea? – Specific workflows or interactions? – Usability? – Technical feasibility? – Graphic design? Answer questions and correct misconceptions, but do not argue in favor of your design Show alternative designs if possible How to Get the Most from a Critique

32. Talk about the design, not the designer – NO: “You are really bad at handling accessibility.” – YES: “If you implement this as is, a visually impaired user will not be able to use the secondary navigation.” Point out positive aspects and be specific – NO: “It looks good.” – YES: “The layout makes finding information on the page very easy.” Ask for alternatives rather than offering solutions – NO: “You should do this instead of that.” – YES: “Have you considered any other input methods?” How to Give a Good Critique

33. Once you have developed a lo-fi prototype and solicited feedback on it through peer critique and user testing: – You may wish to create another lo-fi prototype (isn’t iterative design fun?) – Or you may be ready to move on to a hi-fi prototype Which choice you make will be a function of how much of your original design you feel needs to change Remember, a high fidelity prototype is a non-trivial time investment Depending on how you build it, it may end up being the first code your write for your final product Hi-Fi

34. VIDEO PROTOTYPING

35. Types of Prototypes Prototypes are concrete representations of a design Prototype dimensions – representation: form of the prototype off-line (paper) or on-line (software) – precision: level of detail (e.g., informal or polished) – interactivity: watch-only vs. fully interactive fixed prototype (video clips) fixed-path prototype (each step triggered by specified actions) – at extreme could be 1 path or possibly more open (e.g., Denim) open prototype (real, but limited error handling or performance) – evolution: expected life cycle of prototype e.g., throw away or iterative Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 35

36. Video Brainstorming Participants act ideas out in front of a video camera Goal is to create as many new ideas as possible – each should take 2-5 minutes to generate & capture – run standard brainstorming session first for ideas Advantages – video easier to understand later than notes – participants actively experience interaction & preserve record of the idea Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 36 Video brainstorming of an animated character in Prototyping Tools & Techniques by Beaudouin-Lafon & Mackay. Character follows user with its eyes.

37. Video Prototyping Illustrate how users will interact w/ system Unlike brainstorming, video prototyping contracts the design space Quick to build Inexpensive Forces designers to consider details of how users will react to the design May better illustrate context of use Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 37

38. With good storyboards, a good short film can be shot in 1 hour Paper Protoypes, Exisiting Software or Projected Images as a background Optional Narration, Conversation preferred narrator explains events & others move images/illustrate interaction while actors perform movements – viewer expected to understand w/o voice-over Usually fixed prototypes, but can also use in open prototypes e.g., live video as Wizard of Oz tool & 2nd camera to capture 38 Video Prototype Characteristics Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation

39. Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 39 Wizard of Oz Video Prototype Image from Beaudouin-Lafon & Mackay

40. VIDEO PROTOTYPE EXAMPLES Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 40

41. greenBean Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 41

42. Carbon Shopper Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 42

43. Concept + Vision Videos How to capture an early concept and tell a story Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 43

44. It’s About Details Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 44

45. People Context The Solution Key Pieces of Successful Concept Videos Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 45

46. Keep it Simple Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 46

47. Use what you know and what you have Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 47

48. CONCEPT VIDEO EXAMPLES Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 48

49. The Goal of any good conceptual film… Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 49

50. Define What is the message of the film? Can you describe it in a few lines? Make a basic plot Discuss plot ideas until you get a few that really make sense, decide characters Storyboard Turn these into multiple storyboards of scenes to plan how you will film it * note: not UI storyboards! Making a Concept Video Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 50

51. Storyboarding Use appropriate angles Use sticky notes so scenes can be moved Include lines to be spoken if necessary Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 51

52. More Example Videos Video Prototypes –clustercluster –dont_forgetdont_forget –dont_forget2dont_forget2 –dont_forget_russiandont_forget_russian –Cell Phone Music PlayerCell Phone Music Player –CarbonShopperCarbonShopper –StyleEyeStyleEye Autumn 2014HCI+D: User Interface Design, Prototyping, & Evaluation 52 Concept Videos –LingoImmersionLingoImmersion –MicroHealthMicroHealth –PerspectivePerspective –MusistantMusistant –Project HarmonyProject Harmony –WanderlustWanderlust –MicroHealthMicroHealth Final Hi-Fi Videos –PerspectivePerspective –RiiRii –HeroHero –PaintoraPaintora

53. Shoot your Film Get as many shots as you can! you never know what might be useful later. Edit your Film Use your storyboard! This part should be simple if you have storyboarded correctly. If you choose to use music Now might be a good time to pick some songs. Music can be very powerful if chosen well. (see Vimeo for music you can use free) Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 53

54. Lighting

56. High Fidelity Video Examples Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 56

57. People Use Close-Up shots Capture emotion Avoid conversation (This is the hardest to get right and ends up distracting) Use the right person for the role-ask friends

58. Plan your story – Storyboard it. Is the story believable? Film multiple angles Film longer than the shot needs (you can always cut down) Context

59. Wow Effect Show your solution at it’s best, save the best for last Subtlety Show how the solution makes the user feel – subtly Don’t ‘Sell’ it Don’t tell people to use your solution, show them why The Solution

60. Summary Video prototypes allow us to quickly communicate how a user will use a design Concept videos set up more of the story of use Both techniques are useful – your projects are at the concept video stage Autumn 2014 HCI+D: User Interface Design, Prototyping, & Evaluation 60