Confirmation and Error Messages

A set of messages for use in apps that give you immediate feedback in response to an action taken or system failure

Contributors

Published on 26 Jan 2017
Platform: App

Overview

Example of a confirmation message on iOS and Android

How it Works

There are four categories of messages in apps:

Confirmation

These are messages that appear after you take an action in the app. They confirm that the action was successful or that you need to take further steps in order to complete your task.

The tone of voice used should be friendly, not imposing and keep it short. Each product can adapt the tone of voice to suit their audience.

We have two types of confirmation messages:

Confirmation without actions

Displayed to confirm that the action you’ve taken is completed. It does not require any further decisions to be taken

For example:

‘Oscars 2016 has been added to My News’

‘You are now signed in’

An example of a confirmation without actions

Confirmation with actions

These require a further decision to be made, in order for you to complete the action successfully.

For example:

‘Search completed, we’ve found 12/12 tracks. Listen to them in Spotify?’

Example of confirmation with actions

Interruptions

These are messages that interrupt you while using the app. They are displayed for three reasons:

  • To highlight that something new is available in the app. We commonly use a full screen upsell for this.
  • To let you know about a feature, in context with what you are doing. For this we’d recommend a Contextual upsell during the journey.
  • To highlight the benefits of underused features in the app and how to use them (i.e Hints & Tips).

Full screen upsell

The Full screen upsell, can appear during onboarding into your app or while using the app, but is not contextual with what you are doing in the app.

Contextual Upsell during the journey

Contextual upsells prompt you to try the functionality in context, either if you are signed in or signed out.

Example of a contextual upsell during the journey

Hints and Tips

Hints and Tips appear when a feature is not used for some time or is not used at all. These messages could be single messages or step by step hints that take you on a journey. Make sure they are contextual to the area of the UI that requires explanation.

Example of a custom iOS hint and a native Android hint

Error messages

These are messages to inform you that something went wrong. They affect or block your experience within the app.

If the app content is cached and still available you don’t need to use a blocking type message, a less intrusive message will suffice. However if your content is not available you should use a full screen error message.

The tone of voice of an error message is apologetic and should re-assure that you are not at fault. The cause of the error (if known) should be explained and a solution offered.

An alternative journey should be highlighted if available. For example, the iPlayer ‘no network error’ screen displays a CTA to go to downloaded programmes).

Example of the iPlayer onward journey from Error state

There are 2 types of Error Messages:

Action errors

These messages inform you that an error has happened immediately after an action and that you can’t complete the action.

Example of an action error in the News app

System errors

These messages appear in the app when the error occurs. They explain the cause of the error (if known) and aim to help you to solve it (if possible)

Examples of system errors:

Generic Error

Something went wrong but we don’t know the cause.

E.g. ‘Sorry, something has gone wrong. Please try again later.’

Content Error

Can’t receive the content and we know the type of content.

E.g. ‘Sorry, we were unable to retrieve the latest news stories for this page’

No Network Network

The connection not available or the user is offline.

E.g. ’No Network Connection. Please check your connection and try again’

App Availability

The app is not supported or is no longer available

E.g. ‘An upgrade is available for this app’

Rules

Confirmation without actions

  • Use a custom design for iOS and a native snackbar for Android.
  • Position either on the top or bottom of the screen.
  • Fade message out after 3 seconds.
  • Always provide a dismiss action.

 Confirmation with actions

  • Use native dialogs for both iOS and Android.
  • Always provide a core action to continue the journey.
  • Always provide a dismiss action.

 Error messages

  • For a less intrusive error use a custom design for iOS and a native snackbar for Android.
  • Always provide a dismiss action for a less intrusive error message.
  • The less intrusive error messages shouldn’t fade out until the error is resolved or the user dismisses them.
  • Provide a ‘retry’ option in case of error after an action (see Action errors above).

Variations

There are a variety of message types to choose from as detailed above. Each lending itself more to certain scenarios that might occur in your app. We’ve put together a handy decision flow diagram to help you decide which message to use.

Please download the ‘Downloadable Assets’ pack at the top of this guide.

Pattern in Action

You can see an example of a 'hint and tip' message in the BBC+ app

You can see an example of a 'Contextual Upsell during the journey' message in the iPlayer app