5 ms·

Visualizing Fitts's Law (2007)

35 points by kevin 9y ago

ProxCoques 9y ago
And after you've read that, give yourself The Quiz! http://www.asktog.com/columns/022DesignedToGiveFitts.html http://www.asktog.com/columns/022DesignedToGiveFitts.html
rwmj 9y ago
Clicks edge of screen above NetworkManager icon ... Confirms it's still broken in XFCE 4.
- hetfeld 9y ago
  NetworkManager icon is not in Notification Area?
deventis 9y ago
Laws of UX has a nice overview of the different laws that exist in user experience! Fitt's law: https://lawsofux.com/fittss-law https://lawsofux.com/fittss-law
- seanmcdirmid 9y ago
  Principles of interaction design has even more entries and is quite detailed. Unfortunately, it’s a book that isn’t free!
  - whoisjuan 9y ago
    I think you meant: "Principles of Interactive Design" by Lisa Graham. Right?
    - seanmcdirmid 9y ago
      No. I got the name completely wrong: https://books.google.com/books?id=3RFyaF7jCZsC&printsec=frontcover&dq=universal+principles+of+interaction+design&hl=en&sa=X&ved=0ahUKEwjlma7GwfbZAhUSz2MKHWjdA3AQ6AEIJDAA#v=onepage&q=universal%20principles%20of%20interaction%20design&f=false https://books.google.com/books?id=3RFyaF7jCZsC&printsec=fron... Universal principles of design. The book is like an encyclopedia of design principles.
oneplane 9y ago
IIRC this is one of the reasons the UI on the Mac opted for a fixed context-dependant menu bar at the top of the screen instead of the per-window one used by Windows (and Java). It's basically 'fling your pointing device at the top' and 'go left or right to get the button you want'. Due to the lack of borders/stops, this would be harder if it was sandwiched between a titlebar and window content.
- eadmund 9y ago
  It was. I wonder, though: with modern monitor sizes, does that make as much sense as it did with a 9", 512×342 screen?
  - dsr_ 9y ago
    Depends on two things: 1. How fast can you get the pointer to the menu? 2. How easy is it to get the right item? If you have a "large" screen, I would contend that having a dedicated menu button on your mouse/trackpad/trackball/pen is the best possible thing for any user who isn't a complete novice. Don't wave the pointer somewhere else, make the menu come to you. If you can't do that for whatever reason, then having a high-acceleration pointer that can be flung all the way against an edge is next best. Going back to where you were, though, will be relatively hard.
    - oneplane 9y ago
      The 'make the menu come to you' approach would make sense for large and/or unusually controlled screens. Take game consoles and their directional controllers or old style mobile phones with numeric keypad for example, they made most menus pop up in context-menu style. I imagine something like holding a menu button which acts like a modifier key that also pops up a menu on-screen. Then, using a physical layout on the screen that matches the layout of the buttons on your controller or pointing device to navigate/select items of choice without using x,y pointing systems such as the mouse arrow. This does however create a new problem: how to decide where the menu is going to overlap over the stuff you were working on?
  - 9y ago
walterbell 9y ago
How does this work with radial menus and touch interfaces?
- Sylos 9y ago
  Well, radial menus typically are displayed around your mouse cursor, so the proximity aspect is there. They also fill out the space, well, radially, so you can really just fling your cursor into a direction and will have the total width of the menu item to hit all the way. With touch screens, there's two major differences compared to the desktop: 1) You don't have screen edges that you can fling your cursor against, so placing UI elements at the edge does not make them easier to hit. 2) Users are generally quicker to traverse the screen and hit something, but are much worse at hitting something that's small, so you often want to make UI elements bigger (which does result in them being more spaced out) and then put the UI elements on several screens instead.
  - DonHopkins 9y ago
    The other problem with touch screens is that your finger isn't transparent, so you can't see what you're pointing at the same as you can on a screen with a mouse. So you have to come up with different strategies for displaying menu items and feedback. Like showing the selected item title at the top of the screen where your hand isn't covering it.
