Advertisement
User Experience

Crafting the Experience of User Interface Messages

by

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


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?

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 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 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 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 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 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 404

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:

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:

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

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


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


Related Articles


Relevant Books


Design Patterns

Related Posts
  • Code
    Web Development
    Securely Handling User's Login CredentialsSecure wide retina preview
    Consider the following tips on how to properly secure your user's login credentials.Read More…
  • Code
    iOS SDK
    Exploring the Multipeer Connectivity framework: Game Logic78mpi preview image
    In this tutorial, I will show you how to create a simple, multi-player game using the Multipeer Connectivity framework that was introduced in iOS 7. In the first installment of this series, we laid the foundation of the game. In this article, we'll implement the game logic.Read More…
  • Code
    PHP
    Validation and Exception Handling: From the UI to the BackendProcedural to oop php retina preview
    Sooner or later in your programming career you will be faced with the dilemma of validation and exception handling. This was the case with me and my team also. A couple or so years ago we reached a point when we had to take architectural actions to accommodate all the exceptional cases our quite large software project needed to handle. Below is a list of practices we came to value and apply when it comes to validation and exception handling.Read More…
  • Code
    Ruby
    Writing Robust Web Applications - The Lost Art of Exception HandlingRails education retina preview2
    As developers, we want the applications we build to be resilient when it comes to failure, but how do you achieve this goal? If you believe the hype, micro-services and a clever communication protocol are the answer to all your problems, or maybe automatic DNS failover. While that kind of stuff has its place and makes for an interesting conference presentation, the somewhat less glamorous truth is that making a robust application begins with your code. But, even well designed and well tested applications are often lacking a vital component of resilient code - exception handling.Read More…
  • Web Design
    User Experience
    The Building Blocks of Designing UX For KidsUx kids retina
    Designing for kids is a unique and challenging situation for any UX professional. While many principles and practices span across all ages, there are many issues which arise exclusively when dealing with children. In this introductory article we'll look at children and the specific design issues that they bring about. We'll also examine some guidelines, constraints, and considerations that you should take into account when designing UX for kids.Read More…
  • Code
    PHP
    How to Accept Payments With StripeCode
    Processing credit cards is unfortunately far more difficult than we might hope, as developers. Given that it’s such a common task, is it really necessary that we jump through countless hoops (surrounded by fire, of course) for the sole purpose of processing a payment? Merchants? Gateways? SSL? Security? Very quickly, a seemingly simple operation can become an overwhelmingly confusing and, more importantly, dangerous task. Any time that you find yourself handling a user’s sensitive data, you better be on your toes. Read More…