This is your OPTIMAL THUMB ZONE Area on your Smartphone screen

Draw 🖍 Your Optimal Thumb Zone Area On Your Smartphone

 Follow These Instructions On A Device Other Than Your Smartphone 

✅ 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 screen is your LEFT HAND and RIGHT HAND Personal THUMB ZONE areas.

What is the drawing on your Smartphone screen telling you?

I can not see your drawing but, the graphics below shows my OPTIMAL THUMB ZONE AREA using an iPhone 8 Plus with a 5.5 inch screen.

This is your OPTIMAL THUMB ZONE Area on your Smartphone screen
👍  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 areas on the top of the screen and on the side of the screen!

Why is this important? Most web developers place the navigation menu on mobile devices on the top of the screen!

Trends Affecting The Position Of Mobile Navigation Menus

Thumb Zone Area of 1st Smartphone

2007

When the first iPhone was released in 2007, it had a 3.5 inch screen.

Placing a 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.

2017

In 2017, Phablets (Smartphones with a screen size of 5.5 inches - 7 inches) accounted for 40% of all Smartphones shipped in 2017.

2019

Phablets will become the most popular Smartphone type by 2019 and, are expected to account for 59% of global shipments by 2021!

When using a Large Screen Smartphone and the Navigation Menu is positioned on the Top Of The Screen, THIS IS NOT AN OPTIMAL THUMB ZONE AREA ON THE SCREEN!

This is your OPTIMAL THUMB ZONE Area on your Smartphone screen

 It's Time For A New Mobile Navigation Menu Design! 

How to design an Ambidextrous Thumb Zone Friendly Mobile Menu

Designing an Ambidextrous Thumb Zone Friendly Mobile Menu is difficult 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 Smartphone users touch their phone's screens and hold their devices in different ways:
  1. One Handed - 49%
    • Right Thumb on the screen - 67%
    • Left Thumb on the screen - 33%
  2. Cradled - 36%
  3. Two Handed - 15%

A Hypothetical Challenge For All Web Developers?

Lets assume that you have a client that comes to you wanting to redesign an existing web site that already has a desktop navigation menu consisting of:
  1. 35 Menu Categories
  2. A total of 294 Links across all Menu Categories
  3. Possibility of adding Categories and Links in the future
 What Kind Of Mobile Navigation Menu Would You Design? 

✅ Experience a Mobile Mega Menu with 35 Categories and 294 Page links!

Features of my Ambidextrous Thumb Zone Friendly Navigation Menu

👍  Uses a HTML5 and CSS3 "Full Screen Overlay" Scrolling Mobile Navigation Menu.

👍  The Menu is positioned at the bottom of the screen for OPTIMAL THUMB ZONE ACCESS and is optimized for "ONE HANDED" use.

The Thumb Zone Friendly Ambidextrous Mobile Navigation Menu optimized for One Handed use
👍  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.

👏  My Mobile First Design allows visitors to experience the same web page layout and Navigation Menu User Experience (UX) on different size screen devices.
Visitors will experience the same User Experience (UX) on different size screen devicesVisitors will experience the same User Experience (UX) on different size screen devices

Would Love To Hear Your Thoughts and Comments

✅  With a few minor changes to your web pages, you should be able to replace your current menu with an Ambidextrous Thumb Zone Friendly Navigation Menu that improves your web site visitors User Experience (UX)!

Would love to hear your comments, opinions, and thoughts on the topic of Mobile Navigation Menus via email or Twitter.

Looking forward to your responses!

Back To 🔝 Of Page