News

Styled form fields vs usability

Posted 14/01/09 by David Web Permalink

Using CSS to style form fields is a common feature used widely in web design. Different browsers display form elements differently, so using CSS to standardise these elements will help maintain the user experience.

The following attributes can all be changed using CSS but some care should be taken to avoid any usability issues. Some of the potential problems are highlighted below along with available work-arounds.

Background colour

You can easily change the background colour of form elements using the CSS attribute - background-color. Changing the background colour does come with a number of potential pitfalls however. The overlaying text must be an easy to read contrasting colour and the browser default of dark text on a white background is arguably the easiest to read of them all.

Another potential problem, which I stumbled upon recently, is with the Google Toolbar. This contains an Auto-fill feature that can fill in webpage forms using saved information. Any form fields that can be auto-filled are rendered with a pale yellow background. Therefore if you have styled your website forms to use a dark background with light text, this text will instead be shown against a yellow background and will be completely illegible.

One way to stop this issue is to over-ride the styling of the Google Toolbar. By adding important! to the end of the CSS definition for the background-color you will disable the yellow highlighting. This comes with accessibility issues however as disabled users may rely on the Auto-fill feature.

Safari outline glow effect

The Safari browser features a blue glowing outline around the highlighted input field.  While I think this looks good there could be some situations where it doesn't fit into the design or style of the website. You can disable this outline by adding the following CSS to an input field - input:focus { outline: none; }. Again this can cause potential usability issues and people may not like the removal of this useful feature.

User interface form standards

While not a specific attribute, a related issue is the use of standardised methods in unconventional applications. A good example is the use of an asterisk to indicate a required field. Using a different symbol, or even worse using an asterisk for non-required fields, will cause confusion and frustrate users.  Forms on websites are usually not the most exciting of things and people don't want to spend any more time than necessary in completing them. Another example could be using yellow to highlight certain fields which would be in direct conflict with the Google Toolbar..

Conclusion

Styling forms using CSS is a good way to maintain the user experience across different browsers. It can also help blend the often ugly rendered form elements into the design of your website. While good looking forms do improve the look of your website and can reduce the irritation factor of completing them, it is important to remember usability and standards when designing them.

I would recommend that you keep the default colour scheme of white backgrounds and dark text for form elements. I would also try and keep intact any user friendly styling such as that used by Google Toolbar or Safari (see above).