| ✅ Open the www.awwapp.com web site on your Smartphone. |
|---|
| ✅ Click on the Start drawing Green Button. |
| ✅ Click on ✎ Pencil Button located on the top left side of the screen. |
| ✅ The Drawing Menu will appear on the left side of the screen. Click on the ✏ Pencil symbol that appears halfway down the screen. |
| ✅ Use your RIGHT HAND to COMFORTABLY HOLD your Smartphone with ONE HAND. |
| ✅ Using just your RIGHT THUMB, draw and ARC from the top right hand side of the screen down to bottom section of the screen. |
| ✅ This is your personal Smartphone THUMB ZONE area for you Right Hand. |
| ✅ Now use your LEFT HAND to COMFORTABLY HOLD your Smartphone with ONE HAND. |
| ✅ Using just your LEFT THUMB, draw and ARC from the Bottom of the screen up to the TOP LEFT area of the screen. |
The drawing that you are seeing on the Smartphone screen is your LEFT HAND and RIGHT HAND THUMB ZONE areas.
👍 The overlapping space at the bottom middle section of your Smartphone screen is your OPTIMAL THUMB ZONE AREA!
Your drawing will look very similar and it should be obvious that your thumbs can not reach the Hamburger Menu on the top of the screen!
Why is this important? Most web developers place the navigation menu on mobile devices on the top of the screen!
When the first iPhone was released in 2007, placing a small Navigation Menu on the top of the page that took very little space on the small screen was acceptable because, individuals were still able to use their thumbs to navigate a mobile web site.
In 2017, Phablets (Smartphones with a screen size of 5.5 inches - 7 inches) accounted for 40% of all Smartphones shipped in 2017.
Phablets will become the most popular Smartphone type by 2019 and, are expected to account for 59% of global shipments by 2021!
When website visitors use "Large Screen Smartphones" and the Mobile Navigation Menu is positioned on the top of the screen, the Menu is not in an optimal thumb zone area for ONE HANDED USE!
Designing an Ambidextrous, Thumb Zone Friendly, Mobile Navigation Menu may appear to be a daunting task because the THUMB ZONE AREA CHANGES depending on:
✅ The size of your hand.
✅ The size of your Smartphone screen.
✅ Which hand you use when holding your Smartphone with One Hand. Research on mobile interaction and behavior shows that when Smartphone users hold their devices with One Hand, they use different thumbs for navigation:
👍 It uses a HTML5 and CSS3 ONLY "Full Screen Overlay Scrolling 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.
👍 Website visitors will experience the same Navigation User Experience (UX) on any size screens!
If you position your Mobile Navigation Menu on Top of the Smartphone screen, I would like for you to consider a challenge to make a few minor changes to the CSS3 definitions of your existing mobile navigation menu!
✅ Position the Navigation Menu at the Bottom of the screen and allow Scrolling to take place.
✅ Center the Menu Categories and Web Page Links so that they fall within an Optimal Thumb Zone Area in the screen.
✅ Instead of using the Hamburger Menu Icon, change it to "MENU" and make sure it is centered at the bottom of the screen for Optimal Thumb Zone Access!
✅ Test the updated Mobile Navigation Menu functions and layout using just One Hand.
👍 If you instead like my Ambidextrous Thumb Zone Friendly Mobile Navigation Menu design and features, I can customize it for your individual needs for a donation and small hourly fee!
Would love to hear your comments, opinions, and thoughts on the topic of Mobile Navigation Menus.
Looking forward to your responses!