software that makes sense: writing for user interfaces
TRANSCRIPT
Building software that makes sense
Writing for user interfacesBeth Aitman@baitman
Why does UI text matter?Introduction - Microcopy - Help - Errors
Text makes UIs meaningful
from https://signalvnoise.com/posts/3404-reminder-design-is-still-about-words
Introduction - Microcopy - Help - Errors
Text makes UIs meaningful
from https://signalvnoise.com/posts/3404-reminder-design-is-still-about-words
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
“Good design requires good communication, especially from machine to person.”
Three main areas1.Microcopy
2.Embedded help
3.Error messages
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
First, microcopyIntroduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Microcopy is difficult“Naming things is hard!”
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Three strategies for microcopy1.Think from the user perspective
2.Choose names they can understand
3.Experiment with phrasing
Introduction - Microcopy - Help - Errors
1. Think from the user perspectiveIntroduction - Microcopy - Help - Errors
What are your users doing?
1. Think from the user perspectiveIntroduction - Microcopy - Help - Errors
Explain what a feature does, not how it works
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
For buttons, think actions
1. Think from the user perspective
Introduction - Microcopy - Help - Errors
For buttons, think actions
Not this!
1. Think from the user perspective
- What’s it normally called?
- What will users know about?
- What do users call it?
Introduction - Microcopy - Help - Errors
2. Choose names users can understand
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Find out what something’s usually called,
BUT make sure it’s not just internal!
Introduction - Microcopy - Help - Errors
2. Choose names users can understand
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Researching terminology:
- User research calls/site visits
- Read forums
- Blog posts
Introduction - Microcopy - Help - Errors
2. Choose names users can understand
Introduction - Microcopy - Help - Errors
3. Experiment with phrasing
Try explaining it in a sentence.
Introduction - Microcopy - Help - Errors
3. Experiment with phrasing
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
… and embedded help is there if you need it.
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Embedded helpIntroduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Embedded helpShouldn’t you just design a perfectly intuitive interface?
Introduction - Microcopy - Help - Errors
Embedded help- What to include
- How to display the information
Introduction - Microcopy - Help - Errors
What goes in embedded help?“What does your user need to know to complete their task?”
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Don’t overload peopleIntroduction - Microcopy - Help - Errors
Embedded help vs docs- If it’s necessary information:
probably keep it in the UI
- If it’s huge:summarise, then link to a doc
Introduction - Microcopy - Help - Errors
How do you get it right?- User testing
- Keep an eye on support
Introduction - Microcopy - Help - Errors
Show help in the relevant placeIntroduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Embedded help stylesThere are tons.
Introduction - Microcopy - Help - Errors
Embedded help stylesThere are tons. But to get started:
- inline help
Introduction - Microcopy - Help - Errors
Embedded help stylesThere are tons. But to get started:
- expandable questions
Introduction - Microcopy - Help - Errors
Embedded help stylesThere are tons.
So experiment!
Introduction - Microcopy - Help - Errors
In summary- find out what user needs to complete task
- don’t overload with information
- show help in a relevant place and time
Introduction - Microcopy - Help - Errors
Error messagesIntroduction - Microcopy - Help - Errors
Error messages are easy!I’ve got a formula.
Introduction - Microcopy - Help - Errors
- what went wrong
- consequences
- how to fix it
Introduction - Microcopy - Help - Errors
- what went wrong
- consequences
- how to fix it
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
- what went wrong
- consequences
- how to fix it
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
- what went wrong
- consequences
- how to fix it
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
Introduction - Microcopy - Help - Errors
- what went wrong
- consequences
- how to fix it
Introduction - Microcopy - Help - Errors
In summary...1.Think from the user perspective to get microcopy right.
2.Help users complete their tasks with embedded help.
3.Write error messages that help users recover.
Thanks for listening ! Any questions?
Feel free to get in touch:
- @baitman
- uiwriting.tumblr.com