rtfm? rtfi! interface text is the new help

RTFM? RTFI!

Interface text is the new helpRachael Mullins @rachaelamullins | Kylie Nicholson @oh_contraire | #ASTCconf2016

https://twitter.com/mizko/status/739995040643059712

A post-help era?

@rachaelamullins @oh_contraire #ASTCconf2016

I can’t be bothered figuring this out, I’ll just move to

a different app

It’s an opportunity, not the end of the world

● More immediate connection with users

● Improve the product itself

● Remove barriers between product and help


Spoiler alert: What we’ll look at

● So what is interface text?

● But what about the help?

● The nuts and bolts of writing for the interface

● Bringing it all together in an agile software company

● What we’ve learned along the way


So what is interface text?


IRL@rachaelamullins @oh_contraire #ASTCconf2016

ButtonsLabelsMenus

BreadcrumbsPage titles

Help textHyperlinks

PlaceholdersNotifications

Errors

… and more

ButtonsLabelsMenus


Help textHyperlinks


Errors

… and more

ButtonsLabelsMenus


Help textHyperlinks


Errors

… and more

ButtonsLabelsMenus


Help textHyperlinks


Errors

… and more

ButtonsLabelsMenus


Help textHyperlinks


Errors

… and more

ButtonsLabelsMenus


Help textHyperlinks


Errors

… and more

ButtonsLabelsMenus


Help textHyperlinks


Errors

… and more

ButtonsLabelsMenus


Help textHyperlinks


Errors

… and more

ButtonsLabelsMenus


Help textHyperlinks


Errors

… and more

ButtonsLabelsMenus


Help textHyperlinks


Errors

… and more

ButtonsLabelsMenus


Help textHyperlinks


Errors

… and more

ButtonsLabelsMenus


Help textHyperlinks


Errors

… and more

Basically, it’s the words on the screen


What can good interface text do?

● Help make the design usable

● Manage expectations

● Reassure users

● Prevent problems before they happen

