Fitt’s Law is a design principle that helps us understand how people interact with digital interfaces. It tells us that the easier something is to click on, the faster we will be able to interact with it. This means that the closer and bigger something is, the easier it is to click on. By applying Fitt’s Law to your website or social media platforms, you can create a better user experience and increase engagement with your brand.
1. Button Size and Placement
One way to use Fitt’s Law in marketing and advertising is by increasing the size of the buttons on your website or landing pages. The bigger the button, the easier it is to click on it. Additionally, placing the button in the center of the screen or at the top of the page, where it’s closer to the user, can also increase click-through rates.
Example: Spotify increased its conversion rate by 34% by simply changing the color and size of its call-to-action button. They also moved the button to the center of the screen and made it stand out more.
2. Navigation Design
Another way to leverage Fitt’s Law in marketing and design is by optimizing navigation design. By placing important navigation items, such as menus or links, in easy-to-reach areas, you can improve user engagement and navigation on your website or social media platform. This can be achieved by placing these navigation items in areas that are easily accessible, such as at the top of the screen or in the sidebar.
Example: Nike’s website uses a clean and simple navigation design that leverages Fitt’s Law. The navigation menu is positioned at the top of the page, making it easy for users to find and use. The menu items are also large and well-spaced, making it easy for users to click on the item they want without accidentally clicking on a neighboring item. Additionally, Nike uses clear and concise language to describe each menu item, making it easy for users to understand what they will find when they click on a particular item.
3. Reducing Clutter
Fitt’s Law can be used to improve user experience by reducing clutter and making it easier for users to find what they’re looking for. By simplifying your design and focusing on the most important elements, you can improve usability and make your website or app more user-friendly.
Example: Dropbox’s website is designed with simplicity in mind, with a clean and uncluttered interface that makes it easy for users to find what they need. The website features clear headings and minimal text, with large icons and buttons that make it easy for users to navigate the site. The navigation is also simple and intuitive, with clear categories that make it easy for users to find the information they need.
4. Pop-ups to Draw Attention to Important Elements
Using pop-ups is a great way to draw attention to important elements on your website, social media platforms, or other digital assets. By placing a pop-up over the target area, you can make it more noticeable and easier to access for the user. For example, you can use pop-ups to encourage visitors to sign up for your newsletter, download your app, or join your loyalty program.
Example: Hubspot uses pop-ups to offer free resources such as e-books, templates, and guides to their website visitors. These pop-ups appear when users scroll down the page, and they are designed to be eye-catching and easy to close.
5. Use hover effects
When users hover over a clickable element, use a hover effect to give them feedback that the element is clickable. This can be as simple as changing the color of the element, or using a subtle animation.
By using hover effects, you’re giving users a clear indication that an element is clickable, which can increase engagement and improve the user experience. When users know that they can interact with elements on your website, they’re more likely to explore and engage with your content.
Example: When you hover over a course on Coursera homepage, the course card expands and displays additional information, such as the course rating, the number of students enrolled, and the course description. This hover effect is a great way to give users more information about a course without requiring them to click through to a new page.
6. Giving Directional Cues
Directional cues, such as arrows or lines, can increase the effective width of a target by guiding the user’s movement towards the target. For example, if a call-to-action button is small and difficult to click, adding an arrow pointing towards the button can increase its effective width by guiding the user’s movement towards the button and making it easier to click.
When using directional cues, it’s important to make sure that they are subtle and not overly distracting. They should also be consistent with the overall design aesthetic of the page or application. Too many directional cues can have the opposite effect and overwhelm the user, leading to a negative user experience.
Example: Grammarly uses directional cue in the form of a visual cue that highlights the key features of using Grammarly, which guides the user’s attention towards important information.
7. Use whitespace to make elements easier to click on
Whitespace is an essential component of any well-designed digital asset. One way to use whitespace to improve the clickability of elements is to increase the amount of space around clickable elements. By doing this, you can make the clickable area larger, which reduces the likelihood of users accidentally clicking on the wrong element. Additionally, using whitespace effectively can also make the clickable elements stand out more, drawing the user’s attention to them.
Example: Apple’s website makes use of ample whitespace to create a clean, minimalist look. They use whitespace effectively to make clickable elements stand out. This helps to create a more user-friendly experience for visitors to the site.
8. Improve readability by increasing font size
Increasing font size is a good option for any brand that wants to improve readability and make their content more accessible to users. This is particularly important for brands that use a lot of text on their landing pages or that cater to an older demographic. Brands that want to improve the user experience and increase engagement with their content can also benefit from using larger font sizes to make their content more readable.
Example: Airbnb’s landing page is designed with large font sizes and clear headings that help to guide the user’s attention towards important information. The text is easy to read, and the headings are written in a larger font size to emphasize the key benefits of using Airbnb.
There are several cognitive biases that are similar to Fitt’s Law,
Hick’s Law: This law states that the time it takes to make a decision is directly proportional to the number of options available. In other words, the more choices there are, the longer it takes to make a decision. Hick’s Law is similar to Fitt’s Law in that it deals with the relationship between time and the number of options available.
Miller’s Law: This law states that the average person can only hold 7 ± 2 items in their short-term memory at any given time. Miller’s Law is similar to Fitt’s Law in that it deals with the limitations of human cognition and how they affect decision-making.
Weber’s Law: This law states that the perceived difference between two stimuli is proportional to the magnitude of the stimuli. In other words, it takes a larger change in stimuli to notice a difference as the magnitude of the stimuli increases. Weber’s Law is similar to Fitt’s Law in that it deals with the relationship between stimuli and how they are perceived by humans.
Citations
“How to Design for Fitt’s Law” by Nick Babich on Smashing Magazine – https://www.smashingmagazine.com/2016/12/how-to-design-for-fitts-law/
“Hick’s Law: Making the Choice Easier for Users” by Carrie Cousins on Designmodo – https://designmodo.com/hicks-law/
“Miller’s Law: The Psychological Limit to Our Capacity for Processing Information” by John Stevens on The UX Collective – https://uxdesign.cc/millers-law-the-psychological-limit-to-our-capacity-for-processing-information-812c3b3ab7d9
“The Psychology of Design: Applying Weber’s Law to Visual Interfaces” by Jerry Cao on The Next Web – https://thenextweb.com/design/2014/10/27/psychology-design-applying-webers-law-visual-interfaces/
“Leverage Hick’s Law to design better user interfaces” by Hemalatha Venkataraman on UX Collective: https://uxdesign.cc/leverage-hicks-law-to-design-better-user-interfaces-2579ac5a262a
“The Psychology of Web Design: How Colors, Typefaces and Spacing Affect Your Mood” by Joe Warnimont on Themeisle: https://themeisle.com/blog/psychology-of-web-design/
“The 6 Laws of Logo Design: The Principles Behind Successful Logos” by Issara Willenskomer on Creative Market: https://creativemarket.com/blog/the-6-laws-of-logo-design-the-principles-behind-successful-logos
“The Application of Weber’s Law in Marketing” by Ayaz Nanji on MarketingProfs: https://www.marketingprofs.com/charts/2018/39505/the-application-of-webers-law-in-marketing
