User Tools

Site Tools


Writing /app/www/public/data/meta/design/design_-_patterns.meta failed
design:design_-_patterns

Design Patterns

Author: Michelle McCausland

This page contains the notes taken from the UX training course “UX Foundation Online” provided by UXTraining.com


Chunking

  • Technique that helps us process data faster
  • Makes large data sets easier to manage
  • Chunk inputs into logical groups
  • Used in forms/ dashboards
  • Helps our short term memory
  • Aides comprehension

Alignment

  • Objects that are symmetrical appear more orderly & easier to understand
  • Powerful but subtle
  • grid design - 960 grid design
  • Lack of alignment interrupts flow
  • Path to completion - leads through interface
  • e.g. The Butterfly Ballot used in the 2000 presidential election

Call to action

  • Needs to be clear
  • Avoid “next”, “submit” unless necessary
  • Tells users what to do and why

Visual Hierarchy

  • Indicate most important elements
  • Size - news headlines
  • Color - highest color contrast - perceived first e.g. Gmail
  • Leads users through the design/interface

Progress Indicators

  • e.g. Amazon shopping cart
  • Make steps look sequential
  • Show what is completed Vs not
  • Tell them what's done/ need to do

Digital Affordances

  • Help understand how a product operates
  • Help make features discoverabe
  • Should make the action obvious
  • Should be natural

Pattern Libraries

  • Check established conventions
  • Everybody is solving a different problem
  • Use as a starting point

Smart defaults

  • Use data smartly
  • Location data
  • Some might benefit
  • Others no worse off

Help

  • Tooltips / icons
  • When its needed
  • Help should be visible but unobtrusive
  • Help should be helpful / useful
  • Don't be annoying

Error handling

  • Clearly - where the error occurred
  • Explain how to resolve the problem

Inline validation

  • Reduces errors
  • Reduces tiem to complete
  • Let users know how they are doing
  • Error only notification
  • Not very easy to implement

Input Types

  • Forms matter - they are everywhere
  • Use correct input types - e.g. numeric data
  • HTML 5 input types
  • Reduce workload & errors
  • Use responsibly

Content Vs Navigation

  • Prioritise content over navigation
  • Most popular content first

Tap targets

  • Chunky tap targets reduce errors
  • Separate tap targets appropriately
design/design_-_patterns.txt · Last modified: 2021/06/25 10:09 by 127.0.0.1