Improve Design and Usability With Compositional Flow

You can predict how a person will behave when they’re hungry. You can predict how a person will react when confronted with a dangerous animal. And, just like these examples, you can also predict where a person will look on a site screen.

Like other human behaviors (which are 93% predictable, according to Northeastern University), eye movements on a site can not only be predicted, they can also be influenced. Designing with a compositional flow and building a visual rhythm allows you guide your users through your site, pointing out the areas most helpful to them, and showcasing the features and products you want them to see.

More than other industries, eCommerce retailers should take the benefits of compositional flow seriously. A solid compositional flow gives your site:

An increase in user interactions with calls-to-action, promotions, new features, etc. More control over visual hierarchy Better navigation that’s easier to use An appearance conducive to better usability A more appealing aesthetic appearance

In this article, we categorize the elements of compositional flow into three main areas: scanning patterns, focal indicators, and rhythm. Here, we’ll go through each one individually, teaching you the best practices for implementing them in your design.

Scanning Patterns

Outside of the world of web design, a lifetime of habitual reading has trained our eyes to start in the upper left hand corner, and proceed left-to-right, up-to-down. In cultures that read right-to-left, this pattern is just as ingrained, only mirrored.

You can see the implication of this phenomenon most clearly in the Gutenberg Diagram.

The Gutenberg diagram divides the screen into four quadrants of different significance. The two most visually active areas are the upper-left and lower-right — these are likeliest to be seen by users. Next is the upper-right, the strongest of the fallow areas. Last, the “weakest” area visually is the lower-left.

This is more than just dry theory. Nearly every site on the web is designed under these parameters, whether they know it or not. The company logo is almost always in the upper-left, the most significant screen area. Calls-to-action are typically placed in the bottom-right. Header navigation menus take advantage of the attraction to the top, with the usually-optional Search field in the upper-right.

However it’s not as simple as it may seem, or else every site would be a cookie-cutter of each other. The Gutenberg diagram just describes the inherent resting behavior. You can deviate from the standard while still keeping the sites “flow.”

In addition to direct focal indicators, which we discuss below, the screen’s overall layout can create scanning patterns to guide the user’s site, like floodways managing rainwater during a flood. Eye tracking reports from the Nielsen Norman Group have revealed two main patterns: the F pattern and the Z pattern.

The F Pattern applies best to browsing. The F refers to the eye-tracking routes: the eye moves straight from left-to-right as it scans key points of interest. Hitting the right side, the eye returns to the left, then down until the new line, where it repeats the above pattern. Because users will likely only actually read half your written content, this pattern was developed for an optimal user experience, so readers can quickly browse for what they’re looking for.

When implementing the F Pattern yourself, you’ll want to create clear rows and columns using borders or spacing. This creates the grooves that encourage this style of scanning. The left side sometimes includes a vertical navigation menu, exploiting the lefthand stem of the F shape. On the right side, the user hesitates for a quick moment before returning to the left side of the screen — this makes the right side great for secondary information, such as promotions or item showcases.

Amazon does this well, separating its product suggestions by horizontal lines, clearly defined by spacing and heading titles. The company also makes use of the right gutter for secondary promotions.

The Z Pattern is used for more spacious screens, especially home and landing pages. Like the F Pattern, the user starts at the upper-left and goes straight across to the right. However, instead of dropping directly to the line below, their line of sight falls all the way to the bottom before moving across horizontally.

The Z Pattern is frequently used for home pages on both eCommerce and non-commercial sites. The important top line is often a navigation menu, and the center screen is filled with large images or photo carousels. After the center image, the bottom line is usually occupied by a string of promotions, or goes directly into the product catalogue.

Urban Originals has a by-the-book Z Pattern, with a top horizontal navigation menu, central screen-wide photo carousel for showing off products and promotions, and a strong finish with secondary promotions on the bottom line — the most important of which taking the prized lower-right position.

Now, let’s take a look at the elements that fit inside these scanning patterns.

Focal Indicators

With a basic flow set up, you can add specific indicators to reinforce, or resist, the current. These are the visual details that work together with the greater picture to subtly guide the user on where to look.

1. Size — As a rule, the largest elements on your screen will attract the most attention, the smaller ones the least. That’s why you often see the word “SALE” scrawled in enormous typography across the center of the screen, while the legal information is so small it’s hardly legible.

