Don’t Forget the Label

Many things can make up the visual elements of an interface. Today, we will discuss what many people consider to be the most important element of interface design: text.

First, let’s lay a few ground rules, and then a disclaimer.

  1. We are strictly talking about interfaces that a person interacts with (whether simulated or actual).
  2. We are talking about the importance or unimportance of text as it relates to interface design.
  3. Typography is to be defined as the method of setting text. For more information on this, check out these few links:

Disclaimer:

This is not a post outlining the details of the specifics of the practice of typography. This post may make references to general typographic ideas and styles, but is mainly concerned with the importance of type as it relates to interface design. While a working knowledge of typographic skills is important to interface design, this post is focused on the theory of usability in relation to the use of text in a design.

Let’s Begin

When a user approaches a particular interface, we must define quite a few things. Here’s a bit of interface design theory to start us out.

  • Who will be using the interface?
  • What is the goal of the person who is using the interface?
  • What is the goal of the person or company who has provided the interface?
  • How can we most efficiently expedite the process of both parties reaching their goals?

With these questions asked, we can go on to develop answers of the most usable interface.

Now, before you assume that there are hundreds of questions missing, let me go ahead and ease your conscience; the questions above are very, VERY loaded. The answer to the question “who will be using the interface?” will bring about hundreds more questions about the demographics of who will be using the interface, the persuasions of the targeted audience, the changes society will undergo over the progression of time both on a seasonal and a linear level…

It gets messy. And there’s little that may be considered an absolute. And there’s absolutely no way we can even pretend to cover all of the necessary study involved in the design of an interface (in one post).

Text, however, is in most cases an absolute. In the process of interface design, the concept of guidance must be surveyed as an absolute must. Providers of interfaces desire for the user to be able to simply and efficiently access and use whatever interface it is that they have provided. This requires the interface designer to analyze the process, from beginning to end, of an interaction with their interface. The user must be told what to do. In the famous words of usability expert Steve Krug, don’t make (them) think! These are a few ways to effectively use text when designing an interface.

Labels

This is the biggie, obviously. Many designers make the simple mistake of taking for granted what may seem obvious to them, leaving important fields unlabeled or columns unnamed for the sake of a “cleaner look.” We all have come to know the cleanness of Google.com. We can be sure that a company such as Google know the importance of creating a clean interface. However, when necessary, Google will use text to guide the user to complete whatever task the interface is designed to help them complete. Take GMail’s signup form, for example.
GMail Signup form
We can see that even beyond labeling, GMail gives examples for usernames, as well as instruction on the length of the password. This makes the interface not only easier to use, but the process is expedited for the user by these helpful hints. It is also important to note that Google chose an easily read sans-serif font to display within their interface. This is in keeping with Google’s branding, without being overbearing.

We can also see great examples of labels on Facebook’s front page, which includes both a login and signup form.
Facebook
In this example, Facebook uses in-field labels to provide the user with guidance (particularly speaking of the login portion). The in-field labels allow for even cleaner design, and can be removed on focus with a few lines of jQuery or your favorite method of Javascript. Facebook also easily defines for the user the separate areas both with the blue bar at the top (where the login exists) and with a label for the signup form that says – you guessed it – Sign Up. Facebook also uses a sans-serif font.

Actions

Similar to labels, action text is usually limited to buttons or links. A good example of action text is a “login” button. It is important that the text used for actions is descriptive. If given the option of “go” or “login”, the user would most efficiently understand “login”, as “go” could also be the action text of a search engine or a subscription form. Action can be found within an interface in many ways, such as “add a station”, “cancel my subscription”, and “go to next page.” These kinds of descriptive action words will leave no doubt in the user’s mind as to what the function of a particular button is.

Not so fast…

So for the entire post, we have looked at the importance of using enough text in an interface. But sometimes, text can get in the way. Sometimes an icon will do the job. Mac OSX shows this very effectively with the display of the dock.
Picture 6
There are a lot of things to notice here. First of all, every icon is not labeled except on hover. Secondly, icons that represent a program that is open have an “active” indicator beneath them. This allows the user to quickly survey what is and what isn’t open without having to read a lot of text. In this case, the usability of the interface would be hindered by text. Many times, the context of the interface will allow the user to understand what a certain button, field, or action will do. It is important, however, that there is no doubt left in the user’s mind.

Conclusion

We’ve covered the concept of the importance of text within an interface, as well as the idea that text is not always necessary nor is it always the better choice, but more often than not text is the most effective communication tool between an interface and its user. It should be noted, however, that some interfaces are created with the notion of “anti-usability”, a trend in which the user has to process, think, and explore the different options within the user interface to really understand its function and utilize its options. A great example of this is bio-bak, a portfolio site for Coen Grift, a Flash designer. While this kind of interface is not the most effective for all practices, it does create a different kind of interest for the user in which the user must explore to know what the site is about. The use of text in Coen’s site is usually abstract, relying heavily on puns and immature humor, while the site displays Coen’s skills as a Flash designer quite well. Coen’s choice of what seems to be a child’s handwriting as a font adds to the humor and “roughness” of the site, characterized by the other hand-drawn elements throughout. Coen creates a curiosity in his user that will lead them to interact with the site for a longer time than if it was simply informational. This kind of interface also leaves a lasting impression, if executed properly.

That’s a lot to take in! I hope you have enjoyed this post. Be sure to leave a comment, and come back for more!

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote