The Needle and the Haystack

How do you help users find the information they need?  How do you emphasize particular information. One mistake often made is putting what they need in the middle of a bunch of other stuff.

Take this example:  Find the needle in the haystack.

HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY NEEDLE HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY

Doesn’t take forever, but if you did this on your website, you would see a drastically sub-optimal click through rate.

We have 99 pieces of hay and 1 needle.  This is how most information is presented today. Just look at any company’s “supernav” on their homepage.  It just takes too long to find what you need. There are several techniques for solving this problem.

  • Highlighting
  • White-space
  • Repetition Repetition
  • Tabs

Highlighting
Highlighting is technique that graphically makes the NEEDLE look different from the surrounding text.  It can be done with bold, italics, background, underline, color, size or the use of an icon next to the needle.

HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY NEEDLE HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY

Pretty darn easy to find the NEEDLE now.

White-Space
One of the most powerful (and neglected) technique is the use of white-space.  It is, by far, the easiest way to get a user to pay attention to something.  It is often thought that “more instructions” will help the user focus on a particular area, but in fact, it is the absence of text that will draw the eye.

HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY

NEEDLE

HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY

A simple change like this and all the sudden, the NEEDLE is instantly obvious.

Repetition Repetition
Being redundant as well as repetitive is a good thing, as well as a good thing.  Think of it this way:  A user may read only one phrase on your whole page.  If this is the case, make sure that each phrase has your key message.  If you know the NEEDLE is the important, help the user by giving alternate ways of finding it.

HAY HAY NEEDLE HAY HAY HAY HAY HAY HAY HAY NEEDLE HAY HAY HAY HAY HAY HAY NEEDLE HAY HAY HAY HAY HAY HAY HAY HAY NEEDLE HAY HAY HAY HAY HAY HAY HAY NEEDLE HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY NEEDLE HAY HAY HAY HAY HAY HAY HAY HAY NEEDLE HAY HAY HAY HAY HAY HAY HAY HAY HAY NEEDLE HAY HAY HAY HAY HAY NEEDLE HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY HAY NEEDLE HAY HAY HAY HAY HAY HAY HAY NEEDLE

It’s alot easier to find something when it’s in more than one spot, isn’t it?

With a robust application, you should always give multiple ways of triggering actions.  An example of this is printing; for which I can press Control-P, Click File-Print in the menu, Click the Print Icon or Right-Click and choose Print.  Even these have mouse and keyboard alternatives.  Always give the user choices.  They will love you for the options and find the one that works best for them.

Tabs
Tabs (or similar UI like accordions) are the most powerful ways of chunking information.  This is putting information on different virtual screens completely. People don’t mind if they have to click several times as long as the choices at each step are clear and unambiguous.

mockup

It’s pretty clear where to click to get to the Needles.

UI Design is all about focusing attention and reacting to input.  This is a simple technique, but I see, day-in and day-out examples where information is buried under a mountain of other information.

Something to think about.

One Reply to “The Needle and the Haystack”

Leave a Reply