HCI – info3315
Week 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_Ex
amples.jpg
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.gif
Right image: http://image.slidesharecdn.com/metaphortutorialexpanded-141108103022-conversiongate01/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-prototypingtheory-a-love-story-sxswi-presentation-march-9-2014
So, is a sketch a prototype?
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
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
•
'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.” ’
HAI2008.
Lifelong ambient
companions: challenges
and steps to overcome
My bold italics
•
“.... 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."
HAI2008.
Lifelong ambient
companions: challenges
and steps to overcome
My bold italics
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
Prototyping Techniques
Lo-Fi

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
Hi-Fi
HAI2008.
Lifelong ambient
companions: challenges
and steps to overcome
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
www.id-book.com
22
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
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
HAI2008.
evaluation
Lifelong ambient

companions: challenges
and steps to overcome
‘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?
User
>Blurb blurb
>Do this
>Why?
www.id-book.com
25
Comparing Lo-fi and Hi-fi
Type Advantages
Disadvantages
Lo-fi


Evaluate multiple design
concepts

Less time & lower cost

Useful communication device

People may be more willing to
criticise

Hi-fi
Limited usefulness for usability
tests
Navigational and flow limitations
Facilitator-driven

Poor detailed spec

Partial/complete functionality

Interactive



User-driven

Clearly defines navigational scheme

Use for exploration and test

Marketing & sales tool

Time-consuming to create
Inefficient for proof-of-concept
designs
Blind users to major
representational flaws

Managements may think it is
real

HAI2008.
Lifelong ambient
companions: challenges
and steps to overcome
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
What Are People Using?
– http://www.uie.com/articles/prototyping_
tools/?link=tips100318_6
•
Mar 18, 2010
– My survey results are similar (2007)
83%
Photoshop
Dreamweaver
66%
54%
PowerPoint (for mocking up interfaces)
Illustrator
52%
Flash
43%
37%
Visio
InDesign
25%
23%
Omnigraffle
VisualStudio
19%
Fireworks
17%
Director
13%
Frontpage
12%
10%
AfterEffects
Axure
8%
Flex
6%
GoLive
6%
Microsoft Expression Blend
4%
0%
© 2013 - Brad Myers
10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
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-forstudents
• Generates html that you can export
Some Examples
• Demo
http://www.axure.com/sample-prototypes
• Tutorials
http://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 larger
http://www.slideshare.net/johnrooksby/fitts-law-42467849
http://www.slideshare.net/johnrooksby/fitts-law-42467849
http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-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.”
http://www.particletree.com/features/visualizing-fittss-law/
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 dropdown
http://www.smashingmagazine.com/2012/12/fittss-law-and-userexperience/
“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.
⏎
http://webdesign.tutsplus.com/articles/applying-fittslaw-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
Fitts’ Law in action –
The prime pixel……where your cursor is now
http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/
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.
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.
Does this still work well with large screens?
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 midair-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-userexperience/
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?
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 Tension
Take account of movements that are ackward
Fitts’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 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.
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?