How to design for scanning

There are some important things we can do to make sure that the users see and understand as much of what they need to know and of what you want them to know:

  • Conventions. Follow the existing conventions and standardized design patterns
    • Where things should be located on a page (logo and primary navigation example)
    • How things work (common metaphor for similar sites)
    • How things look (standardize appearance for many elements)
  • Create visual hierarchies. The relationships between the things on the pages should be obvious:
    • which things are most important – (the more important something is, the more prominent it is)
    • which things are similar – (things that are related logically should be related visually)
    • which things are part of other things – « nest » things to show what’s part of what.
  • Break pages up into clearly defined areas – it allows users to decide quickly which areas of the page to focus on
  • Make it obvious what is clickable – looking for the next thing to click is what people are doing on the web
  • Eliminate distractions – avoid visual noise like
    • shouting
    • disorganisation
    • clutter – get rid of anything that’s not making a real contribution
  • Format content support scanning – help users to find what they are searching for in your text.
    • use plenty of headings
    • keep paragraphs short
    • use bulleted lists
    • highlight key terms

Be creative as you want but as long you make sure it’s still usable.

Choose clarity over consistency.

Learn more about making content scannable by reading Ginny Redish’s book Letting Go of the Words.