Designing Interfaces, 2nd Edition

Chapter 4. Organizing the Page: Layout of Page Elements

Page layout is the art of manipulating the user’s attention on a page to convey meaning, sequence, and points of interaction.

If the word manipulating sounds unseemly to you, think about it this way. Film and television directors make their living by manipulating your attention on the movie or TV screen, and you are presumably a willing participant. It is the same for editors who arrange articles, headlines, and ads in a newspaper. If all this content were presented in a drab monotone, with no graphic emphasis to grab and move your attention, you would find it harder to extract meaning—what’s supposed to be important, and what’s not?

Even though it is ultimately an art, there is more rationality to good page layout than you might think there is. Some important ideas from graphic design are explained in this chapter introduction; each can guide you in the layout of pages, screens, and dialog boxes. We’ll talk about visual hierarchy, visual flow and focal points, and grouping and alignment—all predictable and rational approaches to page design. This chapter’s patterns describe concrete ways to apply those high-level concepts to interface design.

But the changeable, interactive nature of computer displays makes layout easier in some ways, harder in others. We’ll talk about why that’s true. Some of these patterns work as well in print as they do on-screen, but most of them would be useless in print—they presume that the user will ...