How to phrase button labels?

Question

How should I phrase the following button labels:

• "Import image" or "Import an image"?
• "Create app" or "Create an app"?
• "Add description" or "Add a description"?

If you could also supply the grammar rule behind this it would be awesome!

Answer 1

In most cases buttons don't have to follow the rules of grammar. Notice they rarely have periods even when, like yours, they are complete sentences. Use the choice with the fewest words that is not ambiguous. Apply the rules of usability in preference over grammar rules.

If you want to get grammatical and talk sentence construction rules. . .

Specifically your buttons are examples of "imperatives". Imperatives are sentences used to command or instructions to do something (http://en.wikipedia.org/wiki/Imperative_mood).

You are asking about using an article. Articles are often optional but if you use an article you need to choose the correct one based on http://en.wikipedia.org/wiki/Article_%28grammar%29 or if your a non-English speaker this is better. http://www.eslbase.com/grammar/articles

You are specifically asking about using what's called the "zero article" which is the name given to not having any article at all. You can find out more about omitting articles or pronouns under the heading "zero marking in English" http://en.wikipedia.org/wiki/Zero-marking_in_English

In general grammar fans say adding an article, if done correctly, will help communicate information by making it clear and distinguishing between "import the image" (a single specific image already chosen, referenced or discussed. It's possible to import the wrong image), "import an image" (any image, non-specific, and not mentioned previously. There is no wrong image.), and if you're able to import several images you can say "import images", "Import some images" and other variations. Even Native English speakers routinely misuse articles.

Imperatives are special because they are commands and usually omit words or use zero marking language for brevity or immediacy. Usually also in commands it's known by the preceding or following instructions the omitted words that are optionally left out.

Answer 2

If it's clear, say it in the least number of words possible. If there is no confusion, then there is no problem.

"Import image" - clear.
"Create app" - clear.
"Add description" - clear.

---

For further reading, I suggest the Android Writing Style.

Answer 3

You should limit the label to some action word if possible. This also makes it easier if you want to replace the label with an icon.

• Add
• Create
• Import

And if the context is ambiguous, add a descriptor.

• Image
• Contact
• Description

There are cases where you might want to skip the action and directly use the descriptors. Eg: for login, many sites just use the labels "Email" and "Password", no actions just description of what is needed in the input. No need to follow proper grammar rules since these are not sentences.

If you need more than 2-3 words for your label, you might want to reconsider and add a description sentence next to the field

Answer 4

Grammar largely depends on the language of the viewer

I have a few websites that I maintain that are read around the world. Rather than paying a company to rewrite all of the copy on the sites, we've been using the Google Translate Widget to allow visitors to convert the text from English into their own language automatically.

One of the things to consider in designing websites when you start to convert longer phrases from English to a different language is that in some languages they use more words than English. In some languages they use fewer or only single characters. So on one of my sites, my client mandated that we cram the navigation with words to obliterate whitespace. When we translated the page into other romance languages, the navigation quickly broke and the page became difficult to read (not a good user experience). When we starting hiding overflow in CSS, descriptions in the buttons weren't clear depending on the noun/verb arrangement in the language we were testing. Someone suggested replacing the text buttons with images containing text, but this defeats the use of the widget.

Lost in translation

Another problem that arose was that in different languages the translation was not clear. Upload, Insert, Add, Delete, Kill were all phrases that translated into loose representations of what was intended. The translations are getting better now, but as more translations are added, the short the phrasing, the less descriptive after translating.

Asking my client to take a step back, I was allowed to take a secondary marketing approach and looked at major websites where visitors came from around the world. Some of the major traffic sites, such as Facebook use standard icons with short translatable phrases. Through repeated use, the users become familiar with the interface and use the site with little issue. Our findings backed up the top answer on this other entry on ux.se.

One of the other things we considered when deciding to use graphics for international sites is international road travel. In Europe many of the road signs have a consistent treatment due to the language differences presented by transient guests. Because we have the ability to add text to supplement the iconography we can now limit the problem with a picture being worth 1000 words.

Our best experience

When designing buttons we typically use an icon with the short easily descriptive type that has the best translations. For example

• Upload image
• Create app (or New App)
• Describe (or Add description)

When we are adding buttons to a form, we make the submit button on the form clearly back up what the user was intending to do. For instance if they are on a page to Create an Account, then the button at the bottom says "Create Account" in text which can be translated with the Google Translate Widget.

Answer 5

Let's start with the human action. Think about what your user would say if you asked him what he was trying to do. If he would say, “I want to compare the price,” then “Compare the price” is what you write on the button. These are what Jared Spool calls “trigger words.”

Now by looking at buttons, they are usually designed for actions, like to “Get a quote,” “Download a file,”, etc. When you add a text on the button, the text on should begin with a verb. Otherwise it’s not a call-to-action, just a button with some text on. > David Hamill

However, in regards with your question of adding articles. You have to consider that buttons have limited space, specially when you go to mobile applications.

You need to use as less word as possible so the user can quickly identify what the button does.

An example of good use of grammar-buttons is Pinterest that manages to be perfectly friendly despite using direct (and concise, helpful) forms of words. i.e. ‘Invite friends” and “Find friends” on its buttons.

In conclusion and answering your question: Import image, create app & add description are the right choice.

More on this on this article I recently read:http://www.uxbooth.com/articles/the-grammar-of-interactivity/

Answer 6

You have to think of your site as a persona talking to the user on every level.

The detail of how you employ grammar comes down to a brand guidelines concern. Either way you have the right message in general terms. You have to decide if your brand is terse for sake of efficiency, personal and welcoming, slightly irreverent, ...?

Take MooseJaw and Zappos for instance. They sell the same basic thing on those linked pages but they speak to the customer in a subtly different way. You could also compare Gmail vs Yahoo!Mail vs Outlook.

There should be a little brand voice at every touchpoint. That's what keeps the experience genuine as the user interacts with your service.

Answer 7

If you need multiple words on buttons, that shows that your form is too stuffed with contexts for doing different things.

One generally accepted paradigm for a large set of commands related to one main window is a hierarchical menu system.

If numerous different kinds of objects can be created, a possible representation for that is a toolbar, where the objects are depicted with icons.