UI elements

In this video, we go over 27 of the most common UI elements. We cover:

• Primary buttons: The primary button is the most visible and important button on the page that guides the user to complete an important action.
• Secondary buttons: These are used for less important actions and aren’t as visually emphasized as the primary button. While it’s not always the case, it’s common for a secondary button to be placed next to a primary.
• Tertiary buttons: These are used when an action isn’t necessary, but the user still might want to take action, like adding a description or photo or bookmarking something. Typically, these are considerably less prominent than the primary button and depending on the product, can be more or less visible than the secondary button.
• Toggles: Think of toggles like a light switch, they turn something on and off. Clicking or tapping the toggle will change the state from on to off or vice versa.
• Segmented controls (button groups): They provide contextual control over a specific element and are basically a crossover between tertiary buttons, toggles, and tabs.
• Icons: Icons are simplified images that are used in most apps. They are a hybrid case because they can act as buttons, toggles, navigation, and as a helpful image.
• Checkboxes: These allow users to make one or more selections from a list of options. Typically, these are displayed vertically to keep it obvious what is available to select.
• Radio buttons: Unlike checkboxes, which allow users to select one or more options from a list, radio buttons only allow a single selection from a list of options.
• Dropdown lists/menus: Clicking a dropdown presents a list to make a selection from. They can either allow single or multiple selections depending on the type of dropdown. Dropdowns are great for situations when you can’t use radio buttons or checkboxes because of space limitation. Always make sure to allow for type ahead so people can easily select what they’re looking for.
• Text fields: As their name indicates, they enable users to enter text. Text fields can either contain single or multiple lines of text. These are used in every application and product online.
• Date pickers: These are just like they sound, they allow users to pick a date and/or time.
• Search fields: They give users the ability to search for content using keywords or phrases.
• Pages or pagination: These are just like pages in a book, but are separated digitally and connected by buttons or links.
• Tabs: These controls are most commonly placed at the top of a page and change all the content beneath them.
• Sliders: Sliders allow users to set a specific value or a range of values.
• Tags: These are small elements that provide information and help users find content. They can be made by the user or added by the product.
• Breadcrumbs: Breadcrumbs are links that help users figure out where they are in a website. They are usually located at the top of a website letting the user know what page they’re currently on and any previous page they came from.
• Carousels: These display content that moves horizontally either manually or automatically. They allow users to browse through a set number of pictures or content either forwards or backwards. Carousels are what you typically see on e-commerce websites to show product shots.
• Notifications: Notifications provide relevant information to users usually through a visual indicator and/or a short message. They are used to grab the users attention for a specific purpose. Notifications can indicate a positive outcome, an error, or a warning message.
• Modals: Modals are everywhere online. They are used for ads, asking for your email, acknowledgement, creating something, etc. Modals contain content that purposefully interrupt users to require an action of some sort. They are displayed in front of all other content types and remain on screen until users have acknowledged the message and have taken action.
• Menus: Menus display a list of choices or actions on a temporary surface. Menus should be easy to interact with, contextual to the user needs, and easily scannable.
• Cards: Cards are very popular these days, especially on mobile. They are rectangular modules that contain content and contextual actions. Well designed cards make good use of space and present information clearly and efficiently, helping to guide users through many pieces of information.
• Progress bars: These help users determine where they are in a sequence of steps. These can be found in e-commerce checkouts or setup wizards that tell you how many steps are left to complete.
• Loaders (spinners or progress indicators): These are animations that show the user the system is loading or completing an action, indicating the user needs to wait.
• Tooltips: The goal of a tooltip is to provide contextual information of an element on mouse hover.
• Hamburger menus: These are navigation components that provide access to pages and functionalities. On mobile, they’re almost always retracted by default to preserve the real estate, while on desktop they tend to be open by default and can manually be closed by the user. These usually appear in the top left of an app.
• Accordions: These are used to expand/collapse vertically stacked items. When a page has a lot of settings or controls, they are grouped and hidden in an accordion to simplify the layout and reduce visual clutter.
  

Hey, what's up Kickass Fam?  

So, digital interfaces are not new.  

They've been around for a while.  

And that's why there is no need to complexify your solutions, or to reinvent the wheel.  

Instead, we'll show you how to fast-track your design process by going over 27 industry standard UI elements.

