35

Choose Correct Menu Icon for your Navigation?

 2 years ago
source link: https://uxplanet.org/choose-correct-menu-icon-for-your-navigation-7ffc22df80ac
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Choose Correct Menu Icon for your Navigation?

Explaining all different types of menu icons & their usage.

These strange little icons can be found all over the Internet, on all types of websites, and with the proliferation of smartphones and tablets used to browse the Internet, these icons are commonly used in mobile versions of websites and apps.

There is no officially agreed name for all of these icons other than the menu icons.

There are different icon makers like Font Awesome and Material Design that use different names for all of their icons, making it difficult to pin down the names of these icons.

Firstly, these are all icons, which are small graphics on the screen that represents a program, file, or function of the computer, and secondly, all these specific icons represent menus.

1. Hamburger

1*8-zldCxpWYOCLKzRuvgklA.png?q=20
choose-correct-menu-icon-for-your-navigation-7ffc22df80ac

The name is pretty simple: it clearly hints at how it looks like two buns and a patty. The hamburger icon is usually found in the top or bottom corner of websites and apps, and informs users that there is more to explore beyond these three lines.

Use it to display the application’s menu area, especially when there are multiple sections, but try to avoid it in the desktop view whenever possible.

2. Kebab

The ‘kebab’ (three vertical dots), which originated in Google’s Material Design language, is designed to open a smaller inline menu from a button or other control.

The kebab menu, also known as the three-dot menu and the vertical three-dot menu, is an icon used to open a menu with additional options. The icon is usually located at the top right or top of a screen or window.

3. Meatballs

The Meatball Menu, also known as the horizontal three-dot menu, is an icon used to open a menu with additional options. The icon is usually found in the upper-right or upper-right corner of a screen or window.

Used to open a menu or display actions for a related item. Because they are horizontal, they are easier to repeat and use on the web for elements such as tables or other horizontally oriented elements.

4. Bento

1*5FnCjCQCn3IPXYlMl5Jnsw.png?q=20
choose-correct-menu-icon-for-your-navigation-7ffc22df80ac

The bento menu, named after the bento boxes, is a menu of grid items. As you read, you’ll start to notice that user interface design is just another gourmet word; we like to name UI elements after food.

It is often used to open a menu with different applications, solutions or functions within the same product, you can quickly switch between them, this icon is located in the upper right corner of the Google Play store.

5. Döner

This popular Turkish dish is still the most widely used filter symbol today. It would be preferable to use it in conjunction with the “sort by” options, but in modern applications it is very common in combination with global filters.

While the hamburger menu consists of three lines of equal length stacked on top of each other, the doner menu consists of a vertical stack of three lines of different lengths: one long, one shorter at the bottom, and one even cropped at the bottom. This user interface element is a group of filters.

6. Hamburger different variations

It is used as a replacement for the hamburger icon and has the same purpose of displaying a list menu. This is not a logo/ icon you see often, but it is used more often on “modern” , “trendy” and “artistic” sites.

1*cOu35vlm9wL4yhmdNE4v1Q.png?q=20
choose-correct-menu-icon-for-your-navigation-7ffc22df80ac
Menu Icons by Alex Muench

Wrapping up!

By explaining these icons and showing examples of where to find them, fewer people get lost and need help navigating a specific site. These tiny little icons, hold the keys to common functionality within a site or application.

Depending on the website you are visiting, the games, or the application you are using on your phone or other mobile devices, these little icons may be the key to finding the features you want in the game or in this web application.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK