Knowing your UI elements will allow you to recognize opportunities to use them in your designs, helping you design clear and simple interfaces.<\/p>\n
In this guide, we explore some of the most common user interface<\/a> elements, considering when and why you might use them.<\/p>\n Ready? Let\u2019s go.<\/p>\n UI elements usually fall into one of the following four categories:<\/p>\n Here is our list of the most common and important UI elements:<\/p>\n Accordions let users expand and collapse sections of content. They help users navigate material quickly and allow the UI designer to include large amounts of information in limited space.<\/p>\n A bento menu, named after bento boxes, represents a menu with grid items. As you read along, you\u2019ll begin to notice UI designer is just another word for a foodie\u2014we love to name our UI elements after food.<\/p>\n These little trails of links help users figure out where they are within a website. Often located at the top of a site, breadcrumbs let users see their current location and the proceeding pages. Users are also able to click on them to move between steps.<\/p>\n Traditionally displayed as shapes with a label, buttons are a vital user element that tells users they can perform a particular action, like submitting.<\/p>\n Super popular these days, cards are small rectangular or square modules that contain different kinds of information\u2014in the form of buttons, text, rich media, and so on. These user elements act as an entry point for the user, displaying different kinds of content side by side which the user can then click on.<\/p>\n Cards are a great UI design choice if you want to make smart use of the space available and present the user with multiple content options, without making them scroll through a traditional list.<\/p>\n Carousels allow users to browse through sets of content, like images or cards, often hyperlinked to more content or sources. The biggest advantage of using carousels in UI design is that they enable more than one piece of content to occupy the same area of space on a page or screen. If you decide to use carousels, be sure to follow these guidelines set out by the Nielsen Norman Group<\/a>.<\/p>\n In UI design, a checkbox appears exactly as the name suggests: a little square box on the screen that the user can check or uncheck. A checkbox allows users to select one of multiple options from a list, with each checkbox operating as an individual. Checking the checkbox marks it with a little tick! Some common use cases for this element include forms and databases.<\/p>\n Pretty common around interfaces today, comments display content users input into the system in chronological order. You\u2019ve seen them around social media engines and on blog posts.<\/p>\n A d\u00f6ner 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\u00f6ner menu consists of a vertical stack of three lines of different lengths: a long line, a shorter line below it, and an even shorter line underneath that! This UI element represents a group of filters.<\/p>\n This controversial UI element allows users to select an item from a list that \u201cdrops down\u201d once they click on it. To learn more about why this element has a lousy rep, check out this naughty presentation<\/a>.<\/p>\n Here is an inescapable one! Feeds display user activity in chronological order. The content varies and can range from simple text to images to video. Think Twitter!<\/p>\n Forms help users input sets of related information into the system and submit them. Think of all the boxes asking for shipping details when you order something online.<\/p>\n These three little horizontal lines look slightly like America\u2019s quintessential meal and represent a list menu. You\u2019ll commonly find the hamburger menu on the top left-hand corner of apps and most likely containing a group of navigation links.<\/p>\n Icons are images used to communicate a variety of things to users. They can help to better communicate content or can communicate and trigger a specific action. You can learn how to design icons from scratch in this step-by-step guide to the icon design process<\/a>.<\/p>\n Image by Eddie Lobanovskiy<\/a><\/em><\/p>\n Input fields are, quite simply, a place for users to enter content into the system. They aren\u2019t just limited to forms, either\u2014search bars<\/a> are input fields as well.<\/p>\n We\u2019ve covered the hamburger menu and the d\u00f6ner menu: now for another (non-edible!) UI element: the kebab menu. Consisting of three vertical dots, the kebab menu represents a set of grouped options.<\/p>\n Loaders can take on many, many forms\u2014designers enjoy getting creative with them. Loaders are designed to let users know the system is completing an action in the background and should wait.<\/p>\n Image by Kickass<\/p>\n Yet another member of the menu family is the meatballs menu\u2014a set of three horizontal dots. The meatballs menu signifies that there are more options available, which are revealed when you click on the menu dots.<\/p>\n A modal window is a small box containing content or a message that requires you to interact with it before you can close it and return to your flow.<\/p>\n Think of the last time you deleted an item on your phone. The little message that popped up asking you to confirm that you wanted to remove it is a modal.<\/p>\n You\u2019ll find these little red dots everywhere on interfaces today. They let us know there is something new, like a message, for us to go check out.<\/p>\n However, notifications don\u2019t just tell us someone has liked one of our posts\u2014they can let us know an error occurred, or a process was successful.<\/p>\n Typically found near the bottom of a page, pagination organizes content into pages. Pagination lets users know where they are within a page and click to move into other sections.<\/p>\n Date and time pickers let users pick dates and times. The advantage of using pickers over input fields is the ability to keep all the data users enter tidy and consistently formatted in a database, making information manageable and easy to access.<\/p>\n Progress bars help users visualize where they are in a series of steps. You\u2019ll commonly find them on checkouts, marking the different stages a user needs to complete to finalize a purchase, like billing and shipping.<\/p>\n Often confused with checkboxes, radio buttons are small circular elements that let users select one option among a list. The key here is noting that users can only choose one option and not multiple options like they can with checkboxes.<\/p>\n Commonly represented as an input field with a little magnifying glass inside of it, search fields allow users to input information to find within the system.<\/p>\n A sidebar displays a group of navigational actions or content literally on the side of a page. It can be visible or tucked away.<\/p>\n Sliders are a common UI element used for selecting a value or a range of values. By dragging the slider with their finger or mouse, the user can gradually and finely adjust a value\u2014like volume, brightness, or desired price range when shopping.<\/p>\n Steppers are two-segment controls that also let users adjust a value. However, unlike sliders, they allow users to alter the value in predefined increments only.<\/p>\n In UI design, tags are essentially labels which help to mark and categorize content. They usually consist of relevant keywords which make it easier to find and browse the corresponding piece of content. Tags are often used on social websites and blogs.<\/p>\n Tab bars appear at the bottom of a mobile app<\/a> and allow users to quickly move back and forth between the primary sections of an app.<\/p>\nUI Elements: A Comprehensive Glossary<\/h3>\n
\n
1. Accordion<\/h4>\n
2. Bento Menu<\/h4>\n
![\"Different](\"\/en\/wp-content\/uploads\/old-blog-uploads\/bento-menu-ui-element.png\" "\\"Different")
\nImage by Alex Lockwood<\/a><\/em><\/p>\n3. Breadcrumb<\/h4>\n
![\"Breadcrumb](\"\/en\/wp-content\/uploads\/old-blog-uploads\/breadcrumb-ui-element.png\" "\\"Breadcrumb")
\nImage by Sharon Olorunniwo<\/a><\/em><\/p>\n4. Button<\/h4>\n
![\"An](\"\/en\/wp-content\/uploads\/old-blog-uploads\/click-element.gif\" "\\"An")
\nImage by Gal Shir<\/a><\/em><\/p>\n5. Card<\/h4>\n
![\"Cards](\"\/en\/wp-content\/uploads\/old-blog-uploads\/cards-ui-elements.png\" "\\"Cards")
\nImage by Crank<\/a><\/em><\/p>\n6. Carousel<\/h4>\n
![\"In](\"\/en\/wp-content\/uploads\/old-blog-uploads\/image-uploader-1.jpg\" "\\"In")
<\/p>\n7. Checkbox<\/h4>\n
![\"In](\"\/en\/wp-content\/uploads\/old-blog-uploads\/checkboxes-2.gif\" "\\"In")
\nImage by Shakuro<\/a><\/em><\/p>\n8. Comment<\/h4>\n
9. D\u00f6ner Menu<\/h4>\n
10. Dropdown<\/h4>\n
![\"A](\"\/en\/wp-content\/uploads\/old-blog-uploads\/dropdown-menu.gif\" "\\"A")
\nImage by Shakuro<\/a><\/em><\/p>\n11. Feed<\/h4>\n
12. Form<\/h4>\n
![\"A](\"\/en\/wp-content\/uploads\/old-blog-uploads\/form-ui-element.png\" "\\"A")
\nImage by girithaara<\/a><\/em><\/p>\n13. Hamburger Menu<\/h4>\n
14. Icon<\/h4>\n
![\"In](\"\/en\/wp-content\/uploads\/old-blog-uploads\/icon-buttons-ui-elements.png\" "\\"In"){kind=icon}
<\/p>\n15. Input Field<\/h4>\n
16. Kebab Menu<\/h4>\n
17. Loader<\/h4>\n
![\"A](\"\/en\/wp-content\/uploads\/old-blog-uploads\/load-screen-ui-element.gif\" "\\"A")
<\/p>\n18. Meatballs Menu<\/h4>\n
19. Modal<\/h4>\n
![\"An](\"\/en\/wp-content\/uploads\/old-blog-uploads\/subscription-modal-ui-element.gif\" "\\"An")
\nImage by Joshua Krohn<\/a><\/em><\/p>\n20. Notification<\/h4>\n
21. Pagination<\/h4>\n
22. Picker<\/h4>\n
![\"A](\"\/en\/wp-content\/uploads\/old-blog-uploads\/date-picker-ui-element.gif\" "\\"A")
\nImage by Edoardo Mercati<\/a><\/em><\/p>\n23. Progress Bar<\/h4>\n
24. Radio Buttons<\/h4>\n
![\"Radio](\"\/en\/wp-content\/uploads\/old-blog-uploads\/radio-button-interaction-ii-2.gif\" "\\"Radio")
\nImage by Oleg Frolov<\/a><\/em><\/p>\n25. Search Field<\/h4>\n
26. Sidebar<\/h4>\n
27. Slider Controls<\/h4>\n
28. Stepper<\/h4>\n
29. Tag<\/h4>\n
30. Tab Bar<\/h4>\n
![\"A](\"\/en\/wp-content\/uploads\/old-blog-uploads\/tab-bar-ui-element.gif\" "\\"A")