1. HCI – info3315 Week 7 Prototypes and people

2. Overview Prototypes – What is a prototype? – How are they useful for HCI? – What sorts? – How to create them? – What tools to use when? People – Fitts’ Law

3. What is a prototype?

4. http://dictionary.reference.com/browse/prototype

5. Slight shift Prototype theory

6. Think of the concept “bird”

7. https://en.wikipedia.org/wiki/User:DMR24/sandbox#/media/File:Bird_Ex amples.jpg

8. Prototype theory Berlin, B. & Kay, P. (1969): Basic Color Terms: Their Universality and Evolution, Berkeley. Wittgenstein, L., Philosophical Investigations (Philosophische Untersuchungen), Blackwell Publishers, 2001 Left image: https://en.wikipedia.org/wiki/File:Prototype_membership.gifhttps://en.wikipedia.org/wiki/File:Prototype_membership.gif Right image: http://image.slidesharecdn.com/metaphortutorialexpanded-141108103022-conversion- gate01/95/tutorial-on-creative-metaphor-processing-25-638.jpg?cb=1415444981

9. What is a prototype in HCI? Various sorts of prototypes

10. Stages in design Loop – Analysis – Design Conceptual model, user model Sketches exploring these – Prototype … different prototypes for different iterations … start with lost cost and build ready to throw away – Evaluate pool

11. How are prototypes useful for HCI?

12. http://www.slideshare.net/JeffWilson10/a-dude-and-his-prototyping- theory-a-love-story-sxswi-presentation-march-9-2014

15. So, is a sketch a prototype?

16. Example: Palm Pilot case of the wooden prototype Designing the PalmPilot: a conversation with Rob Haitani Information Appliances and Beyond: Interaction Design for Consumer Products, Morgan Kaufmann, 2000

17. HAI2008. Lifelong ambient companions: challenges and steps to overcome them Previous handhelds (eg Apple Newton) had failed - designers thought in terms of more features... Jeff Hawkins concluded small size was critical

18. HAI2008. Lifelong ambient companions: challenges and steps to overcome them 'I would print up some screenshot as we were developing the UI, and he'd hold it and pretend he was entering things, and people thought he was weird. He’d be in a meeting furiously scribbling on this mockup, and people would say, "Uh, Jeff, that's a piece of wood.” ’ My bold italics

19. HAI2008. Lifelong ambient companions: challenges and steps to overcome them “.... we showed them a simulation of synchronization with HotSync and the cradle, which at the time was a revolutionary concept, and they went totally nuts." My bold italics

20. HAI2008. Lifelong ambient companions: challenges and steps to overcome them Prototyping: Low-Fidelity (lo-fi) prototypes Quick to construct East to design alternatives Provide limited or no functionality Aim to show user the general look and feel, NOT the detail Help communication and exchange of ideas with users

21. HAI2008. Lifelong ambient companions: challenges and steps to overcome them Prototyping Techniques Paper-based sketches Paper-based storyboard Computer-aided sketches/storyboard Wizard of Oz / Video-prototyping Computer-based scenario simulation Computer-based Horizontal simulation Computer-based Vertical simulation Computer-based full functionality simulation Lo-Fi Hi-Fi

22. 22 www.id-book.com High-fidelity prototyping Prototype looks more like the final system than a low-fidelity version. Danger that users think they have a full system…….see compromises

23. HAI2008. Lifelong ambient companions: challenges and steps to overcome them High Fidelity (Hi-fi) prototypes Hi-fi prototypes Characterised by a high-tech representation of the design concepts Resulting in partial to complete functionality. Advantage: Enables users to truly interact with the system.

24. HAI2008. Lifelong ambient companions: challenges and steps to overcome them Problems with Hi-fi prototypes Take time to build  higher cost Testers and reviewers comment on fit and finish issues Reluctance to change the design Software prototypes can set expectations that are hard to change Users may think they have a full system A single bug can lead to a complete halt in evaluation

25. 25 www.id-book.com ‘Wizard-of-Oz’ prototyping The user thinks they are interacting with a computer, but a developer is responding to output rather than the system. When is this appropriate? Early? Late? Other? Is this easy? Hard? >Blurb blurb >Do this >Why? User

