Design Pattern: Use Clear Step-by-step Instructions

User Need

I need clear labels, step-by-step instructions and clear error messages, so I know exactly what to do.

How it Helps

Clear instructions help prevent user errors. This reduces frustration and enhances users’ autonomy and independence because they can avoid asking for help. This helps many people with cognitive and learning disabilities as well as people from different cultures, emerging markets, and new users who may not be familiar with web forms or may miss cultural context.

For example, a person with age-related forgetfulness is trying to complete a form. They put the whole address and zip or postal code in one line (as one would do when writing a letter). They are given an error message. After a few error messages, they are exhausted and cannot complete the form.

More Details

Provide instructions at the start of the process, not simply in an error message.

Provide instructions needed to enable the user to complete the task. When multiple formats are accepted or errors are automatically corrected, less instructions are needed for the user to complete the task.

Note that instructions can be hidden behind a familiar icon.

Getting Started

In a system with common errors, tackle the most impactful errors first and add guidance as needed.

Examples

Use:

1. Clear and easy to understand instructions. For example:
   • Provide an image of a passport with the number highlighted to indicate the number that the user should enter.
   • Explicitly say which day of the week is the start (e.g., Sunday or Monday) in calendar controls.

Avoid:

1. No clear instructions for complex tasks. For example:
   • Request a passport number, but do not indicate which of several numbers on the passport is needed.
   • A site does not clarify the first day of the week and assumes the work week starts on Monday. A user from a different culture assumes the work week begins on Sunday, and makes a mistake.