UI design and Fitts Law

Fitts’ law is one of the most important law for aiding user interface design. It provides a tool for predicting the time required to reach a target, given the size of the target and the distance to it.

Basically it describes the bigger and closer a target is, the faster you can grab it. That being said, the time required to reach a target is proportional to the size of the target, and inversely proportional to the distance to the target. Fitts law is widely applied in user interface design.

For example, the Ribbon interface office button of Microsoft Word is designed to be large, so as to be reached easily.

图像

The Chrome tab is located at the top, making it easy for a user to choose a tab (Here, the distance to the tab can be seen as infinity, because your mouse can not move beyond the border of the screen). Unfortunately this only applies to Windows, because on a Mac, you have the menu bar on top. So Chrome actually leaves some blank space between the tab and the menu bar, so that users would not click on the menu bar accidentally, while their real aim is to switch a tab. Although Mac OS is generally speaking user friendly, and the menu bar does provide unified user experience, but I the sacrifice on Fitt’s law really make me very sad.

图像

Another case where Mac OS does not apply Fitt’s law is the close/minimize button for each window. The buttons are designed to be very small and round, making them very hard to click.  I don’t know why Apple never change the way the present the close/minimize buttons, maybe due to historical reasons. But this again makes me very disappointed.

304723_04

Actually, Mac OS is not always forgetting about Fitt’s law. For example the dock, and the Mission control and hot corners (infinite distance) are all good examples of appying Fitt’s law to UI design.

dock-de-Mac Lion_Mission_Control

Similar to the close/minimize button on Mac OS, it seems that Apple bring the violation of Fitts law to iOS as well. Whenever you want to delete or close an app on an iOS device. You often see these small round buttons on the top-left corners.

ios4-multitasking-close-app

You have to click the small button with your finger in order to close/delete an App. This really gives frustrating user experience to me. Sometimes I need to tap several times to hit the button.  I often ask. If Apple thinks 4inch is the perfect size of a mobile phone for human’s hand to hold and manipulate, if they think the thumb-sized application icons are perfect to hit with thumb. Well, all these are kind of true due to ergonomics. Why do they think the small close button can be tapped effortless?

Fortunately, Apple just release iOS 7 last night. My colleague installed it on his device and showed it to me. I find the this Jonathan Ive designed system really fixed the problem. Now you can kill an application by swipe it with your finger.

howtocloseapps1

(GIF Source here: http://www.cultofmac.com/231322/how-to-close-apps-in-ios-7-gif/)

Truly speaking, similar features are already available for Android devices and Jailbreaked iPhones. But now Apple make it officially. This is an “exciting news”!  It is actually quite difficult for Apple to admit something they designed are flawed, but this time. Jonthan did a good job.

Anyway, iOS and Mac OS are far better than Windows and Android in terms of user experience. But they can still can do even better, I believe.

Advertisements

3 thoughts on “UI design and Fitts Law

  1. Mac’s menus are always at the top edge of the screen. This is an example of applying Fitts law. It’s much faster to select the menu on a Mac than on a Windows PC.

    • I totally agree on this. It allows faster access to the menu bar. For applications that require frequent usage of menu bar e.g. programming IDEs and design tools, this is not bad. However, for usages of many other applications, accessing to menu bar is not a frequent activity. e.g. for a browser, switching and organising tabs are more frequently used.

      I think this is the tradeoff. Apple forces developers to follow Mac OS design guideline to ensure consistency. On the other hand it restricts the flexibility for third-party developers and designers to make full use of the limited screen real estate.

      Actually the only thing I miss from Windows while I am using Mac is the Chrome tab switch. In windows, in order to click a tab, I don’t need to slow my mouse down. I can just move the cursor to the top border and moves it horizontally. But with a Mac, I have to always slow it down when my cursor moves closer to the tab. Since nowadays people use browsers a lot in their dailylife, I think many people may have the same frustration.

      Anyway, Apple is not to blame, since they want app designers to keep consistence and apply system-wise Fitt’s law. This problem is not as big as the small close button problem. I now always use Cmd+W to close a window, instead of click it.

  2. Hello there!

    I have recently been reading a paper (source at the bottom of my reaction) about the more mathematical side from Fitts Law. And when i was reading your post i really think this paper will give you a bit more insight in the choices that windows and osx have made. First off all your definition at the start of the text is a bit vague. There are more parameters involved in fitts law except for the distance (D) and the width (W) of the icon. When we look at the complete formula given in the paper we see that T (average time to perform the movement) is calculated like this :

    T = a + b* log2 (D/W + 1)

    Thus, parameter a and b are extra parameters involved in fitts law. These parameters are based on empirical data and are different for each single user and user conditions. Now, what the paper tries to tell is that people often tend to forget about parameter a and b and set their values to 0 and 1 so only the last part remains. Although, for example, parameter a describes the difficulty of an action. 0 would be a very very easy action and would ideally take no time. This explains more or less why apple, in IOS6 chose for the smaller “close button” on their apps. The task is a lot more difficult for the user to perform and so prohibits the fact that users would close apps very fast (accidently) without knowing.

    paper source : http://www.sciencedirect.com/science/article/pii/S1071581904001041.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s