User Interface Elements Every Designer Should Know

BlogHeader UIElements 1200x600

UI elements are the most integral part of product design. They are the core building blocks for all products.

As a UI designer or UI developer, it’s crucial to have a deep understanding of UI elements and how users interact with them. It will help you create a better application/website structure.

Designers don’t usually draw UI elements by themselves when they’re building web pages or mobile apps. They usually start with a ready repository of UI elements, and if they’re backed with code, UI components.

UXPin Merge allows you to bring those components to UXPin’s design editor and build fully functional UIs in minutes instead of hours, thus optimizing the workflow of the whole product team. Learn more about UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

What are UI Elements?

UI elements are the building blocks of apps and web sites. They are what users interact with when they are using the product. They click on a button to sign up, they use navigational components to switch between pages, etc.

UI elements are what allows for good user experience and well-designed functionalities.

UX design rests on design patterns that your users are familiar with. If you break a design pattern, users may get lost or confused at least. Designers use well-known UI elements to prevent that.

Learning what are UI elements is not enough. You also need to know the context of use.

3 Types of UI Elements

Ideally, we can group UI elements into 3 major categories. 

  1. Input elements – users interact with them to put in their information or move to the next step.
  2. Output elements – those elements show the result of a previous user action.
  3. Helper elements – further divided into navigational, informational, and containers, they help to move through the digital product, get information, and point user’s attention to some element.

Input elements

Input elements are responsible for handling different user inputs. Sometimes they’re also part of the input validation process. Some of the most used input elements include:

  • Dropdowns – control elements that allow users to select one option from a list that appears when they click or hover over a specific area. The list “drops down” when activated, providing a set of choices for the user to pick from.
  • Combo boxes – they combine the features of a text box and a dropdown. Users can either type a response or select from a predefined list by clicking a dropdown arrow. This provides flexibility for both manual input and selection from a set of options.
  • Buttons – interactive elements that users can click to trigger an action or submit a form. They often have labels indicating the action they will perform, such as “Submit,” “Cancel,” or “OK.”
  • Toggle switches – UI elements that allow users to switch between two states, typically on and off. They provide a visual indication of the current state and can be toggled by clicking or sliding.
  • Text fields – areas where users can input alphanumeric characters, whereas password fields are specifically designed for entering confidential information like passwords. Password fields often hide the entered characters for security reasons.
  • Date pickers – UI elements that facilitate the selection of dates from a calendar. Users can typically choose a date by clicking on a specific day, month, and year within the provided interface.
  • Checkboxes – small, interactive elements that allow users to select or deselect options independently. They are often used in lists or forms where users can choose multiple items from a set.
  • Radio buttons – they present a set of options to users, but unlike checkboxes, only one option can be selected at a time. When one radio button is selected, any others in the group are automatically deselected.
  • Confirmation dialogues – pop-up messages that appear to confirm an action or decision before it is executed. They typically ask the user to confirm or cancel an operation to prevent accidental or unwanted actions.
Source: Dribbble.com

Output elements

Output elements are responsible for showing results against various user inputs. They also show alerts, warnings, success, and error messages to the users. Output elements aren’t neutral by nature. They rely on inputs and various operations.  

Source: Google Doc

Helper elements

All other elements fall into this category. The most widely-used helper elements include:

  • Notifications – messages or alerts that appear on a user’s device or screen to inform them about important or relevant information. They can include updates, reminders, or warnings and are often designed to grab the user’s attention.
  • Breadcrumbs – small navigational elements that show the user’s current location within a website or application. They typically appear as a trail of links at the top of a page, indicating the hierarchical path back to the main or home page.
  • Icons – graphical symbols or small images used to represent actions, objects, or concepts. They serve as visual cues to help users quickly understand and navigate interfaces. Icons are commonly used in menus, toolbars, and buttons.
  • Sliders – UI elements that allow users to select a value from a continuous range by dragging a handle along a track. They are often used for settings like volume control or adjusting numerical values within a specified range.
  • Progress bars – visually represent the completion status of a task or process. They typically consist of a filled-in portion that grows as the task progresses, providing users with a visual indication of how much work has been completed and how much is left.
  • Tooltips – small, contextual messages that appear when a user hovers over or clicks on a specific UI element. They provide additional information or explanations about the purpose or functionality of the element, aiding user understanding and interaction.

