Fitts' law and RIA

To my amazement, it seems like the usage of Fitts' law in Internet applications and websites is a rather controversial topic these days. There are critics out there claiming that Fitts' law is an old and outdated approach to designing user interface elements.
Well.. the law of gravity is also getting old, but guess what.. it's still relevant. I really don't insinuate that Fitts' law and the law of gravity are the same, but the point being made here is that Fitts' law is just that, a law describing physical movement. This is not an idea made up by a besserwisser trying to revolutionize the UI of computers. I believe that the biggest problem with Fitts' law, is the fact that most people working in UI design, and particularly in RIA and web design, have either little or no knowledge of the actual content of Fitts' law.

So what is it? In short, Fitts' law is model describing human movement. It was described by Paul Fitts back in 1954. Despite to popular belief, Fitts' law isn't all about making things bigger on screen. As this is a part of the law, the actual formula describes the relationship between distance between the starting point and the target, and the size of the target. And you have something called infinite width, which I will describe in more detail later.

Mathematically speaking the law states that «Time = a + b log2(D/S+1)». Where D is the distance from where your cursor is currently at to the target, and S is the width of the target. The a and the b are constants. It's not that hard now is it, but yet extremely powerful when taken in to use. So how do we use it? Let's start of with the words of Bruce Tognazzini.

While at first glance, this law might seem patently obvious, it is one of the most ignored principles in design. Fitts' law (properly, but rarely, spelled "Fitts' Law") dictates the Macintosh pull-down menu acquisition should be approximately five times faster than Windows menu acquisition, and this is proven out.

What TOG is talking about here is the infinite width. What that means is that, like in the Macintosh menubar, the menu is at the top of the screen, always. This will let the user move his cursor at full speed to the top of the screen, because no matter if the user keeps pushing the mouse upwards, the cursor will stay in the same place, hence making a target of infinite width.

But let's drop the Os X vs Windows crap. Let's instead concentrate on how to apply the principles of Fitts' law to our RIA apps and web sites. Now note that these are only my suggestions on how to apply Fitts' law, so please do your own research. My opinions are largely based on my studies of HCI from the university and later experiences in building applications, RIA apps and web sites.

1. Contextual menus. If you are going to build a contextual menu, make it a pie menu. I don't really like contextual menus, because they hide the interface from the user, but it seems they're here to stay so let's make the best of it. Well, a pie menu will be faster than a dropdown menu. The reason for this is that you minimize the distance the cursor have to travel by centering the menu under the cursor at creation time. Additionally, pie pieces make for bigger targets than lines of text in a drop down menu.

2. Buttons. Group your buttons together in that order the user is most likely to use them. Commonly used buttons should be bigger and more accessible that less important and less used functions.

3. Dialogs. Attach your dialog windows to the window it belongs to. In this way, the user will know where the dialog will appear and the movement can therefor be "trained". Fitts' law doesn't actually describe trained movements at all, but this is important in conjunction with "the easy to hit target", this explains it's relevance in this context.

4. Edges. If you are in control of the mouse pointer. E.G a full screen app. Then make use of the edges to place important UI elements. Edges are much easier to navigate to because of the infinite width. But don't use both horizontal/vertical edges of the screen so the user need to move the cursor over the entire width..that would be bad. For both right and left handed people, the upper left edge of the screen is the spot most easily navigated to.

5. Drag and drop. Since the muscle tension increase when doing drag and drop operations(holding mouse button pressed), it's a good idea to minimize the distance the user has to drag something to drop it. You could for example pupup a drop-box next to the item when the drag operation starts, hence minimizing the distance.

In my opinion, Fitts' law is an easy to implement principle that requires some thought and consideration, but it's worth it.