Fat Fingers: A Look Into Responsive Navigation Trends

Often when browsing a website on my iPhone I am impatiently zooming in and out trying to make use of their standard non responsive menu, this often leads to some clumsy fat fingered iPhone stabbing which only results in me being taken to the wrong page anyway.

When creating your website, in a majority of instances you would take the decision to make it responsive on all screen sizes so the website still provides a great user experience, no matter if the user is on an iPhone or a small tablet device.

A decision you need to consider in the early concept stages is how best to present your website menu structure to your user. Depending on the menu size and hierarchy will influence how you decide to present your responsive menu.

Today I wanted to take a look at a couple of different ways responsive websites are presenting their menu structures to mobile and tablet users, helping in the fight against fat fingered navigation errors.

The Condensed Navigation

For websites using a smaller and simpler menu structure, simply condensing and only showing a select few menu links is a common practice.

This style tends to lend itself to very few menu links without complex nested menu items. You can this responsive navigation trend in the below example

Vittorio Vittori

Makers Quarter

Create DM

The Dropdown Toggle Navigation

The drop down toggle style navigation is another way of displaying both simple and more complex menu structures.

This dropdown style of navigation is certainly a better way to present a multi-level deep menu on small screens and it has the added benefit of saving some valuable screen space when the menu is not toggled. Take a look at these examples of the dropdown style responsive navigation:

World Wildlife Fund

The Next Web

Time

Vogue

Japi

Tree House

Tiger Lily Apps

PH Digital Labs

Whiteboard

Mixd

Kick Point

Wolcott Yacht Club

Whole.

Chris Wilhite Design

Cole Townsend

MailChimp

The Twelve

DesignWoop Newsletter

Sign up to the DW newsletter, occasionally we send design & development related freebies, offers and exclusive deals.

4 Comments

Comments are now closed.