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.


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.


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.


(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.