26. HAI2008. Lifelong ambient companions: challenges and steps to overcome them Comparing Lo-fi and Hi-fi Time-consuming to create Inefficient for proof-of-concept designs Blind users to major representational flaws Managements may think it is real Partial/complete functionality Interactive User-driven Clearly defines navigational scheme Use for exploration and test Marketing & sales tool Hi-fi Limited usefulness for usability tests Navigational and flow limitations Facilitator-driven Poor detailed spec Less time & lower cost Evaluate multiple design concepts Useful communication device People may be more willing to criticise Lo-fi DisadvantagesAdvantagesType

27. Prototyping tools

28. Wireframes Lines, outlines….

29. http://www.usability.gov/how-to-and-tools/methods/wireframing.html

30. Wireframes purposes Link information architecture to visible interface, with paths between screens Clarify layout “standards” Illustrate functionality Support exploration of screen design Step beyond conceptual towards details Documentation Communication between stakeholders: designers, programmers, client groups

31. Keep it simple – focus on what matters Do not use colors. Can use shares of grey. Do not use images. Detail that distracts from core concerns. Example “x” previously (.-2) Use only one generic font. Typography also for later - font size for headers and hierarchy. Not interactive elements eg drop-downs, mouse over ….

32. Tools Basics: PowerPoint – – http://www.boxesandarrows.com/view/interactive by Maureen Kelly http://www.boxesandarrows.com/view/interactiveMaureen Kelly – Balsamiq Could also explore (outside lab): – Axure is a popular commercial tool – student use – www.axure.com www.axure.com – Exports html for stretch task Html + Imagemaps Using editor like Dreamweaver – demo Dreamweaver has a free 30-day trialfree 30-day trial https://moqups.com/ https://marvelapp.com/manage

33. Lots of Lists of Tools Search for “Prototyping tools” or “Wireframing Tools” – http://www.cooper.com/journal/2013/07/designers-toolkit-proto-testing- for-prototypes?utm_source=Cooper&utm_campaign=017b6536a1- Newsletter_Sept13&utm_medium=email&utm_term=0_162d77b95f- 017b6536a1-85381653 (2013) http://www.cooper.com/journal/2013/07/designers-toolkit-proto-testing- for-prototypes?utm_source=Cooper&utm_campaign=017b6536a1- Newsletter_Sept13&utm_medium=email&utm_term=0_162d77b95f- 017b6536a1-85381653 – http://www.fuelyourcreativity.com/17-great-wireframing-tools-for-web- designers/ (2012) http://www.fuelyourcreativity.com/17-great-wireframing-tools-for-web- designers/ – http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302 (2012) http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302 – http://mashable.com/2010/07/15/wireframing-tools/ - “10 free wireframing tools” (2010) http://mashable.com/2010/07/15/wireframing-tools/ – http://www.uxbooth.com/blog/15-desktop-online-wireframing-tools/ (2010) http://www.uxbooth.com/blog/15-desktop-online-wireframing-tools/ – http://www.uie.com/articles/prototyping_tools/?link=tips100318_6 (2010) http://www.uie.com/articles/prototyping_tools/?link=tips100318_6 33© 2013 - Brad Myers

34. What Are People Using? – http://www.uie.com/articles/prototyping_ tools/?link=tips100318_6 http://www.uie.com/articles/prototyping_ tools/?link=tips100318_6 Mar 18, 2010 – My survey results are similar (2007) 34

35. Balsamiq

36. 36

37. 37

38. 38

39. 39

40. 40

41. 41

42. 42

43. 43

44. 44

45. Axure You can register for a copy, 30 day free trial and student licence 1 year –http://axure.com/downloadhttp://axure.com/download –https://www.axure.com/free-software-for- studentshttps://www.axure.com/free-software-for- students Generates html that you can export

46. Some Examples Demo http://www.axure.com/sample-prototypes http://www.axure.com/sample-prototypes Tutorials http://www.axure.com/learn http://www.axure.com/learn

47. PAUSE

48. People … Fitts’ Law

49. Fitts’ Law Fitts, Paul M. (June 1954). "The information capacity of the human motor system in controlling the amplitude of movement". Journal of Experimental Psychology 47 (6): 381– 391. doi:10.1037/h0055392. PMID 1317471doi10.1037/h0055392PMID1317471

