- 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.

Rutgers University, Newark

* 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

User Interface Elements

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

"User Interface Elements" - Usability 

- 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

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

Learn Before

Related