Fitts' Law: 14 concrete examples to understand and optimize your interfaces

For those who haven't (yet) read our full article " Fitts' Law: Improving User Experience and Increasing Conversion Rates ", I'll give you a quick and concise catch-up session:

Fitts' Law is an ergonomic principle developed by Paul Fitts in 1954, which states that the time it takes to reach a target with a pointing device depends on the distance to the target and its size. The larger and closer a target is, the less time it will take to point at it. This law is crucial for user interface design because it influences the ease of interaction with elements. Designers use Fitts' Law to optimize the layout of buttons, menus, and other interactive controls, placing the most used elements in easily accessible locations. Understanding and correctly applying this law can significantly improve the speed and efficiency of user interaction, providing a pleasant and intuitive user experience. Designers who master Fitts' Law can create ergonomic products, reducing fatigue and increasing user satisfaction.

Of course, by summarizing an article of more than 6000 words in less than 200, it is difficult to really explain what it is about, this is the reason why I really advise you to read the full article because whether you are a business application designer like us or a website designer, designer, etc. This law will be an essential element in the success of your achievements.

And what better than a series of theoretical (or not..) examples to illustrate how changes guided by Fitts' Law in interface design can positively influence user experience and business performance by making interactions more intuitive and satisfying.

Are you ready? Then let's go!

Application of Fitts' Law to Application Development

You probably know if you came to this site, we are specialized in developing custom applications , whether they are applied to websites or professional extranets. So we could have given you examples of what we had already done but that would have transformed our article into a disguised advertisement and that is not the purpose of the article. So we will take theoretical examples that can speak to everyone.

Improving the interface of a banking application

Many of us have a banking platform and have already complained because the interface was not adapted to what we want to do repeatedly. Imagine a mobile banking application that adapts its user interface to put frequently used functions like transfers and balance inquiries at the forefront, with larger icons on the home screen. This optimization could logically reduce the time needed to perform these actions and increase user satisfaction by making the application faster and easier to use. And this satisfaction could greatly reduce the customers' feelings about the amount of bank fees...

Interface design for recording platform

Here too we have all been confronted with a platform for booking train, plane or concert tickets. If these players redesigned their registration platforms to apply the principles of Fitts’ Law, by making the navigation buttons larger and better spaced, it could help customers use the platforms more often, more quickly and more efficiently, potentially reducing queues and improving the overall customer experience. 

Redesign of a news application for tablets

It seems that news reader app designers have not yet reached the age that makes things more complicated… I would have given you the name of the platform my mother uses to read her regional news, but on the one hand, it probably won't interest you, and on the other hand, this very well-known French publisher could correct its application by reading our world-famous blog. 🙂 

Yet, if their news reader app could increase the size and spacing of its navigation menu items for tablet users, this would allow for better accessibility of key functions and could logically result in an increase in the amount of time my mother (and others of course) spends on the app and the number of articles read per session. 

So this brings us to the next part, the theoretical examples of applications of Fitts' law on the development of e-commerce websites.

Application of Fitts' Law to E-Commerce Website Development

Just like the previous chapter, our agency has been creating high value-added websites since 2009. And over all these years, you can imagine that there is no shortage of examples of applications of Fitts' Law to improve User Experience and increase Conversion Rates. The following examples will show you how applying the principles of Fitts' Law to an e-commerce site can make the purchasing process faster and more intuitive , thus improving the user experience and potentially increasing conversion rates by reducing barriers to action .

Optimizing order buttons on an e-commerce site

One of the principles of Jakob's law is that you should not change user habits . This principle is proven and it would be stupid not to follow it. However, and we had this as an example when taking over an e-commerce website that was making almost no sales, with the arrival of Dynamic Contents on certain CMS, the creators of the site had decided to modify certain e-commerce concepts such as, for example, by placing the " Add to cart" and "Proceed to payment" buttons in a " discreet " manner.

All we had to do was reorganize its "Add to Cart" and "Proceed to Checkout" buttons to make them more visible and easy to click . By placing these buttons in areas where users naturally end their navigation and increasing their size, we were able to observe a reduction in interaction time and an increase in conversions . A concrete example of the application of Fitts' Law that allowed us to quickly re-engage our client's turnover on the right trajectory.

Optimizing the product page to make purchasing easier

The act of purchasing on an e-commerce site can be impulsive. Some leading platforms in the sector such as Amazon or others have understood this well. On these e-commerce sites that seek to maximize sales by reducing the time needed to add an item to the cart, the "Add to Cart" button is placed in a prominent position, directly next to the product image or under the product description, where users' eyes naturally fall after examining the details of the item. By making this button large enough and using contrasting colors to distinguish it, the site reduces the interaction time and can theoretically increase conversions by facilitating a quick and intuitive action. QED, this is how thousands of compulsive customers increase the turnover of these e-commerce giants. So why not do it too?

Improved navigation in product categories

Ahh browsing product categories.. The topic is so recurrent that we would need entire articles to list the examples. So we will stick to theory and you will immediately understand the benefits of using Fitts' law on this subject. 

Consider an e-commerce site with a wide range of products divided into many categories. To help users navigate more easily and quickly find what they’re looking for, the site could reorganize its navigation bar to include large icons or buttons for the main categories, placed at the top of the homepage or in an easily accessible sidebar menu. These icons or buttons could be designed to be large enough to be easily clickable , reducing the time it takes to move from one category to the next. Additionally, by minimizing the amount of movement required between the navigation menu and category content, the site could theoretically reduce user fatigue and increase time on site , improving the chances of conversion.

