10

I'm designing some empty state screens for an airline/train travel app.

I've looked at quite a few examples and what I noticed in most cases is some humour in the copy or some kind of characters are used for visuals. Of course this is to minimise user frustration when users reach this screen.

enter image description here

My question is: how can this be applied for companies that don't want to use humour or funny characters? Any examples would be appreciated.

1
  • When your use a clear UI widget, e.g. a list. Then you can show an empty list, that is still recognizable as a list and clearly empty. Or do you need to achieve anything beyond communicating that there is nothing to do?
    – allo
    Commented Feb 27, 2020 at 11:30

2 Answers 2

4

Define "serious brand." Airline/train travel does tend to be somewhat more serious, but there are plenty of travel brands that have a more lighthearted approach (Southwest Airlines in the US and Virgin Atlantic, New Zealand Air, etc.).

The purpose of the error page/message: "Help people get where they want to go and, if necessary, indicate that there's a problem getting there the way they intended." (Torrey Podmajersky, Strategic Writing for UX)

The voice and tone (Whether you say "Golly, that's weird..." or "There's an issue on our end...") depends on the brand guidelines' voice and tone definitions. Those will expound on the brand personality's voice attributes and what types of approaches are appropriate. Personally, I don't love an "Oops" or too much humor. Some humor is fine (if it's on-brand), but it shouldn't get in the way of the person doing what they came to do.

The core components, regardless of voice and tone:

  • Don't blame the user, even if it's the result of their action
  • What happened(you may need devs/analysts' input here) It's best to be specific, although for security or other limitations (like not wanting to use too-technical of language), it may have to be somehwhat general.
  • Apologies: depends on the level of inconvenience (You don't have to do a severe mea culpa for a time out or minor issue) and the brand voice and tone (some companies have directives around apologies). However, if it's a major technical limitation, you need to address the inconvenience and follow up with the next part.
  • Recommendations for what they can do. (Refresh their screen, close and reopen the app, try a different search term, etc.)
  • Give recommendations for contact - If they can't resolve through your recommendation, give them Support options. Try to avoid just sending them to your Help Center articles/FAQ. That's highly frustrating, especially if Help Centers don't address edge cases or are poorly written and organized. Include an email, a live chat link, or phone number if possible.

Other tips: write conversationally, using positive contractions (It's, you're) but not negative contractions (for readability - cf. Content Design Londons' readability guidelines) and active voice.

We will always need error states. But we should try to avoid them. Sometimes when I'm asked to write an error message, I ask about the flow, the user's tasks, and we uncover that we just need to design the flow better. "Designers should strive to minimize the chance of inappropriate actions in the first place by using affordances, signifiers, good mapping, and constraints to guide the actions." - Don Norman

6

You've already pointed out an important point of minimizing user frustration.

Besides that you also want to help him as soon as he ends on one of the "empty state" page.

This is where you will stay professional but at the same time comforting. Some website use quirky humour with funny images to achieve that , your tool are going to be words ( + images if needed ).

I'd advise using apologetic tone for the information part and helpful tone for the advice text.

Examples

enter image description here


enter image description here


When it comes to product searching : ensure the user that his search term was submitted correctly and offer him alternatives or a way back from where he came from.

enter image description here

Steps you can take while still being professional:

  • Comfort the user
  • Tell him what happened
  • Provide an acceptable solution

Example for your usecase enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.