Some Of User Interface Elements for Menu/Navigation Design
Though we cannot see into the future, changes made throughout the last decade indicate that adjusting for user needs has never been more crucial.
How important are menus / navigations in UI design?
Plenty of web and mobile app UIs make use of menus to assist their users to achieve a variety of daily tasks without losing their way. Menus, therefore, play a crucial role in UX / UI design.
1. Accordion
Accordion menu let users expand and flump sections of content. They help users navigate unit quickly and allow the designers to include large amounts of information in a limited space.
It’s an immensely useful pattern for progressive disclosure.
2. Bento Menu
The menu type represents a menu with grid items. As you read along, you’ll begin to notice a designer is just another word for a foodie.
3. Hamburger Menu
Everyone knows it. Some people hate it, some people love it. These three little horizontal lines look slightly like America’s quintessential meal and represent a list menu. You’ll commonly find the hamburger menu on the top left-hand corner of apps and most likely containing a group of navigation links.
4. Kebab Menu
The kebab menu, is also known as the three dots menu.
The icon is most often located at the top-right or top-left of the screen depending on the design choice. Consisting of three vertical dots, the kebab menu represents a set of grouped options.
Are you hungry?
5. Döner Menu
The döner menu is a variation of the more well-known hamburger menu. While a hamburger menu consists of three lines of equal length stacked one on top of the other, a döner menu consists of a vertical stack of three lines of decreasing lengths. This menu item represents a group of filters.
6. Meatballs Menu
The menu item is shaped like a three dot menu but horizontally positioned. The meatballs menu signifies that there are more options available, which are revealed when you click on the menu dots.
7. Breadcrumb
These little trails of links help users figure out where they are situated in a website. Often located at the top of a site, breadcrumbs let users see their current location and the proceeding pages. But be careful! Users should be able to click on them to move between steps.
8. Tabs
Similar to tabbed menus on the bottom of the screen, tabs at the top of the screen are a decent alternative. This element allows users to easily navigate between tabs. Also, they allow users to have direct access to different features, as well as receive visual cues as to where these features are within an app.
Conclusion
Knowing the UI element names correctly will make your work easier. What works well for others might not work for you and vice versa. With navigation patterns for mobile devices, there isn’t a one-size-fits-all solution; it always depends on your product, on your users, and on the context.
Resource: https://careerfoundry.com/en/blog/ui-design/ui-element-glossary/