You saw, I put the term “theoretical” many times in my example. And yet you immediately made the connection with examples that you have personally encountered either as a designer or as a buyer. This topic of navigation in product categories is a major topic in e-commerce and site design solutions like Shopify or Prestashop have understood it well. 

Application of Fitts' Law to Community Sites

Intranet, Extranet, since the creation of the agency we have made dozens of them and it was difficult to take examples that speak and can address everyone since that is what I want to do in this article. The following two examples show how the principles of Fitts' Law can be theoretically applied to improve the ergonomics of community sites, by making interactions faster, easier, and more accessible, which is essential to maintain and increase user activity and satisfaction.

Optimizing the user interface of an online forum

Consider a community forum where users actively participate in discussions on various topics. To improve the user experience, designers could reposition commonly used buttons like “Reply,” “New Topic,” and “Notifications” so that they are directly accessible at the top of the screen , where users tend to focus their attention first. By also increasing the size of these buttons , the site could reduce the time it takes for users to find and use these features, encouraging more active and frequent participation, and potentially increasing engagement on the site.

Improving accessibility on a social network

Consider a social network used by a population whose average age continues to increase (did I say Facebook? 😋). It would seem natural that this social network would want to improve accessibility for users with visual limitations or difficulty clicking on links. By applying Fitts’ Law, the site could enlarge interactive elements such as the “like,” “comment,” and “share” icons, and place them in areas of the screen that are easily accessible without requiring scrolling or precise cursor movements. This could reduce the effort required to interact with posts and comments, making the social network more inclusive and easier to navigate for all users, and could therefore increase overall engagement .

Application of Fitts' Law to Multilingual Sites 

The following examples show how the principles of Fitts' Law can be theoretically applied to optimize the usability of multilingual sites, making interactions more intuitive and faster . This optimization is essential to improve overall user satisfaction and encourage greater use of resources available in different languages.

Optimizing language selection on an international site

Consider an e-commerce site that serves an international audience and offers content options in multiple languages. To make language selection easier to access, the site could place a language drop-down menu in the upper right corner of each page, where users often expect to find customization settings. By increasing the size of this menu and making it more prominent with clearly visible national flag icons, the site could significantly reduce the time and effort required to select a preferred language. This could improve the user experience by making the site more accessible and reducing navigation friction .

Improving accessibility and visibility of language options on an educational site

Consider an educational site that offers content in multiple languages, which is crucial for learners from diverse backgrounds. To improve the user experience, the site could integrate a fixed toolbar at the bottom of the screen on all pages, containing larger-than-normal language icons or buttons that are easy to identify and click. This setup would not only reduce the time it takes to switch languages, but also minimize selection error , especially on mobile devices where touch accuracy is a challenge. This approach could encourage more frequent use of the site by non-native users , by making it easier to access resources in their native language.

Application of Fitts' Law to Blog-Type Sites

Optimizing navigation in blog archives

Imagine a blog with several years of archived content, which can make it difficult for readers to find old or specific posts. To make navigation easier , the blog could integrate an interactive sidebar on the left side of the page, where users often begin their exploration. This bar could feature yearly or topical navigation buttons with larger text sizes for popular sections, such as “most popular posts” or “hot topics.” By reducing the distance and increasing the size of the interactive targets, the blog would help users quickly locate the content they want, improving visitor engagement and satisfaction.

Improved accessibility of social features on blog posts

Consider a blog that wants to encourage social interactions such as comments, shares, and likes. To optimize these interactions in accordance with Fitts’ Law, the site could place these interaction options immediately below each post, making them not only visually distinct but also larger and easier to click . This increased accessibility would decrease interaction time and more actively encourage users to engage with the content. Additionally, by placing these buttons in an area where users naturally finish reading, the blog could theoretically see an increase in user interactions per post.

These theoretical examples demonstrate how the principles of Fitts' Law can be used to improve navigation and interaction on a blog site, making content more accessible and engaging for users. By optimizing the interface for frequent actions, such as browsing archives or social interaction, a blog can not only improve the user experience but also increase visitor loyalty and engagement .

Application of Fitts' Law to Document Management Systems (DMS)

As mentioned above, we have developed dozens of extranet sites for our clients and if there is one essential feature on these platforms, it is Electronic Document Management (EDM or DMS in English). Here are two theoretical examples that show how the principles of Fitts' Law can be applied to optimize the design of document management system interfaces. By improving the accessibility and ease of use of key features, DMS can become more intuitive and more efficient , which is essential for professional environments where the speed and accuracy of interactions with documents are crucial.

Optimizing access to frequently used features

Consider a DMS that is frequently used to upload, share, and view documents. To improve efficiency and reduce interaction time, the system could integrate a floating toolbar that appears on mouse hover at the top of the interface. This toolbar could include large buttons for actions such as “Add Document,” “Share,” and “Download,” as well as intuitive icons for each action. By placing these buttons in an easily accessible area and increasing their size, the DMS would allow users to complete common tasks more quickly and with less effort, thereby improving the overall user experience.

Improved document search and filtering

Consider a DMS where users spend a lot of time searching for specific documents among a large library. To facilitate this task, the system could offer an advanced search panel strategically positioned on the left side of the screen, an area often used for navigation panels. This panel could be equipped with search fields and filters with buttons large enough for easy selection, thus minimizing misclicks and reducing navigation time. Additionally, logically organizing filters by common categories (date, document type, author, etc.) with larger option buttons would improve search efficiency, allowing users to quickly find the necessary documents without unnecessary scrolling.

Article updated on July 18, 2024