4 ms·

Fitts' Law: A Usability Quiz

15 points by joshwa 19y ago

myoung8 19y ago
wow. everyone should read this. i had one of those "holy crap i just learned something new and interesting" moments. what it has to say will probably surprise most of you. my only question is, what's the best practice for designing websites using Fitt's Law? We can't use the upper or lower screen edges because of the OS's menu bars and it seems like it would look odd to have the menu aligned flush with the left side of the screen... Thoughts?
- joshwa 19y ago
  Bigger targets if you have to slow down to reach the edge of the window, I'd imagine.
- webwright 19y ago
  Urm-- lots of web sites have left aligned nav... lefthand nav was fairly dominant in the early web-- upper nav seems to be all the rage nowadays.
  - myoung8 19y ago
    yeah, but how many are aligned flush with the side of the screen? it can't even be one pixel away for it to be super-usable.
    - DougBTX 19y ago
      And you have to set body {border: 0} or some such or they'll just click on the browser chrome. We had complaints from users when we broke this in our app :-)
rms 19y ago
http://en.wikipedia.org/wiki/Fitts'_law http://en.wikipedia.org/wiki/Fitts'_law Some great background here... apparently Fitts' Law is why Xerox introduced the mouse in the first place.
tipjoy 19y ago
Putting the menus either at the top or the left (or right or bottom) of a browser window won't do a thing to address the issue here, unless the user always maximizes their browser to fill their screen. In that case, flush left or right would be good from a Fitts' point of view. But most users don't use their browser this way. You could consider enlarging your links and/or buttons so the hit space is larger. You could add a buffer zone around the hit space so if the user gets 'close enough' then that is equivalent to hitting the target. Space your hit spaces far enough apart so that users don't hit incorrectly. Run usability tests and time your users on common tasks, then iterate your design. An important aspect of Fitts' law is minimizing the amount of movement the user has to do to get to the place they need to go to complete the next action in their task flow. Therefore you can cluster similar actions together so that the user doesn't have to move around the screen a lot to accomplish a given task. An interesting part of Bruce's post was his mention of circular menus. Fitts' law tells us they'd be easier to use than linear menus. But usability, like so much else in life, is not so cut and dry. I would predict that the increased cognitive load that the user experienced when they saw a circular list of options rather than a linear one would slow them down so much as to outweigh the benefits of not having to move as much to get to their desired action. All things equal, circular menus may be more efficient than linear ones. However unless the whole world changes to circular menus - or at least, one whole computer environment, applications and OS included - introducing this in your application would slow your users down.
joshwa 19y ago
Another something to consider-- after your user has clicked a link, where will his/her mouse be on the page that loads next? This comes into play particularly on sites that have a lot of repetitive actions-- e.g. hotornot. If I'm voting again and again, I want the vote buttons to stay in the same position for every page load, so I don't have to hunt for it each time. That way I can click "no, no, no, yes, no" without any thought or mouse movement.

15 points by joshwa 19y ago

wow. everyone should read this. i had one of those "holy crap i just learned something new and interesting" moments. what it has to say will probably surprise most of you. my only question is, what's the best practice for designing websites using Fitt's Law? We can't use the upper or lower screen edges because of the OS's menu bars and it seems like it would look odd to have the menu aligned flush with the left side of the screen... Thoughts?

joshwa 19y ago
Bigger targets if you have to slow down to reach the edge of the window, I'd imagine.
webwright 19y ago
Urm-- lots of web sites have left aligned nav... lefthand nav was fairly dominant in the early web-- upper nav seems to be all the rage nowadays.
- myoung8 19y ago
  yeah, but how many are aligned flush with the side of the screen? it can't even be one pixel away for it to be super-usable.
  - DougBTX 19y ago
    And you have to set body {border: 0} or some such or they'll just click on the browser chrome. We had complaints from users when we broke this in our app :-)

rms 19y ago

http://en.wikipedia.org/wiki/Fitts'_law http://en.wikipedia.org/wiki/Fitts'_law Some great background here... apparently Fitts' Law is why Xerox introduced the mouse in the first place.

tipjoy 19y ago

Putting the menus either at the top or the left (or right or bottom) of a browser window won't do a thing to address the issue here, unless the user always maximizes their browser to fill their screen. In that case, flush left or right would be good from a Fitts' point of view. But most users don't use their browser this way. You could consider enlarging your links and/or buttons so the hit space is larger. You could add a buffer zone around the hit space so if the user gets 'close enough' then that is equivalent to hitting the target. Space your hit spaces far enough apart so that users don't hit incorrectly. Run usability tests and time your users on common tasks, then iterate your design. An important aspect of Fitts' law is minimizing the amount of movement the user has to do to get to the place they need to go to complete the next action in their task flow. Therefore you can cluster similar actions together so that the user doesn't have to move around the screen a lot to accomplish a given task. An interesting part of Bruce's post was his mention of circular menus. Fitts' law tells us they'd be easier to use than linear menus. But usability, like so much else in life, is not so cut and dry. I would predict that the increased cognitive load that the user experienced when they saw a circular list of options rather than a linear one would slow them down so much as to outweigh the benefits of not having to move as much to get to their desired action. All things equal, circular menus may be more efficient than linear ones. However unless the whole world changes to circular menus - or at least, one whole computer environment, applications and OS included - introducing this in your application would slow your users down.

joshwa 19y ago

Another something to consider-- after your user has clicked a link, where will his/her mouse be on the page that loads next? This comes into play particularly on sites that have a lot of repetitive actions-- e.g. hotornot. If I'm voting again and again, I want the vote buttons to stay in the same position for every page load, so I don't have to hunt for it each time. That way I can click "no, no, no, yes, no" without any thought or mouse movement.