Designing Interfaces, 3rd Edition

Chapter 4. Layout of Screen Elements

Layout is defined as the particular way elements are arranged. In the case of interface design, these elements are the informational, functional, framing, and decorative parts of the screen. Thoughtful placement of these elements helps to guide and inform your users about the relative importance of the information and functions.

No matter what size screen you are designing for—web, kiosks, or mobile—careful consideration of the placement of content is key to helping the user understand what they need to know and what to do about it.

Often you will hear the term “clean” to describe a screen-based design. A clean layout follows the principles of visual information hierarchy, visual flow, alignment through a grid, and adheres to Gestalt principles.

In this chapter, we define these principles that inform your users what you want them to know and what you want them to do about it.

The Basics of Layout

This section discusses several elements of layout: visual hierarchy, visual flow, and dynamic displays.

Visual Hierarchy

Visual hierarchy plays a part in all forms of design. The most important content should stand out the most, and the least important should stand out the least. A viewer should be able to deduce the informational structure from its layout.

A good visual hierarchy gives instant clues about the following:

• The relative importance of screen elements

• The relationships among them

• What to do next

Visual hierarchy in action

Take ...