Learn how to design an "Unconventional" Ambidextrous, Thumb Zone Friendly, Navigation Menu
I am a Mobile First web developer that explores concepts, designs and ideas that are innovative, unconventional and not based or limited by industry traditions!
To familiarize yourself with the analysis and process needed to design an Ambidextrous, Thumb Zone Friendly, Navigation Menu, you can either:
1Scroll Down the page
2Click or Tap any of the links in the Table of Contents
What is the Thumb Zone?
When you interact with your Smartphone USING ONLY ONE HAND, the "Thumb Zone" is an area on your Smartphone screen where your thumbs feel the most comfortable and are able to easily reach and interact with a mobile website navigation menu. The term was first coined by Steven Hoober, an expert in mobile interfaces.
Designing an Ambidextrous, Thumb Zone Friendly, Menu may appear to be a daunting task because the Thumb Zone Area changes depending on:
1The size of your hand.
2The size of your Smartphone screen.
3Research on mobile interaction and behavior shows that when Smartphone users hold their devices, they use different thumbs for interacting with a Mobile Menu:
- 67% with Right Thumb on the screen
- 33% with Left Thumb on the screen
Smartphone trends affecting existing Mobile Navigation Menus
Mobile devices with a display larger than 6.5 inches are no longer the exception. Web developers should make it a priority to design Mobile Menus for "One-Handed" use!
The secret to designing an Ambidextrous, Thumb Zone Friendly, Navigation Menu
1CHANGE your CSS3 and HTML definitions and position the navigation menu on all of your webpages at the bottom of the screen!
2KNOW your Optimal Thumb Zone Area on a Large Screen Smartphone and use CSS Viewport Units on the top of your navigation menu.
3CENTER all Navigation Menu Categories and HTML Links.
Experience an Ambidextrous, Thumb Zone Friendly, Navigation Menu
1OPEN this web page on a large screen Smartphone.
2TAP the M E N U link at the bottom of the screen.
3TAP the ABOUT Menu Category.
4USING ONLY ONE HAND can your Left and Right Thumbs reach all associated links?
5TAP the CONTACT Menu Category.
6USING ONLY ONE HAND can your Left and Right Thumbs reach all associated links?
7TAP the M E N U link at the bottom of the screen to return to the webpage.
Features of my Ambidextrous, Thumb Zone Friendly, Navigation Menu
👍This Ambidextrous, Thumb Zone Friendly Navigation Menu provides website visitors a consistent browsing user experience that can adapt to any screen!
👍Is positioned at the bottom of the Smartphone screen.
👍It is both Transparent and Opaque to alert the user to Scroll Down to continue viewing additional Content, Menu Categories or Web Page Links that can not be displayed on the screen.
👍All Menu Categories and Links are "Centered" and optimized for "One-Handed" use!
👍Can also be used as a Mobile Mega Menu.
Examples of websites that use a Menu @ bottom of the screen
A simple 3 Links Bottom Navigation Menu
You can customize it to your own website requirements!
Paul L Ferguson
Another simple 3 links Bottom Navigation Menu is used on Desktop, Laptop and Mobile devices.
David Hellmann
A Mobile Only Navigation Menu
Call To Action
Would love to hear your comments, opinions and thoughts on this topic!