What makes great UI text?
August 17, 2011 12:02 PM   Subscribe

Writers and designers of UI text and instructional text, please share links, advice, or best practices...

One of my current projects is a browser-based app that requires some instructional text, but in a very small pane.

Hit me with examples (links) of what you think is great UI text or instructional text, especially if the text makes good use of limited space.

posted by methroach to Computers & Internet (8 answers total) 15 users marked this as a favorite
Best answer: You might find some inspiration from the Coachmarks category on this Mobile Design UI Patterns website.
posted by backwards guitar at 12:50 PM on August 17, 2011 [3 favorites]

Best answer: Think of your audience and do not waste their time. If you can do this without insulting their intelligence, all the better.

Avoid being self-referential as much as possible. "Click Here" shouldn't be necessary if where to click is obvious from the construction of the page. The same goes for "below" -- as in, "Complete the field below" or "Click the button below." Humans already read top-down, so trust them to do so. If the "Submit" or "Okay" or "Send" button is in the lower right-hand corner, the clicking will commence.

If you can give me an example of what instructions are to be presented, I can give a little more guidance.
posted by grabbingsand at 12:54 PM on August 17, 2011 [1 favorite]

Response by poster: I know some of the basics of UI text and have read various articles, blogs, etc. at Microsoft, UA, and tech writing sites. Being new to this, I also find the Yahoo! Style Guide's chapter on interface text helpful.

A challenge is that the area for the documentation is small; even short-ish procedures look overwhelming in such a small pane. An example of the type of instructions (this is a short example):

To add a user:
  1. In the Users pane, click Add.
  2. Type a user name in the User field.
  3. Type a password in the Password field.
  4. Re-type the password in the Confirm Password field.
  5. Click Create.

posted by methroach at 1:15 PM on August 17, 2011

Best answer: Do your users need this level of detail?
posted by hijinx at 2:17 PM on August 17, 2011 [1 favorite]

Best answer: If you search for "microcopy", you will find lots of advice and examples, like the Flickr Microcopy group.

I hope your example isn't something you're literally planning on putting into your app. There are lots of problems with it.

- "Type a password in the password field"? Only a really horrendous UX design would require this level of instruction. You should fix the usability problems, not patch them up with help text.
- Why tell the user where to go? Can you provide a link to the Users pane? Can you just put a button there that says "Add a user"?
- If the user goes to the Users pane, what happens to the instructions? Do they disappear? So the user is forced to memorize instructions? That's why help text needs to be contextual. Give the user the information they need when they need it.
posted by AlsoMike at 2:33 PM on August 17, 2011 [4 favorites]

Response by poster: The instructions pane is right beside the area where users have to do the actions. They can toggle the pane, however.

As for the level of detail--that's another issue. The users (I'm told) need a lot of hand-holding, and the general consensus from project managers and other customer-facing staff is that even if something seems blindingly obvious, it isn't necessarily obvious to our users.

Thanks for all comments so far!
posted by methroach at 3:33 PM on August 17, 2011

Best answer: Keep the UI as simple and uncluttered as possible (duh!) and if anything needs explaining, have a "?" next to each field which will invoke a small pop-up window with an explanation.

Most people will only need to read it once or twice; so don't clutter your UI with unnecessary stuff that doesn't need to be displayed all the time.

Sorry if that's all completely obvious.
posted by alan2001 at 4:44 PM on August 17, 2011 [2 favorites]

Response by poster: Thanks for all the answers. Every single one helped.

I'm going to leave this unresolved in case more answers come in.
posted by methroach at 9:39 AM on August 18, 2011

« Older The girl with the golden shoes.   |   Choosing Between Mattress Or Boxspring? Newer »
This thread is closed to new comments.