UI Design Components

Have you ever looked at an app and thought: “wow this looks nice”? Or maybe thought: “I hate this app, why can’t they just make it like…”? Chances are that the amazing—or terrible— app you're using was made by a UI Designer. So what even is a UI designer? A UI Designer—or User Interface Designer— is someone who creates the visual look and feel of an interface. The interface could be a mobile app, a web application, or any kind of interactive digital medium. They use their design expertise to create visually appealing experiences within an interactive application. You could say that the UI—User Interface—is the “style” of the app. For example, the “style”—UI—of Instagram is overall white and black, while the UI of Spotify is dark with accents of their brand green. On a surface level, the UI of an application is the general look and feel. You may, however, have noticed during your application interactions some details that allow you to actually use the interface. Part of a UI Designer’s job is to not just design something that is visually appealing, but to also use specific interaction elements appropriately so that you can engage with the interface easily. Open up one of your favorite apps and take a look at what you see on the screen. You might notice some icons or text that you can tap to take you to another screen. Sometimes these clickable icons or text open up a popup. All of these interactive icons and text are part of the UI design. They are essential in your day-to-day interactions to complete a function within an application.

In this blog, we are going to go over the top 10 UI design elements that you interact with daily.

1. Hamburger Menu

This is a pretty iconic UI element that is commonly used. A hamburger menu is an icon button of three stacked horizontal lines—all the same length—that you can typically find on the top-left or top-right hand corner of a mobile app. Usually when you are using this button, you are trying to see a list of links or pages to which you want to navigate from your current page. A hamburger menu is used to provide more real estate within an interface, by hiding certain elements and only revealing them upon interaction with them.

Example from Spotify

2. Sidebar

When tapping on a Hamburger Menu, a side bar is usually opened—which is where you’ll see the different pages that you navigate to within the application. As its name suggests, it is found on the side of a screen—typically on a website or web application. The side bar can have text links, as well as icon links—and in some cases, text and icons combined. Having a side bar allows for quick and convenient access at all times to varying pages within an application--which is important in creating a seamless UI experience.

Example from Google Maps

3. Dropdown

Opposite to a Side Bar, a Dropdown opens from top to bottom. When interacting with a Dropdown, you are trying to open up a menu from a list that “falls” down. It is a way to hide certain options and only show them when you open them—to keep the interface from being cluttered.

Example from Uber

4. Tab Bar

Another way to navigate within an interface is through a Tab Bar. A tab bar usually looks like a tab you would find on file folder used to organize papers in a file drawer. Sometimes, they also look like interactive icons. They are usually used for secondary navigation within a specific page. For example, after you navigate to the “Profile” page on Instagram from the bottom navigation—within this page, you see 3+ icons (depending on your account type) right above your first row of images. When you tap on one of them, it shows different content based on the icon—without leaving the profile page. A Tab Bar is extremely helpful for categorizing and organizing content within a page itself in a clean and efficient way.

Example from AirBNB

5. Modal

Open up your Instagram app and go to your profile to better understand this term. Tap and hold on one of your images, and you’ll see a preview of your image in a slightly larger size than the standard size on the profile overview grid. This small preview is an example of a mobile Modal. Most commonly, Modals are used on websites where you might get a pop-up to sign up for an email list, which then you’d close to return to what you were doing. Modals are typically pop-ups, where you have to complete a certain interaction in order to return to your previous task.

Example from AirBNB

6. Card

A Card is a rectangular element that is used to organize and contain information. Sometimes these serve as buttons—and allow you to interact with it in order to get to a new page. Other times, they are not interactive, and are a clean way to organize information and elements without having you scroll through a long list. Referring back to the Modal, the images and text of the Modal are on a card.

Example from Spotify

7. Input Field

Whenever you type something into a space, you are typically typing into an Input Field. An Input Field is a designated area for you to type in text. Sometimes you might type in a few words, and other times you might type in a whole paragraph. Pretty much anytime you are typing something in, chances are you are typing into an Input Field—even when you are searching something too.

Example from Yelp

8. Radio Button

There are times when you need to type something in order to add information, and other times when you just have to select information already provided to you. If you have ever had to fill out an online application to sign up for something, chances are you’ve interacted with a Radio Button. Radio buttons are circles with text to the side of them, where you are giving the option to select one of possibly multiple options. When you select the Radio, the circle is filled with a color to show that it is the option you have chosen. So if you have ever been asked a “yes” or “no” question on an online application, you had to select either “yes” or “no” but not both. When you can only choose one option out of multiple, a Radio Button would be your best friend.

Example from Yelp

9. Toggle

Unlike a Radio Button, a Toggle is used to turn certain options on or off. Rather than select between options, like a Radio Button, a Toggle would give you a list of options that you can select whether or not you want them active—with Toggles, you’d be able to select multiple options. For context, if you go to your phone’s notification settings, you’ll see a list of different settings that you can have turned on or off. The items are there all the time and you are able to have multiple on or off at a time. Think of a Toggle like a light switch—switch it on if you need the light or turn it off if you don’t, regardless it’s always there if you need it.

Example from Spotify

10. Pill

An easy one to swallow, a Pill is defined by its shape. It typically is a longer rounded rectangle shape—almost oval-like—that has text in it. Sometimes the Pill itself is in different colors to serve as labels for content on a page. Most of the time, you would find Pills on elements like a Card—and it would give you quick information about the content related to a card.

Example from AirBNB

And there you have it! The top 10 most common UI terms explained by a UI Designer. Now you’ll be able to embark on your interface interactions with a bit more knowledge up your sleeve. The next time you open up an app or website, see if you can identify these common UI elements you’ve just learned. Happy navigating!