Follow the user’s journey to succeed with emotional writing in UI
Visual design often manages to be functional as well as emotional. But when we talk about text, especially in a UI, the latter layer is often missing. How do you balance when and how to apply emotion to your language? The answer lies in knowing the user and user’s journey intimately.
I love the feeling I get when I have tinkered with a Mailchimp campaign for hours and finally get to click the ”Send” button. I have analyzed, segmented, gathered content, designed the campaign, set up all the details, proofread and double checked.
Mailchimp knows my emotional state so well, because the screen that greets me after the click is:
The unemotional version of this screen (that is, the version you see 95% of the time) consists of a green tick in a box and nothing more than the text ”Your email has been scheduled”. That version has the same level of functionality, since I think the user comprehends the meaning just as well in both cases, but Mailchimp’s choice gives their personality a chance to shine. At exactly the right moment they infuse not only function but also emotion into the text.
But when is the right moment?
A well-designed text meets the user where they are in their experience. If the text is on one emotional level and the user on another, the design has failed. Mailchimp has a consistently relaxed voice, but that’s not the key to their success when it comes to voice. The key is they know when to tone it down and when to let it shine.
Invisible design and invisible language
Before I go into the details of succeeding in this area, let’s look at the saying “Good design is invisible”. My interpretation of this often used phrase has always been that the design should deliver the experience unadulterated to the user.
When it comes to language as part of the design, George Orwell (of 1984 fame) argued in a similar way. In his essay Why I Write from 1946, Orwell writes:
”Good prose should be transparent, like a window pane.”
Both sayings are getting at the same thing: The medium through which we deliver the experience shouldn’t draw attention to itself and instead simply deliver the content.
The question is if the sayings are right when the subject is good text design. Should it always be invisible, the glass always 100% transparent? No, not according to me. Many fiction writers at least go against Orwell’s advice by letting the language itself enhance the experience. An average story can be depicted with language that makes the experience unforgettable.
Similarly, in a UI context, I think that you dare to use language that draws some attention to itself, if–and this is an important if– you have a good understanding of the user and where she is on her journey through the experience. To actually dare to use a language with emotions, a distinct voice that draws a little attention to itself, can add to the experience as a whole even if it’s possible to argue that it obscures the functionality a tiny bit.
That is exactly what Mailchimp has done. The first time the Rock On sign popped up, did it take me half a second longer to understand that it was a confirmation message, than if I’d gotten a checked box?
Probably.
Is that lost half second outweighed by the grin on my face when I realize that a monkey is doing the sign of the horns to celebrate that my campaign is finished?
Oh yes.
Constantly short and sweet?
”Keep it short, concise and as simple as possible.”
The above advice is popular if you read UX people and copywriters who are giving tips about writing copy for UX. I’m inclined to … almost agree.
As a rule of thumb, the advice is great. I repeat it often and willingly to writers on all levels. Inexperienced writers tend to complicate their writing in an effort to sound like something they think they have to sound like. Experienced writers, on the other hand, sometimes seem to have a need to assert themselves and fight for having 57 words in the on-boarding for the app when there’s only really a need for 11 words + two illustrations.
So yes, short and concise goes a long way and forces your best creative side to come out. But to constantly cut away everything that can be labelled ”superfluous”, that doesn’t give any room for some extra emotion. Room for surprises to delight, for personality to shine. Adding a few extra words, perhaps an extra space for text, could be the icing on the cake, the thing that makes the experience truly memorable for the user. (A more process-oriented advantage is that words also are the easiest thing to experiment with, the least time consuming thing to come up with different versions of for user testing.)
The baseline must be to keep focus on function, that goes for copy in a UI as well as in other contexts. The moments of emotion are the exceptions that prove the rule.
So when can you make an exception?
Meet the user’s emotions
When we at Uppfatta design a voice for a brand, we require the voice to deliver on multiple levels. The language always has to be functional and consistent, that is fundamental, especially if we’re talking language + UI. If the language is unclear, it can’t contribute to the experience in any other way than destroying it.
Once the language is functional and consistent, a service can start thinking about spicing up the interface by adding an emotional layer. When and how? Now I’d like to replace the rule about striving for invisibility with a new one:
Match the users feelings with the feelings in your design.
The user has just fired off a campaign they have been working on for hours. They are happy — so match that with the copy! Treat yourself to an extra line of text that shows your personality and offer the user that little extra something that reinforces the feeling and builds the relationship between user and brand.
Same goes for the opposite situation: a negative message. When a message pops up to tell the user that the connection was lost and that they need to fill in the information again, then the user is frustrated, perhaps even pissed. A well-designed text meets that with an expression that shows that it understands the user’s anger, apologizes if it’s really bad, gives clear instructions on what the user should do in order to avoid that it happens again.
What is moderation when it comes to emotions in text?
That the emotional layer should be executed with moderation is obvious, just like the visual design won’t overwhelm the user with animations and graphical easter eggs in every view in a UI. But ”with moderation” is a fuzzy guide, so here are three guidelines that I, for one, like to base my thinking on:
Preferably in the rarely visited workflows. Text that builds personality, takes up space, surprises somehow, are suitable for reinforcing the experience in parts of a UI that the user won’t visit all the time. If one and the same witty line meets the user every time they send a message, for example, the copy will soon get in the way of functionality and run the risk of causing frustration.
Preferably randomly. Multiple services I use, for instance Slack and Asana, show a lot of their personality in the load screens. I see the screens every time I launch — which goes against the advice above — but the message is random. I’m constantly exposed to new copy in these services, even though I go through the same workflows. What if your text has such a great voice and is so worth reading that it almost makes me want to re-launch the app to see more?
Do your own thing! A great design team would never sit down and look at a competing service and just straight off decide to copy its structure, colour, shape. All brands seem to defend the importance of making your own mark, finding your own visual expression. With text … it can be almost the opposite. People copy enthusiastically. The juice brand Innocent is considered the sole origin behind the trend that in Great Britain is called ”wackaging” — food packaging that has ”a bit whimsical” copy on it. Innocent had a clear branding idea behind it when they did it; the competition copy because … yes, why? It’s just silly. Stand for something different, find your own expression.
Now I’m eager to read your input. How do you reason when you write for an interface of some kind, where the text can’t be in the way and must play its role, but at the same time has the potential to do so much more than just being functional? Have you seen a wicked example of copy in UI?
Follow this publication for a constantly developing conversation in the intersection of writing, branding and design.
