- Checkboxes: users select one or more options
- Radio buttons: select one at a time
- Dropdown: select one at a time, more compact
- List boxes: select multiple at a time, more compact
- Buttons: indicates action upon touch
- Dropdown button: Button displayed on drop-down list
- Toggles: Change setting between 2 states
- Text Fields: users enter text
- Date & Time Picker: Select date and/or time.



Input Controls

- Search Field: users can enter keyword or phrase and can search index
- Breadcrumb: identify current location by providing clickable trail
- Pagination: divide content between pages
- Tags: allow users to find content in same category
- Sliders: users set or adjust value
- Icons: simplified image, help users navigate system
- Image Carousel: browse through set of items


Navigational Components

- Notifications: An update message that announces something new for the user to see.
- Progress Bars: Indicates where a user is as they advance through a series of steps in a process. They’re typically not clickable.
- Tool Tips: Allows users to see hints when they hover over an item indicating the name or purpose of it..
- Message Boxes: A small window that provides information to users & requires them to take action before they can move forward.
- Modal Window (pop-up): Requires suer to interact with it in some way before they can return to the system. 

Information Components

- Accordion: A vertically stacked list of items that utilizes show/hide functionality. When a label is clicked, it expands the section showing the content within. It is possible to have one or more items showing at a time.

Containers

White space, alternatively known as "negative space," is the empty space covering the area outside of interactive content. While the term is "white" space, the color of empty spaces aren't always white. White spaces are incredibly effective in producing clean designs, mainly because it helps process visual data more efficiently: "A good way to define chunks and sections in the UI is of course negative space. Our memory capacity is limited so we can easily use white space to create meaningful groups of elements that will help the user to remember them easily in a way that when he interacts with the UI more frequently he could easily recall of sections and where they might appear and mean."

There are two types of negative spaces: 

•Micro spaces

•Macro spaces

Empty Spaces in UI Design

* Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date field

* Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons

* Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows

* Containers: accordion

Rutgers University, Newark

San Jose State University

- UI Design Methods
- UI Design Tools
- UI Design Elements
- Types of Interfaces

UI Design Methods and Tools

https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html

"User Interface Elements" - Usability 

User Interface Elements

Types of User Interfaces
- Graphical user interfaces (GUIs)
- Voice-controlled interfaces (VUIs)
- Gesture-based interfaces

Types of Interface

- InVision (Free, paid plans available)
- AdobeXD
- Sketch
- Marvel
- Balsamiq
- Figma (Free)
- Generative AI

UI Design Tools

Methods and techniques used to make an interface easier to use.

- Atomic Design
- Landing Page Best Practices

Learn Before

Related

Learn After