32 UI Elements Designers Need To Know: 2023 Guide
32 UI Elements Designers Need To Know: 2023 Guide
BY MARIA DE LA RIVA
RIVA,, UPDATED ON MAY 10, 2023
10 mins read
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.
User interface (UI) designers use UI elements to create a visual language and
ensure consistency across a product—making it user-friendly and easy to navigate
without too much thought on the user’s part.
Knowing your UI elements will allow you to recognize opportunities to use them in
your designs, helping you design clear and simple interfaces.
In this guide, we explore some of the most common user interface elements,
considering when and why you might use them.
1. Accordion
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
3. Breadcrumb
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
4. Button
Traditionally displayed as shapes with a label, buttons are a vital user element that
tells users they can perform a particular action, like submitting.
Image by Gal Shir
5. Card
Super popular these days, cards are small rectangular or square modules that
contain different kinds of information—in 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.
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.
Image by Crank
6. Carousel
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
Group.
7. Checkbox
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.
Image by Shakuro
8. Comment
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 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 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.
10. Dropdown
This controversial UI element allows users to select an item from a list that “drops
down” once they click on it. To learn more about why this element has a lousy rep,
check out this naughty presentation
presentation.
Image by Shakuro
11. Feed
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!
12. Form
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
14. Icon
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
process.
17. Loader
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
19. Modal
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.
20. Notification
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.
21. Pagination
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.
22. Picker
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
26. Sidebar
A sidebar displays a group of navigational actions or content literally on the side of a
page. It can be visible or tucked away.
28. Stepper
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.
29. Tag
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.
31. Tooltip
Tooltips provide little hints that help users understand a part or process in an
interface.
32. Toggle
Think of toggles as on and off switches. They let us do just that: turn something on
or off.
Final thoughts
And that’s it for our glossary of the most important UI elements!
If you’d like to learn more about user interface design, check out this video:
If you enjoyed this article, you may also be interested in taking a look at the following
articles:
FAQ
1. What are UI elements?
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.
UI designers 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.
Breadcrumbs
Checkboxes
Dropdowns
Forms
Icons
Input fields
Notifications
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.
2. Take part in one of our FREE live online UI design events with industry experts,
and read about UI graduate Florian’s career change to product design.
4. This month, we’re offering reduced tuition to the first 100 applicants
applicants—worth
up to $1,370 off all our career-change programs To secure your spot, speak to
one of our advisors today !
Maria De La Riva
Maria de la Riva
Maria de la Riva is a UX/UI Designer digital nomad. For the past 4 years, she's worked with
online education startups, like CareerFoundry, mentoring and writing curriculum content.
Currently, she is Head of Product at Iguama Inc., a startup developing the technology loyalty
programs need to help their users redeem points on online retailers. Maria is an avid diver and
sailor.
Related UI Design Articles
Style Tiles: Everything You Need to Know
UI Design UI Design
UI Design
What is CareerFoundry?
CareerFoundry is an online school for people looking to switch to a rewarding career in tech.
Select a program, get paired with an expert mentor and tutor, and become a job-ready designer,
developer, or analyst from scratch, or your money back.