Usability is sometimes subtle (Fitts’ law, etc.)

I’ve always been interested in usability, and one of the fun things about Flex is that you can tweak and tweak your UI until you’ve satisfied your inner UI designer.

So I was playing around with the sliding drawer components recently, and it reminded me of two things: (1) Sometimes, good usability design is so subtle than you don’t notice it until it goes wrong, and (2) Fitts’ law is real, even though I’d previously dismissed it as a bit silly.


Good usability is sometimes subtle

I remember reading an anecdote about the design of the chooser in the Mac OS. In those days, the chooser looked something like this:

picture of chooser

The chooser dialog would come up instantaneously, but the list of printers would take some time to fill up, based on the speed of your network. What UI issues would you consider if you were to implement this? Your average UI programmer might not think twice about how to implement this, but there was some subtle thought put into how the programmers over at Apple thought about this problem.

Let’s say that a new printer needs to be inserted into the list above the portion that was visible. (alphabetically before dmca_laser1 in this case). In these cases, the scroll position would be adjusted so that the visible contents of the list would not move.

Sometimes, these subtle details matter.

Why go through the trouble? Well, if you were about to click on a printer, you don’t want to end up clicking on the wrong one.

Now, what happens if a printer needs to be inserted into the visible portion of the list? Whether you adjust the position of the scroll bar or not, some things on the screen are going to move.

What the Apple engineers did was to detect the position of the mouse and adjust the scroll position to make sure to that the item beneath the mouse did not move.

Tweaking the sliding drawers

In my first implementation of sliding drawers, there was a bug in which if a drawer was open when the mouse moved off the screen, the drawer would stay open.

NOTE: Requires Flash Player 8.5 beta 3.
[Sliding drawers 1: drawers stay open]

Someone commented on how they were annoyed by sliding drawers remaining open in Visual Studio, and this feedback rang true. What if you have important content on the screen that would be hidden by the drawer? What if the drawer opened up and stayed open every time you moved your mouse off the browser? The more I thought about it, the more it sounded like a problem.

As a result, I tweaked the sliding drawers to close once the mouse left the browser window. This resulted in the following. Try it out. Move your mouse to the edges of the browser to open the drawers. Be sure to un-maximize your browser window to witness the true horror. And pretend you are in a hurry and need to work fast.

NOTE: Requires Flash Player 8.5 beta 3.
[Sliding drawers 2: drawers close on exit]

Ack! Instead of being better, the drawers feel much, much worse. Why does this “improved” version feel so bad? The answer lies in Fitts’ law.

Fitts’ law

I’d always thought that Fitts’ law was a bit silly. I first became aware of it during the mac/windows flamewars on USENET, in which people claimed that Macs were superior because, among other things, the menubar was on the top of the screen, and thus easier to aim for with the mouse. While undoubtedly true, it always seemed like a weak argument (and at the time, I was a rabid “mac guy”). Was this the only leg that us mac guys had to stand on?

Fitts’ law says that bigger things are easier to reach with the mouse than smaller things, and the farther away the thing is, the more this matters. To which, you might say “duh”. In the case of the mac menubar, the argument was that because it was at the top edge of the screen, it was essentially inifinite in size; you can fling your mouse as far as you want upward and hit the menubar.

Because of my earlier bug, in which the drawers stay open when the mouse leaves the browser window, I essentially had an infinite hit region for the drawers to open. “Fixing” the bug made my hit region very difficult to navigate to with the mouse.

There are a variety of ways you could imagine fixing this, but I decided to restore the original behavior, and add a timer to close the drawer if the mouse stayed outside the browser window for more than one second. Like the chooser example above, it’s not something I would have thought to do ahead of time, but after trying it, it makes a huge difference. Check it out for yourself.

NOTE: Requires Flash Player 8.5 beta 3.
[Sliding drawers 3: drawers close on exit, based on a timer]

7 Responses to “Usability is sometimes subtle (Fitts’ law, etc.)”

  1. ilya Devers

    Hi Sho,

    Excellent article and research. Amazing you have time for this with your crazy schedule :-)

    What i really really like about this is that it shows the true power of the flex framework. In Html based solutions (dare i say ajax) one is already happy when something looks good and seems to work (making it useful) but not usable or desirable.

    there are always solutions (like Thomas Fuchs who achieved the almost impossible with fluxiom) but for mere mortals flex allows this kind of tweaking.

    Flex is so awesome. Thanks

  2. Aaron Leavitt

    Usability issues like this really can drive you nuts. Thanks for taking the time to play around with the implementation on this. Issues like this hit close to home for me since UI design is a significant part of what I do. As the first commenter stated these sorts of issues are why I’m so excited about Flex 2. Thanks for putting some thought into your posts and truly moving the community forward.

  3. Owen

    Hi Sho

    I really, really like this component implementation – well done and thank you! Have you published the source for the updated version, as per previous versions? The view source option in your above demos fails.

    Thanks – we’re really enjoying using flex!

  4. Yaniv

    Hi !

    Very great component, i love it :) is it opensource ( i mean is the source is available somewhere)


  5. PRB

    Hello Sho!

    I was wondering when you were planning on re-releasing the source for FB beta 3? THANK YOU for such great work!

  6. sho

    You can see the source updated for beta 3 here. Thanks for your comments!

  7. Wheeler Street » MXML Tags and Attributes as they relate to AS classes

    […] http://kuwamoto.org/2006/05/05/usability-is-sometimes-subtle-fitts-law-etc/ […]

Leave a Reply