From Our Digital Agency

Home Blog What burgers, kebabs and UX have to do with each other

What burgers, kebabs and UX have to do with each other

From apps to websites, menu icons guide our interactions and subtly shape our digital experience. In this blog we look at the most commonly used menu icons and in what context you may encounter them.

6 menu options are displayed
The 6 most used menu buttons

Hamburger

Three horizontal lines that resemble a hamburger. It is best used when multiple items need to be displayed in a compact and accessible manner. This icon is commonly used in mobile app design, but is also commonly seen in desktop and web-based interfaces. Use this to display the app's menu, especially if there are multiple sections. Try to avoid this in desktop view where possible, due to its strong association with mobile and apps.

Kebab

Three vertically stacked dots. It is often used to indicate that additional options are available that are not immediately visible. It is best used when there are a few secondary options or actions that need to be displayed. However, the difference between the hamburger and kebab icons is that the kebab icon is typically used to display an inline menu. The hamburger icon is typically used to display a menu that moves off the screen and inwards around the sides.

Meatballs

Three stacked circles of equal size. It is a less common icon and is sometimes used interchangeably with the kebab icon. It is best used when there are multiple options that are similar in importance or function. This icon can be used in mobile, desktop, and web-based interfaces.

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

Bento

A square icon with compartments, similar to a Bento box. It is used to display a collection of related items or tools, such as a set of filters or categories. It is best used when there are multiple items that need to be organized into categories or groups.

Can also be used to open a menu with different applications, solutions or functions within the same product, you can quickly switch between them, for example you can find this icon at the top right of the Google Play store.

Hotdog

An icon with a vertical line and two smaller lines on either side, which looks damn much like a hot dog. It is a less common icon and is sometimes used interchangeably with the hamburger icon. It is best used when there are a few primary options or actions that need to be displayed. Also this icon can be used in mobile, desktop and web-based interfaces.

Strawberry

This is mainly seen in contexts related to food and drinks, such as menus, recipe websites or apps for supermarkets. You will also encounter this in branding for companies that specialize in fresh products, natural ingredients or healthy snacks. The strawberry symbol can be used in both digital and print media and can be incorporated into logos, icons or illustrations to convey a sense of freshness.

A menu full

Depending on the website you visit or the application you use on your phone or other mobile devices, these icons can be the key to finding the features you want.

In a series of blog posts about UX, we highlight what lies behind design-related decisions. We wrote about it earlier how many icons you place in the navigation bar and the science behind it. And in this piece we looked at the design of the menu buttons themselves. There is a thought behind every design, as it turns out.