Inline Hints

Problem summary

The user wants to learn about new or unfamiliar interface features in an unobtrusive way.

Examples

No items found.

Solution

Blend in hints and coaching with content for a seamless experience.

Use the language of the existing layout to seamlessly blend in tips and coaching. The integrated experience of using the shapes of normal and everyday content allows for a more easily readable and relevant form of instruction that doesn’t interrupt or obscure a content experience.

Hints are integrated seamlessly into the layout of surrounding content so that they do not obstruct or interrupt user interaction. Inline hints do not need to be dismissed although they are seen to be dismissible, to disappear after continued use, or, in the case of Blank Slates, when the user populates the screen1.

Do not use this pattern if you want to be absolutely sure users have seen your hint, as the subtle appearance that flows the rest of the content is at the risk of being ignored. Use Inline Hints to reinforce other instructions provided elsewhere in the interface.

As Inline Hints blend in with the rest of the content, users get easily confused if the hint’s information is not relevant to its surrounding content. Do not overuse them; make sure they are relevant and do not overwhelm the primary content experience.

Rationale

By having inline hints take the shape of normal, everyday content, designers hope that they will be more easily readable and relevant than other forms of instruction.

Resources

Do you need to use this pattern in your project?

This  and others patterns are available and ready to use in this massive Wireframe Bundle. Suitable for a wide variety of projects: Website and landing pages, Ecommerce, Dashboard, Flowchart and iOS.

Huge Wireframe Library Collection

Ecommerce
iOS
Website
Dashboard
Flowchart
VIEW BUNDLE