Textism
Writing the User Interface
Jeffrey Zeldman
Happy Cog Studios
hy per text
- A computer-based text retrieval system that enables a user to access particular locations in webpages or other electronic documents by clicking on links within specific webpages or documents.
American Heritage Dictionary of the English Language
hy pertext
- A computer-based text retrieval system that enables a user to access particular locations in webpages or other electronic documents by clicking on links within specific webpages or documents.
American Heritage Dictionary of the English Language
Chances are...
- Whether you’re a writer, designer, or developer...
- ... your site has words on it.
- ... they’re not working as hard as they could.
Whether you’re a writer, designer, or developer (or wear more hats than Bartholomew Cubbins), chances are pretty good that your website has words on it. Chances are even better that these words aren’t doing all they could to help your users or your organization achieve desired goals.
Things we know about the web
Logical conclusion
Based on what we’ve just said, it would be logical to expect ...
- Most web design projects to have a writing/editing budget
- Most sites, especially large ones, to have a content czar (mind in charge)
Raise your hands
- Writing budget?
- Copy czar?
Copy Czar
No one manages the language from a global level, but a lot of people decide what the language will be for specific parts of the site. This is problematic on multiple levels.
Copy Czar
No one manages the language from a global level, but a lot of people decide what the language will be for specific parts of the site. This is problematic on multiple levels.
It is difficult to ensure consistency—of tone, of terminology, of word-choice—throughout the system without a watchdog who maintains and enforces language standards.
Copy Czar
No one manages the language from a global level, but a lot of people decide what the language will be for specific parts of the site. This is problematic on multiple levels.
It is difficult to ensure consistency—of tone, of terminology, of word-choice—throughout the system without a watchdog who maintains and enforces language standards.
—Julia Hayden, Language: The Ultimate User Interface (A List Apart, 14 April 2000)
No matter what your biz card says...
What we’ll cover
- Words as interface
- How words work online
- Turning manure into gold
- (or at least copper)
Words as interface
- Guide copy
- Copy copy
- Brand copy
- Labels
- URLs
All copy is a brand opportunity
- While guiding people through your site and delivering information, copy is also a precious (and often wasted) opportunity to define your brand.
- While it is powerful and multi-layered in what it delivers, copy is also the least expensive part of most sites and the easiest to change and fix.
Guide copy
- Clear
- Brief
- Audience-appropriate
- Brand-appropriate
Guide copy: clear
Guide copy: clear
Guide copy: clear
Guide copy: brief
Guide copy: brief
Guide copy: brief
Guide copy: brief
- To continue reading this article, you must be a subscriber to TimesSelect.
- To continue reading this article, you must subscribe to TimesSelect.
- To continue reading this article, subscribe to TimesSelect.
- To continue reading this article, subscribe to TimesSelect.
Guide copy: audience-appropriate
Appropriate can mean “not inappropriate”
Stay in touch with your friends. Send an e-card today! It’s fun! It’s easy! It’s free!
Celebrate your friendship! Send an e-card to a special friend. Pick a card below, write a special note, and send away.
- With design removed, nothing in this copy speaks uniquely to pre-teen girls.
- But the copy is not inappropriate to its audience.
- Design can set “audience” tone.
Not a great example of brevity or clarity
Celebrate your friendship! Send an e-card to a special friend. Pick a card below, write a special note, and send away. (21 words)
- “Send away” is vague, hence bad UI
- Copywriter did not see web layout?
Audience-inappropriate
Welcome, Disabled Veterans!
Click the yellow button to proceed.
Audience-inappropriate
Welcome, Disabled Veterans!
Click the yellow button to proceed.
Audience-inappropriate deux
Understanding the new Medicare drug benefits
You must have Flash installed and JavaScript enabled.
Audience-inappropriate deux
Understanding the new Medicare drug benefits
You must have Flash installed and JavaScript enabled. If you find the text too small, you can use your own style sheet by keying it to the body id.
Guide copy: brand-appropriate
Guide copy: brand-appropriate
Guide copy: brand-appropriate
Guide copy: brand-appropriate
Copy copy
- Brevity rule may be relaxed depending on brand and audience
- Even clarity is somewhat relaxed in certain circumstances
Copy copy: brand-appropriate
Brand copy: brief and clear
Brand copy: brief and clear
Brand copy: brand-appropriate
Brand copy: brand-appropriate
Brand copy not brand-appropriate!
Brand copy not brand-appropriate!
What’s eating Lulu?
- Way too much copy.
- Not written for web. Shovelware.
- Not chunked, no subheads.
- Its non-webbiness contradicts the digital-savvy brand impression the company hopes to convey.
- This is doubly sad because the company actually is digitally savvy.
Labels guide but also reinforce brand
URLs, URLs, URLs
URLs are another chance to use language to connect...
URLs, URLs, URLs
URLs are another chance to use language to connect...
URLs, URLs, URLs
... or not.
URLs, URLs, URLs
... or not.
How words work online
- Web users are most often in interactive “find” mode.
- Therefore they scan.
- Even people who love to read scan when online.
- Many readers speak English only as a second language.
- Vocabularies and education vary greatly.
- Although Windows Cleartype helps and Mac OS X helps a lot, not everyone has these technologies. For most people, reading heaps of text online is visually and mentally fatiguing.
From this knowledge, guidelines emerged.
- Use frequent subheads for easier scanning.
- Chunk text to avoid screen fatigue. (More, shorter paragraphs rather than fewer long ones.)
- In most cases use short declarative sentences and eighth grade vocabulary to avoid alienating non-English speakers, less-educated readers, and readers with certain conceptual impairments.
Turning manure into gold
Even if you are not a professional writer or editor, you can apply these guidelines to copy your boss or client dumps on you.
A practical example: helping Lulu
Lulu before and after (favorite slide)
Lulu before and after (favorite slide)
You can think of it as bandwidth savings but it’s much more. It can be the difference between selling and putting to sleep.
Manure to gold – hands-on
Opportunity knocked
Copy is an opportunity waiting to be missed.
