Information Hierarchy
A guerrilla guide to organizing your content
Design = Communication
Visual information hierarchy is one of the most important
principles behind effective websites
We c...
Visual Relationships

People see things based on relationships to each other
Basic Hierarchy Makes a Big Difference
Back To Our World: Getting Feedback
The typical process:
-

Take lots of notes
Sketch, dump all thoughts onto a page
No de...
A Cheat Sheet to Content Hierarchy
a) Overarching guiding principles

We help consumers make better buying decisions
Don’t...
A Cheat Sheet to Content Hierarchy
b) Organizing Your Content
1
The information
you want to present

A list of the key pie...
The squint test
Look at your design
– do the squint test
Does your information and
priorities match what the design
commun...
Example: V-Day Home

visually
hard to
process
Here is everything you might find interesting – arranged in
some visually ap...
Appendix: Good book
Appendix: Tools in your toolbox

Size
Color
Contrast
Alignment
Repetition
Proximity
Density & Whitespace
Texture
Upcoming SlideShare
Loading in …5
×

Guerrilla Training: Information Hierarchy

419 views
294 views

Published on

Guerrilla Training = short, fast training sessions on topics someone knows “in their bones” (easy to prepare, quick to attend). This preso is about simple rules that for clear, effective interactive design.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
419
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Guerrilla Training: Information Hierarchy

  1. 1. Information Hierarchy A guerrilla guide to organizing your content
  2. 2. Design = Communication Visual information hierarchy is one of the most important principles behind effective websites We can’t just dump all the information on a page: Most people are visual thinkers, and not data processors
  3. 3. Visual Relationships People see things based on relationships to each other
  4. 4. Basic Hierarchy Makes a Big Difference
  5. 5. Back To Our World: Getting Feedback The typical process: - Take lots of notes Sketch, dump all thoughts onto a page No deliberate approach Rely only on creativity =
  6. 6. A Cheat Sheet to Content Hierarchy a) Overarching guiding principles We help consumers make better buying decisions Don’t make me think* or do work** * Steve Krug
  7. 7. A Cheat Sheet to Content Hierarchy b) Organizing Your Content 1 The information you want to present A list of the key pieces of information you want visitors to see 2 The priorities Assign values (A, B, C) according to their importance to the visitor 3 The segments Consider what different groups of visitors may see
  8. 8. The squint test Look at your design – do the squint test Does your information and priorities match what the design communicates? If it does not, iterate on the design. If it does, you are good to go.
  9. 9. Example: V-Day Home visually hard to process Here is everything you might find interesting – arranged in some visually appealing way (creativity) Vs. I intend to communicate these pieces of information with these priorities (purpose)
  10. 10. Appendix: Good book
  11. 11. Appendix: Tools in your toolbox Size Color Contrast Alignment Repetition Proximity Density & Whitespace Texture

×