Lauren Bricker
CSE 340 Spring 23
where
MT=a+b∗log2(DistSize+1)
where
MT=a+b∗log2(DistSize+1)
where
MT=a+b∗log2(DistSize+1)
where
where
This is just a line
Fitts’ law tells us about difficulty for pointing and selection tasks
Original experiment from Paul Morris Fitts involved tapping on plates as quickly as possible.
Device/Part | Study | Throughput (bits/s) | Relative to Optimal |
---|---|---|---|
Finger | Langolf (1976) | 38 | |
Wrist | Langolf (1976) | 23 | |
EyeTracker | Ware & Mikaelian (1987) | 13.7 | |
Hand | Fitts (1954) | 10.6 | |
Arm | Langolf (1976) | 9.5 | |
Xbox 360 | Zaranek (2014) | 5 | .47 (arm) |
Mouse | Mackenzie (2001) | 4.9 | .46 (hand) |
Neck | Pfaff (1985) | 4.2 | |
Trackball | Mackenzie (2001) | 3.0 | .28 (hand) |
Touchpad | Mackenzie (2001) | 2.9 | .27 (hand) |
Head | Hansen (2018) | 2.5 | .51 (neck) |
Gaze | Hansen (2018) | 2.1 | .15 (eyetracker) |
Joystick | Mackenzie (2001) | 1.8 | .17 (hand) |
Playstation Move | Zaranek (2014) | 1.5 | .16 (arm) |
Kinect | Zaranek (2014) | 1 | .1 (arm) |
Card, S. K., Mackinlay, J. D., & Robertson, G. G. (1991).
A morphological analysis of the design space of input devices.
ACM
Transactions on Information Systems (TOIS), 9(2), 99-122.
Useful to know if you're designing something like VR
Doesn't have much impact on interface design
Doesn't capture everything; e.g. error rate is higher for eye tracker
Applies to expert, errorless use
Error rate was manipulated by faking errors. Ahmed Sabbir Arif and Wolfgang Stuerzlinger. CHI 2010. Predicting the cost of error correction in character-based text entry technologies. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, April 2010
Axis: X is faked error rates, Y is the words per minute.
Shows how WPM did change in the study where error rate is being changed. If you know you are going to make a lot of errors you slow down your motion The underlying way we're designed to move is with small motions, to eliminate jerk We accelerate and decelerate smoothly Trace of motion for different body parts - after the initial motion, which is a rapid aiming motion, then corrective motions if you misss the target. Lots of those corrections, that is where you are goign to see people slow down. Subtle effects here – like the time to fix errors goes up as the error rate goes up… Act of correcting an error also takes time. Not worry about in the assignment, but interesting to know.
Student project using a Kinect from 2012. Watch the movement of his arm...
Constantly relevant
Intuitively, things that are closer and/or bigger are faster and easier to hit (and vice versa)
What is different about the file location in Mac and Windows?
What is the width at the top of the screen.
Follow along on our Exit Ticket Ed Lesson to participate.
Recall Fitts law is:
MT=a+b∗log2(DistSize+1)
![]() |
![]() |
---|---|
Answer on Ed
What does making targets larger do to Fitts Law Predictions?
Why should you not maximize all of the targets?
![]() |
![]() |
---|---|
Answer on Ed
What does making targets larger do to Fitts Law Predictions?
Why should you not maximize all of the targets?
Fitts' law involves a logarithmic calculation -- exponentially bigger gains for small targets, not so much of a gain for larger targets
Answer on Ed
Is this minimizing distance, maximizing size, or both?
(to also minimize the distance)
Baudisch, P., Cutrell, E., Robbins, D., Czerwinski, M., Tandler, P. Bederson, B., and Zierlinger, A. Drag-and-Pop and Drag-and-Pick: Techniques for Accessing Remote Screen Content on Touch- and Pen-operated Systems. In Proceedings of Interact 2003, Zurich Switzerland, August 2003, pp. 57-64.
Reduces Distance (D)
Not good design to put everything close together
No space to move all targets (contextual filtering helps)
Could do with a fancy container...
Why not do this to all targets?
Why not do this to all targets?
How would you implement this?
We can make things Closer and Larger at the same time
How else can we do this?
How else can we do this?
Just don't use a mouse! Shortcut buttons; scroll wheel
Or CHEAT... manipulate the interface
Answer on Ed
Do these menus minimize distance or maximize size?
Select from a menu bar at top of screen
Problems?
Which of these do you think is a better button for maximizing size using the infinite edge?
Which of these do you think is a better button for maximizing size using the infinite edge?
Although it looks like only the text is clickable, it turns out the whole edge was. Now we only have a "smaller" but brighter button to click.
Problems with infinite edges?
Answer on Ed
Do these menus minimize distance, maximize size, or both?
Left example: OneNote 2013, Right example: Firefox. Taken from Fitts law and user experience by https://www.smashingmagazine.com/author/anastasios-karafillis/
Right click in place and then select (starting at :19)
Kittenish, G., & Buxton, W. (1994, April). User learning and performance with marking menus. In CHI (Vol. 94, pp. 258-264).
Minimizes D AND increases W (only angle matters)
Under some circumstances only...
Pie menus are often not implemented in production code
Example of how Marking Menus are used in practice (Maya)
Goal: to compare pie menus, linear menus, and a custom menu you make!
We provide support for running the experiment in AbstractMainActivity
(and a testing harness in ExperimentActivity
)
You implement a variety of menus
Answer on Ed
Does snapping to a target minimize distance, maximize size, or both?
Gmail | Trello | Chrome |
---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Examples courtesy of Drag and Drop for Design Systems
Also common in drawing programs
Most sophisticated approach: dynamic semantics: Check legality and consequences of each result at every move don’t catch errors, prevent them
Fan Cursor, Area Cursor and Bubble Cursor
Su, X., Au, O. K. C., & Lau, R. W. (2014, April). The implicit fan cursor: a velocity dependent area cursor. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 753-762). ACM.
How would you implement this?
What might you make too small and why?
What might you make too small and why?
How about a cancel button?
Select 'Open New Window in Process'
Select 'Open New Window in Process'
Steering law ... Fitts law integrated over the path you have to follow
Select 'Open New Window in Process'
Steering law ... Fitts law integrated over the path you have to follow
But it's not predictive at all. Why?
Select 'Open New Window in Process'
Steering law ... Fitts law integrated over the path you have to follow
But it's not predictive at all. Why?
It doesn't account for actual user behavior
Overly eager cascading menus, wrong submenu
It is only predictive of ERROR-FREE, EXPERT behavior
Related to our discussion of Interaction Design
Time on Task -- How long does it take people to complete basic tasks? (For example, find something to buy, create a new account, and order the item.)
Accuracy -- How many mistakes did people make? (And were they fatal or recoverable with the right information?)
Time on Task -- How long does it take people to complete basic tasks? (For example, find something to buy, create a new account, and order the item.)
Accuracy -- How many mistakes did people make? (And were they fatal or recoverable with the right information?)
How strenuous (e.g. gaze has lower throughput but is less strenuous than head pointing Mackenzie 2018)
Time on Task -- How long does it take people to complete basic tasks? (For example, find something to buy, create a new account, and order the item.)
Accuracy -- How many mistakes did people make? (And were they fatal or recoverable with the right information?)
How strenuous (e.g. gaze has lower throughput but is less strenuous than head pointing Mackenzie 2018)
Recall -- How much does the person remember afterwards or after periods of non-use?
Time on Task -- How long does it take people to complete basic tasks? (For example, find something to buy, create a new account, and order the item.)
Accuracy -- How many mistakes did people make? (And were they fatal or recoverable with the right information?)
How strenuous (e.g. gaze has lower throughput but is less strenuous than head pointing Mackenzie 2018)
Recall -- How much does the person remember afterwards or after periods of non-use?
Emotional Response -- How does the person feel about the tasks completed? (Confident? Stressed? Would the user recommend this system to a friend?)
Build up a list of good UI design Principles from these basics
What is missing?
(e.g. fun)
What is missing?
Extra information is on the slides that follow
Used to be a norm
Seems we forgotten to include it in our interfaces
Hand | Role and Action |
---|---|
Non-preferred | Leads the preferred hand (in time) |
Sets the spatial frame of reference for the preferred hand | |
Performs coarse movements | |
Preferred | Follows the non-preferred hand |
Works within established frame of reference set by the non-preferred hand | |
Performs fine movement |
Aside: Guiard is assuming right-handed. Tendencies somewhat less clear for left-handers,but we typically assume this still applies ]
Seminal work Yves Guiard, “Asymmetric Division of Labor in Human Skilled Bimanual Action: The Kinematic Chain as a Model”, Journal of Motor Behavior, Vol. 19, No. 4, 1987, pp. 486-517.http://cogprints.org/625/
Applications?
Task | Leading Movement | Trailing/Overlapping Movement |
---|---|---|
Delete | Right hand — manipulate pointer with mouse; select by double clicking/dragging | Left hand — press DELETE (probably with little finger) |
Select an option in a window (see Figure 15) | Right hand — manipulate pointer with mouse; click option | Left hand — press ENTER (Assumes OK button is default) |
Click on a link in a browser | Left hand — navigate to link via PAGE UP and/or PAGE DOWN keys | Right hand — manipulate pointer with mouse; select link by clicking |
Open file; open folder; launch program | Right hand — manipulate pointer with mouse; single click on icon | Right hand — press ENTER (avoids error prone double-click operation) |
Inspired by 1994 CHI paper Published in UIST 2000
Fitts' law implications?
Hudson, S. E., Rodenstein, R., and Smith, I. 1997. Debugging lenses: a new class of transparent tools for user interface debugging. In Proceedings UIST '97, 179-187. http://doi.acm.org/10.1145/263407.263542
In context interaction
In context interaction
Structured well for 2 handed input
"Spatial modes"
Can be implemented with special "lens parent" container & lens interactors
What tasks is scrolling used for?
Which precedes/follows?
Task | Characteristics Scrolling | precedes/overlaps other tasks | sets the frame of reference | minimal precision needed (coarse) Selecting, editing, reading, drawing, etc. | follows/overlaps scrolling | works within frame of reference set by scrolling | demands precision (fine)
Design tips for motor
Two-Handed input principles
Keyboard shortcuts
↑, ←, Pg Up, k | Go to previous slide |
↓, →, Pg Dn, Space, j | Go to next slide |
Home | Go to first slide |
End | Go to last slide |
Number + Return | Go to specific slide |
b / m / f | Toggle blackout / mirrored / fullscreen mode |
c | Clone slideshow |
p | Toggle presenter mode |
s | Start & Stop the presentation timer |
t | Reset the presentation timer |
?, h | Toggle this help |
Esc | Back to slideshow |