Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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!

share|improve this question
4  
Related: ux.stackexchange.com/a/25160/7627 –  Ben Brocka May 1 '13 at 14:50
add comment

7 Answers

up vote 3 down vote accepted

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.

share|improve this answer
    
THANK YOU! Finally the answer I was waiting for –  Yosef Waysman May 8 '13 at 13:09
add comment

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.

share|improve this answer
    
I'm sorry but my question is about grammar. Obviously you should use as less words as possible. –  Yosef Waysman May 2 '13 at 8:55
2  
@YosefWaysman Instructions aren't prose, and so grammar is less critical than clarity and brevity. If it's clear and brief, the grammar doesn't matter. –  JohnGB May 2 '13 at 9:02
2  
Agreed; you can leave out the minor words like articles and connectives for brevity. It's not bad grammar; it's an alternative grammar style for English, similar to the grammar used in newspaper headlines. –  vincebowdren May 2 '13 at 13:25
1  
So surely we can exchange 'image' for 'img' and 'description' for 'desc'! :^) –  Felix Weir May 2 '13 at 14:15
1  
@FelixWeir If you believe that, then use it. But I would do some user testing with average users first. For the record, imgur use the word 'image' in their copy not 'img'. –  JohnGB May 2 '13 at 14:32
show 2 more comments

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

share|improve this answer
    
Add means several things by itself. The user interface should always be clear. –  AbsoluteƵERØ May 1 '13 at 15:59
    
@cpattersonv1 I did mention that part. The 2nd list is to help in that scenario –  rk. May 1 '13 at 15:59
    
Right, I was mentioning that it is almost never possible to use vague words as action words though. There are 6 definitions for the word "Add" in English alone. Import and Create both have 5 definitions each. dictionary.reference.com/browse/add –  AbsoluteƵERØ May 1 '13 at 16:04
3  
@cpattersonv1 Well, it depends on how you emphasize it visually. In the drop box app, when I look at the + icon, I know it means add, and since drop box is about files, it means to add files. If the context is clear, it is fine, else you need a descriptor. –  rk. May 1 '13 at 16:08
add comment

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.

share|improve this answer
    
Not exactly answering my question... –  Yosef Waysman May 2 '13 at 8:22
1  
There, I've spelled it out. –  AbsoluteƵERØ May 2 '13 at 8:55
add comment

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/

share|improve this answer
1  
I'm a bit confused by your answer. This article gives as an example "Get a quote" (not "Get quote") and "Open an account" (not "Open account"), but you've gotten to a different conclusion. Care to elaborate? –  Yosef Waysman May 1 '13 at 14:37
    
I have amended the response. I was trying to mention the key elements: starting with a verb and be concise due to the button space limitations. Hope it makes more sense now. –  Rosie May 1 '13 at 14:46
add comment

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.

share|improve this answer
    
Not exactly answering my question... –  Yosef Waysman May 2 '13 at 8:23
    
I guess it doesn't if you haven't defined your brand voice. On the other hand, if you have, then it should answer your question. –  plainclothes May 2 '13 at 16:15
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.