User Tools
design:design_-_patterns
Differences
This shows you the differences between two versions of the page.
| design:design_-_patterns [2017/11/14 10:08] – created mmcc | design:design_-_patterns [2021/06/25 10:09] (current) – external edit 127.0.0.1 | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ====== Design Patterns ====== | ||
| + | Author: Michelle McCausland | ||
| + | |||
| + | This page contains the notes taken from the UX training course "UX Foundation Online" | ||
| + | |||
| + | ---- | ||
| + | |||
| + | **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 " | ||
| + | * 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/ | ||
| + | |||
| + | **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 | ||
Page Tools
