Usability is the art and science of making things easier to use.
Don’t Make Me Think by Steve Krug
is the best resource I’ve found on the topic. The approach in his book is to focus on your users, simplify your site and testing your site with actual users.
These are my notes from this book.
First law of usability – don’t make me think
Design pages for scanning
- Try to make pages self evident, if that’s not possible then self explanatory
- We don’t read pages, we scan them
- We don’t make optimal decisions, we chose the first reasonable option
- We don’t figure out how things work, we muddle through (if we find something that works, we stick to it) – ex my mom types urls in search bar
- clear visual hierarchy
- more important = more prominent
- things that are related logically should be related visually
- follow conventions
- make it obvious what’s clickable
- don’t allow visual noise
- Create mindless choices
- Omit unnecessary words
- remove intro text, instructions
Test for good navigation (at a glance answer)
- most users are at your site to find something
- some are search first, some are browse first
- ideally navigation provides something to hold on to – a path around the site & shows whats here (should provide sense of hierarchy)
- follow navigation conventions!!!
- persistent (global) navigation – appears on every page
- global navigation should have site id, a way home, way to search, utilities, sections (homepg can be exception)
- page names – need to be prominent & match what you clicked
- make you are here’ indicators stand out
- breadcrumbs are a good supplement to good navigation but not a replacement
- what site is this?
- what page am I on?
- what are the major sections of this site?
- what are my options at this level?
- where am I on this site?
- how can I search?
- Print out a page on the site, hold at arms length, squint, answer above questions
- pull-down menus are less useable than other methods of nav
- most important -tell what site is
- what its for, why I should be here
- show what site has to offer (overview of content, features, how its organized)
- shortcuts to important content
- make it obvious what I (the user) is looking for
- show me where to start (call to action!)
- homepg navigation can be unique but not too different
- differences can incl. section descriptions, different layout, more space for site id
don’t get in religious debates about usability – use user testing when there are disagreements or less than obvious choices (ex pull down vs list)
On usability testing
How to develop a usability report
- keep testing simple
- ask user to figure something specific out or to try to do a specific task
- test early in development
- test often (several small tests prob better than one giant one)
- review results right away
- ignore problems where user gets back on track quickly on their own
- fix low hanging fruit, resist addressing all problems by adding things
- focus groups != tests (what we say we like/want/do and what we actually like/want/do can be different)
Things that diminish goodwill / credibility
- Test site yourself & write down problems
- Have others test site, write down problems
- Write a report summarizing problems & suggest solutions
- hiding info I want
- punishing me for not doing things a specific way (i.e. formatting data)
- asking for info that you don’t need
- bs – in any form – “we care about your call…”
- making me wait for anything
- poor design, amateurish, sloppy, etc.
Testing for accessible usability
- make primary uses of site easy & obvious
- tell me what i want to know
- save steps where possible
- know what questions I’m going to ask and answer them
- creature comforts (printer friendly)
- make it easy to recover from errors
- apologize for things that you know to be sucky
- first test: increase text size, does site still work?
- screen reader users scan too – use a screen reader, first few words of each page link, section, nav, title are very important, hierarchy is very important
- read redish.net/content/papers/interactions.html
- use semantic html, use css for visual formatting, not markup!
- low hanging fruit – alt txt on image, test forms in screen readers (use label element), create skip to main content link at beginning of each page
- make all content accessible by keyboard
- js only functionality is not accessible
- don’t use image maps