Small Stars Of Big Design: Interactive 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 elements are used 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.

User interface elements usually fall into one of the following four categories:

Input Controls
Navigation Components
Informational Components
Containers

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.

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.

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.

4. Button

Traditionally displayed as shapes with a label, buttons tell users they can perform a particular action, like submitting.

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. Cards 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.

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.

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.

8. Comment

Pretty common around interfaces today, comments display content users input into the system in chronological order.

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.

This controversial UI element allows users to select an item from a list that “drops down” once we click on it.

11. Feed

Feeds display user activity in chronological order. The content varies and can range from simple text to images to video.

12. Form

Forms help users input sets of related information into the system and submit them.

13. Hamburger Menu

It’s those three horizontal lines you see at the top corner of the screen on apps and responsive websites.

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.

15. Input Field

Input fields are, quite simply, a place for users to enter content into the system. They aren’t just limited to forms, either—search bars are input fields as well.

16. Kebab Menu

Consisting of three vertical dots, the kebab menu represents a set of grouped options.

17.Loader

Loaders are designed to let users know the system is completing an action in the background and should wait.

18.Meatballs Menu

The meatballs menu signifies that there are more options available, which are revealed when you click on the menu dots.

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.

20. Notification

A notification is an update message that announces something new for the user to see. Notifications are typically used to indicate items such as, the successful completion of a task, or an error or warning message.

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.

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.

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.

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.

27. Slider Controls

Sliders are a common UI element used for selecting a value or a range of values. By dragging the slider with their finger or mouse, the user can gradually and finely adjust a value—like volume, brightness, or desired price range when shopping.

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.