1. Web Design
  2. UX/UI
  3. UX Design

Crafting the Experience of User Interface Messages

Scroll to top
Read Time: 9 min
This post is part of a series called UX Foundations.
Defining And Applying Personas to UX Design
Applying Fitts’ Law To Mobile Interface Design

Designing effective and friendly user-interface messages is an art form in itself. Whilst designers spend a lot of time crafting the bulk of the main user interface, designing messages can seem like an after-thought. Feedback is actually the glue between user and interface; without it, users can become confused.

Types of Messages

Before we go on any further, perhaps we should take a look at real-life examples of UI feedback messages:

Website Messages

The most common error message you will encounter is the 404 page not found message. This happens when a user has accidentally typed the wrong URL, or the previous URL is no longer accessible.

Website downtime messages occur when the server literally goes down, sometimes unexpectedly:

Tumblr’s downtime message

There are instances when it is scheduled:

Scheduled downtime credit

The famous twitter fail whale

These messages are designed to notify the user of a result after they have performed an action:

In this case, Versions tells the user that their download has started and it can be found in their downloads folder:

A common top-of-site boxed message which reminds users to verify their email:

Zootool uses an entire page to tell the user to verify their emails before allowing them to continue:

And this one thanks the users for verifying:

Form Messages

Form messages are regularly encountered too. The most common examples are experienced during validation, which occurs when a user submits a form whereupon a script checks to see if errors have occurred:

Per form field validation source

There can be some creative usage of form messages, they may not necessarily appear only for errors. They could be used as a nifty guide which helps the user to fill in a form:

Password strength indicator

This is an example of a message appearing after a form has been filled successfully:

Application Messages

The lines between web and native applications are becoming increasingly blurred. Plenty of web applications are designed to behave like a native application. For example, has a growl -like pop-up message when you use a keyboard shortcut to save an entry:

You can also design messages to appear at well-positioned areas to encourage users to perform additional actions. informs users that they have updates:

Designing messages for the mobile interfaces are another challenge because of the small-form factor; messages have to be obvious.

a status message from an app

Again, if timed well, a message can be designed to act as a tip:

UI messages can also act as a user guide

It can also be utilized as a form of encouragement to the user for completing a task:


Thinking on Behalf of the User

We need to put ourselves in the shoes of our users. What do you want them to feel when they visit your website or use your application? You would want them to feel like they can trust you and it would be an extra bonus if they could actually feel delighted while using your website. If there is not enough thought put into designing your messages, it could cause a lot of frustration and disappointment.

Most users visit a website or use an application to complete a defined objective. To find out more about a company, to purchase a product, to accomplish a task using an application, etc. For example, imagine yourself as a user trying to buy something on a website. Can you imagine how the user would feel if nothing happened after clicking “add to cart”? There have to be appropriate signposts indicating where an action has gone wrong:

An example of a well-highlighted error while adding to cart

Another scenario would be a user trying to complete an important task on your website. Perhaps the user could be trying to pay rent through an online financial website you are in charge of. Can you imagine the fear, frustration and worry if the website stops working all of a sudden in the middle of a financial transaction?

img credit

The error message above fails to identify the source of the error - potentially frustrating to the user who is trying to complete a transaction.

Best Practices

Let’s consider a few best practices where feedback and messages are concerned.

Be as Specific as Possible

This Dealotto message is a good demonstration of being simple yet specific:

  • Green bar on top like a typical status message.
  • Visual icon to reinforce the message with appropriate headline.
  • Indicates to user that there are a number of steps.
  • Fine print to communicate more information and also provide the next course of action.
dealotto confirmationdealotto confirmationdealotto confirmation

Be as Obvious as Possible

Nobody will miss these validation errors at this sign up form on Vimeo :

  • Strong color representation.
  • Position relative to form field with triangular pointers.
Vimeo signup validationVimeo signup validationVimeo signup validation

37signals created this artsy looking blank slate message to give users an idea of what to do when they have no items:

basecamp blank slatebasecamp blank slatebasecamp blank slate

However, Don’t Overwhelm Your Users

Have you ever encountered an interface which is trying to get every inch of your attention? It uses every UI convention available, modal windows, inline messaging, top-of-page messaging, to try to get you to do something.

Being too obvious or incessant can result in the opposite effect; the user giving up on the interface.

