Interactivity! What? And How?
Initially, there was a network, then e-mail appeared, and people began to correspond. They wanted to tell about themselves, share information - the World Wide Web (WWW) appeared. But static…

Continue reading →

8 Tips for Creating a Hero Image Banner for a Website
Does the user only need 50 milliseconds to form an opinion on any site? Web developers and designers really have very little time to make a good impression on a…

Continue reading →

Programs used in web-mastering
So what kind of programs do you need? Below I will give specific categories of programs with explanations of why they are needed. Raster graphics processing program one of the…

Continue reading →

Hamburger menu for the site

We continue to discuss the topic of navigation in web projects. After considering examples of breadcrumbs, we decided today to talk about the so-called hamburger menu. There was a time when this element brought freshness and novelty to user interfaces on mobile devices. This icon has become not only an integral part of the top mobile applications, but also began to be actively used in the site header (in adaptive versions and not only). It got to the point that the menu began to appear even where it was completely inappropriate. As a result, criticism fell on the hamburger menu button, and the former favorite turned into the culprit of the disputes.

Let’s understand and discuss why this navigation format has gained such popularity, and does it have worthy rivals these days? The material was written on the basis of this article, thanks to the author for interesting thoughts. We also recommend looking at examples of hamburger menu icons and scripts for its implementation.

The story of the popularity of three magic lines
The history of the adaptive hamburger menu began in 1981, when Xerox designer Norm Cox created the hamburger icon. This image was used in the Xerox Star system to indicate a list. However, the hamburger menu button gained real popularity in the era of smartphones: thanks to it, it was possible to fit the complex navigation of desktop applications on a small screen – it successfully hid behind three strips resembling the three components of a hamburger (two layers of bread and one layer of meat).

Popularity Hamburger Menu
The navigation option with the hamburger menu quickly became one of the most popular design elements for smartphones. To find the desired section / page, you just had to touch the screen, and not perform a series of actions.

If earlier the piling up of controls created chaos, distracted and increased the time for making decisions, now various icons, social networks, and much more drop-down lists, hidden by a neat icon.

Alternatives to the hamburger menu button in navigation
This implementation of the menu is not easy has become an indispensable element in the design of smartphone applications. However, she has alternatives that are worth paying attention to.

Tabs
Menu Tabs
Wealthsimple
Tabs on LinkedIn / Google Photos
LinkedIn / Google Photos
Tabs are the easiest way to navigate. They are ideal for cases when the number of sections on the site does not exceed five. The first tab should be the main one, and the active one for convenience can be highlighted. Tabs can have subsections.

Tabs + More
Tabs + More button
S-trip
If there are more than five sections on the site, you can arrange four tabs in the top control panel, and the fifth heading “More”. The remaining sections will open as a drop-down list or sidebar. Such navigation is better than a mobile hamburger menu on the site in that the frequently used functions are always in sight.

Gradually shrinking menu
Gradually shrinking menu
Bbc
An even better option is a menu that adapts to the width of the page. In this case, the maximum number of tabs that can accommodate the screen of a particular device is displayed. If all the tabs still do not fit, they will be displayed in the “More” section.

Scrolling Navigation
Scrolling Navigation
Paytm Mobile App
Such an implementation is convenient in a situation where it is difficult to select the most important menu items and hide some functions in the “More” section. In this case, all the elements can be placed on one panel with the ability to scroll. However, due to the fact that only a few points will be visible, designers will need to give the user a visual hint about the need to use horizontal scrolling to view other objects. In addition, not every user will like the idea of ​​scrolling navigation.

Drop-down menu
Drop-down menu
Amazon
A large number of sections of equal importance, which do not need to be constantly kept in sight, can be hidden in a horizontal drop-down menu. To view hidden items, you need to click on the down arrow located next to the name of the main section.

Bottom navigation
Bottom navigation
LinkedIn and Facebook App
Bottom navigation is similar to the option using tabs – with the difference that the tabs are not located at the top, but at the bottom of the screen. The bottom panel can be visible or hidden (in this case, it appears when the page scrolls up or down endlessly). Points in such navigation are indicated by icons – with or without inscriptions.

Vertical text
Menu vertical text
VR sessions
Apart from the usual practice of horizontal text placement, there is a nascent trend in the vertical position of the text in the menu. The advantage of this solution is a significant saving of screen space: a narrow strip of text can accommodate the name of any section.

This navigation method looks impressive, but you cannot call it obvious.

The main types of user interface buttons
Buttons are one of the most famous interactive user interface elements. They play a very important role in creating user interaction and creating a positive experience. Continuing a series of…

...

Gamification on the site: what is it and why is it necessary?
Currently, on a variety of sites, including business sites, you can find elements of the so-called gamification (gamification, gamification) - a technique that turns user interaction with the site into…

...

Web Design Trends 2015
Many areas of activity are subject to the influence of fashion, including web design. And, for example, even before the onset of 2015, both web design specialists and potential website…

...

10 key trends in logo design 2018
Last year's post on logo logo trends 2017 was well received by readers, so we decided to continue this “tradition” and consider the main trends in logo design 2018. Despite…

...