Intro
The Inline Help is a CX component that displays help text for an object in a compact way and without leaving the page.
The Inline Help appears while hovering over the icon.
When to Use
Anatomy
The inline help consists of two elements:
1. Content: Shows information to assist user in their interaction.
2. Icon (optional): One way for a user to access inline help component.
Anatomy of the Inline Help
Behavior & Interaction
Opening Inline Help
The inline help can be opened by hovering or clicking an object represented by a text link or an icon.
The inline help doesn't obstruct the visibility of the thing that opened it. For example, the inline help always opens on the side of the button.
If inline help is open, the trigger element e.g. button is used in its toggled/active state.
Opening Inline Help.
Closing Inline Help
The inline help can be closed by a hovering or clicking outside of it, or clicking on the element which triggered the event.
Closing Inline Help.
Placement Types
Placement-type: Determines on which side the component is placed at. By default is right.
Available options are:
- Left
- Right
- Top
- Bottom
The Inline Help placement options.
Touch Enablement
The opening/closing of the inline help is triggered with the Tap key. The behaviour is similar to a mouse interaction.
Responsiveness
This section describes the responsive behaviour of the inline help for mobile devices.
Always shows inline help.
On smartphones, the inline help should not use more than a third of the phone’s real estate.
Examples
Shows the location of components on the screen.
Tooltips vs. Inline Help
Inline Help
Inline help is used to display help text in a popover, often inline with headers, body text and form labels. It also uses the popover component and supports its whole functionality. All of properties and settings from popover component can be used can be used in inline help.
Tooltip
Tooltips are modeless floating windows with no keyboard access which show additional contextual information on an object targeted via mouse cursor, keyboard focus or a finger tap and gesture.
When to Use
Tooltip:
- To provide a textual description for the target object
- To hint to a keyboard shortcut, if the target object is assigned to a keyboard shortcut
- To display information unrelated to completing a task or user flow
- Note: A tooltip can be as distracting as a pop-up, so don't use them unless they add significant value
- For small bodies of text
- When information needs to be displayed on desktop only (tooltip is not accessible on tablet/mobile)
Inline Help:
- To describe additional information on how to complete a task
- When information needs to be available on click
- To provide information off a button, icon, or body of text
- When information needs to be displayed on all screen types (desktop, tablet, mobile)
- To present information in the same theme as the rest of the page
- When including interactive elements;
- Since a tooltip is on hover it cannot have any interactivity
General Rules for “Good Help”
These are general rules defined by the Nielsen Norman Group on how to choose the best method of help:
- Available without interfering Some type of help should be available in every application or website, but it should remain out of the way until users need it. And when they do, it should be easy to find.
- Succinct yet descriptive in plain language. Help messages should use only as many words as are necessary, in a language that is understandable by lay people. (It’s amazing how many unhelpful help systems simply regurgitate the system’s own language: “checking the foobar checkbox activates the foobar feature.”)
- Unintrusive It should be easy for users to return their attention to their original task after seeking
Related Links
Elements & Controls
– Inline Help Specification (CX Design Concepts)
– Inline Help Component (CX Design Concepts)
Implementation
- Inline Help (FundamentalNGX Component)
Visual Design
- Visual Design (CX Design Concepts)
- Popover (Visual Core)