User Tools
Writing /app/www/public/data/meta/design/usability_-_design.meta failed
design:usability_-_design
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
| design:usability_-_design [2017/11/14 09:48] – created mmcc | design:usability_-_design [2021/06/25 10:09] (current) – external edit 127.0.0.1 | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ====== Usability - Design ====== | ||
| + | |||
| + | Author: Michelle McCausland | ||
| + | |||
| + | This page contains the notes taken from the UX training course "UX Foundation Online" | ||
| + | |||
| + | ---- | ||
| + | |||
| + | **Information Architecture** | ||
| + | * Like a skeleton | ||
| + | * Determines where content lives and is organised | ||
| + | * Site map - site structure | ||
| + | * Site structure has a big impact on user experience | ||
| + | |||
| + | Where to start: | ||
| + | - Follow conventions, | ||
| + | - Look at web traffic data | ||
| + | - Look at search data | ||
| + | - Define hypothesis | ||
| + | - Card sort | ||
| + | |||
| + | ---- | ||
| + | |||
| + | **User flow** | ||
| + | Consider different scenarios of people using software | ||
| + | |||
| + | Before you design a screen: | ||
| + | * Understand its sequence in main flow | ||
| + | * Be conscious of different screen states | ||
| + | |||
| + | ---- | ||
| + | |||
| + | **Navigation** | ||
| + | * By product of information architecture | ||
| + | * Primary nav should be global | ||
| + | * Secondary nav - more specific | ||
| + | |||
| + | Linear sequence - Natural, each step flows logically to the next step, for quick tasks | ||
| + | |||
| + | Hub and spoke - non-linear, no natural sequence, for longer tasks | ||
| + | |||
| + | ---- | ||
| + | |||
| + | **Interaction Design** | ||
| + | Interaction = Intent + Action + Result | ||
| + | |||
| + | Like a sentence = Subject + Verb + Object | ||
| + | |||
| + | User = Intent > Action > Result | ||
| + | |||
| + | Product = Controls > Rules > Feedback | ||
| + | |||
| + | - Controls | ||
| + | * like a steering wheel - web controls (checkboxes, | ||
| + | - Rules | ||
| + | * Rules define how the interface works | ||
| + | * Defines success and failure | ||
| + | * Defines the feedback given | ||
| + | * Defines what data is produced and where it goes | ||
| + | * Use "if, then" statements | ||
| + | * Rule guidelines - should be easy to understand and learn, facilitate overall flow | ||
| + | * Reduces guesswork - everybody knows how it works | ||
| + | - Feedback | ||
| + | * Every interaction requires feedback | ||
| + | * Confirms an action has taken place | ||
| + | * Communicates results | ||
| + | |||
| + | ---- | ||
| + | |||
| + | **Wireframes** | ||
| + | * Communicate controls, rules, feedback | ||
| + | * Provides more critical detail than prototypes | ||
| + | * Start with a rough sketch | ||
| + | |||
| + | |||
Page Tools
