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