UI Patterns

Overview

UI Patterns are reusable user interface solutions to common problems. This section contains best practices for search boxes, accordions, buttons, and links.

When implementing different UI patterns, consider its possible states such as:

  • Empty. How does it look like for a first time user who has not added any data yet?
  • None. How does it look like for recurring users who has deleted or finished all the items?
  • Loading. There would be times wherein users may have slow internet connection, or a slow device.
    How would it show that it is being processed?
  • One (or very few data), some, and many. How does it look like if there’s too much information?
    One example is a thumbnail title that have way too many characters.
  • Invalid, valid, done/success
  • Hover, focus, and disabled

For patterns that are not included in this site yet, refer to W3C’s Authoring Practices for Design Patterns for more guidelines.

Guidelines

Make sure that links, buttons, and other interactive elements are visible and distinguishable from non-interactive elements

  • Content should not look like controls and controls should not look like content
  • Ensure that primary actions are visually distinct from secondary actions
  • Use buttons for “doing something”, use links for “getting somewhere”

distinguish interactive elements

Provide an accessible search for large sites, on every page

Place the search bar consistently on an accessible part of the page (header or footer)

UI Patterns are reusable user interface solutions to common problems. This section contains best practices for search boxes, accordions, buttons, and links.

When implementing different UI patterns, consider its possible states such as:

  • Empty. How does it look like for a first time user who has not added any data yet?
  • None. How does it look like for recurring users who has deleted or finished all the items?
  • Loading. There would be times wherein users may have slow internet connection, or a slow device.
    How would it show that it is being processed?
  • One (or very few data), some, and many. How does it look like if there’s too much information?
    One example is a thumbnail title that have way too many characters.
  • Invalid, valid, done/success
  • Hover, focus, and disabled

For patterns that are not included in this site yet, refer to W3C’s Authoring Practices for Design Patterns for more guidelines.

Last updated by theingizaw on Mon, 03/13/2017 - 12:57