The Craft of WordsChristopher Murphy

@fehler

UX Masterclass · 24 June, 2014

• I’d like to thank Niall for inviting me to speak, I appreciate the opportunity to share some of what I’ve learned with you.

@fehler

...............“Un café, s’il vous plait.”

......................................

Prix du café en terrasse“Un café.”

“Bonjour, un café, s’il vous plait.”

C-- 7

C-- 4

C-- 2

• Featured in The Guardian, this is a lovely example of words setting a tone and using humour to establish a brand’s personality.• Words are everywhere.• When used well, they can establish the ‘voice’ of a brand, but – equally – can serve a functional requirement.

@fehler

@fehler #wonderfulwords

Twitter

• I’m @fehler on Twitter.• I’d appreciate if you’d hashtag any questions or comments you have with #wonderfulwords, that way we can continue the discussion online.• I’ll be sharing my slides afterwards so there’s no need to frantically write everything down.

@fehler

What I’ll be covering…1.2.3.4.

Designing ExperiencesVoice and ToneEnabling InteractionsResources

• So, what will I be covering?• 1. I’ll start by considering the importance of words in shaping experiences: words at the macro and the micro level.• 2. I’ll then consider macrocopy, exploring the difference between ‘voice’ and ‘tone’.• 3. Next I’ll consider the importance of microcopy, exploring how words can ease interactions.• 4. Finally, I’ll offer some go to references.

@fehler

But first… a little light reading.

• Before I get started, I’d like to recommend a little light reading.• In addition to my work as a writer and designer, I’m an educator, so you won’t be surprised to see a list of key texts that inform my thinking.

@fehler

• I’d like to recommend the following books.• They are all about the importance of words, at the heart of the design process.

@fehler

• Nicole Fenton and Kate Kiefer Lee’s ‘Nicely Said’ has recently been published and is well worth getting.

http://j.mp/nicelysaid

@fehler

• Roy Peter Clark’s ‘Writing Tools’ offers fifty excellent strategies to improve your writing. It’s less focused on writing for the web, rather it’s intended to improve your skills as a writer.

http://j.mp/clarkwritingtools

@fehler

fivesimplesteps.com Promo Code: chrismurphy

• Finally, and I might be a little biased here, I’d recommend ‘The Craft of Words’, by yours truly.

http://fivesimplesteps.com

@fehler

fivesimplesteps.com Promo Code: chrismurphy

• Two companion volumes, which explore macrocopy and microcopy respectively.• The folks at Five Simple Steps are offering a 20% discount on these books and the entire Five Simple Steps library. Use the code ‘chrismurphy’, which is good for one week.

http://fivesimplesteps.com

@fehler

1. Designing Experiences

• As designers we shape experiences.

@fehler

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.” — Oliver Reichenstein

“

• Before we even consider typography, let’s consider the words we use.• They shape your users’ experience, put some thought into them.

@fehler

• The words we use can shape our users’ experiences.

@fehler

• Use the right words and we can delight our users.

@fehler

• Use the wrong words and we can frustrate our users.• In a social age of Twitter and Facebook, these experiences - positive or negative - can spread like wildfire.

@fehler

Macrocopy and Microcopy

• We need to consider words at both the macro and the micro level.

@fehler

Macrocopy• Establishes the Tone• Sets Personality

• Macrocopy establishes the voice of your brand, be it fun, neutral or serious.

@fehler

Microcopy• Reinforces the Tone• Satisfies a Function

• Microcopy reinforces the voice of your brand, but also serves a functional purpose.

@fehler

There was a golden age when copy was crafted…

• We seem to have forgotten this…

@fehler

• In the Mad Men era, a copywriter sat at the heart of the design process.

@fehler

• Paul Kinsey, copywriter for Sterling Cooper.• This was also a golden age when one could enjoy a whiskey while you worked.

@fehler

Words Shape Experiences

• The words you choose shape your user experience.

@fehler

Flickr… Hello, Hola, etc., and microcopy…

• Flickr championed this with its lovely attention to details.• This welcome, in a multitude of languages, serves to delight users.

@fehler

• Flickr’s original copy established a clear voice for the brand.

@fehler

• This seems to have been sadly forgotten under Yahoo!’s leadership.• Flickr’s current copy as lost its initial playfulness. There’s a sense that the brand has lost its identity.

@fehler

2. Voice and Tone

• Words at the macro level shape your brand.

@fehler

• At the start of the design process it’s worth considering where your brand sits on the continuum. Is it friendly and personal? Or is it serious and corporate?

@fehler

Brand Dictionaries

• One tool that’s worth using to shape this is a brand dictionary, a ‘palette’ of words that helps define the brand.

@fehler

• smart…• “The smart fortwo is the ideal choice for urban mobility. It is quite simply moremanoeuvrable, more agile, safer and more environmentally friendly.”• Taking this as an indication, smart’s brand dictionary might include the following words: manoeuvrable; agile; dynamic; expressive; assertive; and effortless.

@fehler

smart

AgileExpressive

Dynamic

FunFriendly

• smart…• “The smart fortwo is the ideal choice for urban mobility. It is quite simply moremanoeuvrable, more agile, safer and more environmentally friendly.”• Taking this as an indication, smart’s brand dictionary might include the following words: manoeuvrable; agile; dynamic; expressive; assertive; and effortless.

@fehler

• Mercedes-Benz on the other hand…• “The A-Class: a radical piece of automotive engineering designed to breathe new life into the compact segment.”• The Mercedes-Benz brand dictionary could comprise words like: engineering; aerodynamics; efficiency; uncompromising; stylish; and engaging.

@fehler

Mercedes

Precision

Luxury

Stylish

Engineered

Efficient

