Designing for Flow in Online Environments

by Sysco LABS Blog 22 June 2016

What is Flow?

Flow, according to Hungarian psychologist Mihaly Csikszentmihalyi is “the holistic experience that people feel when they act with total involvement”.

It is a state of “active absorption” in which a person “is fully immersed in a feeling of energized focus, full involvement, and enjoyment in the process of the activity” (Wikipedia).




According to Csikszentmihalyi, the flow state is only experienced if the user is highly skilled in a particular activity, and at the time the activity takes place, the level of challenge the activity affords is equal to this user’s skill.



Source: Blue Planet Photo

Steven Kotler, author of The Rise of Superman: Decoding the Science of Ultimate Human Performance states that being in flow seems to unlock or heighten your capabilities so much so that you appear to be a superhuman version of yourself.


So Why is Flow Important?

From a user perspective, a “flow” state is intrinsically an altogether rewarding experience. By understanding it’s triggers, developers can attempt to create more enriching and fulfilling online experiences for their users.

It has been observed that online environments that best induce this state are those that are built similar to a MUD (Multi User Dimension/Dungeon) (Hoffman and Novak, 2007). MUDs are multi-player, real time virtual worlds that combine elements of role playing games, interactive fiction and online chat, and are usually text based (but can also be in 3D form). The highest level of involvement in MUDs take place when the environment constructed is not too simple, but also not too complex (Voiskounsky et al, 2004).




It is believed that a certain level of “flow” can be achieved even on regular sites provided that all requirements for flow are met. Multiple studies have been carried out that attempt to understand the flow experience in online environments.

A good example of an experience that mimics the characteristics of flow occurs when you browse sites like Facebook. You feel the same sense of time distortion and complete absorption, and you become less aware of your surroundings and your self.




Tapping into this user behavior therefore, can offer some hefty advantages. By building atop the API of products that induce such a state increases your chances of creating a “stickier” product (eg; games on facebook which are almost always social), and allows you to offer a higher value proposition for your consumer base. By merging, you are also able to leverage an existing product’s customer bases.


Designing for “Flow”

Hoffman and Novak (1996) defined flow in online environments as “the state occurring during network navigation” which is:

  1. Characterized by a seamless sequence of responses facilitated by machine interactivity
  2. Intrinsically enjoyable
  3. Accompanied by a loss of self-consciousness
  4. that is self-reinforcing

As described above, flow occurs when the interactions between a user and their computer are seamless and devoid of interruptions, users carry out the activity because it is enjoyable and does not require any external incentive, and users have a distorted sense of time and place.

When optimizing for “flow” within a user’s experience of the real or virtual world, designers need to focus on creating positive experiences that deeply involve users, and seek ways to reduce interruptions that interfere with this experience.

For example, when exploring a website, lengthy response times, inconsistent navigation cues, a cluttered page layout tend to “break” flow. Most of the practices boil down to making the technology as inconspicuous as possible.




Trevor Van Gorp, author of ‘Design for Emotion’ outlines the basic website design principles that will help induce flow:

Clear navigation – Visited link indicators, clear titles etc

Immediate feedback – Feedback should be offered on all user actions wherever possible eg; download bar that provides status of download

Balance between skill and challenge – The complexity of your site needs to be tweaked based on who your audience is, and their objectives. By complexity, we do not mean that the site is frustrating to use due to poor design, rather, that it offers a richer and fuller experience. The point where complexity meets skill, is where flow emerges.


Flow and the Future of the Web

The web formerly supported a model where users consumed what was published on the platform. Platforms react and shape themselves based on user behavior, like google’s search or facebook’s content algorithm but it has also evolved into a model that allows users to actively shape their experiences online and collaborate with others. In Meta-design, designers create socio-technical environments for users who in turn have the power to shape a platform according to their collective needs.

By creating engaging, organic and seamless experiences for users flow encourages engagement and fosters this growing culture of participatory design, which is an important element if we’re to create systems that do not lock users into a set of behaviors but instead, grows and evolves as the community evolves.

In the near future, AmI (Ambient Intelligence) will offer more avenues for developers to engineer flow experiences into a user’s everyday life. The Information Society Technologies Program Advisory Group (ISTAG) uses the term ‘Ambient Intelligence’ to describe a future where “people will be surrounded by intelligent and intuitive interfaces embedded in everyday objects around us, and an environment recognizing and responding to the presence of individuals in an invisible way”.

In an invisible way. For flow to materialize in any context, the artefact (in this case, the technology) needs to live outside the frame of the user’s experience. By being inconspicuous, the technology will then allow the user to focus completely on his or her activity, which will then possibly trigger the flow state.





“Flow Experience in Participatory Designed Online Environments”, Master Thesis by Lauri Laineste

“Flow (psychology)”, Wikipedia

“Measuring the Flow Construct in Online Environments: A Structural Modeling Approach”, Novak & Hoffman

Minimalism and the Paradox of Choice



Leave a Comment