360ideas
316-269-6920
Get a Quote

Mobile navigation and the rule of the thumb

Thursday, October 8 2015 9:43 PM
By Kalen Kubik
Mobile navigation and the rule of the thumb

User patterns inform user interface design and, when it comes to mobile navigation, users vote with their thumbs. In a 2013 study performed by UX Matters, the vast majority of mobile device users navigate with their thumbs. While our opposable thumbs have not evolved much in the past few years, devices have. Devices have grown since the days of the Palm Pilot, so much so that some models barely fit in your pocket. The introduction of the Galaxy Note Plus and the iPad mini thoroughly closed the screen-size gap that once divided phones from tablets. With this evolution, user interfaces are forced to evolve and old phone interface patterns will no longer suffice. A new rule has been added to mobile design patterns, the Rule of the Thumb.

What is the Rule of the Thumb

Thumbs have a limited range of motion, this is more easily seen on a larger phone, such as the iPhone 6+. The Rule of the Thumb is the understanding that your user's thumb is their vehicle for navigating your website, and the closer your desired action buttons are to their thumb, the more likely they are to click through. To best wrap your mind around the concept, think of your mobile website like a map legend; one inch equals one mile. The distance between your user's thumb and your website's action buttons affect your user's experience and your click-through rates. In fact, websites have been so slow to adapt to their user interfaces to larger screen sizes that Apple and Android both provide single-hand modes for larger devices. This software crutch is an inelegant solution and steals valuable screen space from your website, screen space you could be using to promote products.

Thumb reach heat-map »

Thumb tap test »

Examples

When beginning the journey to greatness, imitate the masters. Large companies put a great deal of time and money into user testing. In the screenshots below, note how these apps and websites cater to user's thumbs, not screen size. The website's desired action buttons are found closest to the thumb.

mobile interfaces

1. Instagram 

Instagram's navigation is a prime example of the Rule of Thumb. They've kept nearly all of their app's navigation within the bottom fourth of the device screen. A photo sharing app, they want users to take photos, first a foremost, but their endless scrolling feed resides just above.

 2. Facebook

Facebook is all about connecting with friends(and in-stream ads), so the feed is closest to your thumb. While a large background image behind your profile picture is aesthetically pleasing, it also pushes the profile interaction buttons nearer the mid-point of the device within easy thumb reach.

3. Google maps

Want to set a destination? Want to choose your route ot that destination? Done. Google Maps places the two buttons critical to navigation right at thumb-level.

4. Barney's NY

As a clothier website, I'll let you guess what its most important to Barney's when it comes to product page action buttons. You guessed it, "BUY."

Closing

When it comes to your website, your design interface directs user action. Web design is all about creating sales funnels and generating click-throughs. On mobile devices, that means putting your desired user action buttons near your user's thumbs. iPhone or Android, plus or traditional, always follow the Rule of the Thumb.

Share the love

Submit Your Comment