5. Visual Organization
Appearance Does Matter
Content Organization & Visual
Organization are closely related
People infer organization from
appearance
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
1
5. Visual Organization
In this chapter you will learn about:
Four principles of visual organization
and how to apply them
Proximity
Alignment
Consistency
Contrast
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
2
Proximity
Closeness
Related to the spacing of items
Items close together are perceived as
being related, those at a distance are
seen as unrelated
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
3
Alignment
Left, Right, Center, Justified
Placement relative to imaginary lines
Includes Indentation
Avoid mixing alignments on a single
page
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
4
Consistency
Related items look the same
Related pages look the same
Uniform
e.g. Same navigation bar on each
page
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
5
Contrast
Use of differences to
emphasize importance
Different items look different
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
6
Proximity
See next slide for a tongue-in-cheek
example: mindless application of
alphabetic organization
Preview: the result is a hodge-podge as
seen by the user
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
7
Dan’s Clothing: the mindless version
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
8
What groups would make sense?
Women’s clothes, Men’s clothes, Kid’s
clothes, Special sizes
July Specials, Sales on rainwear, Closeout
on pink socks
Store locations, Store hours
Open an account, Your account status
Check out
Email us.
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
9
Dan’s Clothing: with sensible groups
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
10
Alignment
Words, Symbols, etc. should
follow invisible or imaginary lines
Generally, Left or Right alignment
is best
Be cautious of Centered &
Justified
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
11
Alignmen
t
Avoid centered alignment for lines
that are of nearly equal length
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
12
Lines are now greatly different in
length: reader knows it’s intentional
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
13
Orpheus Chamber Orchestra: nice
use of proximity and alignment
The principles are seen in
combination
Eddie Bauer site (next slide) has
Horizontal alignment
Vertical alignment
Proximity, to group like items
Consistency, in type size and font
for links
Contrast, between SALE and most
else
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
15
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
16
Don’t be a slave to centered alignment . . .
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
17
. . . which is OK, but isn’t this better?
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
18
Note the consistent layout in the next
few slides
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
19
One of the pages reachable from the
previous slide
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
20
One of the pages reachable from the
previous slide
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
21
How can we make this more
interesting?
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
22
Use more contrast
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
23
Talk about boring!
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
24
This is a quiz! (Not really)
Look again at the previous slide.
How many ways can you improve it?
Can you put all four principles to
work?
Next slide shows one possible way
You can find lots of others
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
25
Here’s one way, but there are many
other possibilities
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
26
Summary
Four principles of visual organization
Proximity
Alignment
Consistency
Contrast
Some ways they can be applied
The message: There are principles; your
can learn them and use them
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
27