Upload
rachael-mullins
View
260
Download
0
Embed Size (px)
Citation preview
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
@rachaelamullins @oh_contraire #ASTCconf2016
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
@rachaelamullins @oh_contraire #ASTCconf2016
So what is interface text?
@rachaelamullins @oh_contraire #ASTCconf2016
IRL@rachaelamullins @oh_contraire #ASTCconf2016
ButtonsLabelsMenus
BreadcrumbsPage titles
Help textHyperlinks
PlaceholdersNotifications
Errors
… and more
ButtonsLabelsMenus
BreadcrumbsPage titles
Help textHyperlinks
PlaceholdersNotifications
Errors
… and more
ButtonsLabelsMenus
BreadcrumbsPage titles
Help textHyperlinks
PlaceholdersNotifications
Errors
… and more
ButtonsLabelsMenus
BreadcrumbsPage titles
Help textHyperlinks
PlaceholdersNotifications
Errors
… and more
ButtonsLabelsMenus
BreadcrumbsPage titles
Help textHyperlinks
PlaceholdersNotifications
Errors
… and more
ButtonsLabelsMenus
BreadcrumbsPage titles
Help textHyperlinks
PlaceholdersNotifications
Errors
… and more
ButtonsLabelsMenus
BreadcrumbsPage titles
Help textHyperlinks
PlaceholdersNotifications
Errors
… and more
ButtonsLabelsMenus
BreadcrumbsPage titles
Help textHyperlinks
PlaceholdersNotifications
Errors
… and more
ButtonsLabelsMenus
BreadcrumbsPage titles
Help textHyperlinks
PlaceholdersNotifications
Errors
… and more
ButtonsLabelsMenus
BreadcrumbsPage titles
Help textHyperlinks
PlaceholdersNotifications
Errors
… and more
ButtonsLabelsMenus
BreadcrumbsPage titles
Help textHyperlinks
PlaceholdersNotifications
Errors
… and more
ButtonsLabelsMenus
BreadcrumbsPage titles
Help textHyperlinks
PlaceholdersNotifications
Errors
… and more
Basically, it’s the words on the screen
@rachaelamullins @oh_contraire #ASTCconf2016
What can good interface text do?
● Help make the design usable
● Manage expectations
● Reassure users
● Prevent problems before they happen
● Compensate for poor workflows :(
@rachaelamullins @oh_contraire #ASTCconf2016
But wait, there’s more
Get users to first ‘wow’ moment
@rachaelamullins @oh_contraire #ASTCconf2016
Help users discover features
Interface text is the first line of defence
@rachaelamullins @oh_contraire #ASTCconf2016
But what about the help?
@rachaelamullins @oh_contraire #ASTCconf2016
50-60%of MYOB clients don’t access the help before calling support
@rachaelamullins @oh_contraire #ASTCconf2016
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?
@rachaelamullins @oh_contraire #ASTCconf2016
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?
@rachaelamullins @oh_contraire #ASTCconf2016
The nuts and bolts
@rachaelamullins @oh_contraire #ASTCconf2016
“You’ll never spend more time writing fewer words”
Cheryl Lowry6 things I’ve learned about writing user
interface text
@rachaelamullins @oh_contraire #ASTCconf2016
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
@rachaelamullins @oh_contraire #ASTCconf2016
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)
@rachaelamullins @oh_contraire #ASTCconf2016
TMI is as bad as not enough
Ask:
● Is it relevant for the majority of users?
● Is it important right now?
@rachaelamullins @oh_contraire #ASTCconf2016
Does a picture tell a thousand words?
@rachaelamullins @oh_contraire #ASTCconf2016
Does a picture tell a thousand words?
@rachaelamullins @oh_contraire #ASTCconf2016
Does a picture tell a thousand words?
@rachaelamullins @oh_contraire #ASTCconf2016
● Save space for more important info
● No need to localise
● Nice and minimalist
But...
@rachaelamullins @oh_contraire #ASTCconf2016
Icon vs text
@lukew
This version was clicked by 20% more users
You’re not a robot -- it’s (usually) OK to add personality
@rachaelamullins @oh_contraire #ASTCconf2016
Too much
You’re not a robot -- it’s (usually) OK to add personality
@rachaelamullins @oh_contraire #ASTCconf2016
Not enough
You’re not a robot -- it’s (usually) OK to add personality
@rachaelamullins @oh_contraire #ASTCconf2016
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?
@rachaelamullins @oh_contraire #ASTCconf2016
Jetstar, via @daleotoole@rachaelamullins @oh_contraire #ASTCconf2016
TurboTax, via @kateo@rachaelamullins @oh_contraire #ASTCconf2016
@dr_know@rachaelamullins @oh_contraire #ASTCconf2016
@rachaelamullins @oh_contraire #ASTCconf2016
Some tips for common elements
@rachaelamullins @oh_contraire #ASTCconf2016
Let’s talk about...
● Buttons
● Hyperlinks
● Placeholder text
● Error messages
● Help in the interface
@rachaelamullins @oh_contraire #ASTCconf2016
@mattcutts@rachaelamullins @oh_contraire #ASTCconf2016
● 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)
@rachaelamullins @oh_contraire #ASTCconf2016
Hyperlinks
What’s wrong with Learn more links?
@rachaelamullins @oh_contraire #ASTCconf2016
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
@rachaelamullins @oh_contraire #ASTCconf2016
Error messages
@rachaelamullins @oh_contraire #ASTCconf2016
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
@rachaelamullins @oh_contraire #ASTCconf2016
Helper text attached to an interface element
Help in the interface
@rachaelamullins @oh_contraire #ASTCconf2016
Help in the interface
@rachaelamullins @oh_contraire #ASTCconf2016
Guided help
Help in the interface
@rachaelamullins @oh_contraire #ASTCconf2016
‘Just in time’ help
Help in the interface
@rachaelamullins @oh_contraire #ASTCconf2016
Chatbots!
Bringing it all together
@rachaelamullins @oh_contraire #ASTCconf2016
The UI writer workload
PMsBAs UX Users Devs QA Release
@rachaelamullins @oh_contraire #ASTCconf2016
We learned some things
@rachaelamullins @oh_contraire #ASTCconf2016
1. Be there from the start
● Get involved in the design phase
● Become BFFs with the UX team
@rachaelamullins @oh_contraire #ASTCconf2016
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
@rachaelamullins @oh_contraire #ASTCconf2016
3. Own the words
● Establish yourself as the expert writer
● Test your words
● Have the final say
@rachaelamullins @oh_contraire #ASTCconf2016
To sum up
@rachaelamullins @oh_contraire #ASTCconf2016
● 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?
@rachaelamullins @oh_contraire #ASTCconf2016
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
@rachaelamullins @oh_contraire #ASTCconf2016
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
@rachaelamullins @oh_contraire #ASTCconf2016
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
@rachaelamullins @oh_contraire #ASTCconf2016
Thanks for watching
:)
Rachael Mullins@rachaelamullins
Kylie Nicholson@oh_contraire
#ASTCconf2016
(Want access to the full presentation, commentary and all? Get in touch!)