Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

Safari form fields

And here's Chrome:

Chrome form fields

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

Firefox form

And so does Opera — see button:

Opera form

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)?
share|improve this question
4  
About buttons: should-i-style-my-buttons –  jfrej Jan 22 '13 at 17:18
    
I'm voting to close as a duplicate of the question jfrej just posted. –  Jimmy Breck-McKye Jan 22 '13 at 17:20
    
@JimmyBreck-McKye, but it's not a duplicate — not just about buttons –  Baumr Jan 22 '13 at 17:21
    
@jfrej, thanks! It'd probably be a good idea to integrate that into my question somehow — any ideas? –  Baumr Jan 24 '13 at 1:24
add comment

5 Answers

up vote 4 down vote accepted

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

share|improve this answer
1  
Good point with Firefox's font –  Baumr Jan 22 '13 at 22:56
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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/

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.