I should never have to devote a millisecond of thought to whether things are clickable―or not.
I could list dozens of other things that visitors to a site shouldn’t spend their time thinking about, like:
> Where am I?
> Where should I begin?
> Where did they put _____?
> What are the most important things on this page?
> Why did they call it that?
If you want to design effective Web pages, though, you have to learn to live with three facts about real-world Web use.
FACT OF LIFE #1:
We don’t read pages. We scan them.
FACT OF LIFE #2:
We don’t make optimal choices. We satisfice.
FACT OF LIFE #3:
We don’t figure out how things work.We muddle through.
> Create a clear visual hierarchy on each page
> Take advantage of conventions
> Break pages up into clearly defined areas
> Make it obvious what’s clickable
> Minimize noise.
Pages with a clear visual hierarchy have three traits:
> The more important something is, the more prominent it is.
> Things that are related logically are also related visually.
> Things are “nested” visually to show what’s part of what.
Getting rid of all those words that no one is going to read has several beneficial effects:
> It reduces the noise level of the page.
> It makes the useful content more prominent.
> It makes the pages shorter, allowing users to see more of each page
at a glance without scrolling.
Happy talk must die
Instructions must die
And now for something completely different
People won’t use your Web site if they can’t find their way around it.
Two of the purposes of navigation are fairly obvious: to help us find whatever it is we’re looking for, and to tell us where we are. And we’ve just talked about a third:
> It gives us something to hold on to.
But navigation has some other equally important―and easily overlooked―functions:
> It tells us what’s here.
> It tells us how to use the site.
> It gives us confidence in the people who built it.
There are four things you need to know about page names:
> Every page needs a name. Just as every corner should have a street sign,every page should have a name.
> The name needs to be in the right place.
> The name needs to be prominent.
> The name needs to match what I clicked.
About.com has the best Breadcrumbs implementation I know of, and it illustrates several “best practices.”
> Put them at the top.
> Use > between levels.
> Use tiny type
> Use the words “You are here.”
> Boldface the last item.
> Don’t use them instead of a page name.
I think they’re an excellent navigation choice for large sites. Here’s why:
> They’re self-evident.
> They’re hard to miss.
> They’re slick.
> They suggest a physical space.
slavishly imitate these three key attributes:
> They were drawn correctly.
> They were color coded.
> There was a tab selected when you enter the site.
you should be able to answer these questions without hesitation:
> What site is this? (Site ID)
> What page am I on? (Page name)
> What are the major sections of this site? (Sections)
> What are my options at this level? (Local navigation)
> Where am I in the scheme of things? (“You are here” indicators)
> How can I search?
Here’s one to show you how it’s done.
1. Site ID
2. Page name
3. Sections and subsections
4. Local navigation
5. “You are here” indicator(s)
6. Search
Think about all the things the Home page has to accommodate:
> Site identity and mission.
> Site hierarchy.
> Search.
> Teases.
> Timely content.
> Deals.
> Shortcuts.
> Registration.
> Show me what I’m looking for.
> …and what I’m not looking for.
> Show me where to start.
> Establish credibility and trust.
As quickly and clearly as possible, the Home page needs to answer the four questions I have in my head when I enter a new site for the first time:
What is this?
What can I do here?
What do they have here?
Why should I be here―and not somewhere else?