We can also group helper elements into 3 categories.

Navigational UI elements

Navigational components simplify moving through the site, desktop or mobile app or any other digital product. Navigational helper UI elements include things like navigation menus, list of links, breadcrumbs, to name but a few. 

Source: UXPin

Informational UI elements

Responsible for representing information. These include, for example, tooltips, icons, and progress bars. 

Source: Toptal

Containers

Responsible for holding various components together. Widgets, containers, and sidebars for part of this category. The Newsletter subscription widget of UXPin blog is also a good example of a container.

9 Common Input UI Elements

Here are nine of the most common input elements that every designer should know about. This list includes buttons, checkboxes, text fields, and you’re certain to find them in the most popular design systems, listed under UI components.

Checkboxes

Checkboxes allow the user to select one or more options from an option set. It is best practice to display checkboxes vertically. Multi-columns are also acceptable considering the available space and other factors.

Checkboxes are UI elements that many websites and apps use
Source: Github.com

Dropdowns

Dropdowns allow users to select one item at a time from a long list of options. They are more compact than radio buttons. They also allow you to save space. For better UX, it’s necessary to add a label and a helper text as a placeholder. I.e. “Select One, Choose, etc.”

dropdown is a common UI element in product and web design
Source: Stackoverflow

Combo boxes

Combo boxes allow users to either type a custom value directly or select a value from the list. It is a combination of a drop-down list or list box and a single-line input field.

Combo boxes are rare but they are UI elements too
Source: mdbootstrap

Buttons

Buttons allow the users to perform an action with touch or click. It is typically labelled with text, icon, or both. Buttons are one of the most important parts of a UI. So it’s important to design a button that the user will actually click. 

button is a UI element that every website has
Source: Evergreen UI

Toggles

Toggles allow the user to change a view/value/setting between two states. They are useful for toggle between on and off state or switching between list view and grid view. 

Toggles are also UI elements
Source: Youtube

Text and password fields

Text fields and password fields allow users to enter text and password respectively. Text fields allow both single-line and multi-line inputs. Multi-line input fields are also known as “textarea”. Password fields generally allow single lines for a password.

Forms are awesome examples of UI elements
Source: Shopify.com

Date pickers

A date picker allows users to pick a date and/or time. By using a native date picker from the platform, a consistent date value is submitted to the system. 

Calendar from Material design is a great example of UI element
Source: Material Design

Radio buttons

Radio buttons allow users to select only one of a predefined set of mutually exclusive options. A general use case of radio buttons is selecting the gender option in sign-up forms. 

Radio buttons are UI elements
Source: UXPin

Confirmation dialogues

Confirmation dialogues are responsible for collecting user consent for a particular action. For example, collecting user consent for a delete action.

Confirmation dialogue is a UI element

4 Common output elements

Alert UI Element

An alert presents a short, important message that attracts the user’s attention. It notifies users about these statuses and outputs.

Alert UI element
Source: material-ui.com

Toast UI element

This refers to a UI feature where an event (user input, server response, calculation etc.) triggers a small text box to appear on the screen. Ideally, it appears at the bottom on mobile and bottom left or right side on the desktop.

The difference between “Alert” & “Toast” is that the former doesn’t dismiss itself and the latter does after a certain time. 

Toast UI element example
Source: Evergreen UI

Badge

This feature generates a small badge to the top-right of its child(ren). In general, it represents a small counter or indicator. This can be something like the number of items over the cart icon or online indicator over a  user avatar. 

Badge is a UI element

Charts

Charts are a common way of expressing complex data sets because they depict different data varieties & data comparisons.

The type of chart used in UI depends primarily on two things: the data we want to communicate, and what we want to convey about that data

Charts like those ones are UI elements
Different types of charts. Source: material.io

Common Helper UI Elements

Navigational UI elements

