kuwamoto.org

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:

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]