Billboard Design 101

1
Billboard Design 101
2
(No Transcript)
3
(No Transcript)
4
Create a clear visual hierarchy

• The more important something is, the more
  prominent it is.

5
(No Transcript)
6
Create a clear visual hierarchy

• The more important something is, the more
  prominent it is.
• Things that are related logically are also
  related visually.

7
(No Transcript)
8
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 whats part
  of what.

9
(No Transcript)
10
It happens so quickly that the only time were
aware were doing it is when we cant.
11
(No Transcript)
12
(No Transcript)
13
Conventions are your friends
14
(No Transcript)
15
(No Transcript)
16
Break with convention ONLY when

• (a) It introduces no learning curve
• OR
• (b) It adds so much value that its worth a small
  learning curve.

17
Other guidelines

• Break up pages into clearly defined areas
• Make it obvious whats clickable
• Keep the noise down to a dull roar
• Busy-ness
• Background noise

18
(No Transcript)
19
(No Transcript)
20
Animal, Vegetable, or Mineral?
21
How many clicks should it take to get to any page
on the site?
22
Wrong question
23
A more useful question is How much thinking is
required to get from here to there?
24
(No Transcript)
25
(No Transcript)
26
(No Transcript)
27
(No Transcript)
28
On NOT writing for the Web
29
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

30
Happy talk must die
31
(No Transcript)
32
(No Transcript)
33
(No Transcript)
34
Instructions must die
35
(No Transcript)
36
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 dont use this form. Instead
  please contact Customer Service

37
Whaddya do when you go shopping?
38
Web browsing is different

• No sense of scale
• No sense of direction
• No sense of location

39
(No Transcript)
40
(No Transcript)
41
Navigation isnt just a feature of a web site it
is the web site.
42
The overlooked purposes of navigation

• It gives us something to hold onto
• It tells us whats here
• It tells us how to use the site
• It gives us confidence in the people who built it

43
Street signs and breadcrumbs
44
(No Transcript)
45
(No Transcript)
46
Web navigation conventions
47
(No Transcript)
48
(No Transcript)
49
(No Transcript)
50
(No Transcript)
51
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.

52
Five essential nav. elements
53
Logical hierarchy

• This site
• Sections of this site
• Subsections
• Sub-subsections, etc.
• This page
• Areas of this page
• Items on this page

54
(No Transcript)
55
(No Transcript)
56
(No Transcript)
57
(No Transcript)
58
(No Transcript)
59
Utilities should be less prominent
60
(No Transcript)
61
Every page needs a name the name needs to be in
the right place.
62
(No Transcript)
63
Breadcrumbs
64
(No Transcript)
65
You are here
66
(No Transcript)
67
(No Transcript)
68
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?

69
If youre 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