Flow, Mastery and Ease-of-Use

Recently the web design community has been eating up the secrets of game design. The Gamification trend merely borrowed simple game mechanics, from badges to progress bars. But now designers are looking more closely at core game design principles like design for flow and mastery, blending them with our old friend, ease of use. But how many of these techniques are relevant for more everyday sites, like ecommerce and productivity apps?

Flow is a concept popularized by Mihály Csíkszentmihályi. It describes the ineffable state between boredom and excessive difficulty in which time disappears and you are pleasurably lost the execution of a task. In the game design community, it’s a well understood and desirable state that most designers strive to create.

Because this state is so desirable, both for productivity and for pleasure, many application (web and mobile) designers are starting to try to design for it as well. This is a daunting task. First, all humans are different. This means in identical situations I hit flow at a very different moment in the ease-to-difficulty continuum than you do. Secondly, flow is extremely easily to disrupt. Have you ever been in the middle of writing where words are finally flowing out, then been interrupted by a cat/child/roommate/coworker jumping into your lap? Did you lose the precious thread? Then you know exactly what I mean, as does the cat/child/roommate/coworker who got the brunt of your wrath. Thirdly (and perhaps most importantly) the application designer has far less control than game designers over challenge and skill, the two key levers in creating flow.

A more straightforward goal is to create the conditions for flow and to design to minimize interruptions. Designing for ease-of-use may be more than difficult enough, and designing for flow an unnecessary extra struggle. Just because something is wonderful doesn’t mean everything should have more of it (e.g. think of salt). For applications where users spend a lot of time in the app, designing for mastery is the better design goal.

Appropriateness of Flow

Consider your application. Is it used daily? Hourly? monthly? When it is used, how long does a session last? Flow can only be achieved in situations where mastery of the toolset is possible, and the user need not consciously think about what they are doing. They must be using the tools repetitively until they have acquired such a skill that allows them to work as if the tools were an extension of their body.

Most sites that are used irregularly, from shopping for cars to choosing a gym, will never be mastered by the users. Instead, they will be used only briefly to accomplish a goal. If you are a travel site aimed at consumers, it’s unlikely they are going to use your site over and over until they reach a zen-like state while doing price comparisons. Exceptions exist, sure. There may be the travel junkie who runs the flight costs endlessly and tweaks to find the cheapest ticket. But you probably want to optimize your site for the family planning the annual August outing first. Even that travel junkie is probably going to be plenty happy just to find a cheap ticket to Belize rather than luxuriate in manipulating the flight from Wednesdays to Fridays just to watch the prices fluxuate.

Conversely, word processing, numbers crunching, and alien shooting are all activities where mastery of the tool set increases the user’s effectiveness and enjoyment when using the tool. In such cases, flow is not only possible but desirable.

Ease-of-use

You have been hearing about ”ease-of-use” for ages under the rubric of usability. For most web applications, from ecommerce to online banking, this is all you need. For applications where you need more than simple usability, such as photo editing or blogging tools, you still must get ease-of-use right. Even in games, where some tasks should be hard to accomplish in order to create pleasurable challenge, designers still make the fundamental usage easy. For example: seeing what level you are on, how many lives you have, how much gold/points/reputation you have is all bundled up in the HUD. HUD, or heads up display, is the bar that keeps your status in front of you in the same place all the time, so you can flick your eyes over to it to mark progress. This is a paragon of ease-of-use, and many productivity apps would greatly benefit from a HUD.

Mastery

Mastery is a common game concept; it’s what makes much of game play fun. Everyone knows that amazing moment when you suddenly are riding your bike perfectly balanced, playing a song on the guitar without watching your fingers fret, or typing your thoughts without trying to remember if you hit the Y with the right or left finger. You feel so powerful and in control! This is mastery.

In games, that elation is doled out across levels. As you master one complicated set of patterns in Dance Dance Revolution, you are spoon fed the next harder one, so each step of mastery releases its own high. Flow occasionally happens just as you are about to be gobsmacked by the next level.

To design for mastery, you have to map the user journey, and consider how to move them from one stage to the next.


Image 1: I have always loved this diagram from Amy Jo Kim‘s classic Community Building on the Web : Secret Strategies for Successful Online Communities

Such a long user journey is not needed for every site. If you sell curtains direct to consumer, you may just need people to find and buy a curtain. Novice is as far as any user has or wants to go.

But if you sell curtains to interior decorators, you definitively want to figure out how to move them from novice to regular. Every site has its own user journey to plot out. Mastery is critical if “regulars” or “engagement” are in your strategy deck.