We're going to cover a ton of UI elements, so to follow along, don't forget to download the slides at kickassux.com under the free UX course page.  

Alright, let's go through the 27 UI elements.

First, are primary buttons. In general, all buttons indicate an action that will happen upon clicking or tapping it.  

The primary button is the most visible and important button on the page. It guides users to complete an important action.

By definition, there should only be one primary button per page. Primary buttons usually have solid, bold colors as the background.

Let's look at three examples of primary buttons.  

First is Facebook. When you make a status update, the most important action is to post, which is reflected in the primary button.  

Second is Google Docs. After creating a doc, one of the most critical action that Google wants you to take for product adoption purposes is to share the document. That's why the primary button is "Share" located in the top right corner.

And third is Gmail. When composing an email sending is the final action you will take. That's why the primary button is "Send" located in the bottom left corner of the email window.

In all these scenarios, there is only one primary button present.  

This helps to draw your attention to it and promote its importance.  

There is one more thing to point out here.  

Just because there might be only one button on the screen, doesn't mean that button should be a primary action.

Next, there are secondary buttons.  

These are useful, less important actions that are not as visually emphasized as the primary button. While it's not always the case, it's common for a secondary button to be placed next to the primary button. When placed next to a primary button, secondary buttons are usually the opposite action.

For example, "Send" and "Cancel".  

Here are two examples of secondary buttons.  

First, there is Audible. The secondary button "Cancel" is placed just below the primary button "Confirm purchase."  

The next example is Dropbox. When you create a folder, a modal pops up asking you to name the folder and choose a location At the bottom, the only two options are "Create," which is your primary button and "Cancel," which is the secondary button.

Third at tertiary buttons.

Every company uses this button style differently. These are used when an action is not necessary, but the user still might want to take action, like adding a description or photo or bookmarking something.  

Typically these are considerably less prominent than the primary button. And depending on the product can be more or less visible than the secondary button.

Remember, you can only have one primary button on screen.  

That's where tertiary buttons come in.  

They're perfect for instances where they are repetitive actions.  

Let's look at some examples of tertiary buttons.

First, on Airbnb there are additional actions you might take. For example, "More about the location" or "Contacting the hosts" before choosing the primary action of "Reserving" the place located in the top right corner. Notice how it's the only primary action on the page.  

Another example is Google Calendar. When you click anywhere on the calendar, it automatically starts to create an event for.

The primary reaction here is to "Save" the event. However you can choose to take the tertiary action of "More options" in case you're looking to add more to the invite.

Unfortunately, Google broke a fundamental rule here by adding more than one primary button to the screen. One for adding video conferencing and one for saving.  

Fourth, are toggles also called toggle switches, toggle buttons, or toggle icons. Think of toggles like a light switch. They turn something on and off.

For example, you can toggle the wifi on and off on your phone. Doing so will instantly change the state without having to press "Save" for it to be activated. Same thing goes for airplane mode.

Another example is TikTok. Clicking on "Follow" toggles following or unfollowing the respective profile.

Fifth, are segmented controls also known as button groups. They provide contextual control of a specific element and are basically a crossover between tertiary buttons, toggles, and tabs.

For example on Google Docs, if you want to align the text, you would use the segmented control that toggles between left, center, and right align or justified.

Another example is the Health app on iOS. In this instance, the segmented control allows you to switch the view using different timeframes, like day, week, month, et cetera.  

Sixth, are icons.  

Icons are simplified vectors or flat images that are used in most apps.

They are a hybrid case because they can act as buttons, toggles, navigation, and as a helpful image.  

For example, in Google Drive all of the icons in the left panel act as tabs, changing what you see on the right side of the screen when you click on them. Clicking on "Trash," for example shows you all the items in the trash and so on.  

Or notice the search icon in the search bar. All this is really straightforward.  

Seventh, are checkboxes. These allow users to make one or more selection from a list of options.

Typically, these are displayed vertically to keep it obvious what is available to select.

For example, here are checkboxes being used for filtering in Amazon. By checking a box in the left panel, it filters your Amazon search results.  

Another example is Google Forms. Here are checkboxes being used in one of the fields you have to answer to complete the form.

You can find check boxes in almost every product online. The most commonly found in online forms and setting pages.

Eight, are radio buttons. Unlike checkboxes which allow users to select one or more options in a list, radio buttons only allow a single selection from a list of options.  

