Public
Domain
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/4828730/DenDelay.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/imports/631991/kTFl1Xtq/kTFl1Xtq_001.png)
UI Text
Simplicity is Difficult
CC-NA-3.0
https://slides.com/mike-1/ui-text-forescout-2023/live
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/10413721/Forescout_long-blueblack_CMYK-600px.jpg)
Links
Live: https://slides.com/mike-1/ui-text-forescout-2023/live
Later: https://slides.com/mike-1/ui-text-forescout-2023
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/10413714/2022-Forescout_long-blueblack_CMYK.eps.png)
Why
Company A: 10 Writers | 1 Designer
Company B: 12 Writers | 36 Designers
Cobalt: 2 Writers | 9 Designers | 10 PMs
Needs v. Features
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9526284/Image_from_iOS.jpg)
Simplicity in UI Text
Microcopy
=
Content Design
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)
More Examples
![](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/9703445/Screen_Shot_2022-07-11_at_10.26.37_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9703455/Screen_Shot_2022-07-11_at_10.30.29_AM.png)
Content
Design
Credit: Torrey Podmajersky
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9849846/Screenshot_from_2022-09-18_12-17-17.png)
Links
Live: https://slides.com/mike-1/ui-text-forescout-2023/live
Later: https://slides.com/mike-1/ui-text-forescout-2023
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3704620/audience-648476_1920.jpg)
Audience
-
Writers
- Content Designers
- UI Designers
- UI Developers
- Testers
- PMs
- Support and Sales
- Others
Pixabay CC0
OSCON Audience
- Writers
- UI Designers
- UI Developers
- Testers
- Others
O'Reilly
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/4643866/OSCON.gif)
Lead Technical Writer
Product Documentation
Mission
- Complete accurate documentation ...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3706357/nerd.png)
Pixabay CC0
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/10413721/Forescout_long-blueblack_CMYK-600px.jpg)
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/10413721/Forescout_long-blueblack_CMYK-600px.jpg)
What do users prefer?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3714647/cli_gui.png)
Both
My Answer
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
![](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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9703482/Screen_Shot_2022-07-11_at_10.51.30_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9703485/Screen_Shot_2022-07-11_at_10.52.07_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9703488/Screen_Shot_2022-07-11_at_10.54.25_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9703492/Screen_Shot_2022-07-11_at_10.56.16_AM.png)
Worst UI Text Ever
(IMO)
Worst
UI Text
Source: Hawaii Emergency Management Agency
@
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/4781653/HawaiiBadMenu.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/4781557/2018_Hawaii_missile_alert.jpg)
Result:
Panic!
Better UI Text
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
- Scaling: use style guides
Know Your Product
- Complete, Accurate Depiction of Functionality
Info Popup
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3714654/excess-text.png)
Can you read that in one breath?
From the Docs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/4755915/FromTheDocs.png)
Complete, Accurate Depiction of Functionality
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)
Needs v. Features
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9526284/Image_from_iOS.jpg)
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)
-
-
-
-
-
-
-
-
-
Two Effective Thoughts
![](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)
Docs Not Always Required
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9703507/Screen_Shot_2022-07-11_at_11.05.49_AM.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)
-
-
-
-
-
-
-
-
-
-
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9526376/Screen_Shot_2022-04-29_at_1.42.07_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9703692/Screen_Shot_2022-07-11_at_12.24.32_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9526376/Screen_Shot_2022-04-29_at_1.42.07_PM.png)
Depends on
Audience
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727393/emailAdmin.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
- Support and Sales
- 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/9540268/Screen_Shot_2022-05-05_at_2.14.09_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9540278/Screen_Shot_2022-05-05_at_2.18.01_PM.png)
UI Developers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9540280/Screen_Shot_2022-05-05_at_2.21.25_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/10413721/Forescout_long-blueblack_CMYK-600px.jpg)
Backend
Developers
Under the Hood
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727488/car-engine-1738309_1920.jpg)
Pixabay CC0
Support and Sales
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9716730/people-g25eadb1e3_1920.jpg)
- Customers ask you first
- You have customer perspective
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)
But Everyone Writes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/4760910/English_textbook.jpg)
By Penarc - Own work, CC BY-SA 3.0
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)
Exercise
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/4691703/AddANewConnector.png)
What would you do?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/4691703/AddANewConnector.png)
Make Every Word Earn Its Place
My Change
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/4691705/AddConnector.png)
Exercise
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/4691740/SetupPasswordReset.png)
What would you do?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/4691740/SetupPasswordReset.png)
Make Every Word Earn Its Place
Option
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/4715314/SetUpPassword.png)
My Change
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/4715315/ConfigurePassowrd.png)
Address Redundancies, Grammar
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727522/post-grammar.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)
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/9716744/spaceship-g4cf3b7ce9_1920.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/9712764/Screen_Shot_2022-07-15_at_10.51.31_AM.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)
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/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/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)
Use Case
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9550305/Screen_Shot_2022-05-10_at_11.11.03_AM.png)
Make Every Word Earn Its Place
Discussion
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9550305/Screen_Shot_2022-05-10_at_11.11.03_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9550350/smallScreens2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9550357/Screen_Shot_2022-05-10_at_11.29.09_AM.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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/9526376/Screen_Shot_2022-04-29_at_1.42.07_PM.png)
Precedents
Existing UI Text Style Guides
Recommendation
![](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)
Labels, Dialog, Shadow
Human Readable Names
Not Self-Documenting
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3728985/humanReadable.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
Exception?
Public Domain
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/4828730/DenDelay.jpg)
Error Types:
-
Inline
-
Detour
-
Blocking
Not
Helpful
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3729403/Yahoo_error.png)
One Last Exercise
(in compromises)
UI
Text
In Apps
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727374/twitter-1795652_1920.jpg)
Exercise
- Shorten this statement
- To speed up your app
How would you change this
Options:
Speed
Your App
Improve
App Speed
Don't Be This Guy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/4760951/SoupNazi-minorDiff.jpg)
Lessons Learned
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/9693479/warning-sign-g25368ab6a_1280.png)
Design / Layout
Adds Context
Context Adds Content
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/3727574/SourceMissing.png)
Follow Established Style Guides
Promote User Understanding
Create Your Own Style Guide
"Don't Make Me Think"
Make Every Word Earn Its Place
Lessons Learned
-
Be consistent
-
Avoid the BSoD
-
Use context, such as titles
-
Create your own style guide
-
"Don't make me think"
Credits
- Torrey Podmajersky ("Strategic Writing for UX")
- Mike Wethington (Forescout)
- Beth Aitman (Writing can’t fix bad design)
- Steve Krug (“Don’t Make Me Think”)
- Ryan Bigge (Revenge of Nerdview)
- Joao Fernandes (Docker)
- John Moore Williams (@webflowapp)
- Nicole Sylianteng (nikkisylianteng.com )
- Mark Craig (ForgeRock)
- Susan Tacker (GitLab)
- UX Communities (Content + UX)
Questions
CC-NA-3.0
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/10413721/Forescout_long-blueblack_CMYK-600px.jpg)
The End
Thanks for Listening!
CC-NA-3.0
UI Text
Simplicity is Difficult
CC-NA-3.0
![](https://s3.amazonaws.com/media-p.slid.es/uploads/631991/images/10413721/Forescout_long-blueblack_CMYK-600px.jpg)
UI Text: Simplicity is Difficult (STC: 2023)
By Mike
UI Text: Simplicity is Difficult (STC: 2023)
Mike Jang's slides, customized for Forescout
- 380