Friday, June 6, 2014

Review and notes from "Don't Make Me Think": Part 2

Don't Make Me Think: Part 2
If your audience is going to act like you're designing billboards, then design great billboards. [...] There are five important things you can do to to make sure they see, and understand, as much of your site as possible:
  • Create a clear visual heirarchy on each page
  • Take advantage of conventions
  • Break pages up into clearly defined areas
  • Make it obvious what's clickable
  • Minimize Noise
The first part of this is self explanatory, give your users what they want. Don goes into more details on each of the five points, I will summarize.  1. Make sure the appearance of the things clearly and accurately portray the relationships.  The more important something is, the more prominent it should be.  Things that are related logically should also be related visually.  Things are nested visually should show what is part of what.
A good visual hierarchy saves us work by preprocessing the page for us, organizing and prioritizing its contents in a  way that we can grasp almost instantly.
 This reduces how much the user has to think in order to figure out what's going on, and doesn't drain their good will reserve.
The publisher knows better than anyone which pieces of the site's content are most important, valuable, or popular, so why not identify them for me and save me the trouble.
I don't necessarily agree with this statement.  I think that the publisher can make an initial assumption about which things would be more important, but without any data to support them, it's just that, an assumption.  You should track what the users use and make the things they actually use more prominent, not the things you assume they use.  This may take more than just click data, you may need to track where they're looking as well.  They may be using that jumbotron to figure out where to click next, and without it they may go down a completely different path.

Please don't try to come up with your own conventions.  Underline your links.  Make your buttons look like buttons.  If you're going to break with the conventions you better have a really good reason, and perform lots of testing to make sure your new method works.

Use your whitespace, breaking things into clearly separate areas means you're going to have to have whitespace.  Users know how to scroll now, they will look below "the fold".  Don't crowd your site with ads, flashy animations, scrolling text, etc.  That's noise the user has to process, and it's distracting.
Omit needless words.  Vigorous writing is concise.  A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.
This, to me as a developer, is self-evident, but you will probably be fighting for this on all fronts.  Marketing will want more descriptive words.  Designers will want more descriptive words.  The CEO will want more Pizzaz.  These requests will come from everywhere, be prepared to constantly fight them.
Your objective should always be to eliminate instructions entirely by making everything self explanatory, or as close to it as possible.  When instructions are absolutely necessary, cut them back to the bare minimum.
People know how to fill out a form.  They know what textboxes and dropdowns are, they know how to use radio buttons.  Don't provide them with instructions they're not going to read, they're only going to create distractions.  If something is causing a problem, figure out what is causing the problem and provide help then (show a tooltip for empty textboxes the user has been hovering over or has selected for long periods of time, etc.).

I'm going to put these next two quotes out of order from the book, I think they flow better this way:
Clear, well-thought-out navigation is one of the best opportunities a site has to create a good impression. 
If the navigation is doing is job, it tells you implicitly where to begin and what your options are.  Done correctly, it should be all the instructions you need. 
Just having the navigation appear in the same place on every page with a consistent look gives you instant confirmation that you're still in the same site.
Don devotes a whole chapter to navigation, that's how important he feels it is, and I agree with him.  Making a site easily navigable is one of the most important things to get right.  One thing that Don overlooks in the book is that web sites and applications aren't books, and you can have more than one way to get to a particular screen.  If half your users look for a screen using one navigation path, and half use another, put it under both.

Previous article in the series | Next article in the series

No comments:

Post a Comment