Share On:

Does My Website Have Compositional Flow?

An optimally designed website will have a certain level of flow to it that allows users to easily navigate it properly and yet some sites seem to not be structured this way leaving business owners wondering does my website and compositional flow and if not, do I need it?

For those business owners looking to make adjustments to an existing site or even re-vamp their site in an effort for maximum effectiveness this is a good topic to delve into as compositional flow is an underlying important principle of design that can help, or hinder the effectiveness of a site.

The concept of flow

Flow, by definition, is to move along or out steadily and continuously in a current or stream. When applied to the realm of web design or app design, the flow is considered how users absorb what they are looking at and then how easily they move to the next section.

This idea is included in a variety of ways from basic site navigation to the presentation of the proper information at the right time to allow someone to make a decision on whether or not to make a purchase.

Compositional flow is what we consider the path a users eye is led when absorbing that design. Where does the eye travel to first? From there where does it go second, third and so on.

If you have a particular goal in mind for your website then ideally your compositional flow will direct users to the first thing they need to see and then the second, continuing on until they reach the decision point that you want them to. For those sites with bad compositional flow, it is like damning up a river – effectively blocking the flow and forcing users to try and make their own way.

Is there flow without design?

Here is a great question, is there flow without design? After all, most adults when presented with a book understand how to read it, right?

While that is true, there are also natural tendencies that take place with most people that can affect where the eyes will travel. Various studies have been made, which seem to now be reinforced greatly by an online user base whose attention spam shrinks daily.

For people whose primary language is read left-to-right, such as English, there are a few typical patterns of flow such as following an “F” or “Z” shape, or travelling from left-to-right while slowing descending. These are all natural patterns for the eye to travel. However, when you add design elements, these patterns typically disappear in the face of the elements that now direct the flow.

What we can take away from this is the option to add design elements to these natural patterns to help control the eye movement in a more natural manner.

Compositional Flow basics

One of the easiest ways to implement compositional flow into a design is through the use of storytelling. This is the concept of telling a story by presenting information in the right order. You do this by using a combination of visual weight and visual direction to make it simply and obvious as to where a user should look next.

When you overlay that with one of the natural flow patterns a user can quickly and easily understand where to go; this creates a sense of happiness subconsciously for easily figuring out the flow.

  • Dominant element – This is a starting point for flow and provides the entrance for the user into the composition. Oversized images, bold, large or colored text, bullet points and the like are common dominant elements.
  • Directional cues – These cues provides the directional information the eye needs to follow the design. Commons cues include arrows, pictures of people looking in a specific direction, diagonal or directional lines, etc. -à can really help get people where you want.

Along with cues you can add elements to the design to block the direction the eye is moving and create open pathways via empty space to allow movement between elements.

You need to be consistent!

Flow consistency is critical and can pop up anywhere. For example, when you have a data entry box or search form the best position for a Search or Submit button is after field. Why?

The natural flow is to type and then click submit because the eye following the text you entered so the button placement is more easily seen at that point rather than above, before, or even below the box.

By being consistent with the flow throughout the entire design and using proper movement from one spot to the next the rhythm of the site will become steady and predictable. While some designers want to shy away from predictability, in this case the predictability is very useful to ensuring users are moving through your site the way you want.

The bottom line

There is a lot a designer can do to control where people look when viewing a webpage and exactly what message they are getting and when during the presentation. You want to ensure your website has compositional flow because there is a priority in which the user needs to receive the information a site has to ensure the optimal result or goal you have for your site.

Share Article