II · Relationship

Hierarchy

Most of my complaints about design are about hierarchy. When I was first planning this book, I told myself I'd write ten damn pages just on hierarchy. Then I sat down to write them, and it fit in a paragraph.

Hierarchy is the order a screen is read in: who's first, who's next, who waits. Every element gets its role, its commanders and its soldiers. And there are only a few tools for setting that order: size, weight, color, position, and the space around each element. Bigger and heavier speaks first. A small gap ties elements together; a large one pulls them apart. Higher up usually gets read before lower down. That's all of it, and none of it is hard.

So why is it what I complain about most? Because it's never a skill problem. A screen has a hierarchy whether you set one or not. If you don't decide it, the screen decides by accident, and every element speaks at the same volume. It really comes down to whether you thought about it or not.

Here's what not thinking about it looks like, for ten pages.

<p class="repeat">Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy! Don't forget to think about hierarchy!</p>

<p class="repeat-last">Don't forget to think about hierarchy!</p>