Give Your UI Some Love With a Style Guide

A labeled apple

You gotta create consistent labels...

I’m convinced that UI is often the (pardon the expression) red-headed stepchild of content strategy. And that’s especially true of in-product UI.

Businesses often spend big bucks on crafting these amazing website, with fabulous and well-crafted content, to support a cool Web app or product…but don’t spend the time (or effort) to make sure the in-product experience matches up.

When it comes to website copy and marketing writing, there’s often a style guide involved. Do we use title case or sentence case? Do we follow AP Style or Chicago? What terminology do we use, or skip? All good stuff. But I’ve seen time and time again that the style guide doesn’t extend to a product UI, because…everyone assumes the UI is just a no-brainer. It’s easy to write a few labels, right?

Think again. UI copy goes way deeper that the casual observer might think. On a project I recently completed, the UI copy included product labels, action labels, contextual help, tooltips, hover copy, wizards, user-input prompts in text boxes, error messages, success messages, and about a dozen additional categories.

With so many different UI content types to keep track of, how do you keep your head from flying off? Simple: Create a UI style guide.

Some topics to include:

  • Do we use title case or sentence case for UI directions — in other words, do we say, “Send me a reminder” or “Send Me a Reminder”?
  • Do we follow complete sentences with punctuation? In what instances?
  • What nomenclature do we use for labels?
  • Do we use “you” and “my”?
  • Serial comma for longer information, or no?
  • What are the length limits for a label? A tooltip? A hover message?
  • Do we say “please” and “thank you” — and if so, when?
  • Will we describe a user by his first name, first/last, or just not name him at all? After all there’s a big difference between saying “Your contacts,” “Bill’s contacts,” “Bill Smith’s contacts,” or just “contacts.”
  • Do we use articles (a, an, the)? Will it be “Add a comment” or “Add comment”?

This is just the tip of the iceberg, but it’s a good illustration of why you should do some hard thinking about your UI style guidelines before you start writing. Once a UI is partially written, it’s damnably hard to retrofit it if you decide to go in another stylistic direction — and I guarantee you that more than a few items will fall through the cracks.

Once you get that style guide done and embark upon the actual writing part, crack the whip and make sure everyone sticks to the program. At the very least, have a content person go through all your screens and wireframes and visual design documents before they go to engineering to ensure content consistency.

Want to read more about this? Amy Thibodeau at Contentini tackled the topic last year with “Micro Copy: Content Strategy and Writing the User Interface.” The Drupal folks have some pretty good guidelines for writing UI copy for Drupal admin pages that serves as a nice example. And Cedric Savarese makes great points about “Creating a User Interface that Speaks Your Users’ Language.”

Photo: bryankennedy via Flickr

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: