Design & UX - - By Georgina Laidlaw

5 Common Punctuation Problems to Avoid

Poor punctuation: the other reason users don’t get your site.

For those working on interfaces, typos can seem like the biggest text-related issue you’ll face. Sadly, they’re not.

The partner in crime of the innocent typo is the punctuation error.

Punctuation is not a text effect. It has evolved over thousands of years to help us communicate, and that evolution continues.

So there are common punctuation errors that crop up again and again in web interfaces, and do much to confuse users. Here are the key problems.

1. Finishing punctuation on headings

Titles and headings shouldn’t have full stops. If the title or heading is a question, then yes, it gets a question mark. But otherwise, leave the stops and screamers (!) off.

Sounds simple; is strangely confusing. Here’s an example from Teambox.

Teambox

I think that subhead is intended to be a single sentence, but the way it’s positioned over two lines makes it look as if one subhead has finishing punctuation and the other doesn’t. Not cool.

2. Weird bullets

Without wanting to point the finger, for some reason developers copying and pasting text someone else has written (in Word or Notepad/TextEdit, presumably) into HTML seem to revel in failing to mark up bullet lists as, well … bullet lists.

This is how we end up with bullets composed of text, like a dash (-) or the ever-popular colon-and-dash combo (:-).

Okay, so you might not be thrilled to have to publish a three-page Word-formatted bio for that hoity-toity board member who snubbed you at the last company Christmas party. But the About Us page isn’t the place to exact your revenge.

She doesn’t know HTML and you do, and it’ll take you three seconds to actually format that list properly so it takes the styles your designer has set for bullets that look like they’re meant to be on your website.

A P.S. here: don’t include semi-colons or any other crazy punctuation on the end of list items.

If the list items are complete sentences, give then capitals at the start and full stops at the end. If they’re not full sentences, lowercase the lot, and put a stop at the end of the last one only. Unless your house style guide says otherwise, that is.

3. Using dashes instead of commas (or parentheses, or colons)

If someone’s using more than two dashes every 50 words, you can be pretty sure they’re misusing them. The same goes for parentheses, semi-colons, and ellipses.

If you want to go editing the text, then knock yourself out, by all means. Here’s a good explanation of when and how to use dashes, and one for commas, and one for semi-colons.

If you don’t want to take the editing on, you could always send it back (with the links above perhaps!) and suggest the author or an editor take another look.

4. The greengrocer’s apostrophe

Named for the greengrocers who adorn their blackboards with messages like “Tomatoe’s $2”, this is an everyday typo, and one you should avoid.

The rules:

  • If it’s a plural, add an s.
  • If it’s possessive (or a contraction like “it’s”), add an apostrophe and an s.

End of story.

5. Ampersands in text

Ampersands are much-loved by designers and typographers, less so by readers.

An ampersand might wash in a heading, but it won’t in body text–-unless, that is, you use it consistently, everywhere in your text, instead of “and”.

If space isn’t an issue, spell out “and” every time. Why? Because convention says so. Restricting ampersand usage to a limited range of situations is as far as our language has evolved at this point.

If in doubt, don’t

Punctuation has a purpose, and that purpose is clear-cut. If you ask it to carry more than its fair share of the load, you can wind up in trouble.

An example? Sure. Back to the Teambox site. Here’s the signup call to action.

Teambox CTA

If you read the article I linked to above on dashes, you might think, well gosh darn, that Get started – free! button is just peachy. They’re using a dash to emphasise the fact that it’s free to get started. Excellent work, chaps!

Look a bit closer and you’ll spot a few problems here.

  • That’s not a dash. It’s a hyphen.
  • The heading says free and the button says free, but the subhead says $5 per user.

In that context, the use of a dash (or erroneous hyphen) to emphasize the word “free” only adds to the confusion. Is the basic package free but I have to pay for premium features? What about the 5 user thing? If I want to add a sixth basic-level user, do I have to pay? How much (assuming the $5 is for premium features)?

Don’t ask punctuation to solve your communications problems, or to clarify murky messages. Do use it to make an already fine point razor-sharp.