User interface (UI) elements are the blocks we use to build apps or websites. They add interactivity to a user interface, providing touchpoints for the users as they navigate their way around: buttons, app bar, menu items, error messages and checkboxes.
When creating your app, 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 when users interact. This is how you will create a better application.
Here are the main UI elements you should know about. This list is not exhaustive but you’ll find great ideas and inspiration for your next app project.
There are lots of UI kits available online for download. A UI kit is a set of files that contains critical UI components like fonts, layered design files, icons, and design components. There are several formats depending on the software you use for prototyping (Adobe XD, Sketch, Illustrator, Figma…).
Apple and Google provide UI resources for designing great apps that integrate seamlessly with their platforms:
User input
Checkbox
A checkbox allows users to select one or multiple options from a list.
Toggle / Switch
These are for binary options. It toggles the state of a single item on or off.
Text fields
Text fields let users enter and edit text. It can be one single or multiple lines.
Buttons
Buttons allow users to take actions, and make choices, with a single tap. They usually are displayed as shapes with a label.
Drop-down list
It allows users to select an item from a list that “drops down” once we click on it.
Forms
Forms help users input sets of related data into the system and submit them.
Utils
Toast
Toast displays a notification over the top of an app’s content. User can dismiss it by tapping anywhere outside of it.
Modal/Pop-up
A small box containing content that requires you to interact with it before you can close it and return to your flow.
Loaders
Loaders are designed to let users know the system is completing an action in the background and should wait.
Content
Carousel
Carousels allow users to browse through sets of content, like images or cards, often linked to more content or sources.
Pagination
Often at the bottom of a page, pagination organizes content into pages
List
List
It consists of one element following another whether alphabetically, numerically or even randomly.
Navigation
Icons
Icons help to better communicate content, or can communicate and trigger a specific action.
Tabs
Tabs organize content across different screens, data sets, and other interactions.
Menu
To navigate within your app, there are several types of menu: all of their names are food related.
Breadcrumb
Breadcrumbs let users see their current location and show the hierarchy of content.
Progress bar
Progress bars help users visualize where they are in a series of steps.
Side bar
A sidebar displays a group of navigational actions or content literally on the side of a page.
Tab bar
Tab bars appear at the bottom of a mobile app and allow users to quickly move back between the main sections of an app.
