software that makes sense: writing for user interfaces

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

- beth.s.aitman@gmail.com

- uiwriting.tumblr.com