-
8/2/2019 Chap05 Visual Organization
1/24
Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
User-Centered WebsiteDevelopment: A Human-Computer Interaction Approach
-
8/2/2019 Chap05 Visual Organization
2/24
Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
Daniel D. McCracken
City College of New York
Rosalee J. Wolfe
DePaul University
With a foreword by:
Jared M. Spool, Founding Principal,
User Interface EngineeringPowerPoint slides by Dan McCracken, with thanksto Rosalee Wolfe and S. Jane Fritz, St. JosephsCollege
-
8/2/2019 Chap05 Visual Organization
3/24
Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
CreditsSlide 11: Courtesy of the Orpheus ChamberOrchestra.
Slide 13: Courtesy of Eddie Bauer.
-
8/2/2019 Chap05 Visual Organization
4/24
Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
5. Visual OrganizationIn this chapter you will learn about:
Four principles of visual organization and how to
apply themProximity
Alignment
Consistency
Contrast
-
8/2/2019 Chap05 Visual Organization
5/24
Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
Four organizing principles: proximitySee next slide for a tongue-in-cheek example:mindless application of alphabetic organization
Preview: the result is a hodge-podge as seen bythe user
-
8/2/2019 Chap05 Visual Organization
6/24
Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
Dans Clothing: the mindless version
-
8/2/2019 Chap05 Visual Organization
7/24Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
What groups would make sense?Womens clothes, Mens clothes, Kids clothes,Special sizes
July Specials, Sales on rainwear, Closeout on pinksocks
Store locations, Store hours
Open an account, Your account status
Check outEmail us.
-
8/2/2019 Chap05 Visual Organization
8/24Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
Dans Clothing: with sensible groups
-
8/2/2019 Chap05 Visual Organization
9/24Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
Avoid centered alignment for lines that
are of nearly equal length
-
8/2/2019 Chap05 Visual Organization
10/24Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
Lines are now greatly different in length:
reader knows its intentional
-
8/2/2019 Chap05 Visual Organization
11/24
Orpheus Chamber Orchestra: nice use of
proximity and alignment
-
8/2/2019 Chap05 Visual Organization
12/24Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
The principles are seen in combinationEddie 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
-
8/2/2019 Chap05 Visual Organization
13/24Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
-
8/2/2019 Chap05 Visual Organization
14/24Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
Dont be a slave to centered alignment . . .
-
8/2/2019 Chap05 Visual Organization
15/24
Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
. . . which is OK, but isnt this better?
-
8/2/2019 Chap05 Visual Organization
16/24
Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
Note the consistent layout in the next fewslides
-
8/2/2019 Chap05 Visual Organization
17/24
Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
One of the pages reachable from theprevious slide
-
8/2/2019 Chap05 Visual Organization
18/24
Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
One of the pages reachable from theprevious slide
-
8/2/2019 Chap05 Visual Organization
19/24
Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
How can we make this more interesting?
-
8/2/2019 Chap05 Visual Organization
20/24
Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
Use more contrast
-
8/2/2019 Chap05 Visual Organization
21/24
Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
Talk about boring!
-
8/2/2019 Chap05 Visual Organization
22/24
Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
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
-
8/2/2019 Chap05 Visual Organization
23/24
Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
Heres one way, but there are manyotherpossibilities
-
8/2/2019 Chap05 Visual Organization
24/24
Chapter 5: Visual Organization Copyright 2004 by Prentice Hall
Summary
In this chapter you learned:
Four principles of visual organization
ProximityAlignment
Consistency
Contrast
Some ways they can be applied
The message:There are principles; your can learn them and use them