50. Starting at the X, the right icon is faster to hit along the y-axis as it is effectively larger http://www.slideshare.net/johnrooksby/fitts-law-42467849

52. http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/

53. http://www.particletree.com/features/visualizing-fittss-law/ “… basic message … big things are easier to select … precise mathematical characterization … is exciting, …logarithmic function … so that small increases in size for small objects make it much easier to select them (but small increases in size for big objects …. ). And the same applies for changes in target distance.”

54. One interesting paper from 1996 by Evan Graham and Christine MacKenzine, …They show that the movement from the starting point to the target area could be divided into two parts: the initial high velocity phase and a deceleration phase.Evan Graham and Christine MacKenzine

55. Radial (pie) menus compared with classic dropdown http://www.smashingmagazine.com/2012/12/fittss-law-and-user- experience/

56. “Magic” special places on a screen Because a pointing device can only go so far in any direction, targets at the edge of the screen technically have infinite target widths … they also don’t require the user to have a deceleration phase when they approach these targets, since the edge of the screen will just stop them.

57. http://webdesign.tutsplus.com/articles/applying-fitts- law-to-mobile-interface-design--webdesign-6919 … scroll bars on Windows versus the Mac (pre OSX Lion). Windows: up arrow at the top of the scroll bar and the down arrow at the bottom, likewise with left and right. … [matches] the mental model of looking up for up and down and for down. Mac: puts the arrow buttons side by side … Fitts’ Law navigating between them is much quicker.

59. Age matters

60. http://hcil2.cs.umd.edu/trs/2003-16/2003-16.html Participant 1: 4 year 6 month old female. Participant 2: 5 year 8 month old female. Participant 3: 21 year-old female.

61. http://hcil2.cs.umd.edu/trs/2003-16/2003-16.html All paths taken by 5 year olds – target 32 pixels, distance 256 pixels.

62. http://hcil2.cs.umd.edu/trs/2003-16/2003-16.html All paths taken by adult participants on same task.

63. Lessons from Fitts’ Grouping, layout, hierarchies

64. http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/

65. Special locations Prime, magic pixels

66. http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/ Fitts’ Law in action – The prime pixel……where your cursor is now

67. Windows, …. right-click ….contextual menu of options usually appears that has its point of origin at the prime pixel. http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/

68. Pop-up Menus - Popping menus at the location of the cursor helps reduce travel distance thereby creating a smaller movement time. You see this in items such as right-click menus and flyouts.

69. Magic pixels….. What are they? Fitts’ link? Why are they important? http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/

70. Corners - As the mouse cursor stops at the edge of the screen, corners can be considered to have an "infinite" width. The user needs much less precision because they can simply fling the mouse in the direction of a corner and the limitations of the screen restrict where the pointer ends up. This is partly why you see the windows start menu and the Apple menu in the corners of your screen.

71. Does this still work well with large screens? Top and Bottom - Similarly, the top and bottom are easier to access due to screen limitations. These are not as easy as corners because they are only limited vertically, but still allow for quicker access than a point in the middle of the screen. This is why Apple always place application menus at the top of the screen instead of at the top of the application window.

72. Dangerous proximity

73. It’s also important to account for high risk interactive elements that you don’t want the user to accidentally activate. Those should often be kept further away from heavily used interactive items.

74. Beyond the mouse? Class activity: How does touch and mid- air-gesture interaction relate to Fitts’ Law? Similarities, differences

75. MacKenzie, I. S. (2015). Fitts’ Throughput and the Remarkable Case of Touch-Based Target Selection. In Human-Computer Interaction: Interaction Technologies (pp. 238-249). Springer International Publishing.

76. Abstract The method of calculating Fitts’ throughput is detailed, considering task characteristics, the speed-accuracy trade-off, data collection, and data aggregation. The goal is to bring consistency to the method of calculation and thereby strengthen between-study comparisons where throughput is used as a dependent measure. In addition, the distinction between indirect and direct pointing devices is elaborated using the examples of a mouse as an indirect pointing device and a finger as a direct pointing device. An experiment with 16 participants using a smart phone was conducted as an empirical test of direct touch-based target selection. Overall, the throughput was 6.95 bps. This is a remarkable figure – about 50 % higher than accepted values for a mouse. The experiment included task type (1D vs. 2D) and device position (supported vs. mobile) as independent variables. Throughput for the 1D task was 15 % higher than for the 2D task. No difference in throughput was observed between the supported and mobile conditions.