For example, here is a Google Form that asked what age group users are in.

Radio buttons are used for this question because they can only be one answer.  

Another example is Facebook's setting. Here they use radio buttons to show that you can only make one choice for how you choose to receive notifications when tagged. Just like checkboxes, you can find radio buttons in almost every online product.  

Ninth, are dropdown lists or menus. Clicking a dropdown presents a list to make a selection from.

They can either allow single or multiple selections depending on the type of dropdown.

Dropdowns are great for situations when you can't use radio buttons or checkboxes because there are too many options.  

A rule of thumb is to use a dropdown menu when there are more than three to four fields to choose from.

For example, here are two dropdowns. The one on the left is for Amazon and is used to help you filter your past orders.  

The one on the right can be found in Google Calendar. It helps to set the meeting visibility.

Tenth, are text fields.  

As their name indicates they enable users to enter text.  

Text fields can either contain single or multiple lines of text. These are used in every application and product online.  

For example, here are four different text fields being used in Google Calendar.

At the top, it's a single-line text field for the title of the event.  

Then, there are two single-line, auto-complete text fields, one for searching for the location of the event, and one for inviting guests.  

Finally, there is a multiline text box that allows you to add a description to your event.

Eleventh, are date pickers.  

They're just like what they sounds, they allow users to pick a date and/or time.

For example, here is a date picker used on Airbnb. It allows you to seamlessly choose a start and end date for your trip.  

And, here is an example of a date picker from Apple Reminders on the iPhone.

Twelfth, are search fields.  

They give users the ability to search for content using keywords of phrases.  

The most famous search field in the world is probably Google search.  

Another example of search is on Airbnb. Here, you search for location you'd like to stay at a specific time with a certain number of people.

Thirteenth, are pages or pagination.  

These are just like pages in a book, but are separated digitally and connected by buttons or links.

Think Google search again. When you get to the bottom of the page, you're presented with page numbers. You need to press next to go to the following page of information, and so on.  

Fourteenth, are tabs.  

These controls are most commonly placed at the top of the page and change all of the content beneath them.  

Another example of tabs is Google Drive. These tabs are located in the left panel, clicking them changes the contents in the main area.

Fifteenth, are sliders.  

Sliders, allow users to set a specific value or range of values.

For example, if you search for a flight on Google, you can set the max price that you want to spend on your airplane tickets by dragging the slider to the highest price you're willing to pay.

An example of a slider that allows you to select a range of values is from Airbnb. Here, you can set the minimum and maximum price range you're willing to pay for your trip.

Sixthteenth, are tags.  

These are small elements that provide information and help users find content. They can be made by the user or added by the product.  

For example, on a Mac, you can tag documents and all the files using the MacOS finder. So you can quickly locate files later on.

Another example is Airbnb. They use tags to tell users the type of property. If the property is managed by a super host and to tell if there is a new low price.

Last, there is Gmail. You can use tags, what they call "labels" to tag emails. It helps you organize your emails based on what you find important.

In the left panel, you can then find any email that has the corresponding tag.

Seventeenth are breadcrumbs.  

Do you remember the story of Hansel and Gretel walking through the woods dropping breadcrumbs so they could find their way home? The same idea applies here.

Breadcrumbs are links that help users figure out where they are in a website. And they're usually located at the top of a website, letting the user know what page they're currently on, and any previous page they came from.

For example in Google Drive, as we navigate between folders, there is a breadcrumb list at the top of the window to let you know where you are within the file structure.  

Eighteenth are carousels.  

These display content that moves horizontally either manually or automatically. They'll allow users to browse through a set number of pictures or content either forwards or backwards.

Carousels are what you typically see on eCommerce websites to show product shots.  

For example, here is a carousel on Amazon to show product images that match shopping trends.

You can also find them on Instagram, when users post several images in a single post.

Nineteenth are notifications.  

Notifications, provide relevant information to users usually through a visual indicator and/or a short message. They're used to grab the user's attention for specific purpose.  

Notifications can indicate a positive outcome, an error or a warning message. Some notifications enable users to take action directly from the notification itself, while others send users to the place where they need to complete the task.

For example, here are two notifications from Facebook.

The first shows how many total notifications you have.  

The second appears a quick summary in the bottom left corner of the screen, when something new happens while you're viewing Facebook.  