- DonHopkins 9y ago
  Pie menus benefit from Fitts' Law by minimizing the target distance to a small constant (the radius of the inactive region in the menu center where the cursor starts) and maximizing the target area of each item (a wedge shaped slice that extends to the edge of the screen). They also have the advantage that you don't need to focus your visual attention on hitting the target (which linear menus require), because you can move in any direction into a big slice without looking at the screen (while parking the cursor in a little rectangle requires visual feedback), and you can learn to use them with muscle memory, with quick "mouse ahead" gestures. http://www.donhopkins.com/drupal/node/100 http://www.donhopkins.com/drupal/node/100 An Empirical Comparison of Pie vs. Linear Menus Jack Callahan, Don Hopkins, Mark Weiser (+) and Ben Shneiderman. Computer Science Department University of Maryland College Park, Maryland 20742 (+) Computer Science Laboratory, Xerox PARC, Palo Alto, Calif. 94303. Presented at ACM CHI'88 Conference, Washington DC, 1988. Abstract Menus are largely formatted in a linear fashion listing items from the top to bottom of the screen or window. Pull down menus are a common example of this format. Bitmapped computer displays, however, allow greater freedom in the placement, font, and general presentation of menus. A pie menu is a format where the items are placed along the circumference of a circle at equal radial distances from the center. Pie menus gain over traditional linear menus by reducing target seek time, lowering error rates by fixing the distance factor and increasing the target size in Fitts's Law, minimizing the drift distance after target selection, and are, in general, subjectively equivalent to the linear style. http://www.donhopkins.com/drupal/node/98 http://www.donhopkins.com/drupal/node/98 The Design and Implementation of Pie Menus -- Dr. Dobb's Journal, Dec. 1991 There're Fast, Easy, and Self-Revealing. Copyright (C) 1991 by Don Hopkins. Originally published in Dr. Dobb's Journal, Dec. 1991, lead cover story, user interface issue. Introduction Although the computer screen is two-dimensional, today most users of windowing environments control their systems with a one-dimensional list of choices -- the standard pull-down or drop-down menus such as those found on Microsoft Windows, Presentation Manager, or the Macintosh. This article describes an alternative user-interface technique I call "pie" menus, which is two-dimensional, circular, and in many ways easier to use and faster than conventional linear menus. Pie menus also work well with alternative pointing devices such as those found in stylus or pen-based systems. I developed pie menus at the University of Maryland in 1986 and have been studying and improving them over the last five years. During that time, pie menus have been implemented by myself and my colleagues on four different platforms: X10 with the uwm window manager, SunView, NeWS with the Lite Toolkit, and OpenWindows with the NeWS Toolkit. Fellow researchers have conducted both comparison tests between pie menus and linear menus, and also tests with different kinds of pointing devices, including mice, pens, and trackballs. Included with this article are relevant code excerpts from the most recent NeWS implementation, written in Sun's object-oriented PostScript dialect. https://www.youtube.com/watch?v=Jvi98wVUmQA https://www.youtube.com/watch?v=Jvi98wVUmQA Demo of Pie Menus in SimCity for X11. Ported to Unix and demonstrated by Don Hopkins. https://www.youtube.com/watch?v=SG0FAKkaisg https://www.youtube.com/watch?v=SG0FAKkaisg Pet Rock Remote Control: Pie menu remote control touch screen interface for sending commands to pet rocks. https://www.youtube.com/watch?v=2KfeHNIXYUc https://www.youtube.com/watch?v=2KfeHNIXYUc MediaGraph Music Navigation with Pie Menus Prototype developed for Will Wright's Stupid Fun Club: This is a demo of a user interface research prototype that I developed for Will Wright at the Stupid Fun Club. It includes pie menus, an editable map of music interconnected with roads, and cellular automata. https://www.youtube.com/watch?v=-exdu4ETscs https://www.youtube.com/watch?v=-exdu4ETscs The Sims, Pie Menus, Edith Editing, and SimAntics Visual Programming Demo: This is a demonstration of the pie menus, architectural editing tools, and Edith visual programming tools that I developed for The Sims with Will Wright at Maxis and Electronic Arts.
