In-product help patterns

Ask a question Design guidelines

Summary

Patterns for in-product help. Includes features like help text, feature discovery dialogs, and empty state messages.

Status

API status: general
Web resource key: com.atlassian.auiplugin:aui-help, com.atlassian.auiplugin:aui-inline-dialog2
AMD Module key: N/A
Experimental API: 5.7
General API: 6

Feature discovery dialog

The feature discovery dialog is primarily used to highlight new or existing features to the user. It should contain a short introduction to the feature and encourage users to make use of it.

Basic usage

Feature discovery dialog relies on inline dialog for its usage. It simply adds an additional class to the dialog.

Note that you will need to also explicitly require the web-resource for inline dialog to be able to create an inline dialog successfully.

Demo code
Result
Helpful help message here!
​x
 
<button class="aui-button" aria-controls="inline-dialog-help" data-aui-trigger>Help dialog trigger</button>
​
<aui-inline-dialog id="inline-dialog-help" class="aui-help" alignment="bottom center">
    Helpful help message here!
</aui-inline-dialog>

Help text

The purpose of help text is to provide more insight and understanding on a more complex screen. This text should only be dismissable if there is a way for the user to access it again.

Basic usage

Help text can be used by placing an aui-help and aui-help-text class on an outer element and then nesting an aui-help-content for the block of help text to be formatted.

Demo code
Result

Card colors can be assigned according to different types of issue data or be based on custom queries. When values are present in the board they will be listed below.

 
<div class="aui-help aui-help-text">
    <div class="aui-help-content">
        <p>Card colors can be assigned according to different types of issue data or be based on custom queries.
            When values are present in the board they will be listed below.</p>
        <ul class="aui-nav-actions-list">
            <li><a class="aui-button" href="#">Click me</a></li>
            <li><a href="#">Learn more 1</a></li>
            <li><a href="#">Learn more 2</a></li>
            <li><a href="#">Learn more 3</a></li>
        </ul>
    </div>
</div>

Empty state message

Empty state messages are used in areas which usually hold content but are not currently populated. An example would be a new instance where content is yet to be created. When enough content exists, empty state messages should disappear.

Basic usage

Empty state messages can be used by placing the aui-help class along with the aui-help-empty-state class on a top level container. Using the aui-help-illustration class on a container will style a help image besides a body of help text. To style help text, simply apply the aui-help-content class on a container with all the information and suggestions for actions.

Demo code
Result
Plan your sprint

This is a sprint. Plan a sprint by dragging the sprint footer down below some issues, or by dragging issues here.

 
<div class="aui-help aui-help-empty-state">
    <div class="aui-help-illustration"><img height="128" width="128" src="images/project-64.png"></div>
    <div class="aui-help-content">
        <h6>Plan your sprint</h6>
        <p>This is a sprint. Plan a sprint by dragging the sprint footer down below some issues, or by dragging issues here.</p>
        <ul class="aui-nav-actions-list">
            <li><a class="aui-button">Click me</a></li>
            <li><a href="#">Learn more 1</a></li>
            <li><a href="#">Learn more 2</a></li>
            <li><a href="#">Learn more 3</a></li>
        </ul>
    </div>
</div>