Guide the reader’s eye

Print topic Print topic Previous topic  Next topic

Direct readers through the pages of your document. Add visual clues that show them which path to take.

If there’s a picture or other prominent element that has significant visual weight, this is the place where the reader’s eye typically enters the page. If there isn’t any outstanding element, most readers start in the upper left corner and look for headings and subheadings.

Once you’ve set up the starting point, guide the readers with the help of lines and white space, and with the help of the so-called Gestalt principles. In particular:

Use the principle of similarity to point out what works equally.

Use the principle of proximity to visualize what belongs together.

Use all elements consistently. This makes orientation easy once the reader has understood the general principle, and it generates a feeling of familiarity and confidence. Consistent design also looks much more professional than arbitrary design.

Expand /Collapse All Subsections

Use lines and white space purposefully

Use lines to guide the readers’ attention to a particular object.

Apply white space to separate objects that don’t belong together. Reduce white space to group objects that are related.

If space is limited, use lines to separate objects that don’t belong together and can’t be moved apart.

Use frames to group objects that belong together.

However, note that each line or frame adds more clutter to the page. If possible, use white space around a group, or add a light common background color to a group instead (place the group on a filled rectangle).

Tip:
Lines often don’t need to be complete to achieve the intended effect of guiding the eye. Using a short line instead of a long one can also help to avoid some clutter.

In the following picture, a large amount of white space separates two groups of content. A short line makes the distinction even stronger without adding much clutter.

In the next picture, a group is indicated by an incomplete frame.

If you can’t position related objects next to each other, use identical colors, shapes, sizes, or fonts to group them. The more things the members of each group have in common, the stronger the visual coherence is.

Find the right visual weight

Put the most visual weight on:

the objects that readers should notice first

things that you want to stress

Decrease the visual weight gradually while guiding the readers’ eyes from object to object.

As a result of our experience with gravity, we’ve developed a sense of where objects should “naturally” be. The visual weight of a big object near the top of a page is greater than the visual weight of the same object near the bottom of the page.

As rules of thumb, an object’s visual weight increases:

the closer to the upper left corner of the page that the object is positioned

the larger the object is

the more colorful and the darker the object is

In the first picture of the following example, the visual weight of the dark title section with its big letters is definitely too big. It seems to crush the section below. The layout isn’t harmonious.

In the second picture, the distribution is much more natural. The objects’ sizes, colors, and positions direct the reader’s eye systematically as intended from the picture > to the product name > to the document title > to the version number.

No:

Yes:


Visually support skimming

Align texts and objects to a design grid