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.
|
Neutral |
This banner can be used to show hand-holding information to help with the user’s experience using the product. |
|
Primary |
This banner can be used to surface important and useful information that isn’t obstructive to the user’s experience. |
|
Success |
This banner can be used to highlight successful actions the user has completed. |
|
Warning |
This banner can be used to show information that isn't urgent but could be detrimental to the user's journey or experience. |
|
Error |
This banner is used to show information that prevents the user from completing their journey within our product. |
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:
|
Normal |
This badge can be used as an additional attribute or detail that helps with decision-making but doesn’t need urgent attention. |
|
Strong |
This badge can be used to add greater emphasis to a detail or attribute within a design. |
|
Success |
This badge can be used to highlight an action which the user has successfully completed. |
|
Warning |
This badge can be used as an attribute or detail that may have an impact on the traveller’s decision. |
|
Critical |
This badge can be used for information that prevents the user from completing an action. |
|
Brand |
The badge can be used to surface information linked to our brand, such as deals. |
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