UI Elements

Question 1

Accordion

Answer 1

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.

Question 2

Bento Menu

Answer 2

A bento menu, named after bento boxes, represents a menu with grid items. As you read along, you’ll begin to notice UI designer is just another word for a foodie—we love to name our UI elements after food.

Question 3

Loader

Answer 3

Loaders can take on many, many forms—designers enjoy getting creative with them. Loaders are designed to let users know the system is completing an action in the background and should wait.

Question 4

Modal

Answer 4

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.

Think of the last time you deleted an item on your phone. The little message that popped up asking you to confirm that you wanted to remove it is a modal.

Question 5

Pagination

Answer 5

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.

Question 6

Picker

Answer 6

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.

Question 7

Sidebar

Answer 7

A sidebar displays a group of navigational actions or content literally on the side of a page. It can be visible or tucked away.

Question 8

Slider Controls

Answer 8

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.

Question 9

Stepper

Answer 9

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.

Question 10

Tag

Answer 10

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.

Question 11

Tab Bar

Answer 11

Tab bars appear at the bottom of a mobile app and allow users to quickly move back and forth between the primary sections of an app.

Question 12

Tooltip

Answer 12

Tooltips provide little hints that help users understand a part or process in an interface.

Question 13

Bar

Answer 13

Bar is a section of the user interface with clickable elements enabling a user to quickly take some core steps of interaction with the product or it can also inform the user about the current stage of process. Among the basic types of bars, we could mention:

Question 14

Plus button

Answer 14

the button that being clicked or tapped presents the ability to add new content, be it a new contact, post, note, position in the list — anything user could do as the basic action with the digital product. Sometimes, tapping this button, users are directly transferred to the modal window of creating content, in other cases there is also a medium stage when they are given additional options to choose from and make adding the particular piece of data more focused.

Question 15

Click / Tap

Answer 15

An act of pressing, tapping, touching, and releasing of a mouse button or screen touch.

Question 16

Press

Answer 16

An action that requires pressing a button (physically) on the user keyboard, the power button, and so on.

Question 17

Type

Answer 17

An act of pressing a key to type it into a text box, etc.

Question 18

Swipe

Answer 18

Mostly applicable to touch screens. An act of touch and swipe through an area without releasing the touch.

Question 19

Hold

Answer 19

An act of Click/Tap/Press and hold a UI element. Such as buttons.

Question 20

Field

Answer 20

An area in the WUI (Web User Interface) or GUI (Graphical User Interface) where you need to enter information.

Question 21

Dialogue

Answer 21

A pop-up window that appears before/after an action.

Question 22

Panel

Answer 22

A toolbar or a control panel.

Question 23

Pane

Answer 23

An independent area in the WUI or GUI that you can scroll and resize.

Question 24

Button

Answer 24

A graphical or web element that executes an action when clicked.

Question 25

Icon

Answer 25

A graphical or web element that represents a shortcut to an action.

Question 26

Tab

Answer 26

A graphical or web element that groups a set of actions.

Question 27

Wizard

Answer 27

A dialogue that walks a user through the sequence of steps to perform a particular task.

Question 28

Input elements

Answer 28

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
Combo boxes
Buttons
Toggles
Text/password fields
Date pickers
Checkboxes
Radio buttons
Confirmation dialogues

Question 29

Output elements

Answer 29

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.

Question 30

Helper elements

Answer 30

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

Notifications
Breadcrumbs
Icons
Sliders
Notifications
Progress bars
Tooltips

Question 31

What are the 3 categories of helper elements?

Answer 31

1. Navigational
2. Informational
3. Groups/containers

Question 32

Information helper elements

Answer 32

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

Question 33

Navigational helper elements

Answer 33

Responsible for UI navigation. Navigational helper elements include things like navigation menus, list of links, and breadcrumbs, to name but a few.

Question 34

Groups/containers helper elements

Answer 34

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.

Question 35

Message boxes

Answer 35

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.

Question 36

Sidebars

Answer 36

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

Question 37

Sheets

Answer 37

Sheets are surfaces containing supplementary contents that are anchored to the left or right edge of the screen(Side Sheets) or the bottom of the screen(Bottom Sheets).

The sheets display content that complements the screen’s primary content, or a list of actions that affect the screen’s primary content. It won’t change your location.

Question 38

The drawer

Answer 38

The drawer contained destinations and navigates users to different locations in an app.

Question 39

Snackbar

Answer 39

It’s one of the frequent-used acknowledgment to notifies the users about system actions occurring in the background. It appears for a short amount of time and may include an option to undo the action. Use a Snackbar to provide brief feedback about an operation.