Messaging

We celebrate the good times and help travellers navigate the not-so-good with handy messaging throughout our product.

How to create success messaging

Always cheer on positive moments with our travellers when things go right. There aren’t too many hard and fast rules around success messaging as we want our tone to feel natural and not forced.

A few of the rules are:

• Avoid adding friction such as unnecessary ‘clicks’ or interactions
• Exclamation marks can be used, but use them sparingly!
• Use exclamations of excitement when appropriate

It’s worth considering all use cases when creating success messages where the objective is to whip up excitement. Sometimes users travel for functional purposes such as business, a funeral or to escape an unpleasant situation, so we must be mindful when using particular language and tones as they may have an adverse effect on the user experience.

How to create error messaging

Something’s obviously gone wrong but don’t point fingers. Be polite, impersonal, supportive and non-accusatory. Explain the problem, and suggest a solution.

A few of our rules are:

• Always state the problem and how to fix it
• Write in plain language and active voice
• Do use a friendly tone and never blame travellers

Your card details may be wrong. Please try again

You've entered the wrong card details for the 3rd time

• Avoid cliché expressions like ‘Oops’, ‘Oh no!’
• Give as much info at all time, to avoid generic errors (if possible)

We lost connection for a moment. Please try to refresh

Oh, no! Server error

• Give instructions contextually when travellers need to take action, and keep these close to the interaction
• Tell the traveller if they need to correct the error in order to continue
• Avoid links in error messages

Message types within the product

There are a number of different styles of messages, such as success and error, used on different platforms and interfaces.

Some of these are Backpack components, but some of them are native to iOS or Android. It’s worth mentioning how to create copy for them as they all live in the Skyscanner ecosystem.

Form field

In-line form field messages appear when an issue takes place that stops the user from proceeding. A relevant message appears below the input field relating to the issue with instructional help for the user to resolve the issue.

In-line message guidance:

• Keep copy to one line
• Flag the error first, add instructions to rectify next if needed
• Place below the text field, drop-down menu etc.
• Make the text red and use an icon to signify the error
• Use passive voice to avoid pointing the blame

Banner Alert

Banner Alerts are a Backpack component and come in a number of different flavours to suit the scenario. There are 5 types of banner styles; neutral, primary, success, warning and error, and the styles are available in default, dropdown, dismissable, and expanded.

Banner Alert guidance:

• Keep copy to one line (unless it’s expanded and requires a description)
• State the main sentiment first, add instructions to rectify next if needed
• Use passive voice to avoid pointing the blame

Badge

This type of message is used to signify an attribute, quality or state of a particular item. It should be used sparingly throughout the product to avoid overwhelming the user.

Badges come in 5 colours/styles for different use cases:

Badges guidance:

• Highlight an attribute, quality or state
• Use 4 words or fewer
• Keep copy to one line

iOS alert

This type of message is native to the iOS app. It’s a pop-up message that must be interacted with to continue. There can be a button suggesting the next action or just dismiss the notification.

iOS alert guidance:

• Include a title, body and CTA
• The title should summarise the message
• The body copy should expand on the error
• Optional instructional copy on how to resolve if required
• CTA should allow the user to dismiss with no action required

Dialogue

Dialogue messages are available on desktop and mobile web. There are 2 types of dialogues, success and destructive.

Dialogue modal messaging guidance:

• Include a title (remember to mark as a heading for accessibility), body copy and CTA
• The title should summarise the error or success
• The body copy should expand on the situation
• Optional instructional copy on how to resolve if required
• Primary CTA gives the user a resolution or a way to amend the issue
• Secondary CTA to dismiss, skip or go back

Floating Notification

Floating notification bars are non-disruptive pop-up messages that appear at the bottom of the traveller’s interface to explain the outcome of an action. The message expires and retracts so it’s worth bearing in mind accessibility implications when using this component.

Floating notification bar guidance:

• Stick to one line
• Summarise the sentiment in short prose
• Include an optional icon to increase salience and lessen cognitive load