Here is another example.

When was the last time you felt a buzz in your pocket from someone texting you?

That was your phone's way of notifying you via sound and buzzing that someone just sent words into your phone for you to read. When you opened your phone, there was a notification telling you what happened. Tapping on that notification showed you what to do next.  

Notifications are used in almost every app or product out there because they grab the user's attention.  

This can also be their downfall for users who receive too many of them.

Twentieth, are modals.

Modals are everywhere online.  

They're used ads, asking for your email acknowledgement, creating something, et cetera,  

Modals contain content that purposefully interrupts users to require an action of some sort. They are displayed in front of all other content types, and remain on screen until users have acknowledged the message and have taken action.

For example, in Google Docs, if you delete a doc that has content in it, it will automatically delete it and show you this modal that lets you know what happened. You can't leave this screen until you choose to either take the document out of the trash or to go to the doc's home screen.

Another example is Google Drive. When you choose to create a new folder, a modal shows up asking you to name the folder, then create it or cancel.  

Twenty first, are menus.  

Menus display a list of choices or action on a temporary surface.

Menus should be easy to interact with contextual to the user needs and easily scannable.  

For example in Google Docs, when you click the "File" button, a menu appears with action related to the overall doc.  

Or if you press the "Insert" button, a menu shows up with the actions related to inserting something into the document.

Twenty second, are cards.  

Cards are very popular these days, especially on mobile. They are rectangular modules that contain content and contextual actions.  

Well designed cards make good use of space and present information clearly and efficiently helping to guide users through many pieces of information.  

For example, Google Drive uses cards to give previews of content so you can easily tell what you're looking for.  

Another example of cards is with Airbnb. They use cards to show the availability of experiences. You can easily see which days it's available, and at what time.  

Twenty third, are progress bars.

These help users determine where they are in a sequence of steps. These can be found in eCommerce checkouts or set up wizards that tell you how many steps are left to complete.  

Twenty fourth, are loaders also known as spinners or progress indicators.

These are animations that show the user the system is loading or completing an action, indicating the user needs to wait.  

Here is an example of a loader in Airbnb. As you scroll the map, the loader pops up at the top of the map to let you know it's searching.  

Additionally, the pictures of the houses gray out on the left, giving you feedback that it's loading.  

Every online product has loading states of some kind. That said, depending on the product, if you have screaming fast internet, you might not ever see them.

Twenty fifth, are tooltips also known as hints.  

The goal of a tooltip is to provide contextual information of an element on mouse hover.  

For example in Google Docs, when you hover on the comment icon, a tooltip shows up explaining what clicking on it does. In this case, "Open comment history."

Also, it can be hard to initially understand the icons in the formatting toolbar. Upon hovering on any icons, a tooltip appears describing the icons' function. It can also be used to provide context on an element that needs further explanation.  

Twenty sixth are hamburger menus.  

These are navigation components that provide access to pages and functionalities. On mobile, they are almost always retracted by default to preserve the real estate, while on desktop, they tend to be opened by default, and can manually be closed by the user.  

These usually appear in the top left of an app.  

For example, on Google Material Design, the hamburger menu opens up to give a quick navigation to different areas of the website.  

Similarly on the Audible app, the hamburger menu opens up their navigation to different features of the app, like your library or stats.

Twenty seventh are accordions.  

These are used to expand or collapse vertically stacked items.  

When a page has a lot of settings or controls, they are grouped and hidden in an accordion to simplify the layouts and reduce visual clutter.  

For example on Google material design site, they use accordions to expand and collapse areas with a lot of content. Upon clicking one of the arrows, the area expands to show all of its contents.

If you click on the arrow again, it collapses back to its original.  

And that's it with our list.  

While this is non exhaustive, it covers the main new UI elements that are essential to the success of any design.  

There are countless reasons why knowing and using these common new elements or benefit your designs.  

Users are already familiar with them and don't have to learn anything new.

This is why knowledge of UI elements is essential.

Being familiar with components and knowing which one to use depending on the context, is a large part of your job as a UX designer.  

And that's it with this lesson.  

We covered a ton of UI elements.  

To quickly review them all, don't forget to download the slides at kickassux.com under the free UX course page.  

Happy learning.

• Google's Material Design components
• Apple's Human Interface Guidelines