• Mercedes-Benz on the other hand…• “The A-Class: a radical piece of automotive engineering designed to breathe new life into the compact segment.”• The Mercedes-Benz brand dictionary could comprise words like: engineering; aerodynamics; efficiency; uncompromising; stylish; and engaging.

@fehler

Case Studies• GOV.UK• Hiut Denim

• I’d like to take a look at two case studies now, at two different points on the personal-corporate continuum.

@fehler

• GOV.UK, a huge project to redesign the UK government’s web presence, started with content and copy.• “User needs came first when designing the site and this has enabled a sophisticated simplicity in design and content to flourish.”

http://www.loft27design.com/index.php?/ongoing/govuk/

@fehler

• GOV.UK embraces clear and simple language.

@fehler

• Government jargon is banished.

@fehler

• GOV.UK’s Content Style Guide is well worth reading.

https://www.gov.uk/design-principles/style-guide

@fehler

• Hiut Denim adopts a more personal tone.

@fehler

• The language used is important. You’re not buying any old jeans… you’re making an investment.• “Selvedge is an investment. Ours is from Kuroki, the artisanal Japanese denim mill. This denim is hand dipped ten times with natural indigo to give it its deep blue colour.”

@fehler

• Hiut stress the need to, “Do one thing well.”• Just four words, but they tell the story of the Hiut Denim brand, encapsulating its ethos.

@fehler

• “Our town is going to make jeans again.”• Hiut Denim understand the importance of telling stories. People buy into stories (when they reflect reality… you can’t fake it).

@fehler

3. Enabling Interactions

• Equally important… well-crafted microcopy can assist our users, resulting in seamless experiences.

@fehler

Signups

• Signups are one place where microcopy can shine.

@fehler

Peachpit

• Not so good.

@fehler

• That orange ‘Requirements’, above the password field, flags up something I need to know.

@fehler

• But, why hide this helpful microcopy away?

@fehler

• But, why hide this helpful microcopy away?

@fehler

Flickr

• Flickr does a much better job.• This is a combination of great microcopywriting, coupled with well thought through front- and back-end functionality.

@fehler

• This form features lots of beautifully written microcopy, designed to assist the user.

@fehler

• Consider this password field, in stark contrast to Peachpit’s. The microcopy is upfront, designed to assist the user to get the task at hand completed.

@fehler

• Every step of the way the user is guided and, helpfully, as password criteria are met the requirements are ticked off.

@fehler

• This eases the user’s journey and results in a much more pleasurable experience.• No one likes filling in forms, as designers we owe it to our users to ensure this process is as pain free as possible.

@fehler

• This is great design and 90% of it is about words.

@fehler

Bonks and Clanks

• Another great place for microcopy is to help shape a user experience when things go wrong.

@fehler

• Berg’s Little Printer web-based prototyper attempts to lighten the mood when things go wrong.• The emoticon - ;( - also provides a little empathy.

@fehler

• Dribbble not only offers a, “Clank!” but provides some helpful microcopy to guide the user, helping them to understand which image formats are supported and which aren’t.• Great work.

@fehler

• This error message from Panic’s otherwise excellent Transmit delivers a message straight from the heart of the server; a message which would be daunting enough, even without the worrying fact that, “OOPS,” a, “child died.”

@fehler

• This message from moo.com was never meant for a typical user’s eyes. It was left in the code, unintentionally I hope, by a developer who needed this information when testing the site.• At a later stage, it should have been replaced by something ordinary humans would understand.

@fehler

Delighters

• Delighters - tiny fragments of copy - are another place we can lighten the mood an show our humanity.

@fehler

• Everyone knows a watched pot never boils. Dropbox certainly does. Encouraging you to “Grab a Snickers” is a lovely little touch as you await your precious data’s delivery from the cloud.

@fehler

• Everyone knows a watched pot never boils. Dropbox certainly does. Encouraging you to “Grab a Snickers” is a lovely little touch as you await your precious data’s delivery from the cloud.

@fehler

• Foamee does a lovely job, with a little ‘Burp’ when the user hovers over the site’s icon.• This serves no real functional purpose other than an intention to delight. It brings a smile to users’ faces, no bad thing.

@fehler

4. Resources

• To close, I’ve gathered some helpful resources that are well worth bookmarking.

@fehler

• Voice and Tone is an excellent resource, well worth a bookmark.

http://voiceandtone.com

@fehler

• MailChimp is well known for its use of fun and engaging language, especially when it applies to their mascot, Freddie the chimp.

@fehler

• However, MailChimp’s approach to language alters completely in the face of failure. Gone is the light-heartedness of Freddie, replaced by straightforward language that gets to the point quickly and efficiently.• When mission critical things go wrong, it’s better to alter the tone and empathise with your users.

@fehler

• As mentioned earlier, GOV.UK’s Content Style Guide is well worth looking at.

https://www.gov.uk/design-principles/style-guide

@fehler

• ‘Empty States’ provides some fantastic advice for copy designed to get users on board an app when it’s launched for the first time.

http://emptystat.es

@fehler

• Joshua Porter - of ‘52 Weeks of US’ - has written a lovely little guide to writing microcopy. It’s well worth taking a look at.

http://bokardo.com/archives/writing-microcopy/

@fehler

• Lastly, Des Traynor - of Intercom - has an excellent article on ‘Writing an Interface’, including a link to a presentation from the Content Strategy Forum about the language of interfaces.

http://insideintercom.io/writing-an-interface/

@fehler

The fastest way to improve your interface is to improve your copywriting.” — Joshua Porter

“

• Words are powerful, yet are an often overlooked part of the design process.• Put words to good use at the heart of your design process and you’ll delight your users.

@fehler

Thank You@fehler #wonderfulwords

• Thank you.