Once you know what the stages of the player (user) journey are, you can plan for mastery. For example, for Facebook mastery might be about moving users from novice to regular. Facebook wisely makes sure you are connected to your social network (finding people to connect to is hard!) and then can easily interact. A regular might hop on two or three times a day, check their stream for funny/interesting posts, respond to notifications for games and check for personal messages. A leader might help less tech savvy members of the family get on Facebook, and figure out how to upload pictures. An expert… well you know them. They run groups, have a business page, and generally get Facebook to do things you didn’t think it did.

With productivity apps like word processors, mastery appears when a user uses a keyboard shortcut to cut and paste rather than the menus. Users can get by without the advanced tools, but those tools are waiting, perhaps hidden, for when the user is ready to move a bit faster. If you have ever visited you accounting department and watched them use excel, you know what I mean.

But consider this: while both Facebook and Microsoft word offer power tools, this is completely different than Dance Dance Revolution which increases the difficulty of the basic activity each time you play. Just imagine what writing a letter would be like if every time you opened Word the buttons and menus were completely rearranged. (It’s bad enough when this happens once every year or two).

Flow

Image 2: Challenge vs. Skill

Finally, mastery leads to flow. If you followed the wikipedia link at the beginning of this article, you know now that flow is hard to achieve. An activity gets a little too hard, or a little too easy and it’s all over. One enters flow when the challenge level is appropriately matched with the skill level.

With most productivity apps, the challenge and skill are both provided by the user, and thus the designer has little control over flow, except to prevent or interrupt it. Let me illustrate.

I originally wrote this article in WordPress. I use WordPress a lot; even more than Microsoft Word. I could be considered a regular now. When I wrote my Eleganthack blog post, Why You Should  Speak, I was in a flow state. I knew exactly what I wanted to say, and all I had to do was craft the sentences. Although two hours went by, it felt like 15 minutes.

But writing this post has been more of a struggle, even though I originally wrote it in WordPress. I knew I wanted to write about why flow was a potential chimera, but I wasn’t sure why. I was writing at least as much to figure out my ideas as to express them. And I popped in and out of flow, stopping to check twitter, write an email, and even debug a WordPress problem. The challenge of expressing myself kept bouncing between arousal and anxiety, only occasionally hitting flow. And there is absolutely nothing WordPress could do to help me with it.

WordPress could certainly kick me out of flow, though. If they popped up an autosave dialog, or the mechanism to allow me to insert a picture was too many steps, I’d lose my train of thought and flow might have been hard to recover.

In games you see more of a partnership between the designer and the user to create flow states. The user masters skills, the game monitors that mastery and ups the challenge. In badly designed games, the challenge will increase so sharply the user is thrown into anxiety and will quit. Or conversely, the challenge is insufficient and the user wanders away in boredom. Collision Effect is an example of an app often reviewed as being incredibly fun by experts, but having too steep a challenge curve for casual players. Boring games are a dime a dozen, and I’m sure you’ve uninstalled your fair share.

In excellently designed games, the game lets the user move between arousal and flow perpetually. In addition to Dance Dance Revolution, you have the wonderful Kinnect game Dance Central. World of Goo (iTunes, Android) has a terrificly smooth progression in difficulty, becoming deliciously hard at the end. And who hasn’t played (and gotten a little obsessed with) Angry Birds?

So: Design for Flow?

If you are a game designer, it’s a must. Pleasurable extended play relies on the player bouncing between the arousal and flow states (occasionally dipping into anxiety and resting in relaxation). But if you are an app or web designer, I recommend instead focusing on ease-of-use and mastery. Consider flow as you design, but only to make sure if the user manages to achieve it you don’t disturb it. Otherwise, you may find your software flung across the room, just like the cat who jumps on the keyboard mid-composition.

No cats were harmed in the writing of this post. Unless looks can kill.

Afterword: I cannot resist commenting on the state of relaxation. Many people find Farmville’s appeal completely incomprehensible. But the chart shows high skill and low challenge not as boredom, but as relaxation. I would argue that completely mastered skills work the same way, such as knitting or Let’s Create! Pottery. In the case of Let’s Create Pottery, you can move back and forth between challenges and relaxing unstructured creation once you have mastered the basic throwing and decorating skills. I think lazy relaxed play is much underrated in both the game and web design communities.

Christina Wodtke is continuing to explore the overlaps between game and web design, as well as what it takes to make great products at Eleganthack.