Internal Errigal Collaboration Wiki

User Tools

Site Tools

Trace:
design:dropdowns

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
design:dropdowns [2020/06/30 14:30] – mmccdesign:dropdowns [2021/06/25 10:09] (current) – external edit 127.0.0.1
Line 1: Line 1:
 +====== UI Patterns - Dropdowns ======
 +
 +Author: Michelle
 +
 +===== Dropdown Menu Anatomy =====
 +{{ :design:1_896kgcqfqm3uotygyjrszg.jpeg?nolink |}}
 +  - **Label**: Inform users on what should be selected.
 +  - **Field Icon (Optional)**: Supports the label by indicating the type of information required.
 +  - **Search Bar (Optional)**: Used to help users easily find their intended option — for menus that consist of 20 or more options.
 +  - **Checkbox (Optional)**: If multiple selections are enabled.
 +
 +===== Dropdown Menu Types =====
 +Depending on the nature of the input required.
 +
 +{{ :design:1_qljkvb4xxfhyytw1jvaf2q.jpeg?nolink |}}
 +
 +===== Dropdown Menu States =====
 +Dropdown menus can have the following states: default, active, hover, disabled, focused, and error.
 +
 +{{ :design:1_w73f0nkbi39kybh7hii7jw.jpeg?nolink |}}
 +
 +===== Best Practices =====
 +
 +==== Avoid Long Dropdowns ====
 +When there are more than 15 options, use a text field with autocomplete functionality.
 +
 +{{ :design:1_bqvewydzp8qkncq_1yjilg.jpeg?nolink |}}
 +
 +==== Too Few Options ====
 +When very few options, consider radio buttons, toggles, or checkboxes.
 +
 +{{ :design:1_bggnkvkkt7cxgnjk1uq3ng.jpeg?nolink |}}
 +
 +==== Grey Out Disabled Options ====
 +When there’s an option that is disabled or unavailable, it should be greyed out instead of removed
 +
 +{{ :design:1_eum5kwxmdkb8zjt6wnbtza.jpeg?nolink |}}
 +
 +==== Use Clear & Concise Labels ====
 +  * Use Sentence Case
 +  * For action menu items, use verbs to describe the action that will occur
 +  * For links, use nouns to identify the page that the user will be directed to
 +  * Exclude articles in menu items; use “delete page”, instead of “delete the page”
 +  * Keep menu items to a single line of text
 +  * Organize the menu items by sorting the list in a logical order - most selected option at the top, if known.
 +
  

Page Tools

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki