UI Elements Flashcards
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.
Bento Menu
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.
Loader
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.
Modal
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.
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.
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.
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.
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.
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.
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.
Tab Bar
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.
Tooltip
Tooltips provide little hints that help users understand a part or process in an interface.
Bar
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:
Plus button
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.
Click / Tap
An act of pressing, tapping, touching, and releasing of a mouse button or screen touch.
Press
An action that requires pressing a button (physically) on the user keyboard, the power button, and so on.
Type
An act of pressing a key to type it into a text box, etc.
Swipe
Mostly applicable to touch screens. An act of touch and swipe through an area without releasing the touch.
Hold
An act of Click/Tap/Press and hold a UI element. Such as buttons.
Field
An area in the WUI (Web User Interface) or GUI (Graphical User Interface) where you need to enter information.
Dialogue
A pop-up window that appears before/after an action.
Panel
A toolbar or a control panel.
Pane
An independent area in the WUI or GUI that you can scroll and resize.
Button
A graphical or web element that executes an action when clicked.
Icon
A graphical or web element that represents a shortcut to an action.
Tab
A graphical or web element that groups a set of actions.
Wizard
A dialogue that walks a user through the sequence of steps to perform a particular task.
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 Combo boxes Buttons Toggles Text/password fields Date pickers Checkboxes Radio buttons Confirmation dialogues
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.
Helper elements
All other elements fall into this category. The most widely-used helper elements include:
Notifications Breadcrumbs Icons Sliders Notifications Progress bars Tooltips
What are the 3 categories of helper elements?
- Navigational
- Informational
- Groups/containers
Information helper elements
Responsible for representing information. These include, for example, tooltips, icons, and progress bars.
Navigational helper elements
Responsible for UI navigation. Navigational helper elements include things like navigation menus, list of links, and breadcrumbs, to name but a few.
Groups/containers helper elements
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.
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.
Sidebars
Sidebars also contain other groups of elements and components. But that can be switched between collapse and visible state.
Sheets
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.
The drawer
The drawer contained destinations and navigates users to different locations in an app.
Snackbar
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.
