Billboard Design 101

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 curveOR

(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 hierarchyThis site

Sections of this siteSubsections

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