simula67 9y ago
Previous discussion : https://news.ycombinator.com/item?id=11208463 https://news.ycombinator.com/item?id=11208463 I posted this in previous discussion too, a much simpler explanation : https://www.youtube.com/watch?v=E3gS9tjACwU https://www.youtube.com/watch?v=E3gS9tjACwU
kurthr 9y ago
The engineers way of thinking about Fitt's Law is as a human control system. We motion control our hands by using feedback (visual, tactile, proprioceptive). The servo time response to a step function (new location to click) of that feedback loop depends on the required accuracy and allowed overshoot. The larger the target, the higher a velocity/acceleration you can use to hit it without missing. You learn very quickly that large objects (like edge of screen) allow much more gross movements than single pixel target... and the farther you have to go the larger the time at a given tracking velocity. What is at least as interesting is the cognitive load of tracking/pointing, clicking/chording . Mental load and apparent time appear to be the reason why typing can be slower than a menu system, but it feels faster. Similarly, people will report a feeling like a trackpoint (IBM keyboard nipple) takes longer than a mouse even when they're actually faster in hitting targets. Presumably, this is because they have to track the cursor to know velocity and position, while a mouse or touchpad uses your body's knowledge of hand position/velocity that is missing from a force based input. What you're used to feels right in any case.
dang 9y ago
We merged the earlier discussion (https://news.ycombinator.com/item?id=16610903 https://news.ycombinator.com/item?id=16610903) into this one. I invited Kevin to repost his old article that was posted in 2007 but never got any discussion on Hacker News: https://hn.algolia.com/?query=Visualizing%20Fitts%27s%20Law&sort=byDate&dateRange=all&type=story&storyText=false&prefix=false&page=0 https://hn.algolia.com/?query=Visualizing%20Fitts%27s%20Law&....
todd8 9y ago
On some early graphical computer user interface, I can’t remember which one, one could specify that the mouse cursor would “wrap” to the opposite edge. It was like the ultimate non-Fitt’s law configuration. I hated it when I tried it, I would lose the cursor and not be able to find it.
- radiorental 9y ago
  Just to be pedantic, while somewhat related, that's not Fitts Law. Fitts Law is specifically about targeting. The 'feature' to wrap the pointer may compound targeting issues but it's secondary. Again, Fitts' is about distance to and size of a target.
  - todd8 9y ago
    You’re right. What I discovered was that I would lose the mouse cursor because I couldn’t quickly move it to an edge without tracking it visually all the way to begin with and once the cursor crosses the edge it breaks visual continuity by jumping to the opposite side. Today’s multimonitor configurations have the same problem to some extent because they have so much area with small discontinuities at the edge where the cursor jumps to a different monitor.
macqm 9y ago
Windows 8 Start UI was designed to take advantage of this. Theoretically it was great: when you open start menu the mouse pointer is in the bottom left corner, tiles close to you are wide and tall, tiles far from the pointer are smaller, wider at the bottom, narrower at the top. Hot corners were supposed to be easily accessible (infinite distance). Yet is was a failure, because uses were not familiar with it, it broke their habits.
- Doxin 9y ago
  The whole problem with the tiles is that they are much too big. Bigger targets are easier to click, but targets farther away are again harder to click. The targets in the start menu were plenty big to start with anyways.

35 points by kevin 9y ago

And after you've read that, give yourself The Quiz! http://www.asktog.com/columns/022DesignedToGiveFitts.html http://www.asktog.com/columns/022DesignedToGiveFitts.html

rwmj 9y ago

Clicks edge of screen above NetworkManager icon ... Confirms it's still broken in XFCE 4.

hetfeld 9y ago
NetworkManager icon is not in Notification Area?

deventis 9y ago

Laws of UX has a nice overview of the different laws that exist in user experience! Fitt's law: https://lawsofux.com/fittss-law https://lawsofux.com/fittss-law

seanmcdirmid 9y ago
Principles of interaction design has even more entries and is quite detailed. Unfortunately, it’s a book that isn’t free!
- whoisjuan 9y ago
  I think you meant: "Principles of Interactive Design" by Lisa Graham. Right?
  - seanmcdirmid 9y ago
    No. I got the name completely wrong: https://books.google.com/books?id=3RFyaF7jCZsC&printsec=frontcover&dq=universal+principles+of+interaction+design&hl=en&sa=X&ved=0ahUKEwjlma7GwfbZAhUSz2MKHWjdA3AQ6AEIJDAA#v=onepage&q=universal%20principles%20of%20interaction%20design&f=false https://books.google.com/books?id=3RFyaF7jCZsC&printsec=fron... Universal principles of design. The book is like an encyclopedia of design principles.

oneplane 9y ago

IIRC this is one of the reasons the UI on the Mac opted for a fixed context-dependant menu bar at the top of the screen instead of the per-window one used by Windows (and Java). It's basically 'fling your pointing device at the top' and 'go left or right to get the button you want'. Due to the lack of borders/stops, this would be harder if it was sandwiched between a titlebar and window content.

eadmund 9y ago
It was. I wonder, though: with modern monitor sizes, does that make as much sense as it did with a 9", 512×342 screen?
- dsr_ 9y ago
  Depends on two things: 1. How fast can you get the pointer to the menu? 2. How easy is it to get the right item? If you have a "large" screen, I would contend that having a dedicated menu button on your mouse/trackpad/trackball/pen is the best possible thing for any user who isn't a complete novice. Don't wave the pointer somewhere else, make the menu come to you. If you can't do that for whatever reason, then having a high-acceleration pointer that can be flung all the way against an edge is next best. Going back to where you were, though, will be relatively hard.
  - oneplane 9y ago
    The 'make the menu come to you' approach would make sense for large and/or unusually controlled screens. Take game consoles and their directional controllers or old style mobile phones with numeric keypad for example, they made most menus pop up in context-menu style. I imagine something like holding a menu button which acts like a modifier key that also pops up a menu on-screen. Then, using a physical layout on the screen that matches the layout of the buttons on your controller or pointing device to navigate/select items of choice without using x,y pointing systems such as the mouse arrow. This does however create a new problem: how to decide where the menu is going to overlap over the stuff you were working on?
- 9y ago

walterbell 9y ago

How does this work with radial menus and touch interfaces?

Sylos 9y ago
Well, radial menus typically are displayed around your mouse cursor, so the proximity aspect is there. They also fill out the space, well, radially, so you can really just fling your cursor into a direction and will have the total width of the menu item to hit all the way. With touch screens, there's two major differences compared to the desktop: 1) You don't have screen edges that you can fling your cursor against, so placing UI elements at the edge does not make them easier to hit. 2) Users are generally quicker to traverse the screen and hit something, but are much worse at hitting something that's small, so you often want to make UI elements bigger (which does result in them being more spaced out) and then put the UI elements on several screens instead.
- DonHopkins 9y ago
  The other problem with touch screens is that your finger isn't transparent, so you can't see what you're pointing at the same as you can on a screen with a mouse. So you have to come up with different strategies for displaying menu items and feedback. Like showing the selected item title at the top of the screen where your hand isn't covering it.
