Share

Web Design Trend: Responsive Web Design and the hidden Navigation

Posted on


It has been long seen as a convention to position the navigation menu prominently at the top of the page. Triggered by new web design trends like responsive design, more and more designers are now taking farewell to this tradition. Interaction with mobile devices influences the desktop designs of websites now: set rules and boundaries are deliberately broken. Why you should use a space-consuming navigation menu when you can represent it instead with a single icon that is anyway already familiar to the user? Entire menus disappear leaving only an icon, which provides access to the entire menu.

How did it happen?

In recent years it has become  more and more important to optimize web pages for the use on mobile devices. Mobile displays offer less space and require touch-optimized interaction mechanisms. Often, it is hardly possible, to display the entire navigation menu horizontally. Also large menus are for the use on smaller touchscreens rather frustrating they are difficult to read and barly to meet with the fingers.


So the trend is to minimize the main navigation for mobile devices with small displays so far that only one icon remains, by which the navigation can be accessed Thanks be to responsive web design!
(For those who want to know more about Mobile Web navigation, there is also the free study Mobile Web navigation navigation and orientation on the smartphonein the download area on eresult.de.)

And now – Responsive Web Design

The latest trend now is to hide to the navigation menu also for desktop users either off-canvas or in a drop-down menu. This means, that the navigation menu is not visible at the beginning, the categories are not displayed until the user clicked a button or a drop-down.

The online brokerage service UBER for example has a fully-responsive page and also uses for mobile and desktop the same navigation principle: a click on the Burger” icon opens offcanvas the menu. That means, that the menu shifts from the side (in this case, left) in the visible range. The website itself is dimmed and the navigation occurs visually to the fore. All categories are displayed; unlike in online stores there are not an infinite number of subcategories here. But rather irritating is that you leave the page by clicking at some menu items without warning – and the menu is disappears.

UBER 1

UBER versteckt das Menü und gibt dem Bild und Hauptfunktionen wie der Registrierung Raum. Das Wort „Menü“ neben dem Burger-Icon fordert den Nutzer zum Klicken auf.

Depending on the resolution, YouTube displays the menu over the content or sets it permanently on the left side besides the content. The menu can also be accessed here by clicking on the Burger” icon. However, here the number of menu items is limited to a few. However, from personal experience, we know that YouTube users navigate primarily by the search and the content. So the menu is from the first rather secondary. So it is pretty clever to give the content more space by hiding the menu.

YouTube 1

YouTube setzt auf Content. Bei Bedarf kann das versteckte Menü aufgerufen werden

Amazon is known for testing new UI concepts thoroughly. So also the accommodation of all product categories in a drop-down menu All Categories“. Users have to actively move the mouse over the menu to see the product categories. The search box has been given a lot of space. Perhaps assuming that searching is the thing wanted on Amazon in the first place?

Also the Nielsen Norman Group has dealt with this issue and came to the conclusion that Amazon can afford” such a drop down navigation, because the brand is known and users know that you can get anything on Amazon. In addition, Amazon has navigation elements on every side to discover products.

Amazon 1

Die Produktpalette wird erst deutlich, nachdem der Nutzer mit der Maus über das Drop-Down fährt

So should we follow this trend?

In most cases, probably not. One should still wonder: Who is the user? How is he using the site? What does he want to achieve with the site? And above all: What device is used for accessing that page. Even today it is still important to note that a page should not only be developed for one device.

It is also wrong to simple generate from desktop pages small mobile pages, it does not work to develop mobile pages 1:1 from desktop pages. Also if “mobile first” applies. It is important to remember how and with what these sites are operated and what are the strengths and weaknesses of the respective device. A small touch screen is a completely different interface than that of a laptop or desktop PC – both in terms of content, which can be displayed on the screen, as well as the manner and the precision of the interaction. As we all know by now, it is much easier to interact with a mouse with small elements than with a finger. Different interfaces mean different approaches in designing the interfaces.

Most importantly, the content is crucial. Hidden Menus cause that contents are less well detected. Especially in eCommerce, it is important to support the user in discovering the products and to show the range of products. So certainly many know that bonprix sells fashion; but that they have also the area “Living” will not be expected by every user. Hidden in an off-canvas or drop-down menu this offer would certainly be perished and would have to be discovered by accident.

One should therefore carefully consider the importance of the contents of the navigation for each page and how and with what methods the user interacts with the site and discovers content. Certainly there are some applications where a hidden navigation makes sense – especially if the users rather mobile-savvy and are used to hidden menus. In all other cases, however, it is usually better to directly display the main categories to explain the users, what is the purpose of the site and what can be seen or bought there.

About the Project „Design in the course of time“

 

eResult verfolgt und dokumentiert bereits seit mehreren Jahren die Entwicklung des Webdesigns von 50 verschiedenen Branchen. Die dokumentierten Screenshots werden regelmäßig ausgewertet und Erkenntnisse hier im Usabilityblog vorgestellt.

eResult tracked and documented for many years the development of web design from 50 different industries. The screenshots are regularly evaluated and documented and the  findings are presented here at Blog Usability.

by Jumana Al Issawi

www.usabilityblog.de