You stumble, you fall, you keep getting up until you can walk.
Failure is an integral part of the learning process for all species. Every interaction we have with the world gives us feedback that allows us to fine-tune our responses and behaviors and optimize our processes. This article examines how the design of software applications can be optimized to prevent excessive user errors and how to handle the implementation of error messages.
Learning to play a musical instrument is a great example of how our errors help us refine our processes until eventually we succeed (or choose to fail). I’m learning to play the piano and while it’s audibly painful to struggle through the lessons I’m quickly gaining ground in my endeavor; after several weeks of frustrating practice sessions I’m onto Greensleeves now. I’m getting tearjerking reactions from my audience of one at home.
This music analogy demonstrates how we learn about any process or system. Every time I play off-key I’m immediately reminded I did something gut-wrenchingly terrible and that I need to fix it. This reaction is the foundation of many human-computer information models.
The user makes an error. The user recognizes the error. The user adjusts so that they don’t make the error again.
Though musical instruments and human-computer information models train their users in a similar method, there’s an important difference to be aware of: the piano doesn’t care if I actually learn to use it or not; computer systems, however, need to be concerned with this. If I didn’t care considerably to succeed in learning to play the piano I would not suffer through the cacophony of beginner mistakes for long. People generally aren’t encouraged by high error rates. Chances are, your users won’t tolerate high error rates either, so if you want them to use your application it’s important to employ good design from the beginning. When your users do encounter errors (which they inevitably will), make sure the error handling isn’t as painfully delivered as an ill-placed sharp note from a novice piano player.
The System
According to Donald Norman, a respected advocate of user-centered design and author of the book “The Design of Everyday Things”, there are three parts to a system:
- The designer’s mental model of the system
- The user’s mental model of the system
- The system image (the system itself)
User error occurs when the designer has failed to render their idea of the system correctly to the user. There are three ways you can help your users navigate within your system:
- Understand your users and show them the path of least resistance
- Provide nets for users who fall outside of the main use case
- Gracefully degrade for user errors
User Awareness
As designers we can never fully grasp all the ways in which an application might be used. Launch days for products are almost always met with a flurry of feature requests and bug reports resulting from unexpected use cases.
Gerhard Fischer, a professor in the department of Computer Science at the University of Colorado at Boulder and a fellow at the Institute of Cognitive Science explained this in his research paper, User Modeling in Human-Computer Interaction:
A consequence of any smart behavior of systems is that agents (humans or computers) can guess wrong and perform hidden changes that users do not like. Current systems often lack the possibility or at least the transparency for users to turn off these “smart� features, which can get more in the way than help. As argued above, systems, even smart ones, are aware of only a fraction of the total problem-solving process their human partners undergo, and they cannot share an understanding of the situation or state of problem-solving of a human. [Fischer 2001. User Modeling in Human-Computer Interaction.
You can’t plan for every possible use case. Instead, determine what the main use case will be for the majority of your users and optimize your design for it. This is part of what Fischer, in a later paper calls “context-aware systems.” Understanding your user-base, their background and objectives allows you to create a more optimized system for them to begin with.
Defining a main use case helps you send a clear message on how you want the user to interact with your application.Be sure to limit the secondary features that may distract from that main use case. Your main use case should be only a simple sentence: a subject and a predicate.
For this article let’s say our example use case is:
“The user makes mail-order donuts.”
Now, use your design skills to get them flowing through your application in a way that is optimal for the use case.
Provide Nets For Edge Cases
We have established a clear use case; the user makes mail-order donuts. But what happens if the user just wants to order icing or sprinkles from you? Or what if 22% of your users want to dip the donuts in gold and wear them as necklaces? You don’t want your vision to be so narrow that you miss out on golden business opportunities.
It is important to be aware that users might want to interact with your service in these ways. Ways that you couldn’t even dream of designing for. Therefore, your application needs to be able to accomodate for the unexpected user’s demands; but how do you this while still designing only for the primary use case?
Nets
Many of your users who don’t associate themselves with the main use case will still be able to see themselves benefiting from your system in other ways. Provide a net to catch them, and if appropriate, send them into a use case that is right for them. Employ intelligent metrics to gain data on your users’ behavior and to identify places where you’re losing users. Google Analytics provides some fantastic tools for tracking user errors; this Smashing Magazine article from 2011 offers a tutorial on how to take advantage of those tools.
Gracefully Degrade User Errors
Designing your application from the start to be context-aware is an important step. Putting nets in place to help you adjust the system to meet your users’ expectations is another important step. But even if your system is optimized for a main use case and the nets are place, users will still encounter errors. It is inevitable.
In the process of Error -> Recognition -> Adjustment, we must do three things:
- Provide helpful error responses throughout the application
- Make errors seem less like failures on the user’s end and more like cues for adjustment.
Error messages are often overlooked by designers or thrown in at the last minute without any styling or thought as to how they are presented and worded. Error messages are really your last tool in getting users to stay in your application – a vague 404 page, a failed form submission that doesn’t explain exactly what caused the failure – these types of indiscretions will confuse and frustrate your users.
Use error messages to your advantage. Make them noticeable and make sure any part of your system where user input or action is required is equipped with proper error handling notices. Twitter Bootstrap is a beautiful UI Kit that will make this a lot easier for you; it offers you beautifully designed alerts that you can drop easily into your application. It provides simple, elegant error message styling:
And don’t forget about rewarding your users for actions they complete successfully. After all, research shows that human brains respond more to success than failure! (ABC News article, Specific Brain Region Governs Problem-Solving Skills)
Twitter Bootstrap provides styling for success messages as well:
Well-designed and carefully explained error messages not only help teach users how to use the system as you intended, they also prevent users from feeling ignorant.
Designer Responsibility
The usability of a system depends on how well the designer does his/her job. The extent to which you understand your user-base, the methods you use to measure their actions, and the way you help them recover from errors directly effects the usability of your system. We all want to use beautiful, intuitive software. Now you can do your part to make that possible.
