Transcript Don`t Make Me Think (Part 2)

Billboard Design 101
Create a clear visual hierarchy

The more important something is, the
more prominent it is.
Create a clear visual hierarchy
The more important something is, the
more prominent it is.
 Things that are related logically are also
related visually.

Create a clear visual hierarchy
The more important something is, the
more prominent it should be.
 Things that are related logically are also
related visually.
 Things are “nested” visually to show
what’s part of what.

It happens so quickly that the only
time we’re aware we’re doing it is
when we can’t.
Conventions are your friends
Break with convention ONLY when:
(a) It introduces no learning curve
OR
(b) It adds so much value that it’s worth a
small learning curve.
Other guidelines
Break up pages into clearly defined areas
 Make it obvious what’s clickable
 Keep the noise down to a dull roar

– Busy-ness
– Background noise
Animal, Vegetable, or Mineral?
How many clicks should it take to
get to any page on the site?
Wrong question
A more useful question is: “How
much thinking is required to get from
here to there?”
On NOT writing for the Web
Get rid of all the words only you will read
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 the page at a glance

Happy talk must die
Instructions must die
How about?
Please help us improve the site by answering these
questions. It should only take you 2-3 minutes to
complete the survey.
NOTE: If you have comments or concerns that require a
response don’t use this form. Instead please contact
Customer Service
Whaddya do when you go shopping?
Web browsing is different
No sense of scale
 No sense of direction
 No sense of location

Navigation isn’t just a feature of
a web site; it is the web site.
The overlooked purposes of navigation
It gives us something to hold onto
 It tells us what’s here
 It tells us how to use the site
 It gives us confidence in the people who
built it

Street signs and breadcrumbs
Web navigation conventions
Persistent Navigation
“The navigation is over here. Some parts
will change a little depending on where
you are, but it will always be here, and it
will always work the same way.”
Five essential nav. elements
Logical hierarchy
This site
Sections of this site
Subsections
Sub-subsections, etc.
This page
Areas of this page
Items on this page
Utilities should be less prominent
Every page needs a name; the name
needs to be in the right place.
Breadcrumbs
You are here
The trunk test
What site is this?
 What page am I on?
 What are the major sections of this site?
 What are my options at this level?
 Where am I in the scheme of things?
 How can I search?

If you’re interested

Perform the trunk test on these pages:
– http://autos.yahoo.com/usedcars/find.html
– Drugstore.com (supplements page)
– http://mitsloan.mit.edu/newsroom/spotlight.php
+
– 5 pages randomly generated by:
http://www.mangle.ca/random.php