Information HierarchyA guerrilla guide to organizing your content

Visual information hierarchy is one of the most important principles behind effective websites

We can’t just dump all the information on a page:

Design = Communication

Most people are visual thinkers, and not data processors

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 deliberate approach- Rely only on creativity

=

A Cheat Sheet to Content Hierarchy

We help consumers make better buying decisions

Don’t make me think*

* Steve Krug

or do work**

a) Overarching guiding principles

The information you want to present

The priorities The segments

b) Organizing Your Content

1 2 3

A Cheat Sheet to Content Hierarchy

A list of the key pieces of information you want visitors to see

Assign values (A, B, C) according to their importance to the visitor

Consider what different groups of visitors may see

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.

The squint test

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)

Appendix: Good book

Appendix: Tools in your toolbox

SizeColorContrastAlignmentRepetitionProximityDensity & WhitespaceTexture