Icons are graphic representations used on computer screens, apps, and websites. However, not everyone is familiar with what they are or what they represent. For users who are scrolling and want to navigate through different parts of an interface, such as a luxury website, an Apple computer, or a Kindle, understanding navigational menu icons can be a challenge. These icons serve as buttons that direct users to specific sections, but they are often hidden or not easily recognizable. Furthermore, users may wonder why they look a certain way when they accidentally hover over or click on them. In this article, we will explore common menu icons used in UI navigation and explain their usefulness, whether they are hidden or not. If you have ever been curious about the three little lines in the top corner of a website, or the vertical dots in a Google Suite program, we’ve got you covered. We will identify, categorize, and examine each icon, focusing on their role as navigational menu icons and their specific use cases. Let’s get started.
1. Hamburger: This icon consists of three lines that resemble the layers of a hamburger. It was first introduced in 1981 by Norm Cox but gained popularity in UI design two decades later. Initially used to indicate a list in the Xerox Star system, the hamburger menu became a common way to create navigation menus for smartphones with limited screen space. Although it initially confused visitors, it is now widely used and can be found anywhere on the screen. By clicking or hovering over the hamburger menu, users can access additional sections and information. This icon is particularly useful for interfaces with comprehensive navigation that needs to be organized.
2. Kebab: The kebab menu is similar to the hamburger menu and is inspired by the traditional Middle Eastern food, kebab. It consists of three dots arranged vertically. While Google has defined distinct purposes for the hamburger and kebab menus, there is often overlap in their usage. The hamburger menu is primarily used for internal navigation, while the kebab menu is for external navigation or overflow menu. The kebab menu is typically located on the top right or at the top of the screen.
3. Döner: The döner menu is a variation of the hamburger menu and is the most commonly used icon in UI design today. It consists of three vertically stacked lines of varying lengths. Named after the Turkish delicacy known as döner, this icon is often used for filtering items on a program or website. It is commonly seen in conjunction with sorting or “sort by” options, particularly with global filters.
4. Bento: The bento menu icon resembles a bento box, a Japanese packed lunch consisting of different compartments. It consists of nine dots arranged in three rows and three columns. This icon is commonly used in the UI of the Google Play store and other websites and apps. Similar to its food container inspiration, the bento menu organizes different functions found within the app or site being browsed. It is usually located in the upper right corner of the screen.
5. Meatballs: The meatballs menu icon is a horizontal menu consisting of three dots arranged side by side. It is also known as the ellipsis menu, resembling the three dots used in writing for grammatical purposes. This menu is primarily used to access additional options or actions not visible on the main screen. It is widely used on the web due to its simplicity and versatility, often used for settings, help options, accessibility settings, file management, and other tabular or graph-like systems.
6. Breadcrumbs: The breadcrumbs menu is represented by an arrow or multiple arrows, allowing users to navigate back or forward. This menu is frequently used in file management systems, e-commerce websites, and other applications that require tracking the user or customer journey. The breadcrumb menu is particularly focused on user experience and ensuring users can locate themselves within a website or application.
In addition to these specific menu icons, there are several types of navigational systems that have evolved historically to encompass them.
1. Flyout: This is the most common type of navigational menu and is often represented by the hamburger menu icon. It provides a compact and stylish solution for mobile responsive websites and can also be used on desktops.
2. Dropdown: Dropdown menus are usually part of a responsive navigation bar and are typically activated by hovering over them. Some designers consider this menu system controversial because the content only appears when hovered over. However, dropdown menus are still widely used on websites and systems like Microsoft, where users need to click to reveal the menu and click again to hide it. The döner menu is sometimes used in conjunction with a dropdown menu.
3. Standard horizontal: The standard horizontal navigation menu is the classic menu used in old websites, programs, and apps. It consists of a horizontal list on the main page, usually the homepage, and is still used in some interfaces today.
These menu icons and navigational systems play a crucial role in UI design and help users navigate through websites, apps, and programs. Understanding their meanings and purposes can enhance the user experience and make navigation more intuitive.
Source link
