An important aspect of many designs is how the eye moves over the page, and the direction it takes – this is also sometimes referred to as ‘flow’. How does your eye move across the page? Do your readers know exactly where to look next? Is the direction that their eye takes logical?
Studies have dissected the exact nature of our eye movement habits and the patterns our eyes trace over when viewing specific things. Have a look at this eye tracking study by Nielsen Norman Group that tracked people’s eyes while viewing web pages to see their pattern of consumption. Check out the heatmap results below.
The studies proved that a common pattern for the eye to take is an “E” or “F” shape when it comes to web pages, so placing your top content to the left of your page, or along the top is your best bet. Another common pattern that the eye traces over is a “Z” shape, as shown below.
Overall, the general idea is that the eye naturally travels from the top left corner to the bottom right corner, in a ‘sweeping’ motion. This theory is best explained in depth by The Gutenberg Diagram, and you can read up about the nitty-gritty of it all over here.
Rather than designing 100% by these patterns, though, try to adapt your designs’ flow and direction on a case-by-case basis. Just keep in mind that the eye gravitates to the top left of a page and winds its way down from there.
Let’s look at an example that has a distinct and effective use of direction.
This design by Atelier Martino&Jaña directs the eye in a very fluid and organic way, by weaving the text along the curves and shapes of the image. The title and date stand out to us first (thanks to a little hierarchy) and then our eyes are left to flow through the piece as we read the information and take in the photograph.
So, in short, this piece’s flow and direction encourages viewers to read and consume the type while simultaneously taking in the image.