Learn How To Design A Thumb Zone Friendly Navigation Menu

When smartphone users hold their devices USING ONLY ONE HAND, the "Thumb Zone" is an area on the smartphone screen that your thumb is able to easily reach and interact with a mobile web site navigation menu.

❓ Are you able to interact with your web site Mobile Navigation Menu USING ONLY ONE HAND.

The "Thumb Zone" area changes depending on these factors

1The size of your hand.

2The size of your Smartphone screen.

3Which thumb is used to intertact with a mobile navigation menu.

Your thumbs were able to interact with Mobile Navigation Menus on earlier smartphone devices.

As large screen Smartphones become more popular, your thumb is not able to reach and interact with a Mobile Navigation Menu positioned on top of the screen.

Experience My Ambidextrous, Thumb Zone Friendly, Navigation Menu

Follow These Instructions

1OPEN this web page on a large screen Smartphone.

2TAP the M E N U at the bottom of the screen.

3TAP the About Menu Category.

4USING ONLY ONE HAND both your Left and Right Thumbs will be able to interact with all associated links in the About Menu category.

5TAP the Contact Menu Category.

6USING ONLY ONE HAND both your Left and Right Thumbs will be able to interact with all associated links in the Contact Menu category.

7TAP the M E N U at the bottom of the screen to return to the web page.

How To Design An Ambidextrous, Thumb Zone Friendly, Navigation Menu

1POSITION your website navigation menu at the bottom of your screen.

2CENTER all navigation menu categories and web page links.

3USE CSS Viewport Units Height to match the Optimal Thumb Area for your hand and smartphone screen. When you rotate the smartphone from portrait to landscape, the Menu Categories will shift automatically!

div.optimal-thumbzone-screen-height{background-color: #fff; height: ??vh;}

Would love to hear your comments, opinions, and thoughts!Raul