45

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.

Improve this question
4
  • I see a lot of answers are focusing on some stylistic choice. A colon is not necessary always; in particular it's not necessary when you have each field on a line. Your users are not that dumb as some people here make believe. In the special case where you have everything on one line use a colon! because it says clearly to the user "this label is for the field on the right", any case where the target of the label is not ambiguous the colon is optional. That's all there is to it… Commented Feb 18, 2011 at 1:21
  • A potentially-related question is that other old form layout chestnut: whether your field labels are left-aligned or right-aligned. Colons tend to be used less frequently with right-aligned labels, as the label is always in consistent, close proximity to its field, and you just end up with a redundant vertical line of colons down the page. Commented Mar 1, 2011 at 14:14
  • Doesn't the attribute ARIA-LABELLEDBY serve the same purpose(designating element realtionships) for assistive tech? Commented Aug 14, 2012 at 17:36
  • 1
    @JayThierry: The OP is dealing with winforms, not webforms. Also, in the case of webforms I would usually recommend just using a label element. Aria-labeledby is more useful for labels which are not associated with input fields (e.g., a link associated with a heading). Commented Aug 14, 2012 at 20:35

6 Answers 6

Reset to default
36

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

Improve this answer
2
  • 1
    Well, I was talking about windows forms where captions are label controls and input fields are textboxes or something like that, you know the type. Commented Feb 17, 2011 at 12:42
  • 7
    In that case, using the answer as a guide, there is no need for the colon. It actually adds some visual clutter that the user doesn't need. Commented Feb 17, 2011 at 13:50
18

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.

Improve this answer
1
  • I see Peter Frings mentioned the possible accessibility implication in a comment above, and verified that it does exist in newer versions of the guidelines, but I thought I'd leave this longer quote here anyway. Commented Mar 1, 2011 at 14:15
12

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 :-)

Improve this answer
5
  • 1
    Can you please provide some links to the guidelines you mentioned? Commented Feb 17, 2011 at 22:26
  • 13
    *** Apple's HIG Quote: - Use a colon in introductory text that precedes a control or set of related controls. *** Windows HIG Quote: - Use colons at the end of external control labels. This is particularly important for accessibility because some assistive technologies look for colons to identify control labels. - Use a colon to introduce a list of items. Commented Feb 18, 2011 at 7:56
  • 3
    But then, if you consider using the colons and need to localize your application, you should take them into account in the localization. In some languages, like French, require a space before the colon, unlike English. For example, "Field 1:" would be translated as "Champ 1 :". Commented Aug 14, 2012 at 17:44
  • Updated Apple Link: Apple HIG document for colon usage. It's still the same, Quote: "Use a colon in introductory text that precedes a control or set of related controls. The text can be a noun or phrase that describes either the target of the control or the task the user can perform." Commented Aug 6, 2014 at 9:23
  • Microsoft has changed its opinion, sort of: old guidelines, new guidelines. Commented Jan 3 at 15:11
2

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.

Improve this answer
1

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.

Improve this answer
0

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.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.