Overwhelming form errorsOverwhelming form errorsOverwhelming form errors
Do not let your validation error design become an overwhelming red sea of errors.

This modal window used to appear when you tried to read a Huffington Post news article for the first time. It could be confusing to users who may have thought that Twitter was needed to read the article.

Huffington Post Twitter modalHuffington Post Twitter modalHuffington Post Twitter modal

Provide Additional Guidance

When displaying a message, whether for an error or a notification, it will always be helpful to provide additional tips or help to the user. This is especially true in the context of site errors, many a time they are inevitable but we can make the experience as painless as possible.

Vimeo provides helpful guides to other sections, complete with a help link at the bottom:

Vimeo 404Vimeo 404Vimeo 404

Little help icons within your form may be incredibly helpful:

Ticket Trunk HelpTicket Trunk HelpTicket Trunk Help

This help tooltip goes a little further, including a link which the user can click on to get more information:

Form from Postmark . Credit

Invisionapp provides a helpful tip while displaying the loading image:

The Art of Anticipation

Designing good feedback messages is all about anticipation. This includes anticipating:

  • How the user would feel.
  • What the user would do.
  • The type of errors they may be inclined to make.
  • Scenarios where you require the users’ patience.
  • Scenarios where you try to save a potential lost cause.

Kicksend noticed some of their users were not verifying their emails. They analyzed their data and found that they were simply typing the wrong email addresses by common typo errors. Hence, they designed a jquery plugin, mailcheck.js to check for common typo mistakes when users fill in their email addresses. With such a simple check, they reduced verification email bounces by 50% : anticipated that some of their users would cancel their accounts. Here they try to save a lost cause by providing this message when you try to cancel an account:

Sometimes anticipating scenarios can be a life-saver:

tumblr unfinished posttumblr unfinished posttumblr unfinished post

Or it can be help retrieve a potentially lost sale:

Threadless cart  item is running outThreadless cart  item is running outThreadless cart  item is running out

It’s all about the little details. This login screen from Gmail anticipates that you may have forgotten that you have changed your password:

gmail forgot password

More inspiration from Gmail; I am sure this has been helpful for countless people by simple anticipating a common user error like forgetting to attach files:


Progress indicators are an important form of UI messaging. Foursquare designed a subtle message to inform users that they are getting your location and finding interesting places while the data loads. This accomplishes a two-fold objective.

  1. It tells you to be a little patient while the page loads.
  2. It’s also giving you an indication that it’s performing a smart action in the background by analyzing your data.
  3. .

TeuxDeux anticipates syncing is important for a to-do list and warns a user that the internet connection is being lost with a humorous notification:


There are a ton of other examples on how to anticipate and build “defenses” for your user interface.

Injecting Humor and Emotion

We mentioned earlier that it’s important to think on behalf of the user. Minimizing their frustration is crucial and we can even take it a step further. Plenty of users face a screen for long hours. By showing empathy or injecting some humor, it turns a frustrating or mundane scenario into a potentially amusing one.

This broken robot makes you smile, right?

For further good examples for 404 pages, you can refer to this Pinterest collection. Aside from errors, even simple notifications can make you smile during a long day:

hootsuite feedbackhootsuite feedbackhootsuite feedback

Many of us struggle with inbox zero, but perhaps it’s worth the effort for Gmail:

Gmail inbox zeroGmail inbox zeroGmail inbox zero

This message from Buffer uses a little flattery and humor to get more signups:


Another notification message that will probably bring a smile to your face through smart copywriting:


This excellent deck from Aaron Walter, lead designer from Mailchimp is a good primer on Emotional Design for those of you interested in learning more.


I hope this run-down on crafting messages for your user-interface was helpful. I have included additional resources below for further reading and exploration. There is no black or white in designing messages, rather it takes lots of empathy, experience and of course, feedback from users themselves.

Do not be afraid to go through a number of iterations to get the feel of your messages right. Ask people for feedback, start from communicating the intended message to the user, and if that works, perhaps drop in a little humor or emotion to enhance the overall experience. Always try to be helpful!

Feel free to drop questions in the comments area. Feedback is always welcome to help us to write even better articles for you at Webdesigntuts+.

Related Articles

Relevant Books

Design Patterns

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.