Should a form's style be left to the browser?

Question

Instead of using CSS resets, I use Normalize.css, and I usually style an HTML form's containing elements such as input, label, textarea, etc. to the fullest extent. To make sure that the form's design is closely consistent with the overall website's design.

But with UX in mind — both for mobile and desktop — should we instead let browsers dictate certain styles in web forms?

---

For example, consider the elements input and textarea — what if we were to avoid setting:

• Border, background, padding, line-height, font, border when selected, etc.

I have created an example demo here, which you can try on different browsers.

On Mac OS X Lion, the WebKit browsers render the form similarly.

Here's Safari:

And here's Chrome:

But Firefox already does things a little different — see button, and text area:

And so does Opera — see button:

And that's just the tip of the ice berg, not even taking mobile, and older browsers on various operating systems into account, whose default styles for form appearance will be drastically different.

What do users prefer and expect?

1. Do they want the input fields, borders around selected inputs, buttons, and so on, to be consistent with the design?
2. Or do they want websites to be more consistent with their operating system (e.g. buttons, selected fields, spacing)?

Answer 1

From a usability standpoint it's hard to make the case that the browser defaults are best (if so, which browser?). Firefox's use of that horrible font in their textarea should make it clear that you can do better.

In fact a style disconnect, with form elements looking different from their surroundings, can be disconcerting and have a negative impact on usability.

Just don't stray too far from convention (i.e. keep buttons clearly looking like buttons).

Answer 2

If you think that not surprising the user with something unfamiliar is desirable, then leaving it to the browser's defaults may be better.

Except for developers and designers and such, users generally stick to one browser. It's probably best not to deviate too much from what he is familiar with.

Answer 3

Short Answer:

It depends on your form, but you probably won't want to leave your form unstyled.

Long Answer:

It usually can't hurt to have your form "fit in" with the rest of your site. If you've got a fairly minimalist design, then keeping everything at browser defaults may well be the ideal solution. However having your form use default settings on a site with colorful design might end up being a little jarring and look out of place. That said, having a form be easily noticeable is not automatically a bad thing, especially if it is embedded in a page with lots of other content.

Another thing to keep in mind is how people will use the form. I'm a fan of the Mad Libs style form for relatively short forms that don't require a ton of user input. Especially for questions and comments, this style can feel much more natural. I probably wouldn't use it for user registration if only because it might confuse.

Answer 4

You should make your design consistent.

Consistent with the design is important, because users do things that they are familiar with faster. For example, Facebook and Google do not use a fancy front, but it uses standard and boring fronts in every pages. Users are familiar with they can read content faster than new fronts that they do not see them often.

Answer 5

I tend to look at sites with wholly unstyled forms as being less professional as it seems the designer has merely knocked out a site as quickly as they can. Having said that I think going too off-piste can cause UX issues.

Answer 6

At Thumbtack we've run into this issue before while split testing, and we have some anecdotal evidence that might point you in the right direction.

We found that custom form elements reduced conversion. Not sure if this extends to custom styles, though.

http://www.thumbtack.com/engineering/