by JuliannaKunstler.com
When someone lands on a page what do you want that person to do?
Where do you want them to look?
What information do you want your viewers to notice and in what order?
Ideally, you want people to see your most important information first and your next most important information second - hierarchy.
Compositional flow determines how the eye is led through a design: where it looks first, where it looks next, where the eye pauses, and how long it stays.
Eye tracking involves measuring either where the eye is focused or the motion of the eye as an individual views a page.
As a field of study, it came into its own in the 1980s, but observations were being made about how the eye moves across a page as early as the 1800s.
Here are the popular layout scanning paterns that reflect how people look at a page.
The Gutenberg Diagram suggests that people are subject to a ‘reading gravity’ that goes directly from the top left of a page to the bottom right.
The Gutenberg diagram describes a general pattern the eyes move through when looking at evenly distributed, homogenous information.
The pattern applies to text-heavy content. Think pages in a novel or a newspaper.
The pattern suggests that the eye will sweep across and down the page in a series of horizontal movements called axes of orientation.
Each sweep starts a little further from the left edge and moves a little closer to the right edge. The overall movement is for the eye to travel from the primary area to the terminal area and this path is referred to as reading gravity.
Important elements should be placed along the reading gravity path. For example placing logo or headline in the top/left, an image or some important content in the middle, and a call-to-action or contact information in the bottom right.
Designs that follow Gutenberg are said to be in harmony with natural reading gravity.
As soon as you create a visual hierarchy the diagram no longer applies. Keep this in mind with the other patterns described below.
The main difference with the Gutenberg diagram is that the z-pattern suggests viewers will pass through the two fallow areas. Otherwise they still start and end in the same places and still pass through the middle.
As with Gutenberg a designer would place the most important information along the pattern’s path.
The z-pattern is good for simple designs with a few key elements that need to be seen.
F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with a big amount of content. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials, etc.
As with the other patterns the eye starts in the top/left, moves horizontally to the top/right and then comes back to the left edge before making another horizontal sweep to the right. This second sweep won’t extend as far as the first sweep.
Additional sweeps move less and less to the right and for the most part after the second major sweep the eye sticks close to the left edge as it moves downs.
The f-pattern suggests that:
These patterns describe where the eye naturally goes when there’s a lack of hierarchy in the design.
Visual hierarchy will override any of these 3 patterns. The eye will follow where the hierarchy leads it.
Compositional flow determines how the eye is led through a design: where it looks first, where it looks next, where the eye pauses, and how long it stays.
You want people to be presented with the right information at the right time, and one way to do that is to control the flow of your composition.
A design with good flow will lead the viewer's’ eye throughout the layout, moving from element to element with ease. You can inflience this by using a combination of type, line, contrast, color, and photography
Gather all your content ahead of time
Make sure you have all the text (Draft text is better than no text.)
Pair imagery with your text. (Make sure they work harmoniously together.)
Organize your content.
What are the key information points that need to be displayed: graphics, photos, text, bullet points, etc. ?
Now, use the principles of verbal and visual flow to layout your page:
First, pick an easy-to-read font for your main content. Make sure the vertical space between the lines of text isn’t too cramped or too wide.
Avoid extra wide or narrow column widths for your content, it impedes readability.
Make sure headlines and links are consistently styled.
Make sure you have a clear visual hierarchy where the headlines are the largest type, followed by subheads, then body copy. You can also add in some quotation styles and bullet points to break up the text blocks.
Keep layouts consistent from one page to the next (use the same fonts, type sizes, column widths, etc.)
Understand and organize your content so that related items are closer together.
Make sure to have plenty of white space or padding around elements. This gives the viewer a place for the eyes to rest.
Generally, visitors will gravitate towards the most prominent visual on the screen, often a photo but sometimes a headline or call-to-action.
Imagery should be selected carefully so that it enhances the message you are trying to convey, not distract from it.
Remember your goal is to get visitors to your call-to-action. Ask yourself, “what do I want my users to find first”? Then make it easy and quick to act on it.
Use the direction of images to control the speed and direction of flow.
Create barriers when you want to reverse the eyes’ direction. (For example, you can use color blocks or whitespace to guide the viewer around.)
Create open paths to allow easy movement through your design.
Use contrasting colors and shapes to pull the eye where you want it to go.
