UX/ UI tips: A guide to contextual help

Our company was founded on designing user guides ‘making it clear’ how to distil complex information into a simple format. But let’s face it, nobody reads a user guide, we all want answers presented as we encounter problems. Cue contextual help.

1. What is contextual help

Contextual help, also known as context-sensitive help, provides support for the user relative to the area they are currently interacting with. For example, if you’re completing a form, contextual help will provide inline feedback allowing you to correct your errors before submission of the form.

Within context-sensitive help, we have embedded help. Embedded help provides a small chunk of information at the correct time, we try not to interrupt a user’s flow, so it’s important to think carefully about what type of contextual help is applicable at which times.

In this article we will look at:

• Inline instructions
• Tooltips
• Overlays
• Walkthroughs
• Embedded help

2. Inline instructions

An inline instruction is presented next to the input. It is short and to the point. Inline instructions can be a permanent feature or appear as advice when information is entered incorrectly. You can also read our article on creating world class forms for more information on this.

3. Tooltips

Tooltips are mouseover popups that appear when a cursor is placed over an icon or text link to provide more context to an interface element. Tooltip messaging should be brief and in plain language; they are user triggered, so it’s important to create visual cues that an element can be interacted with.

Tooltips are initiated on a ‘hover’ action so can only be interacted with via a cursor or keyboard. It’s important not to hide important information in a tooltip. Use tooltips consistently in your interfaces. Tooltips can also be helpful to identify iconography while users are learning a new interface.

4. Windows overlays

Windows overlays, or modal windows, provide more information than a tooltip and are often used for onboarding new users or highlighting new features.

Overlays can contain more than one page and it’s advised to include rich content such as video and animation. These windows should have the ability to be easily closed and accessed at a later time as users don’t always have the time or attention span to take this information in.

5. Walkthroughs

Walkthroughs are a sequence of tooltips that provide step-by-step instructions, and are overlaid on the interface itself. They allow the user to interact with elements of the interface itself, allowing completion of tasks in context creation. In other words, it’s a guided tour.

Users should be given the ability to move to the next step and cancel the tour at any time. Similar to window overlays, the information should be accessible at a later date.

6. Embedded help

Embedded help provides access to support information within the software itself. An example of this would be a chatbot or a knowledge centre. You may also present embedded help as a menu option.

Conclusion

As explained, there are a number of help options available, so it’s important to assess which is correct for your interface.

NNGroup provides a list of three Golden Rules of Good Help. These rules should always be front of mind when implanting help:

1. Available without interfering
2. Succinct yet descriptive
3. Unintrusive

Have a call

We’d love to talk to you about how Make it Clear can support your organisation. Book a call here.