Crafting UX of User Interface Messages

by Vishal Mehta on March 23, 2013

in Communication, Design, Usability, User Experience, User Interface

User Interface Message Design

What the users see on the screen is all his user interface. At times, we dilute (or forget) that user interface is not just blocks, buttons, forms, and images. Text labels and feedback messages are also integral to the experience, and they too need to be designed and (even better,) orchestrated!

End-users can be easily embarrassed or frustrated, first with committing an error, and then facing a cold, blunt error message. Let’s “reward” them with “designed” messages that really contribute – at least to their moods. Sometimes it’s just about a timely dynamism, displaying something of direct relevance at the appropriate time.

First know your audience, then employ wit, humor, pun, flattery, metaphors, sarcasm – all the smarts it takes to design a crisp and impactful messaging. And run it by the audience; go back and iterate the cycle. In fact, this exercise should begin at the start of the user interface design, during the user experience and usability analysis phase. Doing this will even help imagine the graphical elements and colors required to augment user’s emotional response to the user interface. It’s all about conversation, a dialogue. A personal touch is bound to have a longer buy-in.

Let’s walk through some real examples that can inspire us to embrace the slightly casual and bold messaging approach that many young guns and old lions have taken.

#1 Dropbox 

In case your Internet connection is slow and there’s a great amount of file transfer pending, Dropbox asks you to grab a Snickers!

dropbox-snickers#2 Yahoo

While registering for Yahoo Mail, if you mistakenly enter a birth date that’s in future…

yahoo_future#3 Balsamiq

Balsamiq Mockups helps you prepare Dinner if you reach out their “Help” menu.

balsamiq#4 Etsy

Etsy calmly asks you if you’re talking to yourself again, if you start a conversation and have only your Email address. The “again” part is a killer!

etsy

#5 GMail

GMail throws exclamation back to you when you try punctuation in your user name.

gmail_username_error

#6 Buffer

Flattery is indeed beautiful, proves Buffer.

buffer-beautiful#7 Hoot Suite

Snooze enough? Now wake up! Hootsuite knows of our multi-tab browsing habit.

hootsuite-snooze

#8 iContact

iContact shows “crazy” upside-down behavior if you try to visit a page that’s not there!

icontact

 #9 Microsoft

Microsoft tries to guide you if you land up on an unknown territory.

ms#10 Craigslist

Craigslist shouts about Craig’s inability to match your typing speed, when you over-enthusiastically enter items.

craig#11 Expedia

Expedia is direct and prompt – nice example of persuasion technique.

expedia_2

#12 Google Calendar

Nice usability – Google Calendar displays today’s date on the browser Tab favicon.

favicon

#iBooks

Very informative and handy messaging for iPad book readers, especially when you’re about to hit the sack!

ibooks

#13 IMDB

Even the Captcha is relevant to the platform – either a celebrity or movie name. Wonderful connect.

imdb#14 Everyday

This post describes the humor angle Everyday uses for their registered users.

everyday

#15 Twitter

On changing password, Twitter shouts “Woo hoo” and reminds you of the number of applications that “spy” on you with your approval of course. (Spy is the word I would have designed here actually!)

twitter-passwordMany more inspirations floating around. I hope as others, these observations and comments would help you see the importance of designing the user interface messages.

Vishal Mehta

Vishal Mehta

Vishal Mehta is a usability professional who loves to play chess and has a strong eye for details. He's also the CEO of IDYeah Creations, a UX practice in Pune, India. Vishal is also a guest blogger on UXBooth, Technorati, BlogCritics, and SAP Community Network.

More Posts - Website

Follow Me:
TwitterFacebookLinkedIn

{ 2 comments… read them below or add one }

Kayla March 28, 2013 at 8:19 AM

Great post. The examples are invaluable.

About a year ago I wrote a set of guidelines for creating error messages internally and the examples of what is ‘great’, ‘ok’ and ‘ needs work ‘ was the best way to communicate my message to the team. I took these examples for our real system so they knew which classes needed changes and which to keep using.

I also presented a simple list of do’s and don’ts after explaining why we need to put our time and thinking into good messages. Not only do these improve our end users speed of use and increase their subjective satisfaction but meaningful messages reduce repeat errors and reduce the complaints to us (which was the biggest buy in point)

Vishal Mehta Vishal Mehta March 28, 2013 at 8:37 AM

Thanks Kayla. What you said is absolutely correct. I wish this level of attention to messages becomes more common; standardization is good at certain levels; here, customization is the key – based on context and users.

Leave a Comment

{ 2 trackbacks }

Previous post:

Next post: