Empty state pattern Validation messages Types of validationBest practiceExamplesLibraryError pattern Error screen Help articles Notifications Progress screen Success screen Accordions Banner Card Banner Info Callout Small Callout Large Card Cluster Card Cluster Image Carousel Feature Section Grid Feature Section interactive Feature Section Single Feature Section Wide Hero Interactive Hero Large Hero Simple Hero Small Highlight Product Highlight Trust Icon Divider Icon List Icon Socials Logo Grid Quote Highlight Quote Text Tabs Data Tabs Feature Text Disclaimer Text Fact Text Headline Text Intro Text Stack Video Embed
Design at Wise Foundations Components Patterns Empty state patternValidation messagesError patternError screenHelp articlesNotificationsProgress screenSuccess screenAccordionsBanner CardBanner InfoCallout SmallCallout LargeCard ClusterCard Cluster ImageCarouselFeature Section GridFeature Section interactiveFeature Section SingleFeature Section WideHero InteractiveHero LargeHero SimpleHero SmallHighlight Product Highlight TrustIcon DividerIcon ListIcon SocialsLogo GridQuote HighlightQuote TextTabs DataTabs FeatureText DisclaimerText FactText HeadlineText IntroText StackVideo EmbedResources
Validation messages

Validation messages give users inline feedback on the information they’ve entered into a form input to help them successfully compete their task.

An error message that tells the user that the page can't be displayed.
Types of validation

There are 3 different types of validation messages — error, positive, and warning.

Each has a different use case.

An input with an error message.
Error

Error messages let our users know when a problem occurs. They explain what happened, why, and what they should do next.

An error could be down to either the system, or the user.

An input with a positive message.
Positive

Positive messages give the user a positive confirmation of an action they’ve just taken.

An input with a warning message.
Warning

Warning messages warn the user about something that they can do to get a better outcome or avoid a negative scenario.

Best practice
  • Tell the user what happened and what they need to do (if possible).
  • Say sorry if Wise is at fault.
  • Write in full sentences and put a full stop at the end.
  • Include ‘please’ if the message includes instructions.
  • Prioritise being clear and concise, but still human — remember that this could be a stressful situation for the user.
  • Draw on the mission pillars where possible.
  • Don’t place blame on the user.
  • Don’t add in-line links.
  • Don’t promise things you can’t deliver (even if it sounds better).
  • Don’t use jokes, metaphors, or anything that belittles the situation like ‘Oops’ or ‘Uh oh’.

See our tone of voice.

Examples

Please enter your first name.

First name required

We don't offer that currency — please select one from the list.

We don't offer that currency. List of currencies.

Sorry, we couldn't process your transfer because the connection timed out.

That didn't work.

Sorry, we can’t display this page at the moment. Please refresh and try again.

Parsing error on request: SensitiveValuewith response code:200 - The data couldn’t be read because it isn’t in the correct format.

It looks like this page no longer exists. Try visiting our homepage instead.

Oops! Something went wrong.

It looks like you’ve already requested that currency. We’re working on it and will let you know when it’s available.

Oops! You don’t need to ask us for the same currency twice.

Library

Some situations call for a tailored validation messages. But in situations that occur across the product, we can use the same message for consistency.

This library provides some standard messages for particular situations.

Field validation

Pattern

Example

maxLength: Please enter fewer than {maxLength} characters.

Please enter fewer than 20 characters.

minLength: Please enter at least {minLength} characters.

Please enter at least 10 characters.

minimum: Please enter a number that’s {minimum} or more.

Please enter a number that’s 3 or more.

maximum: Please enter a number that’s {maximum} or fewer.

Please enter a number that’s 100 or fewer.

required: Please enter {field}.

Please enter your first name.

pattern: Please enter {field} in the correct format.

Please enter your email address in the correct format.