DonHopkins 9y ago
Pie menus benefit from Fitts' Law by minimizing the target distance to a small constant (the radius of the inactive region in the menu center where the cursor starts) and maximizing the target area of each item (a wedge shaped slice that extends to the edge of the screen). They also have the advantage that you don't need to focus your visual attention on hitting the target (which linear menus require), because you can move in any direction into a big slice without looking at the screen (while parking the cursor in a little rectangle requires visual feedback), and you can learn to use them with muscle memory, with quick "mouse ahead" gestures. http://www.donhopkins.com/drupal/node/100 http://www.donhopkins.com/drupal/node/100 An Empirical Comparison of Pie vs. Linear Menus Jack Callahan, Don Hopkins, Mark Weiser (+) and Ben Shneiderman. Computer Science Department University of Maryland College Park, Maryland 20742 (+) Computer Science Laboratory, Xerox PARC, Palo Alto, Calif. 94303. Presented at ACM CHI'88 Conference, Washington DC, 1988. Abstract Menus are largely formatted in a linear fashion listing items from the top to bottom of the screen or window. Pull down menus are a common example of this format. Bitmapped computer displays, however, allow greater freedom in the placement, font, and general presentation of menus. A pie menu is a format where the items are placed along the circumference of a circle at equal radial distances from the center. Pie menus gain over traditional linear menus by reducing target seek time, lowering error rates by fixing the distance factor and increasing the target size in Fitts's Law, minimizing the drift distance after target selection, and are, in general, subjectively equivalent to the linear style. http://www.donhopkins.com/drupal/node/98 http://www.donhopkins.com/drupal/node/98 The Design and Implementation of Pie Menus -- Dr. Dobb's Journal, Dec. 1991 There're Fast, Easy, and Self-Revealing. Copyright (C) 1991 by Don Hopkins. Originally published in Dr. Dobb's Journal, Dec. 1991, lead cover story, user interface issue. Introduction Although the computer screen is two-dimensional, today most users of windowing environments control their systems with a one-dimensional list of choices -- the standard pull-down or drop-down menus such as those found on Microsoft Windows, Presentation Manager, or the Macintosh. This article describes an alternative user-interface technique I call "pie" menus, which is two-dimensional, circular, and in many ways easier to use and faster than conventional linear menus. Pie menus also work well with alternative pointing devices such as those found in stylus or pen-based systems. I developed pie menus at the University of Maryland in 1986 and have been studying and improving them over the last five years. During that time, pie menus have been implemented by myself and my colleagues on four different platforms: X10 with the uwm window manager, SunView, NeWS with the Lite Toolkit, and OpenWindows with the NeWS Toolkit. Fellow researchers have conducted both comparison tests between pie menus and linear menus, and also tests with different kinds of pointing devices, including mice, pens, and trackballs. Included with this article are relevant code excerpts from the most recent NeWS implementation, written in Sun's object-oriented PostScript dialect. https://www.youtube.com/watch?v=Jvi98wVUmQA https://www.youtube.com/watch?v=Jvi98wVUmQA Demo of Pie Menus in SimCity for X11. Ported to Unix and demonstrated by Don Hopkins. https://www.youtube.com/watch?v=SG0FAKkaisg https://www.youtube.com/watch?v=SG0FAKkaisg Pet Rock Remote Control: Pie menu remote control touch screen interface for sending commands to pet rocks. https://www.youtube.com/watch?v=2KfeHNIXYUc https://www.youtube.com/watch?v=2KfeHNIXYUc MediaGraph Music Navigation with Pie Menus Prototype developed for Will Wright's Stupid Fun Club: This is a demo of a user interface research prototype that I developed for Will Wright at the Stupid Fun Club. It includes pie menus, an editable map of music interconnected with roads, and cellular automata. https://www.youtube.com/watch?v=-exdu4ETscs https://www.youtube.com/watch?v=-exdu4ETscs The Sims, Pie Menus, Edith Editing, and SimAntics Visual Programming Demo: This is a demonstration of the pie menus, architectural editing tools, and Edith visual programming tools that I developed for The Sims with Will Wright at Maxis and Electronic Arts.

