Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
RTFM? RTFI!
Interface text is the new help
Rachael Mullins @rachaelamullins | Kylie Nicholson @oh_contraire | #ASTCconf2016
https://twitter.com/mizko/status/7399950406430597
12
A post-help era?
@rachaelamullins @oh_contraire #ASTCconf2016
I can’t be bothered figuring
this out, I’ll just move to
a d...
It’s an opportunity, not the end of the world
● More immediate connection with users
● Improve the product itself
● Remove...
Spoiler alert: What we’ll look at
● So what is interface text?
● But what about the help?
● The nuts and bolts of writing ...
So what is interface text?
@rachaelamullins @oh_contraire #ASTCconf2016
IRL
@rachaelamullins @oh_contraire #ASTCconf2016
Buttons
Labels
Menus
Breadcrumbs
Page titles
Help text
Hyperlinks
Placeholders
Notifications
Errors
… and more
Buttons
Lab...
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 b...
But wait, there’s more
Get users to first ‘wow’ moment
@rachaelamullins @oh_contraire #ASTCconf2016
Help users discover fe...
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 cont...
If they won’t read the help, how do we help them?
Make it easier to find the help?
Bring the help to them?
@rachaelamullin...
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 giv...
The nuts and bolts
@rachaelamullins @oh_contraire #ASTCconf2016
“You’ll never spend
more time writing
fewer words”
Cheryl Lowry
6 things I’ve
learned about
writing user
interface text
@r...
If you can write for the web, you’re halfway there
● Use plain language
● Be concise
● Make it scannable
● Chunk your cont...
Content is part of the design
How it works
Interaction design
Product
How it looks
Visual design
What it says
Information ...
Use your (limited) space wisely
● Edit ruthlessly
● Front-load your sentences
● Use lists if needed
● Highlight the import...
TMI is as bad as not enough
Ask:
● Is it relevant for the majority of users?
● Is it important right now?
@rachaelamullins...
Does a picture tell a thousand words?
@rachaelamullins @oh_contraire #ASTCconf2016
Does a picture tell a thousand words?
@rachaelamullins @oh_contraire #ASTCconf2016
Facebook
Twitter
Instagram
Does a picture tell a thousand words?
@rachaelamullins @oh_contraire #ASTCconf2016
● Save space for more important info
● ...
@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...
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 @o...
@mattcutts
@rachaelamullins @oh_contraire #ASTCconf2016
● Use meaningful, active verbs (be suspicious of ‘OK’)
● Be accurate (what will happen when users click?)
Buttons
● Offer ...
Hyperlinks
What’s wrong with
Learn more links?
@rachaelamullins @oh_contraire #ASTCconf2016
Links should have good
informa...
● Disappears when users start typing
● Might cause users to ‘miss’ fields
● Do you need a placeholder at all?
Placeholder ...
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 you...
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
PMs
BAs
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_contrair...
2. There will be some limitations
● Fight for the user (even if it means more dev time)
● Things move fast (but you should...
3. Own the words
● Establish yourself as the expert writer
● Test your words
● Have the final say
@rachaelamullins @oh_con...
To sum up
@rachaelamullins @oh_contraire #ASTCconf2016
● Opportunity to make a bigger impact on users
● We already have th...
Questions?
@rachaelamullins @oh_contraire #ASTCconf2016
Resources
Writing for the web, Nielsen Norman Group
UI content resources, Megan Whalin
Write like a human, Medium publicat...
Resources
How to write for user interfaces, Ocado
Error message style guide, MailChimp (check out the whole style guide, i...
Resources
Micro copy: Content strategy and writing the user interface, Amy Thibodeau
What to include in your UI copy, Writ...
Thanks for
watching
:)
Rachael Mullins
@rachaelamullins
Kylie Nicholson
@oh_contraire
#ASTCconf2016
(Want access to the fu...
RTFM? RTFI! Interface text is the new help
RTFM? RTFI! Interface text is the new help
RTFM? RTFI! Interface text is the new help
RTFM? RTFI! Interface text is the new help
RTFM? RTFI! Interface text is the new help
Upcoming SlideShare
Loading in …5
×

1

Share

Download to read offline

RTFM? RTFI! Interface text is the new help

Download to read offline

Read the manual? Nobody’s got time for that, especially when it comes to mobile and web apps. If users are blocked by poor workflows or difficult concepts, there’s always another app to try. Let’s face it, if your user assistance doesn’t fit in a tweet, it’s often a case of tl;dr.

Instead, users rely on cues within the software interface to give them the information they need, when they need it. That’s why interface text is so important. So what is it? Basically, any wording that appears on an interface. We’re talking button and field labels, navigation cues, link text, help text, notifications and errors.

What does this mean for technical communicators? We not only need to adapt our writing style, but change the way we think about user assistance by engaging more closely with the design and user experience of the product.

We’ll look at:
- Good examples of interface text (plus some #epicfails)
- How to craft effective interface text
- Working with design and development teams to make it all come together.

Interface text is rapidly becoming the most important (and often only) avenue for user assistance in mobile and web apps. It’s the new frontier for technical communicators. So let’s do it right.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

RTFM? RTFI! Interface text is the new help

  1. 1. RTFM? RTFI! Interface text is the new help Rachael Mullins @rachaelamullins | Kylie Nicholson @oh_contraire | #ASTCconf2016
  2. 2. https://twitter.com/mizko/status/7399950406430597 12
  3. 3. A post-help era? @rachaelamullins @oh_contraire #ASTCconf2016 I can’t be bothered figuring this out, I’ll just move to a different app
  4. 4. 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
  5. 5. 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
  6. 6. So what is interface text? @rachaelamullins @oh_contraire #ASTCconf2016
  7. 7. IRL @rachaelamullins @oh_contraire #ASTCconf2016
  8. 8. Buttons Labels Menus Breadcrumbs Page titles Help text Hyperlinks Placeholders Notifications Errors … and more Buttons Labels Menus Breadcrumbs Page titles Help text Hyperlinks Placeholders Notifications Errors … and more Buttons Labels Menus Breadcrumbs Page titles Help text Hyperlinks Placeholders Notifications Errors … and more Buttons Labels Menus Breadcrumbs Page titles Help text Hyperlinks Placeholders Notifications Errors … and more Buttons Labels Menus Breadcrumbs Page titles Help text Hyperlinks Placeholders Notifications Errors … and more Buttons Labels Menus Breadcrumbs Page titles Help text Hyperlinks Placeholders Notifications Errors … and more Buttons Labels Menus Breadcrumbs Page titles Help text Hyperlinks Placeholders Notifications Errors … and more Buttons Labels Menus Breadcrumbs Page titles Help text Hyperlinks Placeholders Notifications Errors … and more Buttons Labels Menus Breadcrumbs Page titles Help text Hyperlinks Placeholders Notifications Errors … and more Buttons Labels Menus Breadcrumbs Page titles Help text Hyperlinks Placeholders Notifications Errors … and more Buttons Labels Menus Breadcrumbs Page titles Help text Hyperlinks Placeholders Notifications Errors … and more Buttons Labels Menus Breadcrumbs Page titles Help text Hyperlinks Placeholders Notifications Errors … and more
  9. 9. Basically, it’s the words on the screen @rachaelamullins @oh_contraire #ASTCconf2016
  10. 10. 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
  11. 11. But wait, there’s more Get users to first ‘wow’ moment @rachaelamullins @oh_contraire #ASTCconf2016 Help users discover features
  12. 12. Interface text is the first line of defence @rachaelamullins @oh_contraire #ASTCconf2016
  13. 13. But what about the help? @rachaelamullins @oh_contraire #ASTCconf2016
  14. 14. 50-60% of MYOB clients don’t access the help before calling support @rachaelamullins @oh_contraire #ASTCconf2016 MYOB contact centre survey 2015-16
  15. 15. 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
  16. 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? 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
  17. 17. The nuts and bolts @rachaelamullins @oh_contraire #ASTCconf2016
  18. 18. “You’ll never spend more time writing fewer words” Cheryl Lowry 6 things I’ve learned about writing user interface text @rachaelamullins @oh_contraire #ASTCconf2016
  19. 19. 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
  20. 20. Content is part of the design How it works Interaction design Product How it looks Visual design What it says Information design
  21. 21. 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
  22. 22. 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
  23. 23. Does a picture tell a thousand words? @rachaelamullins @oh_contraire #ASTCconf2016
  24. 24. Does a picture tell a thousand words? @rachaelamullins @oh_contraire #ASTCconf2016 Facebook Twitter Instagram
  25. 25. 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...
  26. 26. @rachaelamullins @oh_contraire #ASTCconf2016 Icon vs text @lukew This version was clicked by 20% more users
  27. 27. You’re not a robot -- it’s (usually) OK to add personality @rachaelamullins @oh_contraire #ASTCconf2016 Too much
  28. 28. You’re not a robot -- it’s (usually) OK to add personality @rachaelamullins @oh_contraire #ASTCconf2016 Not enough
  29. 29. You’re not a robot -- it’s (usually) OK to add personality @rachaelamullins @oh_contraire #ASTCconf2016 Middle ground?
  30. 30. 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
  31. 31. Jetstar, via @daleotoole @rachaelamullins @oh_contraire #ASTCconf2016
  32. 32. TurboTax, via @kateo @rachaelamullins @oh_contraire #ASTCconf2016
  33. 33. @dr_know @rachaelamullins @oh_contraire #ASTCconf2016
  34. 34. @rachaelamullins @oh_contraire #ASTCconf2016
  35. 35. Some tips for common elements @rachaelamullins @oh_contraire #ASTCconf2016
  36. 36. Let’s talk about... ● Buttons ● Hyperlinks ● Placeholder text ● Error messages ● Help in the interface @rachaelamullins @oh_contraire #ASTCconf2016
  37. 37. @mattcutts @rachaelamullins @oh_contraire #ASTCconf2016
  38. 38. ● 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
  39. 39. Hyperlinks What’s wrong with Learn more links? @rachaelamullins @oh_contraire #ASTCconf2016 Links should have good information scent Descriptive link text is good for SEO
  40. 40. ● Disappears when users start typing ● Might cause users to ‘miss’ fields ● Do you need a placeholder at all? Placeholder text @rachaelamullins @oh_contraire #ASTCconf2016
  41. 41. Error messages @rachaelamullins @oh_contraire #ASTCconf2016 Before After
  42. 42. 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
  43. 43. Helper text attached to an interface element Help in the interface @rachaelamullins @oh_contraire #ASTCconf2016
  44. 44. Help in the interface @rachaelamullins @oh_contraire #ASTCconf2016 Guided help
  45. 45. Help in the interface @rachaelamullins @oh_contraire #ASTCconf2016 ‘Just in time’ help
  46. 46. Help in the interface @rachaelamullins @oh_contraire #ASTCconf2016 Chatbots!
  47. 47. Bringing it all together @rachaelamullins @oh_contraire #ASTCconf2016
  48. 48. The UI writer workload PMs BAs UX Users Devs QA Release @rachaelamullins @oh_contraire #ASTCconf2016
  49. 49. We learned some things @rachaelamullins @oh_contraire #ASTCconf2016
  50. 50. 1. Be there from the start ● Get involved in the design phase ● Become BFFs with the UX team @rachaelamullins @oh_contraire #ASTCconf2016
  51. 51. 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
  52. 52. 3. Own the words ● Establish yourself as the expert writer ● Test your words ● Have the final say @rachaelamullins @oh_contraire #ASTCconf2016
  53. 53. 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
  54. 54. Questions? @rachaelamullins @oh_contraire #ASTCconf2016
  55. 55. 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
  56. 56. 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
  57. 57. 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
  58. 58. Thanks for watching :) Rachael Mullins @rachaelamullins Kylie Nicholson @oh_contraire #ASTCconf2016 (Want access to the full presentation, commentary and all? Get in touch!)
  • hawkt

    Oct. 15, 2016

Read the manual? Nobody’s got time for that, especially when it comes to mobile and web apps. If users are blocked by poor workflows or difficult concepts, there’s always another app to try. Let’s face it, if your user assistance doesn’t fit in a tweet, it’s often a case of tl;dr. Instead, users rely on cues within the software interface to give them the information they need, when they need it. That’s why interface text is so important. So what is it? Basically, any wording that appears on an interface. We’re talking button and field labels, navigation cues, link text, help text, notifications and errors. What does this mean for technical communicators? We not only need to adapt our writing style, but change the way we think about user assistance by engaging more closely with the design and user experience of the product. We’ll look at: - Good examples of interface text (plus some #epicfails) - How to craft effective interface text - Working with design and development teams to make it all come together. Interface text is rapidly becoming the most important (and often only) avenue for user assistance in mobile and web apps. It’s the new frontier for technical communicators. So let’s do it right.

Views

Total views

684

On Slideshare

0

From embeds

0

Number of embeds

18

Actions

Downloads

4

Shares

0

Comments

0

Likes

1

×