Screen Guidelines for Open Market Products
Rev 2.1 (In Progress: Incorporating Feedback from 9/18 Mtg.
This document contains guidelines for the text
and graphics that appear in Open Market product screens.
General Goodness and Virtue in Prose
If Strunk and White were around today, they'd no doubt be cracking
rulers on the knuckles of rambling Web designers. Remember-
good screen writing is good writing.
Here are some Tech Writing 101isms that you should apply to
all text in Open Market product screens:
- Use active voice; avoid passive voice.
For example, consider the power of the active voice
in the following sentence: "Carifio smacks the wayward engineer."
Now, here's the same sentence in passive voice:
"The wayward engineer is being smacked by Carifio."
Converting to passive voice robs the sentence of its power.
Passive voice also makes the sentence longer, trickier to understand,
and harder to translate.
- Use the language of your audience.
For example, the phrase "I/O" is appropriate for programmers, though "Input
and Output" would be a better choice for nonprogrammers.
- Use present tense.
- Use simple words. As Strunk and White might
say, don't use a five dollar word when a fifty cent word will
work just as well.
- Be brief,
so that the user doesn't need to scroll.
- Don't state the obvious.
(Is this a self-violating rule?)
For example, avoid explanations like,
To continue, press the Continue button.
- Present information relevant to the
current context only.
Don't tell the user that her Cosmo subscription is about to expire
when she's trying to get to her New Republic subscription. Nor is
she interested, at that point, in problems with payment for her
Old House Journal subscription.
Error Messages
- Don't use prefatory text to announce that error messages
will follow. For example, a screen should not say something
like, "You made the following errors:" Instead, the screen
should simply present all the error messages.
- Use the triangular-with-exclamation-mark symbol to flag the user
that there are some errors to attend to. I need the pathname
to this bitmap.
- If there is more than one error message, place a number by each
message. The first number should be 1 (never 0).
(Barry's editorial comment: This violates one of the basic
tenets of tech writing, which is that unordered lists should be
bulleted rather than numbered. Error messages are typically
unordered; they should get bullets rather than numbers.)
- If there is only one error, put a bullet (not a number) in
front of the error.
- If there are zero errors, should UI indicate success?
HTML Formatting Suggestions
- Don't use the HTML blink directive.
- Use the HTML emphasis directive for
emphasis; don't use all uppercase letters to emphasize.
All caps makes for hard reading.
- Match the name of an anchor to the heading name
on the target page.
- Left-justify text; text is more readable
that way.
- How about headers; should they be left-justified, too?
Should top-level headers be centered?
- Should the title exactly match the top-level header?
Writing Text That Translate Well
Even as we speak, citizens of other nations are crying out
for Open Market products. Though we North Americans have tried
for years to eradicate other languages, it seems that small pockets
of resistance are still smoldering in the mixed metaphors of our
melting pots. At any rate, translators will soon be converting
our golden English prose to other languages.
To make our translators' task easier,
please follow these guidelines (courtesy of William Horton):
- Avoid prepositions in short phrases,
such as on a menu or bulleted list.
- Minimize abbreviations and acronyms.
Hey, would it really kill you to type out Digital Offer
instead of DO?
- Be as brief as possible to avoid translation expansion
problems. English is a relatively terse language;
English text often expands considerably when
translated into other languages.
Therefore, English text that barely fits onto one screen
will probably overflow one screen when translated into French.
- Avoid slang.
Although our products are way cool, describing them as such
may cause our Japanese translators to describe them as being
best run at low temperatures. American slang comforts American
readers but rarely translates well.
- Use conventional syntax.
- Localize formats for
- numbers
- dates
- times
- addresses
- phone numbers
- amounts of money
- units of measurement
- order of family and given name in polite society
But how do we at Open Market actually localize these formats?
Buttons
- Don't use "Yes" and "No" buttons
the buttons should explicitly describe its action. For example,
the following buttons are far safer than simple "Yes" and "No"
buttons:
Are you sure you want to delete the root directory?
[Delete directory] [Return without deleting]
- How should buttons look? Should they always be rectangular?
What background color should they have? What size font should be
used for the text? What color font? Should they be arranged
vertically or horizontally?
- Graphically distinguish default action buttons.
On any page, one button should be the default or desired action.
That button should be graphically distinguished (outlined, color,
something...) to prompt the "right" action. This recommendation
seems kind of vague. Shouldn't you standardize the graphical
distinguishing point?
- Hyperlinks in text (href="xyz.html") should go to information;
buttons should take action on behalf of the user. For example:
The button [Become a Member] should transfer control to a
membership registration screen. By comparison, the hyperlink
a href="..." Become a member /a should transfer
control to a screen that explains everything there is to know about
memberships.
- Buttons must always be rendered through
bitmaps (img directives).
Rendering a button as a graphic is slightly slower than
redering it as text, but we've decided
that the very slight performance hit is worth it.
Fonts
- The latest Microsoft browser allows content providers to
specify font families. Which fonts should Open Market use?
- Use font sizes larger than 9 pts.
Though we tend to think of the Internet as dominated by smarmy
14 year olds, remember that people with bifocals use the Web, too.
Colors
- Can we provide exact
values for the alink, bgcolor, link, text, and vlink attributes
of the HTML body directive?
- Avoid soft blue text for hyperlinks;
soft blue text is difficult for older persons to read.
Consider using other colors, or choose a strong blue.
If you use a textured background, make sure that the blue is not faint.
- What is our policy on textured backgrounds?
- Use colors that do not clash with labels.
A Go button should be green, not red.
Text and color should have a consistent relationship.
General UI Tips
- Be humble.
Assume that this screen is relatively unimportant in
the reader's grand scheme of things.
- Be predictable. Be consistent.
Don't surprise the user.
- No news is great news.
The most successful interfaces go unremarked; users do not complain,
they just get their work done.
- Don't give instructions; no one reads them.
Design until you don't need instructions. Or need so few that
they will be read (maybe).
- Always give the user a way to continue, go back
(the Back button doesn't count), and/or exit.
Just curious: why doesn't the Back button count?