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?|
|Smartphone trends affecting existing Mobile Navigation Menus|
|The secret to designing an Ambidextrous, Thumb Zone Friendly, Navigation Menu|
|Experience an Ambidextrous, Thumb Zone Friendly, Navigation Menu|
|Features of my Ambidextrous, Thumb Zone Friendly, Navigation Menu|
|Examples of websites that use a Menu @ bottom of the screen|
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:
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!
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.
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 your Left and Right Thumbs will be able to interact with all associated links.
5TAP the Contact Menu Category.
6USING ONLY ONE HAND your Left and Right Thumbs will be able to interact with all associated links.
7TAP the M E N U link at the bottom of the screen to return to the webpage.
👍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.
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.
A Mobile Only Navigation Menu
Would love to hear your comments, opinions and thoughts on this topic!