Labeling Touchscreen Interfaces

A picture may be worth a thousand words, but a user interface needs real words to clearly indicate what the user needs to do. The words we choose are as important as, if not more important than, the graphics that frame them. Here are four simple rules you can apply to instantly improve the usability of your touchscreen interfaces.

Rule One:
Use verbs to clearly describe what a button does. A non-specific label is confusing to the user and could require you to spend more time on training and support. “OK” and “Cancel,” or, even worse “Yes” and “No,” force the user to first fully understand the accompanying message and its context.

Rule One

Rule Two:
Put the emphasis on the first 12 characters of your messages and labels. People skim text. Expect a user to read only the first two or three words of any line. “You are about to shut down your system!” loses its impact if the user sees only the first 12 characters: “You are abou”. “Shutting down your system!” communicates the same message and truncates better.

Rule Two

Rule Three:
A button’s label should be placed on the button itself rather than adjacent to it. Most designers center the text. But users tend to touch only the bottom half of a button — so consider placing the label above the center. This will increase its visibility while the user is touching it.

Rule Three

Rule Four:
Eliminate duplication. If you use the same words over and over again on your button labels, group them together, instead, within a single labeled group — or eliminate the duplicate words altogether. This will make it much easier for your user to quickly locate and touch the action he wants to take.

Rule Four

You won’t be able to follow all of these rules all the time, but by doing so whenever possible, you’ll be delivering the best possible user experience.

16
Comments
  1. Very good and helpful post Morgan!

  2. Great article Morgan – these are very informative and useful!

    Vincent

  3. As always, good work Morgan!

    See the “Dashboard for Controls” for even more tips about successful touchpanel design. The pdf is available at http://www.infocomm.org/cps/rde/xbcr/SID-91A236C4-C50F5564/infocomm/DashboardforControlsDesignGuideTemplate.pdf

    InfoComm has sponsored GUI development research toward standardizing touchpanel layouts for large multi-system installations like a University with several hundred classrooms. This way a professor comfortable with one touchpanel design doesn’t have to learn a brand new one when he walks across the street.

    The same principals of good touchpanel design are similar between commercial and residential systems, although the residential world sees many more “Power Users” and needs to provide much finer control as a general rule.

  4. You’re definitely right that most users touch the bottom portion of a button so raising the text increases visibility.
    But I have such a hard time NOT centering the text. I suppose I am different since I am the one programming and using the panels in my home, but the non-centered text just eats at my OCD.

    I like the example you provide where you have added an underline element which keeps things symmetrical, but does in fact raise the text for increased visibility. I will try this underline idea.

  5. Very good tips! Thanks for those.

    I’d love to see more of this kind of post.

  6. that was some nice tipps thx for em morgan.
    but on the first one i dont get it, the one to the L is more of a windows dialog box and the one to the R is more of an apple. they are both good in there own way.

    “are u sure bla bla” is a common question u get from windows. and the same for the one in the R side.

    best regards

  7. Thanks everyone. I appreciate the feedback 🙂

  8. Very good !

  9. Rule one and two can be applyed in regular UI design too~

    good summary

  10. @the muffin man I also think those two buttons’ order don’t follow the Windows UX princeple ~
    We can see the OK before the Cancel in Mac OS

  11. Nice and helpful.

  12. @ rule 4

    How about ‘+’ and ‘-‘ instead of ‘up’ and ‘down’?

    Also the you suggestion doesn’t tell me anything about the currently used volume setting. A slider with “button arrows” does all of this and it also allows one to roughly set the volume very quickly by using the scrubber (the buttons are for fine tuning).

  13. @Jos Hirth. Excellent points. “+ / -“, arrows, or speaker icons would be fine here. I’ll go over best practices of icon use soon. Feedback is worthy of being its own topic too.

    For the context of this article, the example for rule 4 could have been, “Press This” and “Press That” combined into a “Press” group.

  14. I think both examples are good. Someone pressed the OFF button to get there so YES (to shutdown) would be the logical next step. On the other hand.. if someone hit the OFF button by accident and did not know where they were it all of a sudden becomes much more important to word the dialogue box correctly.

    I dont think i can sleep at night if the text is not centered so i cant follow rule 3. I am experiencing the same OCD issues that Casey is :).

    I am already following rule 4 by putting the word VOLUME between an up and down arrow.

    This tutorial is sparking discussion & brainstorming. I love that you guys do this with a blog so that i can read what others are thinking. Its very difficult to learn anything when you never get to interact with others. Great Job!

  15. i like rule 1 and 2 the best
    thx for sharing

  16. Nice info, thanks.

Leave a Comment

You must be logged in to post a comment.