2. Space — Empty space is a more subversive, but equally effective, means for pushing and pulling attention. The more empty space around an item, the more noticeable it is. This means you should leave a call-to-action set off from the rest of the page, but group together similar elements like product category titles.

3. Color Contrast — While some colors are flashier than others (we’re thinking of you, red), you can heighten the effect of any color by pairing it with its contrast, which really is a web design principle. For example, if your background is blue, have your right-side elements in orange. This ensures they’ll be seen, urging the reader to complete their eye movement fully to the end.

4. Leading Lines — Skilled photographers know the effect of leading lines in their compositions: it’s a point of fact that eyes tend to follow lines. You can use this to your advantage by setting your own lines to direct users through the site. These can be overt, thick black lines underlying your horizontal rows, or more subdued lines set in the background image.

5. Eyes in Images with Faces — Another scientific fact is that humans are likely to look where other people or animals look. If you have an image, either a photo or drawing, wherever the figure’s eyes look, your reader will be tempted to look. This can be an effective means to control your reader’s sight, but also to prevent accidentally disrupting the flow with a poorly placed image.

6. Barriers — If you’re going for a more regimented and structured site, place a vertical line on the right side of the screen to indicate to your user that it’s time to stop and return to the left.

7. Arrows — The most aggressive — and blunt — way to influence site is to place arrows in your composition. This could be traditional arrows, sideways triangles, or something more creative, such as replacing one side of a window with a point. Arrows are powerful for controlling flow, so make sure you don’t misuse them. Just don’t confuse for them with the popular UI pattern icon that means, “click for more.”

Now that we’ve covered the ingredients to good flow, let’s talk about the best ways to mix them all together.

Rhythm

As with music, visuals can produce a rhythm that engages and hooks the viewer. Based on which elements you use, where you place them, and what they look like, you can create a screen that keeps the user always looking forward, the visual equivalent of a satisfying, toe-tapping beat.

Not only is rhythm recommended for stimulating eye candy, it’s also practical. If you establish organized patterns, your users more quickly understand how the whole system works and be able to find more easily what they’re looking for. Conversely, a lack of rhythm creates a confusing and chaotic interface that’s difficult to use.

In Smashing Magazine, Steven Bradley describes his three types of rhythm:

1 Regular Rhythm — The elements, as well as the intervals between them, are predictable. We see regular rhythm everywhere, i.e., product photos on the home page are all the same size, and the borders between them are always the same width.

2. Flowing Rhythm — Like a regular rhythm, the patterns are predictable, but enjoy a bit more of a creative flow and tend to defy limitations. Utilizing curvy lines and alternating sizes, a flowing rhythm is not typical for eCommerce, except on some edgier and experimental home pages.

3. Progressive Rhythm — The elements escalate in size or frequency to build up to a progression (or deescalate to a regression). While you can create a progressive rhythm using the main elements like images, you can also use background elements, such as secondary shapes or color gradients.

As you might have guessed, repetition is the key to creating rhythm, although how you do it is what creates the style. In other words, what you choose to repeat and what not to repeat will affect the results. Do you repeat the type of image and its size? Do you repeat the type of image and change the size? Do you change both the type and size of the image?

In another post by Steven Bradley, this one for Vanseo Design, he explains the best uses for repetition.

First, try to repeat certain elements of the logo. Color, font, or even a characteristic icon can build a strong theme to unify the entire site, and does wonders for brand recognition.

Next, color and typography should be repeated according to their usage. For example, all Heading 1s should be the same, and all Heading 2s should be the same, but Heading 1 and Heading 2 should be different from each other.

Last, you can repeat any aesthetic themes that further your goals. This is especially effective if its a theme from the logo, mentioned above.

If you repeat elements in a way predictable enough to establish a pattern, you’ll create a interface that’s far more user-friendly, and visually stunning as well.

Conclusion

Remember that the three techniques for compositional flow — scanning patterns, focal indicators, and rhythm — all work together, not separately. The focal indicators are the pieces that make up the scanning patterns, and the rhythm is the way they’re put together. Bring all three together in harmony to give your screens a dynamic magnetism.

Have any questions, opinions, or advice of your own? Add your thoughts in the comment section now.