Web Navigation Design tips: Icon Navigation design trends

Article Description: unconsciously, many web design using the icon-style navigation (navigation)-generally using three-bar as an icon for navigation.

Unconsciously, many web design using the icon-style navigation (navigation)-generally using three-bar as an icon for navigation.
The advantage of this navigation is to save space and make the interface more concise.

Example of an icon navigation

This is YouTube's icon navigation (mobile version):

This is the Squarespace icon navigation:

Award's icon-type navigation eclectic:

Where the problem lies

The problem is that after clicking on the icon navigation, there is no change in the icon itself. In other words: Operation lacks feedback.

The buttons have different status and different styles to guide the user effectively.

Let's take the switch for example. Switch is also a kind of button, generally have two kinds of situation:

1 turn on the light;
2 Turn off the lamp;

Therefore, the operation of the icon-type navigation lacks feedback. Click on the icon to achieve two functions: Display navigation menu, close/Hide navigation menu. The icon should also have two appearances to differentiate.

Solution: Icon Conversion

This approach can be used to provide a more visible visual cue to better Guide user action.

There's a demo called Navicon Transformicons that's great to use SCSS and jquery technology, but technically it's not complicated, and you can write it if you have a heart.

The benefit is:

§ provide user visual clues;
§ icon more semantic, an icon, a state;
Excellent dynamic conversion can attract the attention of users, so that users quickly find the navigation menu.

By contrast, it's more persuasive, and I've improved on case 3 in this way:

Better guidance effect, in fact, can not only change the shape of the icon, change the icon color is also OK? Here is not much to say, give us a little imagination space.
Design without thinking, I hope you have some harvest.