Those elements aid navigation.

  • Navigation menus – graphical interfaces that present a list of links or options, allowing users to move between different sections or pages of a website or application. They are commonly found at the top, side, or bottom of a page and serve as a primary means of guiding users through the content.
  • List of links – a collection of hyperlinked text items that typically direct users to different pages or resources. Lists are often used in navigation menus, sidebars, or content sections to organize and present a set of related links in a structured format.
  • Breadcrumbs: Breadcrumbs are a navigational aid that displays the user’s current location within a website or application. They appear as a series of links, usually at the top of a page, indicating the hierarchical path back to the main or home page. Breadcrumbs help users understand their position in the site’s structure.
  • Search fields – input elements that allow users to enter search queries. They are commonly accompanied by a button or icon to initiate the search. Search fields enable users to quickly find specific content within a website or application.
  • Pagination – divide the content into separate pages to improve navigation and loading times. It involves organizing large sets of data or results into numbered pages, with links or buttons to move between them. Pagination is often used in search results, lists, or other content-heavy sections.

Navigation menus

This is a navigational UI element with several values that the user can select. They are taken to another area of the website/app from there. 

Navigation menus are UI elements that every designers knows about
Source: UXPin

List of links

As the name suggests, a list of links consists of links. Sidebar with a category list is a good example of this. Links can be both internal and external. 

List of links are other UI elements

Breadcrumbs

Breadcrumbs allow users to see their current location within the system. It provides a clickable trail of proceeding pages to navigate with.

This UI element is a breadcrumb.

Search fields

A search bar is usually made up of two UI elements: an input field and a button. It allows users to enter a keyword and submit it to the system expecting the most relevant results.

Search fields are common UI elements
Source: Google Chrome Browser

Paginations

This feature divides the content between pages and allows users to navigate between them.

An example of UI element is pagination

Informational UI elements

That category of UI elements transfers information. It comprises:

  • Tooltips
  • Icons
  • Progress bars
  • Notifications
  • Message boxes
  • Modal windows

Tooltips

A tooltip shows users hints when they hover over an element indicating the name or purpose of the item.

Tooltip is another UI element

Icons

It’s a simplified symbol that is used to help users to navigate the system, presenting the information and indicating statutes.

A well-known UI element is an icon. What a surprise!
Source: Dribbble

Progress bars

A progress bar indicates the progress of a process. Typically, progress bars are not clickable.

Here's a progress bar which is a UI element
Source: Tenor

Notifications

It is an update indicator that announces something new for the user to check. Typically shows completion of a task, new items to check etc.

Notifications are also UI elements

Message boxes

It’s a small window that provides information to users but typically doesn’t prevent users from continuing tasks. Message boxes perform tasks like showing warnings, suggestions, etc.

Another UI element is a message box
Source: Evergreen UI

Modal windows

It’s used to show content on top of an overlay. It blocks any interaction with the page — until the overlay is clicked, or a close action is triggered.

Modal window is an UI element
Source: Evergreen UI

Group and Containers

How would you separate certain elements from the rest? That is what groups and containers are for.

Widgets

It’s an element of interaction, like a chat window, components of a dashboard, or embeds of other services.

Who haven't heard about widgets? a popular UI element!
Source: Dribbble.com

UI Containers

Containers hold different components together. This includes text, images, rich media etc. Cards in modern UI design are one of the best examples of containers. 

UI containers are common UI elements. This one comes from material design
Source: Material.io

Sidebars

Sidebars also contain other groups of elements and components. But that can be switched between collapse and visible state.

Sidebar in Semantic UI is an example of UI element
Source: Semantic-UI

Search bar

The search bar holds the search field and search options. Typically, the search bar features a search field and filtering option. Twitter’s advanced search is a great example.

Twitter search bar UI element
Source: Twitter

Design with Interactive UI Elements in UXPin

Now that you understand what common UI elements are and how they work, it’s time to put your knowledge to practice. UXPin offers all the features you need to design and organize your UI elements, simplifying the process of designing.

What if you have ready-made UI elements that come from a component library of your developers? Use UXPin Merge technology to bring them to UXPin editor and design fully interactive and consistent prototypes using those UI components that you share with your product team. Learn more about UXPin Merge.

Use a single source of truth for design and development. Discover Merge

Logos

by UXPin on 8th March, 2024

UXPin is a web-based design collaboration tool. We’re pleased to share our knowledge here.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you