Ux trends and design in action: hidden navigation and pop-up menus

Read Time:2 Minute, 19 Second

Hidden navigation-In previous posts we have dealt with design trends and user experience. Today I want to describe one of the widely used web design trends and it is the hidden navigation and pop-up menus. Also called “Pop out” menu . I’ll show you as an example some of the latest web designs developed. They are practical and real cases, taken from our work that we do every day.

What is hidden navigation?

They are the navigation menus that appear hidden at first glance and that with a click slide or open. In mobile applications they are everywhere. This was a solution to a space problem because of the small size of mobile screens. It has also become accepted on desktop screens.

Hidden navigation has prospered and has become a trend that has come to stay and has evolved as a design resource. It is an accepted pattern in web design .

Focus on the navigation areas

The hidden menu expands a more complex structure of options to help users find information. This allows greater flexibility for the overall design.

Web browsing according to traditional patterns often use too much space and therefore are not totally effective for the user. With hidden navigation we can leave more space for the main content and provide more focus by highlighting the navigation area.

Design options

The most common symbol is an icon called “hamburger” usually located in the upper left or right of the screen. It is advisable to use the text “menu” or “navigation”. It is necessary to make sure that the element is easy to find in the user interface. Not because it is hidden, it must have difficult access. It must be a very visual interface element to make browsing easier for users.

On our website ttandem.com the hamburger icon is located on the top right and when you click the content slides to the left. It is useful to use a color in the menu area that contrasts with the images. Or video on the first screen. This helps the user to focus on navigation options

On the website of the Bodegas Príncipe de Viana, the burger icon is located in the upper left, in a clear space. Which makes it very visible to the user . It highlights the video image of the first screen. The final result is an elegant and minimalist style , with more space and flexibility for the overall design.

It is usual to find pop-up menus we would almost say without “design”. It is a screen that does not need too much decoration or additional embellishments.

A simple text format, with aesthetic typography and oversized size, is used. The subtle and striking element is the use of the range of colors of the website.