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 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: – –Drugstore.com (supplements page)Drugstore.com (supplements page) – + –5 pages randomly generated by: