UI Text
Simplicity is Difficult
CC-NA-3.0
https://slides.com/mike-1/linuxconf-au-jang/
Simplicity in UI Text
Microcopy
=
https://slides.com/mike-1/linuxconf-au-jang/
No edge cases
Simplicity in UI Text
CC-NA-3.0
Inspiration
ForgeRock 4.0
Audience
-
Writers
- UI Text Specialists
- UI Designers
- UI Developers
- Product Managers
- Testers
- Others
Pixabay CC0
https://slides.com/mike-1/linuxconf-au-jang/
https://slides.com/mike-1/linuxconf-au-jang/
Pixabay CC0
Documentarian
(aka Technical Writer)
-
Access, Analytics, Import, Compliance
-
Author (see Amazon)
-
RHCE (Linux user since '99)
-
Write the Docs Meetups
https://slides.com/mike-1/linuxconf-au-jang
Background
My bias
Why Graphical UIs
What do you prefer?
ForgeRock 4.0
My answer
Both
UIs:
The Holy
Grail
Mantra
Make every word earn its place
Credit: Torrey Podmajersky
Make. every. word. earn its place
Examples of bad UI Text
- Billboards
- Street signs
- Airplanes
- UIs
Fair use (I hope)
UI Text can't solve
bad design
- Close
- Open
- Lock
- Instructions?
Credit: Beth Aitman
What floor?
Bad UI
Text
Extracted?
Text
Credit: Ryan Bigge
Useless UI Text
Credit: Gordon Hatton CC-SA-2.0
Overloaded
UI
Text
Credit: Nikki Sylianteng
Worst UI Text Ever
(IMO)
Worst
UI Text
Result:
Panic!
Mistake
Better UI Text
https://slides.com/mike-1/linuxconf-au-jang/
10 Steps to Better UI Text
- Know your product
- "Don't Make Me Think"
- One easy breath
- Two thoughts
- Minimize need for docs
- Know your audience
- Know your stakeholders
- Start with the easy stuff
- Harder stuff: do your homework
- Use style guides (details)
Know your product
- Complete, accurate depiction of functionality
https://slides.com/mike-1/linuxconf-au-jang/
Info popup
Can you read that in one breath?
ForgeRock 4.0
From the docs
Complete, accurate depiction of functionality
Who would read this?
Know Your Product
Complete, Accurate Depiction of Functionality- Help Users Do Their Jobs
https://slides.com/mike-1/linuxconf-au-jang/
Help Users Do Their Jobs
- Know your product
- "Don't Make Me Think"
- One easy breath
- Two thoughts
- Minimize need for docs
- Know your audience
- Know your stakeholders
- Start with the easy stuff
- Harder stuff: do your homework
- Use style guides (details)
Principles
of UI Design
Credit: Steve Krug
Making the User Think
Credit: Gordon Hatton CC-SA-2.0
Sometimes You Should Make Users Think
Good UIs
Prevent
Trouble
Simplicity is Zen
- Know your product
- "Don't Make Me Think"
- One easy breath
- Two thoughts
- Minimize need for docs
- Know your audience
- Know your stakeholders
- Start with the easy stuff
- Harder stuff: do your homework
- Use style guides (details)
One Easy Breath
Simplicity is Zen
Pixabay CC0
Is
This
Zen?
Cause and Effect
- Know your product
- "Don't Make Me Think"
- One easy breath
- Two thoughts
- Minimize need for docs
- Know your audience
- Know your stakeholders
- Start with the easy stuff
- Harder stuff: do your homework
- Use style guides (details)
Sometimes You Should Make Users Think
The New BSoD
Two Thoughts
Simplicity -> Docs
- Know your product
- "Don't Make Me Think"
- One easy breath
- Two thoughts
- Minimize need for docs
- Know your audience
- Know your stakeholders
- Start with the easy stuff
- Harder stuff: do your homework
- Use style guides (details)
Credit: @joaofnfernandes
UI
Text
Win
Credit: @joaofnfernandes
Some products
have many moving parts
Pixabay CC0
Users want to understand the complexity
Pixabay CC0
Users may want to know more
Be engaging: propose a question
What kind of information is available?
Learn more.
Pixabay CC0
Simplicity Depends on Audience
- Know your product
- "Don't Make Me Think"
- One easy breath
- Two thoughts
- Minimize need for docs
- Know your audience
- Know your stakeholders
- Start with the easy stuff
- Harder stuff: do your homework
- Use style guides (details)
Audiences (Personas)
Actual product users
-
Compliance manager
-
Product manager
-
Developer
-
Product designer
-
Systems administrator
-
Security Engineer
-
Test Engineer
Depends on
Audience
CI/CD
The Stakeholder Challenge
- Know your product
- "Don't Make Me Think"
- One easy breath
- Two thoughts
- Minimize need for docs
- Know your audience
- Know your stakeholders
- Start with the easy stuff
- Harder stuff: do your homework
- Use style guides (details)
The Challenge
Know Your Stakeholders
Stakeholders
- Product Managers
- Designers
- Front-end Developers
- Back-end Developers
- Testers (QA)
- Writers
Product Manager
- Sales
- Customers
- Bandwidth
Pixabay CC0
Pixabay CC0
Mug from Europosters.eu CC NA 3.0
UI Style Guides and Mockups
UI Developers
Backend
Developers
Under the Hood
Pixabay CC0
Tester
- UI Text: measurable
- QA == Your Friend
Pixabay CC0
Writer
- Right words for your audience
- Hemingway, not Tolstoy
Implementation
Pixabay CC0
Getting to Simplicity
- Know your product
- "Don't Make Me Think"
- One easy breath
- Two thoughts
- Minimize need for docs
- Know your audience
- Know your stakeholders
- Start with the easy stuff
- Harder stuff: do your homework
- Use style guides (details)
"Easy Stuff"
-
Functional text
-
Capitalization
-
Voice and tone
https://slides.com/mike-1/linuxconf-au-jang/
Big UIs
-
Distributed effort
-
Consistency
-
Processes new to writers
Details in a checklist
Bigger UIs: larger effort
Identify impact pages
- Distribute tasks with checklists
- Include procedures
Writers changing code
-
Different commit / build / CI/CD process
-
Detailed instructions helpful
Comparisons
Not That Easy
Be Flexible
- Minimal viable text
- Incomplete sentences OK
- Incorrect grammar OK (selected cases)
- Don't apologize, don't say please (unless necessary)
Assumption
US English
Don't Be This Guy
OK to end a sentence with a Preposition
OK to Split Infinitives
To Boldly Go Where No One Has Gone Before
Pixabay CC0
Simplicity Requires Homework
- Know your product
- "Don't Make Me Think"
- One easy breath
- Two thoughts
- Minimize need for docs
- Know your audience
- Know your stakeholders
- Start with the easy stuff
- Harder stuff: do your homework
- Use style guides (details)
The Harder Stuff
More Than Grammar
Complete, Accurate, Wall of Text
Can you read that in one breath?
Change excerpt
The target object qualifies and a link is found,
but the source object is missing
Before:
After:
Valid target found, link found
Objections
Answer = Context
ForgeRock IDM 5.0
Replicating Simplicity
- Know your product
- "Don't Make Me Think"
- One easy breath
- Two thoughts
- Minimize need for docs
- Know your audience
- Know your stakeholders
- Start with the easy stuff
- Harder stuff: do your homework
- Scaling: use style guides
Implementation: Style Guide
- Audience
- Precedents
Audiences (Personas)
Actual product users
-
Compliance manager
-
Product manager
-
Developer
-
Product designer
-
Systems administrator
-
Security Engineer
-
Test Engineer
Precedents
Existing UI Text Style Guides
Recommendation
Create Your Own UI Text Style Guide
- Examples from your UI
- Customized for your audience
* Exceptions...
It's a Conversation
Accessibility
Suitable for screen readers
- Alternate Text (images)
- Shadow Text
- Error Message Icons (!)
- Pop-up Windows
-
Click,Press, Select
Basis:
Click
UI Text Style Guide Components
- Style and Tone
- Buttons
- Labels
- Help
- Messages
- Design / Layout
- Terminology, Capitalization, Punctuation
Style and Tone
Make Every Word Earn Its Place
The New
BSoD
The New
BSoD
Labels, Dialog, Shadow
Human Readable Names
Not Self-Documenting
Messages
Don't Blame Users. Be Helpful.
Bonus item (11?)
Blame, Apologies = Waste
Credit: Designed for Use, Lukas Mathis
Not
Helpful
Exception?
An exercise
In compromises
UI
Text
in
apps
Exercise
Shorten this statement:
To speed up your app
Options:
Speed
your app
Improve
app speed
Original: "To speed up your app"
Don't Be This Guy
Conclusions
Be Consistent
Terminology / Capitalization / Punctuation
Help Text
Avoid the BSoD
Complete, Accurate, Wall of Text
Can you read that in one breath?
Design / Layout
Adds Context
Context Adds Content
10 Steps to Better UI Text
- Know your product
- "Don't Make Me Think"
- One easy breath
- Two thoughts
- Minimize need for docs
- Know your audience
- Know your stakeholders
- Start with the easy stuff
- Harder stuff: do your homework
- Use style guides (details)
Credits
- Susan Tacker (GitLab)
- Torrey Podmajersky (Strategic Writing for UX)
- Beth Aitman (Writing can’t fix bad design)
- Steve Krug (“Don’t Make Me Think”)
- Ryan Bigge (Revenge of Nerdview)
- Joao Fernandes (Confeur)
- Sarah Day (LaunchDarkly)
- John Moore Williams (@webflowapp)
- Colin Dean (ForgeRock)
- The Write the Docs Community
The End
Thanks for Listening!
Slides: https://slides.com/mike-1/linuxconf-au-jang/
UI Text: Simplicity is Difficult
By Mike
UI Text: Simplicity is Difficult
Mike Jang's slides, Linuxconf AU 2021
- 1,303