Appearance of hidden navigation, pop-out menus in web designing
Pop-Out and Mobile
Unlike desktops or laptops, mobile screen or tables are small. Hence, the use of pop-out menu was the solution to that problem but eventually it has evolved into a design tool for responsive websites at all viewports. One of the success factor for this pop-out menu are also thanks to this popular website such as Facebook, Starbucks and Spotify that implemented these features into their website and mobile apps.
Photo Credit: Facebook
Photo Credit: Starbucks
There are two ways you can display hidden navigations. First, as can be seen in Facebook that they reveal their navigation shifts content from left to right while Starbucks will display theirs from bottom by making the user tap the wanted navigation element at the top of the screen to make the item slide up. Besides being a design tool, the biggest problem it solves is that hidden navigations helps users know what to do when they are using your app or browsing your website.
More room on the “First Screen”
As we all know minimalism is a design trend nowadays in web design and this why one of the benefits of hidden navigation is that it creates extra space on the main page which creates a clean, not cluttered view of the main page and a feel of simplicity. Furthermore, a hidden navigation will create a space for navigation element for itself instead of cramming them at the top of the screen which cluttered them up into small labels at the top. The good point about it is that it will provide more room to focus on key navigational elements in your website or mobile app. For instance, the picture below hows how much space is there and it really gives you a clean and neat feeling when you look at it.
Photo Credit: Take Your Pulse
Focus on Navigational Areas
An iconic figure for navigation menus will be the hamburger icon which is display at the top left or right of the screen. Sometimes the icon may be new to some people, that is why some designers incorporate a text cue (i.e. “navigation” or “menu”) to help users in identifying the icon like the one from Granny’s Secret. Although, it is nice to keep the navigation hidden, you need to make sure that the path to the navigation is easy to find and identify. An example we can see is from University of Wisconsin where they use a gray icon paired with a traditional navigation area. The hidden menu will expands to a more complex structure which will help user to find the information they need without seeming overwhelming. Take a look at the picture below on how it is implemented.
Photo Credit: Granny's Secret
Photo Credit: University of Wisconsin
Now you know what are hidden navigation, here are the 5 popular design options used to designing the navigation menu.
5 Popular Design Options
Again, color plays an important role to these designs. A navigation “screen” are usually seen with a one-color overlay with text navigation links where it is easy to absorb the information they show. For instance, Al Erkyah City uses a green overly to help users focus on navigation choices. The color green comes from the palette used across the rest of the site and the most important thing is that it will stand in contrast with the home screen which is white in color. The contrast will make it easier for them to absorb the navigation area.
Photo Credit: Al Erkyah City
Almost no other “design”
Most of the pop-out navigation screens only contain menu elements in a simple text format, no images or icons or even videos are needed. What is needed is that it should stands out when user are clicking on it and this is why a common option to do so without media graphics will be a contrasting color which can be seen in Al Erkyah City or Weisbaden Am Meer which uses a striking, bright orange screen that needs no decoration.
Photo Credit: Weisbaden Am Meer
“Hamburger to open, “X” to close
Since the hamburger icon is usually use to open the navigation menu, the “x” icon which is usually at the top right corner or top center will close the navigation menu which will direct it back to the previous page.
Simple, oversized typography
Since a navigation menu is nothing but text. A common choice to be use in the menu would be simple lettering sized larger than neccessary in relation to the space it occupies which is an attempt to keep sites from looking empty on widescreen monitors and this "space" could be carryover from mobile aspect ratios. Besides that, another choice would be using all caps. This could be due to users are accustomed to header navigation links featuring capitalized typefaces.
Screen “push” mimics mobile
All the above are navigation menus that will completely fill the screen but do recall that the apps or websites you visit on your mobile are often “push” the content. Look at Reputation Squad which does a good job with a bright color navigation bar that is scaled nicely to the page. While muting the main page with the secondary layer.
Photo Credit: Reputation Squad
Finally, a word of advice would be weather you hate or love the hamburger icon to be used, it has already become a familiar navigation pattern. Most of the user now will be familiar what does the icon represents and how it works which makes it OK to be used in your designs.
Source: Web Desin Book of Trends 2017, by UXPin
Thumbnail: Designed by Gadingeffendi01 / Freepik