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.
Thanks!
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.
Thanks!
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]
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:
posted by methroach at 1:15 PM on August 17, 2011
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:
- In the Users pane, click Add.
- Type a user name in the User field.
- Type a password in the Password field.
- Re-type the password in the Confirm Password field.
- 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]
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]
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
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]
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
I'm going to leave this unresolved in case more answers come in.
posted by methroach at 9:39 AM on August 18, 2011
This thread is closed to new comments.
posted by backwards guitar at 12:50 PM on August 17, 2011 [3 favorites]