● Compensate for poor workflows :(


But wait, there’s more

Get users to first ‘wow’ moment


Help users discover features

Interface text is the first line of defence


But what about the help?


50-60%of MYOB clients don’t access the help before calling support


MYOB contact centre survey 2015-16

If they won’t read the help, how do we help them?

Make it easier to find the help?

Bring the help to them?


If they won’t read the help, how do we help them?

Make it easier to find the help?

Bring the help to them?

But why not give them help before they even need it?

If you can help users in the interface, why wouldn’t you?


The nuts and bolts


“You’ll never spend more time writing fewer words”

Cheryl Lowry6 things I’ve learned about writing user

interface text


If you can write for the web, you’re halfway there

● Use plain language

● Be concise

● Make it scannable

● Chunk your content

● Be objective, not promotional

● Use hypertext


Content is part of the design

How it worksInteraction design

ProductHow it looksVisual design

What it saysInformation design

Use your (limited) space wisely

● Edit ruthlessly

● Front-load your sentences

● Use lists if needed

● Highlight the important stuff (bold, colour, size)


TMI is as bad as not enough

Ask:

● Is it relevant for the majority of users?

● Is it important right now?


Does a picture tell a thousand words?




Facebook

Twitter

Instagram



● Save space for more important info

● No need to localise

● Nice and minimalist

But...


Icon vs text

@lukew

This version was clicked by 20% more users

https://twitter.com/lukew

https://twitter.com/lukew

You’re not a robot -- it’s (usually) OK to add personality


Too much



Not enough



Middle ground?

Empathy!

● Understand the user’s context

● Don’t manipulate users

● Eliminate jargon

● Focus on the benefits to your users

● Reflect how your users talk

● Read it aloud, does it sound like a human?


Jetstar, via @daleotoole@rachaelamullins @oh_contraire #ASTCconf2016

https://twitter.com/daleotoole/status/761751710867992576

TurboTax, via @kateo@rachaelamullins @oh_contraire #ASTCconf2016

https://twitter.com/kateo/status/711228235732951040

@dr_know@rachaelamullins @oh_contraire #ASTCconf2016

https://twitter.com/dr_know/status/758243571447259136

https://twitter.com/dr_know/status/758243571447259136

Some tips for common elements


Let’s talk about...

● Buttons

● Hyperlinks

● Placeholder text

● Error messages

● Help in the interface


@mattcutts@rachaelamullins @oh_contraire #ASTCconf2016

https://twitter.com/mattcutts/status/713928825802002432

https://twitter.com/mattcutts/status/713928825802002432

● Use meaningful, active verbs (be suspicious of ‘OK’)

● Be accurate (what will happen when users click?)

Buttons

● Offer a clear choice between actions (no overlap)


Hyperlinks

What’s wrong with Learn more links?


Links should have good information scent

Descriptive link textis good for SEO

● Disappears when users start typing

● Might cause users to ‘miss’ fields

● Do you need a placeholder at all?

Placeholder text


Error messages


Before After

Error messages

● Say what’s gone wrong

● Give users a path forward

● Consider severity, impact and frequency

● If it’s your fault, own it


Helper text attached to an interface element

Help in the interface




Guided help



‘Just in time’ help



Chatbots!

Bringing it all together


The UI writer workload

PMsBAs UX Users Devs QA Release


We learned some things


1. Be there from the start

● Get involved in the design phase

● Become BFFs with the UX team


2. There will be some limitations

● Fight for the user (even if it means more dev time)

● Things move fast (but you shouldn’t)

● Marketing’s not (always) the


3. Own the words

● Establish yourself as the expert writer

● Test your words

● Have the final say


To sum up


● Opportunity to make a bigger impact on users

● We already have the skills

● It’s a natural evolution

● You can add real value to your business

Questions?


Resources

Writing for the web, Nielsen Norman Group

UI content resources, Megan Whalin

Write like a human, Medium publication

The style of elements, Medium publication (compiled by Tamara Hilmes)

Writing for user interfaces, Beth Aitman

Microcopy patterns, @tinywordsmatter

Interface writing guide, Google


https://www.nngroup.com/topic/writing-web/

https://www.nngroup.com/topic/writing-web/

http://meganwhalin.com/ui-content-resources/

http://meganwhalin.com/ui-content-resources/

https://medium.com/write-like-a-human

https://medium.com/write-like-a-human

https://thestyleofelements.org/@styleofelements

https://thestyleofelements.org/@styleofelements

http://uiwriting.tumblr.com/

http://uiwriting.tumblr.com/

https://twitter.com/tinywordsmatter

https://twitter.com/tinywordsmatter

https://material.google.com/style/writing.html

https://material.google.com/style/writing.html

Resources

How to write for user interfaces, Ocado

Error message style guide, MailChimp (check out the whole style guide, it’s great!)

Copy that: Helping your users succeed with effective product copy [VIDEO], Sarah Day

Before the docs: writing for user interfaces [VIDEO], Beth Aitman

The art of writing microcopy, Christine Cawthorne

Interface writing: code for humans, Nicole Fenton

How to design words, John Saito


https://goo.gl/nZ2iu9

https://goo.gl/nZ2iu9

http://voiceandtone.com/failure-message/

http://voiceandtone.com/failure-message/

https://youtu.be/M_Q1RO0ky2c

https://youtu.be/M_Q1RO0ky2c

https://youtu.be/LemM9PHDX6w

https://youtu.be/LemM9PHDX6w

https://gathercontent.com/blog/the-art-%20of-writing-%20microcopy

https://gathercontent.com/blog/the-art-%20of-writing-%20microcopy

http://nicolefenton.com/interface-writing/

http://nicolefenton.com/interface-writing/

https://medium.com/@jsaito/how-to-%20design-words-%2063d6965051e9#.9r9m8istq

https://medium.com/@jsaito/how-to-%20design-words-%2063d6965051e9#.9r9m8istq

Resources

Micro copy: Content strategy and writing the user interface, Amy Thibodeau

What to include in your UI copy, Write the Docs Newsletter, September 2016

Five ways to prevent bad microcopy, Bill Beard

The impact of tone of voice on users’ brand perception, Kate Meyer

Practicing empathy in product design, Amy Thibodeau


http://contentini.com/micro-copy-%20content-strategy-%20and-writing-%20the-user-%20interface/

http://contentini.com/micro-copy-%20content-strategy-%20and-writing-%20the-user-%20interface/

http://www.writethedocs.org/blog/newsletter-september-%202016/

http://www.writethedocs.org/blog/newsletter-september-%202016/

https://www.smashingmagazine.com/2013/06/five-ways-%20prevent-bad-%20microcopy/

https://www.smashingmagazine.com/2013/06/five-ways-%20prevent-bad-%20microcopy/

https://www.nngroup.com/articles/tone-voice-%20users/

https://www.nngroup.com/articles/tone-voice-%20users/

https://medium.com/write-like-a-human/practicing-empathy-in-product-design-a17f0a4ffe55#.sfidfdjut

https://medium.com/write-like-a-human/practicing-empathy-in-product-design-a17f0a4ffe55#.sfidfdjut

Thanks for watching

:)

Rachael Mullins@rachaelamullins

Kylie Nicholson@oh_contraire

#ASTCconf2016

(Want access to the full presentation, commentary and all? Get in touch!)

https://twitter.com/rachaelamullins

https://twitter.com/rachaelamullins

https://twitter.com/oh_contraire

https://twitter.com/oh_contraire

rtfm? rtfi! interface text is the new help

Technology