HCI – info3315Week 7

Prototypes and people

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

What is a prototype?

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

Slight shift

Prototype theory

Think of the concept “bird”

https://en.wikipedia.org/wiki/User:DMR24/sandbox#/media/File:Bird_Examples.jpg

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

What is a prototype in HCI?

Various sorts of prototypes

• 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

How are prototypes useful for HCI?

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

So, is a sketch a prototype?

Example: Palm Pilotcase of the wooden prototype

Designing the PalmPilot: a conversation with Rob HaitaniInformation Appliances and Beyond: Interaction Design for Consumer Products, Morgan Kaufmann, 2000

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

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

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

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

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

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

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.

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

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

HAI2008.Lifelong ambient

companions: challenges and steps to overcome

them

Comparing Lo-fi and Hi-fi

Time-consuming to createInefficient for proof-of-concept designsBlind users to major representational flawsManagements may think it is real

Partial/complete functionalityInteractiveUser-drivenClearly defines navigational schemeUse for exploration and testMarketing & sales tool

Hi-fi

Limited usefulness for usability testsNavigational and flow limitationsFacilitator-drivenPoor detailed spec

Less time & lower costEvaluate multiple design conceptsUseful communication devicePeople may be more willing to criticise

Lo-fi

DisadvantagesAdvantagesType

Prototyping tools

Wireframes

Lines, outlines….

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

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

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

Tools• Basics:• PowerPoint –

– http://www.boxesandarrows.com/view/interactive by Maureen Kelly

– Balsamiq

• Could also explore (outside lab):– Axure is a popular commercial tool – student use– www.axure.com– Exports html for stretch task

• Html + Imagemaps• Using editor like Dreamweaver – demo• Dreamweaver has a free 30-day trial

• https://moqups.com/• https://marvelapp.com/manage

© 2013 - Brad Myers

What Are People Using?

– http://www.uie.com/articles/prototyping_tools/?link=tips100318_6 • Mar 18, 2010

– My survey results are similar (2007)

4%

6%

6%

8%

10%

12%

13%

17%

19%

23%

25%

37%

43%

52%

54%

66%

83%

0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%

Microsoft Expression Blend

GoLive

Flex

Axure

AfterEffects

Frontpage

Director

Fireworks

VisualStudio

Omnigraffle

InDesign

Visio

Flash

Illustrator

PowerPoint (for mocking up interfaces)

Dreamweaver

Photoshop

34

Balsamiq

36

37

38

39

40

41

42

43

44

Axure

• You can register for a copy, 30 day free trial and student licence 1 year– http://axure.com/download– https://www.axure.com/free-software-for

-students

• Generates html that you can export

Some Examples

• Demohttp://www.axure.com/sample-prototypes

• Tutorialshttp://www.axure.com/learn

PAUSE

People … Fitts’ Law

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 1317471

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

http://www.slideshare.net/johnrooksby/fitts-law-42467849

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

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

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.

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

“Magic” special places on a screenBecause 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.

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.

⏎

Age matters

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.

http://hcil2.cs.umd.edu/trs/2003-16/2003-16.html

All paths taken by 5 year olds – target 32 pixels, distance 256 pixels.

http://hcil2.cs.umd.edu/trs/2003-16/2003-16.html

All paths taken by adult participants on same task.

Lessons from Fitts’

Grouping, layout, hierarchies

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

Special locations

Prime, magic pixels

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

Fitts’ Law in action – The prime pixel……where your cursor is now

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/

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.

Magic pixels….. What are they? Fitts’ link? Why are they important?

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

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.

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.

Dangerous proximity

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.

Beyond the mouse?

Class activity: How does touch and mid-air-gesture interaction relate to Fitts’ Law?

Similarities, differences

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.

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.

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

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

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

Some rules of thumb!

Based on Fitts’Back on WIMP devices

(Windows, Icons, Mouse-Pointer but really means conventional UI)

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/

Fitts’s Rule Number 2: Minimize Cursor Movementbut at the same time, group things by function and class

The case of dropdown menus: good grouping but Fitts’ challenges?

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

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

Summary

• Empirical foundations• Heuristics for designers

– Grouping items for flow of action• Special locations

– Prime pixel– Magic pixels

Further reading

And examples

A Quiz Designed to Give You Fittshttp://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.

A Quiz Designed to Give You Fittshttp://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?