Flow In Web Design

This article looks at the psychological concept of flow, how important it is to web design and the best way to design sites with flow in mind. Without this critical concept in place many users will get bored and their attention will leak away from your site resulting in a lost visitor.

The important thing to understand about flow as a mental concept is that the way it works is universal but different individuals feel and perceive it in different ways and situations. Some types of flow can be experienced by almost anyone (the plot pacing in a movie or the design in your website) but flow can also be a more personal experience such as writing a good passage of text in quick succession for a copywriter or hitting every note perfect while playing piano.

What is Flow?

The concept of flow was first introduced (academically) by a psychologist named Mihaly Csikszentmihalyi. He said there is a state of concentration that can be achieved when attention, motivation and situation are all optimised which come together to result in a large amount of productive effort. The concept of flow is very similar to modern sayings such as “in the zone” or “on a roll”.

Getting people into this mental state on a website you are designing is important as it will allow the user to look at your entire site and pick up whatever information you are offering and lead to a more likely conversion whether that be a sale, enquiry or just lasting visit.

Putting flow inside web design is all about making things as easy as possible for a visitor or potential customer and this can be looked at in several ways, goals, efficiency, feedback and discovery.

Goals

The first concept of goals is critically important for all websites and especially for retail. The flow of your site should take your user through relevant information and to your goal so deciding what that is should be your first step. After you have decided this you need to set up smaller goals for the user on each page. This could be something as simple as choosing whether to tick a box or as complicated as entering their payment details as long as the goal is clear the flow will be maintained.

Be sure to choose the correct copy for instructions, it should be clear what the person has to do but its easy to come off as sarcastic or condescending when giving orders so make it as friendly as possible. Also I recommend you keep a steady style throughout your copy instead of dotting in and out of formality.

Efficiency

Efficiency is also very important in a sites design. Incorporating basic navigation and optimising your sites performance will keep users from becoming bored with menial tasks such as click through and looking for the right page. As you may already know it’s wise to minimise the pages a user has to go through to complete the goal, modern web users get bored and click away very quickly if they have to go through 10 pages of terms before they even start a task.

A good example of efficiency in a page is expandable sections for people to read. Many modern websites use such functions (including Firebox and Dixons). These enable you to have the information ready for an interested user to view but hidden from a user who is not bothered. They could be customer reviews, related accessories, external links or related pages on your site.

Navigation should also be optimised for efficiency. Tajke a look at Amazon and Play’s sites. They have a massive amount of products and category pages yet they manage to successfully classify it into sectors and sub categories all of which look the same so users will know where to look immediately.

Feedback

It’s important for someone’s flow that they are encouraged, reassured and informed of their situation and success at reaching goals.

If you neglect to provide a user with feedback at some point they will begin to loose interest as the goal no longer seems relevant. The best way to give feedback to a user is to keep them up-to-date on their progress. A great example of this is percentage completion counters on video games. Very often when saving or loading a game you will be informed of how many % you have currently completed, very effective as a focus individual will always aim for 100%. You can do the same thing with forms on your site.

Discovery

Once a user has achieved the goals you have set them via maximum efficiency then they are going to want new goals and information or again their concentration and flow will be broken. This has become a well targeting area in web 2.0 and many sites have product or information boxes contain “related products” or “latest news about this tag”.

You must have new content for users to find and interact with or you will see negative effects on returning visitors and your site will eventually dry out.

Conclusion

There is a lot of work involved in designing for flow but it’s a compulsory step in your design process. The best test you can do is to see how fast someone who has not been involved with a site build how easy it is to navigate or what the goals of each specific page are. If they give you positive feedback it’s likely your site is accessible in a flow type way.