Flow for UX Design: The Flow Spot Diagram
In 1990, Mihaly Csikszentmihalyi wrote a paper called “Flow: The Psychology of Optimal Experience” that changed Game Design Thinking forever.
It introduced a conceptual framework around the idea of flow, a mental state of total concentration and absorption caused by a player’s game challenge being met in perfect proportion with the player’s abilities. Csikszentmihalyi presented this now-classic diagram to describe this state, created by the balance between Challenges and Skills:
Flow is easily extrapolated to other fields of study as indeed a psychological Flow state can be observed in almost any pursuit, from sports and games to writing, gardening, and even conversation. And of course there is a ton of material out there on how Flow state can be understood and designed towards using a UX Design framework (see the end of this article for a Reading List!).
Most of these articles focus on setting clear goals for the user, reducing noise outside of those goals, and providing immediate feedback for user actions in order to keep users focused on a task and feel supported and effective when completing it. This is very important for creating Flow. But one thing I haven’t seen in any of the available material online is — what does the diagram of the Flow State look like in UX Design?
Is it the same as Csikszentmihalyi’s OG Flow state, showing Challenge increase in proportion to Skill?
I propose an alternative.
In Game Design Thinking, we design tough choices for our players where the right choice is not necessarily obvious, and choices may be trade-offs…or even fatal mistakes.
UX Design Thinking is at complete cross-purposes to this. UX Designers want to provide users extremely easy decisions which demand no challenge and require no skill.
So to really understand Flow for UX Design, we have to re-imagine the tension which creates a Flow state. It is no longer Challenges vs. Skill: it is Complexity vs. Functions.
And we don’t have ever-increasing Challenges creating that big diagonal channel; what we really have is a sweet spot, a perfect tension between the complexity of a task and functions available to the user to complete it, called affordances in game design parlance.
It’s not a Flow Channel; it’s a Flow Spot.
This is my proposal of what a diagram Flow looks like for UX Design:
One of the original tenants of Flow was that designers needed to craft ever more challenging situations as player skill increased, or the player would drop out of Flow. For games, this is true.
Flow in games, in sports, and in other pursuits can grab us for hours. Flow in a consumer or enterprise software cannot — because you can’t arbitrarily ramp up the difficulty of your workflow, and because you don’t want to. You have at most a few minutes of Flow State to work with. This is a critical difference between Game Design Thinking and UX Design Thinking, and it’s an innate limitation of leveraging Flow for UX.
So, what goes in the middle of the Flow Spot?
In the center of the target, map all the major pain points and points of joy in your user workflow like a scatter plot. This is going to form what is essentially a non-chronological journey map.
Flow for UX is really, ultimately, just a re-framing of a Journey Map, with Anxiety and Boredom as boundary conditions. Journey Maps usually show negative emotional beats low on the graph and positive ones high up, but our scatter plot will be inverted from this model.
This allows you to rethink events in the user’s journey as moments of complexity as compared with the power the user has in that moment. Can you reduce the complexity of the task, scaffold the task better with clearer goals (or other tricks — see the Reading List)?
For those very low-Complexity moments the user blows by without even thinking (the one above is labeled “Opportunity”), can we add in a little bit more Complexity or interest for the user to make that moment more meaningful to them? This can often take the form of analytics, insights, learning moments, tips, and even share or social functions.
You can even expand the Flow Spot diagram to chart multiple workflow segments separately if those segments each have a different Complexity vs. Functions characteristic. We could call this a Flow Spots diagram. As Malcom Gladwell relates in his famous 2004 TedTalk, Choice, happiness, and spaghetti sauce, “There is no perfect pickle. There are only perfect pickles.”
There may be not one sweet spot for your Journey Map on the Flow Spot diagram, but many — each representing a different use case or persona, with different needs, expertise, and limitations:
I hope this new flavor of Csikszentmihalyi’s Flow diagram made specifically for UX Design helps you in your own UX Process!
Don’t forget to check the Reading List, below, to read up on really great tips for creating Flow experiences, where those experiences are most appropriate, and more.
Flow in UX Design Reading List:
7 steps to achieving flow in UX design by Elaine Tran
Designing For Flow by Jim Ramsey
Flow Experience in Participatory Designed Online Environments by Lauri Laineste
Beyond Task Completion: Flow in Design by Dana Chisnell
Design for Emotion and Flow by Trevor van Gorp
