There’s nothing more annoying than when things don’t function the way we expect them to. When we develop user interfaces (UI), we try to relate it to the “real world” – think the floppy disk for “save” in most applications. Why? Because we take our cues in the digital world from ones we’ve already developed in our ordinary lives. Cognitive friction occurs when the cues don’t match our expectations. Learning to avoid cognitive friction in UI design can help make the user experience (UX) of products greater.
A key part of delivering a great user experience is getting the UI right for a digital product. Fortunately, there’s a simple shortcut when it comes to UI – the more the object within the UI mimics a real world object, the more likely that object is going to be intuitive to use and deliver a quality user experience. It’s what we call skeuomorphism.
This has been a staple of UI design for a long time. There’s a reason that folders for computer files look like paper files for a filing cabinet and that the delete function resembles a trash can from the corner of your office; they deliver real world expectations for digital experiences.
In the real world, this mimicry is easy. Human beings have a multitude of senses which can be stimulated to ensure that one interaction resembles another sufficiently that it can be quickly understood by similarity. In the digital world, for the moment until augmented reality becomes more common place, the engineer is limited to sight and possible audio to give clues as the experience the user can expect.
Author/Copyright holder: Alexander Baxevanis. Copyright terms and licence: CC BY 2.0
What is Cognitive Friction?
Alan Cooper, the influential designer, posited, in his book The Inmates are Running the Asylum (originally published in 1999 but revised versions are available) the concept of Cognitive Friction. He said that cognitive friction occurs when a user is confronted with an interface or affordance that appears to be intuitive but delivers unexpected results.
He cites the example of pushing a button on the dashboard of his car. It immediately set off an alarm. Which, is what it was supposed to do. However, it wasn’t what he was expecting and the interaction was a source of maddening frustration for him.
Imagine if you visited a web site and saw a button on that site that said; “Sign Up” but when you pushed the button – it took you to another website. That would be an example of cognitive friction in a digital product. Your expectation is to be taken to a sign up screen and not to be redirected elsewhere on the internet.
The more times that cognitive friction occurs when a user interacts with a product – the more jarring the experience of using that product is likely to be. If it occurs often enough, there is a reasonable likelihood that the user will seek an alternative means to carry out their task.
Cognitive friction matters because it can damage user experiences and result in user churn and revenue reductions in both the short and long-term.
How Do You Avoid Cognitive Friction?
Avoiding cognitive friction is the job of the user experience design team in conjunction with the UI and interaction design teams.
There are ways to approach the design that can help identify where cognitive friction is likely to take place and to help avoid that:
- Conduct user interviews – learn how your users expect to undertake the task with the product. Ask questions specifically relating to the interface during prototyping and sketching.
- Create task flows – if you can create the simplest possible task flow with the greatest degree of automation (e.g. the computer not the user does the work) you are likely to minimize the opportunity for cognitive friction to occur.
- Create easy to use information architecture (IA) – the simpler the IA, the less often a user is going to get lost or confused when interacting with the product. Extend this to creating navigational models and get users to test them and feedback on them.
Author/Copyright holder: Marcel Douwe Dekker. Copyright terms and licence: CC BY-SA 3.0
During Development Iteration
You can also test for cognitive friction during the development lifecycle at each iteration of the product:
- Conduct expert evaluations – cognitive walkthroughs and heuristic evaluation can be valuable tools when deployed by usability analysts. They may even uncover cognitive friction that isn’t immediately obvious to users.
- Run usability tests on wireframes and prototypes – nothing beats direct interaction with the product to test interaction design and examine how users will react to that design. The more user input you get, the more cognitive friction is likely to be identified and thus you can focus on eliminating it in the next iteration.
What About Mobile Design?
Mobile design provides new challenges when it comes to cognitive friction. The process for avoiding it is the same as on the desktop – it’s just that mobile offers far more ways to interact with a device than the traditional mouse/keyboard combination. There are gesture controls, eye movement controls, motion controls, touch screens, camera inputs, etc.
This means that it’s vital for the UX designer to examine these interactions closely; in many cases there are no “standards” (like the floppy disk, save button or the paper file, folder combination) for these interactions. It’s going to take real care and thought to create intuitive interactions that avoid cognitive friction.
Author/Copyright holder: Neil Patel. Copyright terms and licence: Fair Use.
Cognitive friction occurs when something in a product doesn’t behave in the way that we expect it to because of its resemblance to a real world object. It is a source of user frustration and can potentially mar the user experience enough to create user churn. It can be avoided through research and user testing to enable better user experiences.
You can find the original text for sale on Amazon and in other bookshops: Alan Cooper, The Inmates are Running the Asylum: Why High-tech Products Drive Us Crazy and How to Restore the Sanity – Sams – ISBN: 978-0672326141
Hero Image: Author/Copyright holder: Pixabay. Copyright terms and licence: Free to Use.