docs

A list of common principles & practices for creating UI on the web.

Layout

For most web layouts, a 1-dimensional method like Flexbox works well.
When 2-dimensional space is needed, prefer a more robust layout option like CSS Grid.
Use @media rules to adapt layouts based on device conditions, such as viewport width.
Understand the impact of whitespace on layout and readability.
Leverage proximity to communicate content relationships and to form visual hierarchies between elements.

Be consistent with the use of color across similar elements and throughout the overall UI.
Prefer dark text on light backgrounds and light text on dark backgrounds.
Use a contrast ratio of at least 4.5:1 for small text (17 pt and below).
Use a contrast ratio of at least 3:1 for large text (18 pt and up).
Use variables to reference colors. Prefer using CSS variables to cascade inheritance down the document.
Pick colors considerately, and within the context of an overall theme or brand.

Prefer highly readable fonts like Roboto, serif, or sans-serif.
Do not use more than three different fonts within a single application.
Create typographic hierarchy through font weight, size, and case. Consider use of a type scale.
Use letter spacing to improve readability.
Prefer a maximum line length of 50 to 60 characters - including spaces.

Use a simple verb or short verb phrase with title-style capitalization for the button text. For example, “Send Payment”.
Group related buttons to convey their relationship.
When multiple buttons are grouped together, give them all the same height and enough space between them.
Consider filled buttons to emphasize high significance, outlined buttons for medium significance, and text buttons for lower significance.
Use a noticeable destructive style for buttons which have a destructive consequence, such as deleting data.

Indicate required fields explicitly, for example with an asterisk (*).
Order the form logically.
Prefer a single column for forms. The path to completion should be a straight line down the page.
Use autofocus (tabindex) to communicate the starting point of the form.
Use short but descriptive labels. Ideally just 1 or 2 words.
Use top aligned labels if you want the form to be quickly scanned. Use left aligned labels if you want users to read carefully.
Position search boxes in the upper right so users may find it where they expect.
Provide visual feedback upon form submission to indicate a form is being processed and to prevent duplicate posts.
Use right aligned labels for checkbox inputs to yield better scannability.

Prefer 5 or fewer slices in a pie or donut chart.
Prefer a horizontal bar chart when a dataset contains long labels. Truncate labels if needed.
Use the x-axis to plot time metrics (time should flow left to right).
Presort datasets to improve readability.
Include a title for the visualization in the upper left corner.
Include any controls in the upper right corner.
Implement sorting and filtering to give users control over how the data is displayed in tables.
Always indicate when data is missing.

Confirm & acknowledge important user actions to reduce uncertainty for the user and to prevent mistakes.
Avoid unnecessary alerts as they are inherently disruptive. Only use alerts to deliver important, and ideally actionable, information.
Error messages should
- Identify the problem
- Provide details (if helpful)
- Guide the user towards a solution (if possible)
- Be highly visible
Use visual affordance cues to indicate the state of UI elements. Be consistent with cues across similar components.
- types of state: Hover, Enabled, Disabled, Focused, Selected, Activated, Pressed, On, Off, Loading, Error.

Principles of Grouping: Humans naturally perceive objects as organized patterns and objects.

Principle of Least Astonishment: Parts of a system should behave in ways that users expect.

Hick’s Law: The time it takes to make a decision increases with the number and complexity of choices.

Miller’s Law: The average person can only keep 7 (plus or minus 2) items in their working memory.

Aesthetic–usability effect: Users often perceive aesthetically pleasing design as design that’s more usable.

Serial Position Effect: Users have a tendency to best remember the first and last items in a series.

Zeigarnik Effect: People remember uncompleted or interrupted tasks better than completed tasks.

Von Restorff Effect: When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.