Tue, Mar 15, 2022
UI Elements You Should Know For Your Next App Project
User interface (UI) elements are the blocks that are composing apps or websites. They add interactivity to a user interface, providing touch points for the users as they navigate their way around: buttons, app bar, menu items, error messages and checkboxes.
When creating your app, you need 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:
iOS Human Interface Guidelines
A checkbox allows users to select one or multiple options from a list.
Radio buttons allow the user to select one option from a set.
Toggle / Switch
These are for binary options. It toggles the state of a single item on or off.
Text fields let users enter and edit text. It can be one single or multiple lines.
Buttons allow users to take actions, and make choices, with a single tap. They usually are displayed as shapes with a label.
It allows users to select an item from a list that “drops down” once we click on it.
Forms help users input sets of related data into the system and submit them.
Search bar are specific input fields to search or filter items.
Toast displays a notification over the top of an app’s content. User can dismiss it by tapping anywhere outside of it.
A small box containing content that requires you to interact with it before you can close it and return to your flow.
A popover can be used to display some content on top of another.
Loaders are designed to let users know the system is completing an action in the background and should wait.
Accordions let users expand and collapse sections of content.
Carousels allow users to browse through sets of content, like images or cards, often linked to more content or sources.
Often at the bottom of a page, pagination organizes content into pages.
Sliders allow users to make selections from a range of values.
Add a digital portfolio to showcase your work.
Grid lists display a collection of images in an organized grid.
It consists of one element following another whether alphabetically, numerically or even randomly.
An item is an element of a list.
A card displays content in a manner similar to a playing card.
Icons help to better communicate content, or can communicate and trigger a specific action.
Tabs organize content across different screens, data sets, and other interactions.
To navigate within your app, there are several types of menu: all of their names are food related.
Breadcrumbs let users see their current location and show the hierarchy of content.
Progress bars help users visualize where they are in a series of steps.
A sidebar displays a group of navigational actions or content literally on the side of a page.
Tab bars appear at the bottom of a mobile app and allow users to quickly move back between the main sections of an app.