Info states

Info States display impactful information about the status or the outcome of different app processes. In some contexts, they may even interrupt the experience requiring user input.

Usage

The Info States can display a wide variety of content. Thanks to their impactful visual, they are particularly useful in:

• creating empty states
• announcing the start or the completion of a process
• showing a waiting message or an in-line error
• celebrating an achievement

Images and icons

The illustration and the icon support the tagline, by visually conveying the purpose of the screen.

According to the context, the illustration can have a neutral or a humorous tone. Images that express a sense of urgency should be avoided.

Tagline and text

The tagline and the text should be designed to clearly express the information involved in the process they refer to, giving the user the specific details that he needs.

Since the tagline is the prominent message, try to keep it helpful and succinct, not exceeding two rows of text. Take advantage of the optional text if you need to give the user further information.

Actions

The Info State's embedded actions let the user either take action on a process performed by the app or navigate to a different screen.

Placement

Info States should be placed to create balance with the other elements of the interface. It is highly recommended to center the component horizontally and vertically.

Once you defined a placement rule, keep it consistent throughout the app.