77. Study Compare indirect versus direct pointing devices: – a mouse as an indirect pointing device – a finger as a direct pointing device. 16 participants -- a smart phone – Overall, the throughput was 6.95 bps. – about 50 % higher than accepted values for a mouse. independent variables – task type (1D vs. 2D) – device position (supported vs. mobile) – Throughput for the 1D task 15 % higher than for 2D task. – No difference between the supported and mobile conditions.

78. http://jareddonovan.com/programming/fitts_law/

79. Josh Clark points outJosh Clark points out: additional variable in Fitts’ Law that increases the movement time iPhone menus are placed at the bottom due to the way our thumb bends that our thumb is already covering that area because of the way that we hold the phone. The top corner opposite the hand you hold the phone with can require a little extra effort and stretching. The motion between two targets is no longer a fluid, resistance-free motion.

80. Common thumb reach when holding smartphone in horizontal orientation.. left and right edges of the screen become more important … to minimize movement time. If both hands as above, they can be used simultaneously Essentially same Fitts’ Law but in parallel in two areas

81. Some rules of thumb! Based on Fitts’ Back on WIMP devices (Windows, Icons, Mouse-Pointer but really means conventional UI)

82. Fitts’s Rule Number 1: Create Larger Targets Left: you need to click within the box, right is more forgiving and is a larger target http://www.smashingmagazine.com/2012/12/fittss-law-and-user- experience/

83. Fitts’s Rule Number 2: Minimize Cursor Movement but at the same time, group things by function and class The case of dropdown menus: good grouping but Fitts’ challenges?

84. What can you do to linear popup menus to better balance access time for all items? What about dynamic menus based on usage? How does this compete with mental models? http://www.asktog.com/columns/022DesignedToGiveFitts.html

85. Fitts’s Rule Number 3: Avoid Muscular Tension Take account of movements that are ackward Fitts’s Law can facilitate and prolong interaction with vertical touchscreens. (Example: Perceptive Pixel)Perceptive Pixel

86. Summary Empirical foundations Heuristics for designers – Grouping items for flow of action Special locations – Prime pixel – Magic pixels

87. Further reading And examples

88. A Quiz Designed to Give You Fitts http://www.asktog.com/columns/022DesignedToGiveFitts.html Microsoft Toolbars offer the user the option of displaying a label below each tool. Name at least one reason why labeled tools can be accessed faster. (Assume, for this, that the user knows the tool and does not need the label just simply to identify the tool.) You have a palette of tools in a graphics application that consists of a matrix of 16x16-pixel icons laid out as a 2x8 array that lies along the left-hand edge of the screen. Without moving the array from the left-hand side of the screen or changing the size of the icons, what steps can you take to decrease the time necessary to access the average tool? A right-handed user is known to be within 10 pixels of the exact center of a large, 1600 X 1200 screen. You will place a single-pixel target on the screen that the user must point to exactly. List the five pixel locations on the screen that the user can access fastest. For extra credit, list them in order from fastest to slowest access. Microsoft offers a Taskbar which can be oriented along the top, side or bottom of the screen, enabling users to get to hidden windows and applications. This Taskbar may either be hidden or constantly displayed. Describe at least two reasons why the method of triggering an auto-hidden Microsoft Taskbar is grossly inefficient.

89. A Quiz Designed to Give You Fitts http://www.asktog.com/columns/022DesignedToGiveFitts.html Explain why a Macintosh pull-down menu can be accessed at least five times faster than a typical Windows pull-down menu. For extra credit, suggest at least two reasons why Microsoft made such an apparently stupid decision. What is the bottleneck in hierarchical menus and what techniques could make that bottleneck less of a problem? Name at least one advantage circular popup menus have over standard, linear popup menus. What can you do to linear popup menus to better balance access time for all items? The industrial designers let loose on the Mac have screwed up most of the keyboards by cutting their function keys in half so the total depth of the keyboard was reduced by half a key. Why was this incredibly stupid? What do the primary solutions to all these questions have in common?