User interface (UI) elements are the parts we use to build apps or websites. They add interactivity to a user interface, providing touchpoints for the user as they navigate their way around; think buttons, scrollbars, menu items and checkboxes.
As a user interface (UI) designer, you’ll use UI elements to create a visual language and ensure consistency across your product—making it user-friendly and easy to navigate without too much thought on the user’s part.
In this guide, we’ll explore some of the most common user interface elements, considering when and why you might use them.
Ready? Let’s go.
User Interface Elements: An Introduction
User interface elements usually fall into one of the following four categories:
- Input Controls
- Navigation Components
- Informational Components
Input controls allow users to input information into the system. If you need your users to tell you what country they are in, for example, you’ll use an input control to let them do so.
Navigational components help users move around a product or website. Common navigational components include tab bars on an iOS device and a hamburger menu on an Android.
Informational components share information with users.
Containers hold related content together.
Know Your UI Elements: A Comprehensive Glossary
Most of us spend a pretty big chunk of our day on interfaces. The time we spend looking at our favorite app or a piece of software we use at work familiarizes us with common UI elements. We learn how to use them and how they behave. When we see them on new apps or websites, we know what to do with them instantly as a result of having interacted with them before.
Knowing your UI elements will allow you to recognize opportunities to use them in your designs, helping you design clear and simple interfaces.
Let’s take a look at the most common UI elements you’ll run into.
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.
2. Bento Menu
A bento menu, named after bento boxes, represents a menu with grid items. As you read along, you’ll begin to notice UI designer is just another word for a foodie—we love to name our UI elements after food.
Image by Alex Lockwood
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.
Image by Sharon Olorunniwo
Traditionally displayed as shapes with a label, buttons tell users they can perform a particular action, like submitting.
Image by Gal Shir
Super popular these days, cards are small rectangular or square modules that contain different kinds of information.
Image by Crank
Carousels allow users to browse through sets of content, like images or cards, often hyperlinked to more content or sources.
A checkbox allows users to select one or multiple options from a list. Once an option is selected, the interface will display a small box with a check in it.
Image by Shakuro
Pretty common around interfaces today, comments display content users input into the system in chronological order. You’ve seen them around social media engines and on blog posts.
9. Döner Menu
A döner menu represents a group of filters.
This controversial UI element allows users to select an item from a list that “drops down” once we click on it. To learn more about why this element has a lousy rep, check out this naughty presentation.
Image by Shakuro
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!
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.
Image by girithaara
13. Hamburger Menu
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.
Icons are images used to communicate a variety of things to users. They can help better communicate content, or can communicate and trigger a specific action.
Image by Eddie Lobanovskiy
15. Input Field
Input fields provide a place for users to input content into the system. They aren’t limited to forms—search bars are input fields as well.
16. Kebab Menu
Not edible, the kebab menu, represented by three vertical dots, also describes a set of grouped options.
Loaders can take on many, many forms—designers enjoy getting creative with them. Loaders are designed to let users know the system is completing an action in the background and should wait.
Image by Kickass
These three horizontal dots reveal more options when you click on them.
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.
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.
Image by Joshua Krohn
You’ll 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.
However, notifications don’t just tell us someone has liked one of our posts—they can let us know an error occurred, or a process was successful.
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.
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.
Image by Edoardo Mercati
23. Progress Bar
Progress bars help users visualize where they are in a series of steps. You’ll commonly find them on checkouts, marking the different stages a user needs to complete to finalize a purchase, like billing and shipping.
24. Radio Buttons
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.
Image by Oleg Frolov
25. Search Field
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.
A sidebar displays a group of navigational actions or content literally on the side of a page. It can be visible or tucked away.
Sliders let users gradually and finely adjust a value, like volume or brightness.
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.
Tags help mark and categorize content, making it easier to find and browse.
30. Tab Bar
Tab bars appear at the bottom of a mobile app and allow users to quickly move back and forth between the primary sections of an app.
Image by Hoang Nguyen
Tooltips provide little hints that help users understand a part or process in an interface.
Think of toggles as on and off switches. They let us do just that: turn something on or off.
See an element missing? Feel free to comment below!
If you’d like to learn more about user interface design, take a look at the following articles:
What You Should Do Now
- If you’d like a step-by-step intro to find out if UI design is right for you - sign up here for our free 7-day UI short course.
- If you are interested in becoming a UI Designer check out our UI design course (you'll learn the essential skills employers need).
- If you’d like to speak to an expert Career Advisor for free about how you can really get a new job in tech - connect with us here.
If you enjoyed this article then so will your friends, why not share it...