Reusable solutions.

Design Pattern 1 - Structured Format

  • When data should adhere to predefined structure.
  • Limit the format of input data.
  • Split large input fields into smaller parts.
  • Give attention to the order of input fields.

Design Pattern 2 - Morphing Controls

  • Use when some controls don’t need to be displayed always.
  • Present user with selective controls.
  • De-clutters the screen.

Design Pattern 3 - Inline Editor

  • Edit in the same place as displayed.
  • Edit without redirecting.
  • Quick and Easy.
  • Hover effects are used to invite editing.

Design Pattern 4 - Good Defaults

  • Pre-fill form.
  • Default with data most likely to match.
  • Do not use for fields that are critical.
  • E.g. signing up to a newsletter / accepting the terms and agreements.

Design Pattern 5 - Module Tabs

  • Content separated into sections.
  • Accessed via a single content area using a flat navigation structure.
  • Each tab can be viewed separate from each other.

Design Pattern 6 - Categorization

  • Categorize content into a hierarchal section using Tabs / Modules.
  • Categorize contents to groups.
  • Categorize to main category or section (nested)
  • Categories help to wall section off from each other.

Design Pattern 7 - Progressive Disclosure

  • Present minimum data required.
  • Move complex and less frequently used options out.
  • Manage confusion by de-cluttering.
  • Maintain Focus & Attention.

Design Pattern 8 - Adaptable view

  • UI to fit the specific needs.
  • Compatibility on multiple devices/ themes.
  • Switch/alter between different styles.
  • Tailor usability and the experience to their specific need.

Design Pattern 9 - Pagination

  • To view subset of sorted data.
  • Use when dataset is ordered.
  • When cannot display all the data on a single page.
  • Do not use when the user cannot pause to navigate to the next page.