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

  1.  Know your product
  2. "Don't Make Me Think"
  3.  One easy breath
  4.  Two thoughts
  5.  Minimize need for docs
  6.  Know your audience
  7.  Know your stakeholders
  8.  Start with the easy stuff
  9.  Harder stuff: do your homework
  10.  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

  1.  Know your product
  2. "Don't Make Me Think"
  3.  One easy breath
  4.  Two thoughts
  5.  Minimize need for docs
  6.  Know your audience
  7.  Know your stakeholders
  8.  Start with the easy stuff
  9.  Harder stuff: do your homework
  10.  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

  1.  Know your product
  2. "Don't Make Me Think"
  3.  One easy breath
  4.  Two thoughts
  5.  Minimize need for docs
  6.  Know your audience
  7.  Know your stakeholders
  8.  Start with the easy stuff
  9.  Harder stuff: do your homework
  10.  Use style guides (details)

One Easy Breath

Simplicity is Zen

Pixabay CC0

Is

This

Zen?

Cause and Effect

  1.  Know your product
  2. "Don't Make Me Think"
  3.  One easy breath
  4.  Two thoughts
  5.  Minimize need for docs
  6.  Know your audience
  7.  Know your stakeholders
  8.  Start with the easy stuff
  9.  Harder stuff: do your homework
  10.  Use style guides (details)

Sometimes You Should Make Users Think

The New BSoD

Two Thoughts

Simplicity -> Docs

  1.  Know your product
  2. "Don't Make Me Think"
  3.  One easy breath
  4.  Two thoughts
  5.  Minimize need for docs
  6.  Know your audience
  7.  Know your stakeholders
  8.  Start with the easy stuff
  9.  Harder stuff: do your homework
  10.  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

  1.  Know your product
  2. "Don't Make Me Think"
  3.  One easy breath
  4.  Two thoughts
  5.  Minimize need for docs
  6.  Know your audience
  7.  Know your stakeholders
  8.  Start with the easy stuff
  9.  Harder stuff: do your homework
  10.  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

  1.  Know your product
  2. "Don't Make Me Think"
  3.  One easy breath
  4.  Two thoughts
  5.  Minimize need for docs
  6.  Know your audience
  7.  Know your stakeholders
  8.  Start with the easy stuff
  9.  Harder stuff: do your homework
  10.  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

  1.  Know your product
  2. "Don't Make Me Think"
  3.  One easy breath
  4.  Two thoughts
  5.  Minimize need for docs
  6.  Know your audience
  7.  Know your stakeholders
  8.  Start with the easy stuff
  9.  Harder stuff: do your homework
  10.  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

  1.  Know your product
  2. "Don't Make Me Think"
  3.  One easy breath
  4.  Two thoughts
  5.  Minimize need for docs
  6.  Know your audience
  7.  Know your stakeholders
  8.  Start with the easy stuff
  9.  Harder stuff: do your homework
  10.  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

  1.  Know your product
  2. "Don't Make Me Think"
  3.  One easy breath
  4.  Two thoughts
  5.  Minimize need for docs
  6.  Know your audience
  7.  Know your stakeholders
  8.  Start with the easy stuff
  9.  Harder stuff: do your homework
  10.  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

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

 

  1.  Know your product
  2. "Don't Make Me Think"
  3.  One easy breath
  4.  Two thoughts
  5.  Minimize need for docs
  6.  Know your audience
  7.  Know your stakeholders
  8.  Start with the easy stuff
  9.  Harder stuff: do your homework
  10.  Use style guides (details)

Credits

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,124