UI Design Patterns - Best Practices

KISS Principle

KISS (opens in a new tab) (Keep it simple, stupid!) design has a minimal interface, and reveals extra features on demand.

Example

`Hide the copy button until user interacts with the content that needs copying.`
`Demo: focus inside this to reveal the copy button.`

Accessibility

Form inputs must be accessible to users with disabilities. They should be keyboard accessible and meet WCAG 2 standards at Level AAA. Example: press the Tab key on the keyword to focus on the input

Usability

All UI features should be reachable within a maximum of three steps. Example: selecting any option is possible with search and two taps

Explicit over Implicit

Inputs should be clearly labeled with text that appear in all input states. Icons can only substitute text labels when accompanied by a title attribute, tooltip hint or other means of clarification. Example: placeholder text complements the 'call' icon for phone number input

Privacy

Sensitive user input must be obscured by default, and requires an explicit user action to reveal. Example: hidden password input

Variables