Inline help
The Design Need:
The user might need extra help when using specific elements on a page.
Design Examples:
Design Solution:
Offer inline help text or a link to a dedicated help topic alongside the item at hand. The simplest and most straightforward way of offering inline help is to provide a concise help text adjacent to the element. This is best used when:
- The help text is short enough and only consists of a few words or one sentence
- If the total amount of help text is limited
- You ask for unfamiliar data
- You need to explain why you are asking for specific data or actions
- Data should be entered in a specific format
- Certain fields are optional and others are not.
Depending on your situation, a more dynamic form of help might be better. Here you have two main options: automatic systems and user-activated systems.
Automatic
These systems show the help information automatically whenever it is most suitable, e.g. when a certain input field is selected. If you use this kind of system it is important to use clear visual linking between the help text and the item(s) involved. When using an automatic system the user will only discover that help is available if they start using the elements. Depending on the audience and the task at hand, this might cause a problem.
User activated
Here users can decide whether they want to access additional help. A button, icon or text link is offered to gain access to the help text. Use a clear and recognizable symbol or icon; the most frequently used icon is a question mark.
If you show the help text inline with the rest of the content you risk moving important parts below the fold. It is often better to show the activated help text in a modal window, tooltip or separate help text area. When choosing one of these display options you should keep in mind that a:
- modal window requires users actively to close the window before continuing action
- tooltip requires the user to keep the mouse over the link to access the help text and it needs to be shown long enough for the user to read and understand the text
- separate help text area takes up screen real estate and should be placed consistently
When to use:
It is best to design a website so that no additional help is needed. Inline help should be used in cases where the offered help is specific for a certain element. Inline help should not be used to help users at a higher level to use the service offered.
Why use this solution (rationale):
It is known that people generally do not read instructions, such as product manuals, especially if these instructions are separated from the action in help or faq pages. If possible and necessary, it is better to provide help close to the action so users can access it where and when they need it.
More info elsewhere:
- “Dynamic help in web forms” on www.uxmatters.com
- Inline help box design pattern on www.ui-patterns.com
