Design Guidelines

A summary of Don't make me think:

  • If you can't make something self-evident, you at least need to make it self-explanatory
  • Take advantage of conventions
  • Create effective visual hierarchies
  • Break up pages into clearly defined areas
  • Make it obvious what's clickable
  • Eliminate distractions
  • Format content to support scanning
  • Clarity trumps consistency
  • The more important something is, the more prominent it is
  • Things that are related logically are related visually
  • Things are nested visually to show what's part of what
  • Use plenty of headings and don't let them float
  • Keep paragraphs short
  • Use bulleted lists
  • Happy talk must die
  • Instructions must die
  • Navigation should be on every site and in the same place except for forms
  • All web users expect the side ID to be a home button
  • every page should have a search box or a link to the search
  • For Search boxes avoid:
    • Wording outside the norm (Quick Find instead of Search)
    • Instructions (no one cares)
    • Options (give it on the results page if the first shot didn't work)
  • Give low level (3rd or 4th level) navigation the same attention
  • The most common failing of "you are here" indicators is that they are too subtle
  • Too subtle visual clues are a very common problems because subtlety is a trait of good design. Most users are too much in a rush to notice though
  • Breadcrumbs are good for navigation:
    • At the top
    • with > in between and > A bold last item
  • Try the trunk test (page 62)
  • The home page needs to answer 5 questions:
    • What is this?
    • What can I do here?
    • What do they have here?
    • Why should I be here and not somewhere else?
    • Where do I start?
  • Don't use small-low contrast type
  • Don't put labels inside form fields
  • Preserve the distinction between visited and unvisited links
  • Don't float headings in between paragraphs (have them closer to the text that follows than the one that precedes)

How we use websites:

  • We don't read pages. We scan them.
  • Most of the time we don't choose the best option- we choose the first reasonable option
  • All web users expect the side ID to be a home button

Testing:

  • The antidote for religious debates is testing
  • Every web development team should spend one morning a month doing usability testing
  • Use services like usertesting.com
  • Focus on fixing the most serious problem first

Mobile:

  • Allow zooming
  • Link to relevant pages, not to Homepages
  • Give an option to view the desktop version of the site
  • Make sure visual hints (affordances) don't get lost in the mobile version
  • Remember that speeds on mobile are unreliable (make mobile sites small)
  • Make it possible to change font size (Really?)