|
Just wondering what your opinions are on html forms. Is it better to have a light coloured label and a dark coloured value or the other way round, a dark label with a light value? What are the implications of this for the usability of the site? Is there certain situations where one is better than the other. This is a read only form that can be switched in to edit mode and contains a lot of data. |
|||||
|
|
What do you think of these two labels. Which one is more visible?
This illustration tells us it is not about the colors. It is about contrasts. Label 1 is hardly visible, even though it is the lightest. But label 1 emphasises the text, whereas label 2 emphasises the shape of the label. So one of the questions you should ask yourself is, do you want to emphasise the label or the content of the label? Then, don't fuss about the colors, just study the contrasts. |
|||
|
|
|
According to this article, it's actually better to use white text on dark background for form labels, because the text "jumps out", and therefore easier to scan (which is how users interact with online forms). But if the form is short (4-5 fields), it probably won't make a big difference, and either way should work. The rule of thumb for any text on a website would be high contrast (WCAG 2.0 recommends 4.5:1 for AA and 7:1 for AAA). You can check the contrast of two colors with this tool. |
|||
|
|
No matter how you label the field, make sure the field itself is white with black text. And use a pale color behind the label/instructions (with high contrast as Yosef said) to differentiate the field from the label/instructions. A few years ago, I was greatly influenced by an article in the UPA's user experience magazine on improving government forms. They went from 100% of forms having mistakes to almost 0%. I have applied the techniques successfully in multiple products with forms since then. That's where this advice originates. Note: you have to be a UPA member to download the article. I've attached a page from the guidelines I developed from this article.
|
|||||
|
|
For internal applications with a lot of intermediate-skilled users, I almost always use light labels with dark value, because they quickly become familiar with the screen layouts to the point where they no longer read the labels, and rely solely on the positioning and the type of the data value. |
|||
|
|
|
"This is a read only form" This is the key. Based on that, it seems fair to assume that people scanning this form are looking primarily at the data, rather than the individual labels. Taking a second assumption: that the data is relatively self-explanatory and/or something the reader is quite familiar with, I'd say the labels are secondary to the data and that the labels, therefore, can be more subdued. |
|||
|
|
