Crafting the Experience of User Interface Messages | Webdesigntuts

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:

There are instances when it is scheduled:

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:

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:

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, 750words.com 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. Twitter.com 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.

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

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:

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?

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.

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.

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

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.

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.

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:

Little help icons within your form may be incredibly helpful:

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

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% :

Fab.com 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:

Or it can be help retrieve a potentially lost sale:

It’s all about the little details. This login screen from Gmail anticipates that you may have forgotten that you have changed your 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.

.

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:

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

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.

---

Conclusion

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+.