Unconventional
Web Design
You have an opportunity to set yourself apart from all the other web sites that use a Hamburger Menu!
Learn how to design an Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu
To learn how to design an Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu you can either:
1Scroll Down the page
2Click or Tap any of the links in the Table of Content
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 navigation menus for "One-Handed" use!
What is the Thumb Zone?
The "Thumb Zone" is an area on your Smartphone screen where your thumb is able to easily reach and interact with a mobile web site navigation menu. The term was first coined by Steven Hoober, an expert in mobile interfaces.
Designing an Ambidextrous, Thumb Zone Friendly, Mobile Navigation 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 navigation menu:
- 67% with Right Thumb on the screen
- 33% with Left Thumb on the screen
Draw your Optimal Thumb Zone Area on your Smartphone screen
The first step in designing an Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu is to identify the Optimal Thumb Zone Area on a large screen Smartphone!
1OPEN the www.awwapp.com web site on your Smartphone.
2TAP the Start drawing Green Button.
3TAP the ✎ Pencil Button located on the top left side of the screen. The Drawing Menu will appear on the left side of the screen.
4TAP the ✎ Pencil symbol that appears halfway down the screen.
5Hold your Smartphone with your left hand.
6Using your left thumb, draw a line from the bottom of the screen up to the top left area of the screen. The drawing illustrates your left hand Thumb Zone Area.
7Hold your Smartphone with your right hand.
8Using your right thumb, draw a line from the top right hand side of the screen down to bottom section of the screen. The drawing illustrates your right hand Thumb Zone Area.
What is the drawing on your Smartphone screen showing you?
Your drawing will look very similar and it should be obvious that your thumb can not reach the Hamburger Menu on the top of the screen!
The overlapping green area at the bottom middle section of your Smartphone screen is your Optimal Thumb Zone Area on your Smartphone screen!
The vast majority of web developers place mobile navigation menus on the top of the Smartphone screen!
The secret to designing an Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu
✔ Change your CSS3 and HTML definitions and position the navigation menu on all of your web pages at the bottom of the screen!
✔ Know your Optimal Thumb Zone Area on a Large Screen Smartphone and use CSS Viewport Units on the top of your navigation menu to display the Menu Categories in the middle of the screen.
✔ Center all Navigation Menu Categories and HTML Links.
Features of my Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu
👍 It uses a HTML5 and CSS3 ONLY "Full Screen Overlay Scrolling Menu".
👍 The Navigation Menu 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 with either the Left Hand or Right Hand.
👍 Follows the "unofficial web design" Three Click Rule. This rule recommends that web site visitors should be able to find any information with no more than three mouse clicks or touch actions!
👍 The Navigation Menu is very versatile and can also be used as an Ambidextrous, Thumb Zone Friendly, Mobile Mega Menu.
👍 This Mobile Navigation User Experience (UX) can scale up from any size Smartphone screen to the largest Laptop, Desktop, and Smart TV screens!
Examples of web sites that use a Menu @ bottom of the screen
Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu
✔ Try viewing this navigation menu on different size screen devices. If you like it, feel free to customize to your own web site requirements!
3 Links Bottom Navigation Menu
A simple 3 links Bottom Navigation Menu where you can copy and paste the CSS3 and HTML Code and customize to your own web site requirements!
Paul L Ferguson
Another simple 3 links Bottom Navigation Menu that is used on Desktop, Laptop and Mobile devices.
David Hellmann
A Mobile Only Navigation Menu
Ergo Bag
A Mobile Only Navigation Menu
The Landings
A Mobile Only Navigation Menu
Pitchfork
This web site uses a scrolling Hamburger Menu on the Desktop and Laptop version that is positioned on the top of the screen. The Mobile version also uses a scrolling Hamburger Menu but, is positioned at the bottom of the screen. When you Tap the Mobile Navigation Menu, your thumb still can not reach the links on the top of the screen! This Mobile Menu is a perfect candidate to use CSS Viewport Units on the top of their navigation menu.
Call to Action
Would love to hear your comments, opinions and thoughts on this topic!