Should label and field be separated with colon?

Question

When you have a form with fields and captions for these fields, should you do it like that:

Field1: [                       ]
Field2: [                       ]

or like that:

Field1  [                       ]
Field2  [                       ]

I saw both used in popular application. Microsoft generally uses colons (My computer properties -> Computer Name tab is one example). Opera browser doesn't use colons as separators on forms (example: Preferences form).

I personally don't have a strong opinion on which one is better. But I'm working on this "1000s of winforms" app where I suspect we have forms with and without colons so I would really like to set a standard and go one way or another on all forms because the inconsistency is far worse than any of the options.

Answer 1

If your field and captions have different visual styles then the colon won't be necessary. The colon is used in text to separate parts of text since pure (non-formatted) text visually can't be separated.

---

Colon required:

Field1: This is caption 1
Field2: This is another caption

---

Colon not required:

Field1 This is caption 1
Field2 This is another caption

Answer 2

There certainly used to be an accessibility reason to use colons after labels in Windows applications. From The Windows Guidelines for Accessible Software Design (Microsoft, 1999):

End static text labels with a colon

Ending static text labels makes it completely clear that the text labels the following control, rather than being some other piece of information. Any text that does not label the following control should not end with a colon.

The colon serves two purposes:

• The colon provides a semantic hint to the user or to an automation tool running on the user’s behalf, that the thing which follows is best understood in the context of being directly related to this current object.
• The colon helps an accessibility aid determine that a static text field indeed labels the following control, rather than serving some other purpose.

I don't have a more recent version of the guidelines to hand to see if this is still a requirement with more recent versions of Windows and its assistive technologies (I suspect it may not be), but it's worth checking.

Answer 3

Both the Mac and Windows guidelines want colons. To me they nicely separate the label and the field, regardless of the type of field (edit, radio, check, ...).

Anecdote: at some point in the development of our software, the translation process lost all colons of the labels and the next build had no columns anymore. Yuck!

But, as you say, consistency here is more important. Maybe select the path that requires the least amount of work? Mmm, bad advice, really, in a UX forum :-)

Answer 4

As Peter Frings stated, the "big guys" use colons. He even linked and quoted the Apple and Windows HIGs. To add to it, here's another thing to think about.

I have 2 Pieces of information: username and password. Both labels are obviously labels, and I need textboxes to contain the values, so of course colons aren't necessary. But...then I add in a piece of information, like IP Address. Well, that's not editable. I COULD put it in a textbox that isn't editable, but that's just plain ugly. So I put it in a label (this goes for web and desktop, by the way). Now I don't really have a distinction between the 2. Is it a killer? No. Does it look kind of odd? I think so. Then you start to think about a window/page that has 40 fields on it. Some editable, some not.

Whenever I wonder about this, I open up a mature product designed by a really really big name that I like using. In my case, I just opened up Outlook 2010. I brought up the Options dialog, and it has colons on all pieces labels.

Bigger companies that specialize in creating very usable software really do spend a lot of money on focus groups. They don't normally pull user interface design out of thin air.

For years, you were very hard pressed to find any sort of bold text in Windows. At least in the Core OS interfaces. They've slightly backed off that now, but you'll notice that it's used only in headings or in field labels where the value is very close to the field label, and the fields aren't editable.

Answer 5

Personally I always use a colon if the input field is on the same line as the label and I do without the colon if the label and input are both on separate lines.

Answer 6

I think it's necessary if the field name spans multiple lines.

For instance:

field x [ ]
is okay, but

this is a field [ ]
I created

needs a colon after the word "created" b/c it spans two lines. My eyes go straight to the empty input field before I read the second line. If all of your fields names are on a single line, a colon is just an extra character for the user to ignore, IMHO.