UI Text
Simplicity is Difficult
CC-NA-3.0
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
https://slides.com/mike-1/osconjang/live
Simplicity in UI Text
Microcopy
=
Inspiration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3714654/excess-text.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3716280/XP-bsod.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3704620/audience-648476_1920.jpg)
Audience
- Writers
- UI Designers
- UI Developers
- Testers
- Others
Pixabay CC0
Senior Technical Writer
Identity Relationship Management
Mission
- Complete accurate documentation ...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706357/nerd.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
Pixabay CC0
Background
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706388/rhceBook.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706389/linuxAnnoyances.png)
My Bias
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706396/Apache2.png)
Why Graphical UIs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3714647/cli_gui.png)
It sells
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
UIs:
The Holy
Grail
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3731326/xeroxParc.png)
Examples of Bad UI Text
- Billboards
- Street Signs
- Airplanes
- UIs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3790179/BadUIText.png)
Fair use (I hope)
UI Text Can't Solve
Bad Design
- Close
- Open
- Lock
- Instructions?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3710115/BadUIDesign.png)
Credit: Beth Aitman
What Floor?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3710118/ElevatorButtons.jpg)
Bad UI
Text
Extracted?
Text
Credit: Ryan Bigge
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3710120/ExpenseReportBadUI.png)
Useless UI Text
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3710190/SignNotInUse.png)
Credit: Gordon Hatton CC-SA-2.0
Worst UI Text Ever
(IMO)
Worst
UI Text
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3716280/XP-bsod.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3710201/trophy-153395_1280.png)
Text
Text
self-created
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
Not Microcopy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3714654/excess-text.png)
Can you read that in one breath?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
Who Would Read This?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3755160/IDMWoT1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3714659/redWallOfText.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3716280/XP-bsod.png)
Know Your Product
Complete, Accurate Depiction of Functionality- Help Users Do Their Jobs
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3714702/dontMakeMeThink.png)
Credit: Steve Krug
Making the User Think
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3710190/SignNotInUse.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3710190/SignNotInUse.png)
Credit: Gordon Hatton CC-SA-2.0
Sometimes You Should Make Users Think
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3714713/Bridge_Warning.png)
Good UIs
Prevent
Trouble
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3716244/Truckstuck_2006.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3716252/deepBreath.jpg)
Simplicity is Zen
Pixabay CC0
Is
This
Zen?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3716280/XP-bsod.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3719080/TheScream.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3714713/Bridge_Warning.png)
The New BSoD
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3716280/XP-bsod.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3710205/BSOD_Windows_8.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727334/NeedNoDoc.png)
UI
Text
Win
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727374/twitter-1795652_1920.jpg)
Credit: @joaofnfernandes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727383/UghReadTheDocs.png)
UIs That Require
Documentation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3755198/softwareBug.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727388/Personnas.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
End-user
Administrator
Sales Engineer
Manager
Depends on
Audience
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727393/emailAdmin.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727471/justice-423446_1920.jpg)
Pixabay CC0
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727473/UIDesigners.png)
Pixabay CC0
UI Style Guides and Mockups
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727475/UIStyleGuide.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727477/UXMockups.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
UI Developers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727484/UI_Developer.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
Backend
Developers
Under the Hood
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727488/car-engine-1738309_1920.jpg)
Pixabay CC0
Tester
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727494/quality.jpg)
- UI Text: measurable
- QA == Your Friend
Pixabay CC0
Writer
- Right words for your audience
- Hemingway, not Tolstoy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727508/hemingway.jpg)
Implementation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727510/maze-2094070_1280.png)
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
-
Grammar
Start With The Easy Stuff
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727515/Pre-grammar.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
Address Redundancies, Grammar
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727522/post-grammar.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
Comparisons
Examples
- Add a New Connector > Add Connector
- Setup Password Reset > Configure Password Reset
Lessons
- Remove Redundancies
- Review Functional Grammar (e.g. Setup v. Set Up v. Configure)
Not That Easy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727538/BigGrammarChange.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
Be Flexible
- Minimal viable text
- Incomplete sentences OK
- No periods OK
- Incorrect grammar OK (if it works)
- Don't apologize, don't say please (unless necessary)
Don't Be This Guy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727541/noSoup.jpg)
OK to end a sentence with a Preposition
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727543/preposition.png)
OK to Split Infinitives
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727545/infinitives.png)
To Boldly Go Where No One Has Gone Before
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727557/galaxy.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3714654/excess-text.png)
Can you read that in one breath?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
PR Excerpt
The target object qualifies and a link is found,
but the source object is missing
Before:
After:
Valid target found, link found
Objections
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727570/spoiler.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
Answer = Context
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727574/SourceMissing.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3754885/demo1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3754886/demo1a.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3754888/demo1b.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3754890/demo1c.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3754892/demo1d.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3754902/demo2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3754904/demo2a.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3754905/demo2b.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3754907/demo2c.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3754908/demo2d.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727388/Personnas.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
End-user
Administrator
Sales Engineer
Manager
Precedents
Existing UI Text Style Guides
Recommendation
Create Your Own UI Text Style Guide
- Examples from your UI
- Customized for your audience
* Exceptions...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3724029/Bridge_Warning.png)
It's a Conversation
Accessibility
Suitable for screen readers
- Alternate Text (images)
- Shadow Text
- Error Message Icons (!)
- Pop-up Windows
-
Click,Press, Select
Basis:
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3710205/BSOD_Windows_8.png)
The New
BSoD
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3728960/BSOD_corrected.png)
Buttons
Avoid Redundancy
Save
Changes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3728977/SaveChanges-Cross.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3728965/Save.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3728981/Screenshot_from_2017-04-22_12-49-57.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3728981/Screenshot_from_2017-04-22_12-49-57.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3728981/Screenshot_from_2017-04-22_12-49-57.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3728981/Screenshot_from_2017-04-22_12-49-57.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3728981/Screenshot_from_2017-04-22_12-49-57.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
Labels, Dialog, Shadow
Human Readable Names
Not Self-Documenting
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3728985/humanReadable.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
Messages
Don't Blame Users. Be Helpful.
Blame, Apologies = Waste
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3729397/BlameUsers.png)
Credit: Designed for Use, Lukas Mathis
Not
Helpful
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3729403/Yahoo_error.png)
Be Consistent
Terminology / Capitalization / Punctuation
Help Text
Avoid the BSoD
Complete, Accurate, Wall of Text
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3714654/excess-text.png)
Can you read that in one breath?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
Design / Layout
Adds Context
Context Adds Content
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727574/SourceMissing.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
Credits
- Torrey Podmajersky (Microsoft)
- Beth Aitman (Writing can’t fix bad design)
- Steve Krug (“Don’t Make Me Think”)
- Ryan Bigge (Revenge of Nerdview)
- Joao Fernandes (Docker)
- Sarah Day (Pivotal)
- John Moore Williams (@webflowapp)
- Mark Craig (ForgeRock)
- Colin Dean (ForgeRock)
- The Write the Docs Community
The End
Thanks for Listening!
CC-NA-3.0
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
UI Text
Simplicity is Difficult
CC-NA-3.0
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706353/forgerock.png)
UI Text: Simplicity is Difficult
By Mike
UI Text: Simplicity is Difficult
Mike Jang's slides, OSCON 2017
- 5,708