Week 6 2015

Usability Engineering:
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): 381391. doi:
10.1037/h0055392. PMID1317471

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-usabilitywith-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-fittsslaw/

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-lawand-user-experience/

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

articipant 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-usabilitywith-fitts-law/

Special locations
Prime, magic pixels

s Law in action
prime pixelwhere your cursor is
http://sixrevisions.com/usabilityaccessibility/improving-usabilitywith-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-usabilitywith-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-usabilitywith-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

Its also important to account for high risk interactive

elements that you dont 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.95bps.
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)

Fittss 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-lawand-user-experience/

Fittss 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.h
tml

Fittss Rule Number 3: Avoid Muscular Tension

Take account of movements that are ackward
Fittss 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?