simula67 9y ago

Previous discussion : https://news.ycombinator.com/item?id=11208463 https://news.ycombinator.com/item?id=11208463 I posted this in previous discussion too, a much simpler explanation : https://www.youtube.com/watch?v=E3gS9tjACwU https://www.youtube.com/watch?v=E3gS9tjACwU

kurthr 9y ago

The engineers way of thinking about Fitt's Law is as a human control system. We motion control our hands by using feedback (visual, tactile, proprioceptive). The servo time response to a step function (new location to click) of that feedback loop depends on the required accuracy and allowed overshoot. The larger the target, the higher a velocity/acceleration you can use to hit it without missing. You learn very quickly that large objects (like edge of screen) allow much more gross movements than single pixel target... and the farther you have to go the larger the time at a given tracking velocity. What is at least as interesting is the cognitive load of tracking/pointing, clicking/chording . Mental load and apparent time appear to be the reason why typing can be slower than a menu system, but it feels faster. Similarly, people will report a feeling like a trackpoint (IBM keyboard nipple) takes longer than a mouse even when they're actually faster in hitting targets. Presumably, this is because they have to track the cursor to know velocity and position, while a mouse or touchpad uses your body's knowledge of hand position/velocity that is missing from a force based input. What you're used to feels right in any case.

dang 9y ago

We merged the earlier discussion (https://news.ycombinator.com/item?id=16610903 https://news.ycombinator.com/item?id=16610903) into this one. I invited Kevin to repost his old article that was posted in 2007 but never got any discussion on Hacker News: https://hn.algolia.com/?query=Visualizing%20Fitts%27s%20Law&sort=byDate&dateRange=all&type=story&storyText=false&prefix=false&page=0 https://hn.algolia.com/?query=Visualizing%20Fitts%27s%20Law&....

todd8 9y ago

On some early graphical computer user interface, I can’t remember which one, one could specify that the mouse cursor would “wrap” to the opposite edge. It was like the ultimate non-Fitt’s law configuration. I hated it when I tried it, I would lose the cursor and not be able to find it.

radiorental 9y ago
Just to be pedantic, while somewhat related, that's not Fitts Law. Fitts Law is specifically about targeting. The 'feature' to wrap the pointer may compound targeting issues but it's secondary. Again, Fitts' is about distance to and size of a target.
- todd8 9y ago
  You’re right. What I discovered was that I would lose the mouse cursor because I couldn’t quickly move it to an edge without tracking it visually all the way to begin with and once the cursor crosses the edge it breaks visual continuity by jumping to the opposite side. Today’s multimonitor configurations have the same problem to some extent because they have so much area with small discontinuities at the edge where the cursor jumps to a different monitor.

macqm 9y ago

Windows 8 Start UI was designed to take advantage of this. Theoretically it was great: when you open start menu the mouse pointer is in the bottom left corner, tiles close to you are wide and tall, tiles far from the pointer are smaller, wider at the bottom, narrower at the top. Hot corners were supposed to be easily accessible (infinite distance). Yet is was a failure, because uses were not familiar with it, it broke their habits.

Doxin 9y ago
The whole problem with the tiles is that they are much too big. Bigger targets are easier to click, but targets farther away are again harder to click. The targets in the start menu were plenty big to start with anyways.