Where’s the button? Designing for mode confusion

“Can you see my screen? I can’t see the chat window.” The tension in Seth’s stammering voice is palpable. It’s his first time presenting at a company-wide meeting. He’s new to the role, terrified of presenting, and these bumps at the beginning have him rattled. Stumbling through the sharing experience of a video presentation isn’t the source of Seth’s anxiety, but the experience does intensify a stressful moment.

Software is lovely, but we know firsthand that it can be terrible. It’s deflating to enter an unexpected experience with tools we typically have fluency with. It doesn’t instill confidence in ourselves or the product.

These experiences can be triggered by:

Drastic design updates
Changes in roles and permissions (access to different aspects of a product)
State shifts
Lost internet connections
Mode changes

Mode changes are confusion points for many of us. These could be mundane acts like typing with the caps lock key on (seriously, who needs that key?). Or you might accidentally input a keyboard shortcut triggering a new mode. A digital experience like this is akin to entering a room you don’t belong in; worst off, you may not know how to leave.

So what exactly is a mode? A mode is different interpretations of the user input by the system, depending on the state which is active. Same input, different results.¹ Modes are ways products focus users on a different experience within an app. The intent is to help the user with a specific task at hand.

When modes are useful

Modes are helpful when a tool is complicated, and there are many actions a user can take. A great example of this is Photoshop’s liquify mode. Users who enter this mode understand how they got there; this mode focuses the user on a specific action of manipulating a specific layer. There are also straightforward ways to exit the mode. Another use case for modes is when the user has a particular intent different from the primary mode. Google Docs suggestion mode is an example of this. In this mode, a user can suggest text but doesn’t have the permissions to override existing work completely. The on-canvas suggestion indicators are a great cue to let the user know they are in a specific mode.

Do you need a mode?

If a mode isn’t critical for the user experience, consider taking a different course. Why? Because modes introduce a whole lot of friction to a user experience.

“Critical situations can arise if the operator interacts with the system assuming a wrong mode. The identification and analysis of such situations needs to take into account both the system design and the operators mental model of the system.”²

Mode confusion

The aviation industry has coined the official term ‘mode confusion.’ For pilots, the question is: “am I in control, or is autopilot?” Unlike the aviation industry, mode confusion isn’t a life or death issue for most products, but this doesn’t mean we should overlook its importance. Look at our teammate Seth struggling to regain composure during a big presentation. Mode confusion adds unnecessary stress to a user. And in a high-stress situation, mode confusion is a painful experience.

So let’s define mode confusion: When the observed behavior of a technical system is out of sync with the behavior of the user’s mental model.

Let’s break mode confusion into two potential problems:

Mode slips: when users intend to perform one action but end up doing another due to mode ambiguity.³
Discoverability/learnability of mode specific-features: how users find and remember how to get back to features in a particular mode

So how do you design to prevent mode confusion?

Identify systematic mode slips

Can your system identify if a user has fallen into a mode slip? For example, what happens when a user logs out, another user takes an action that changes the state of a project, or an internet connection is lost? Take inventory of potential ways slips can occur and design for them.

Clearly identifiable mode indicators

When a user is in a non-primary mode, make it obvious. It could be a status bar or on canvas indicators like in the Google docs example. There are many ways to achieve this: layout shifts, changes in color, iconography, or different heading and text. Whatever methods you choose, make it obvious.

Set expectations of mode impacts

Establish user expectations with tool tips and indicators. For example, let them know if a user has limited or enhanced functionality. A great example is waring colors and icons when a user now has destructive capabilities. Likewise, let a user know what they can and can’t do.

Write helpful error messaging and handling

When a user runs up against a hurdle because of mode ambiguity, make it obvious why. Write concise messaging to help a user navigate this confusion. Help them understand why they can’t take a specific action or suddenly can take that action. Users may not be familiar with secondary modes, so guide them along the way.

Clear exit doors

There is a reason EXIT signs feel a bit over-the-top in public spaces. They are designed for users to understand under stress. Use this same paradigm in modes. Users should be able to clearly escape modes they have entered, especially via a mode slip. Define straightforward ways to go back into the primary mode a user knows.

Implementing “good friction” with clear confirmations

Have you ever emptied the trash on your computer? Think about that interaction without confirmations, no pop-up “Are you sure you want to delete these files permanently?” Warnings in these circumstances are good friction. It slows users down for reasons that enhance an experience. You can think of good friction as a guard rail on the side of a mountain road and bad friction as a fallen tree blocking the roadway ahead.

Let users understand the implications of their actions with confirmations, especially in unfamiliar environments.

Strong safety nets

Gmail has a wonder undo send feature; this comes in handy when you want to rethink what you just sent. But what about an unintentional ‘reply all’? What if a safety net allowed users to backpedal reply alls? An unindented reply to all email is a perfect example of annoying and dangerous outcomes to mode confusion.

Consider not using a mode

One great way to alleviate mode confusion is to create a modeless interface. Do you need a different mode? If not, consider building it into the core experience.

Test your assumptions

The most important advice I can recommend is to run a user test. We easily fall into the trap of believing our design is unmistakable. Often it’s not. Test, learn, and iterate.

Keep iterating. Mode confusion isn’t an easy experience to design around. I am not writing this post out of strength, but rather as someone who has made several mistakes that I am actively cleaning up now.

—

A big shout out to my design team at Webflow for adding to this conversation. I am looking at you, Charlene Foote, and Molly Lafferty.

Footnotes:

Modes in User Interfaces: When They Help and When They Hurt Users
Analysing Mode Confusion: An Approach Using FDR2
Mode ambiguity: When some action on the part of the user can have different effects on the machine depending on its current state.