Please enable JavaScript.
Coggle requires JavaScript to display documents.
UI Elements, UI
Emphasizes on the interface
Plans visual aesthetic
…
UI Elements
Input Controls
Radio Buttons
- (in a graphical display) an icon representing one of a set of options, only one of which can be selected at any time
Dropdown List
- A list of options where user can only select one of the predefined options in a box.
- when inactive, it displays only the selected value.
- When activated, it displays a list of all options, from which the user can select one.
List Boxes
- Regular list box that enables the user to make a single selection from a list of predetermined values
Buttons
- Indicates that an action will be performed when they are pushed.
- They consist of a container and are often labeled with a text, an icon, or both, showing what pushing the button will do
Toggles
- A family of user interface (UI) elements that allow users to turn a setting or option on or off
Checkboxes
- Presents a number of choices to the user, who can choose one or more options.
- Presented in a vertical list for scanability.
- If the list is long enough to require scrolling, more than one column might be acceptable.
- If the list is long enough for scrolling, consider adding subheadings or dividers
Date field
- Input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.
- Resulting value includes the year, month, and day, but not the time.
- The time and datetime-local input types support time and date+time input
Text Field
- A data structure that holds alphanumeric data, such as name and address.
- If a text field holds large, or unlimited, amounts of text, it may be called a "memo field."
Navigational Components
Search boxes
A search box allows users to enter a keyword or phrase (query) and submit it to search the index with the intention of getting back the most relevant results. Typically search fields are single-line text boxes and are often accompanied by a search button.
-
Slider
- Content slider is a user interface element that displays multiple pieces of content, such as images or text, in a single area, allowing users to cycle through the content by clicking on navigation arrows or dots.
-
Pagination
Pagination divides content up between pages, and allows users to skip between pages or go in order through the content.
-
Breadcrumbs
- Breadcrumbs are a navigational aid that shows users their current location within the hierarchy of a website or app.
- They consist of clickable links that represent the pages a user has visited to get to the current page.
-
Tags
- Tags allow users to find content in the same category. Some tagging systems also allow users to apply their own tags to content by entering them into the system.
-
Image Carousel
- Image carousels allow users to browse through a set of items and make a selection of one if they so choose. Typically, the images are hyperlinked
-
Icons
- An icon is a simplified image serving as an intuitive symbol that is used to help users to navigate the system typically, icons are hyperlinked.
-
Informational Components
Tooltips
A tooltip allows a user to see hints when they hover over an item indicating the name or purpose of the item.
-
Progress Bar
A progress bar indicates where a user is as they advance through a series of steps in a process. Typically, progress bars are not clickable
-
Message Boxes
A message box is a small window that provides information to users and requires them to take an action before they can move forward.
-
Notification
A notification is an update message that announces something new for the user to see. Notifications are typically used to indicate items such as, the successful completion of a task, or an error or warning message.
-
-
Containers
SHOPPING CART
-
The shopping cart page is designed to allow buyers to see all the products they have added to the shopping cart. It contains a detailed list of products and their prices, and is the last stop before customers order and pay.
-
UI
- Emphasizes on the interface
- Plans visual aesthetic
- Visual design
UX
- Empathize users experience
- Plans informational architecture
- Interaction design
-
-