Don’t customise the look and feel of form fields

Garrett Dimon talks about how front-end developers should embrace web browsers instead of fighting them in Front-End Architecture: Browsers. In particular he talks about avoiding CSS hacks and one of my pet peeves: customised form controls:

Browser form fields may not be the prettiest things in the world, but people are used to and comfortable with them. It’s not surprising that the sites I come across with custom-designed forms often have significant usability problems.

Not surprising indeed. Particularly on sites built by developers so intent on breaking the user experience that they find it necessary to use JavaScript to change the appearance and behaviour of form controls.

Don’t waste your time and your visitors’ time on it.

Posted on May 23, 2006 in Quicklinks, Usability

Comments

  1. Roger, what do you think eg. about slight shading and similar stuff? I think that WordPress admin (demo/demo) has pretty nice UI components. In a common browser. I use Safari and am completely confortable with the aqua/cocoa widgets there on the other side.

  2. Even more annoying - when developers stuff javascript into their forms and have no idea what they are doing.

    I would agree with the styling aspect. Especially with forms - FUNCTIONALITY is the key, it HAS to work. I see many spend hours on making it look pretty (and thats fine, given the proper time to make sure it works first). The biggest kick I get is the fact that all of the browsers render form elements differently anyway. So designers spend hours to make it look great in IE, only to have it look completely different in FF or Safari, etc.

    Ultimately, what is the point of a form? To be useful or to look pretty?

  3. Jan: I believe slight shading is fine as long as the form field’s form does not change. However forms with custom form fields such as rounded corners, image backgrounds and so on, could cause serious usability problems.

  4. May 23, 2006 by Roger Johansson (Author comment)

    Jan: Light styling is acceptable as long as it doesn’t make the form less usable. A very common mistake (that I’ve been guilty of on several occasions) is forgetting to specify both text and background colours for text inputs. That can make forms completely unusable for people who use inverted colour schemes.

  5. Indeed, I meant really only a visual distinguishing that can (at least in my opinion) lead to better usability, talking about buttons specifically, when done right. The rest of the styling should be made only in the form area itself to add visual aid, not on the actual components.

  6. How is it losing usability stlying a form field? Original form field stylings just don’t make sense for some designs and interfaces.

    Yes, I do agree that a lot of developers have been very irresponsible with Javascript and even CSS when it comes to styling forms. But I definitely wouldn’t blindly state that we should avoid styling completely.

    You say users are comfortable with whats already there, but that doesn’t mean we can’t pursue to improve comfortability (and usability). Sometimes the best interfaces are ones that feel the best. And we should pursue this responsibly.

  7. May 23, 2006 by Bruce Boughton

    So I guess you’ll be removing your :focus styles from the comment form then! Only joking, but ironic as I was going to say this is a case where styling is nice (:focus changes). Of course, you still have to choose sensible styles and heed your advice about specifying both text and background colour.

  8. I use to style sometimes forms, but only with CSS. Just a border of the input fields and a nice button is enough for me. Here and there maybe something on a selection or a background for some fields.

    Boby

  9. A quote from one of my responses in the comments at my site…

    There’s a quote from Jurassic Park that most succinctly captures the problem. “They were so busy trying to figure out if they could, they didn’t stop to think if they should.” It’s a case of misplaced priorities. The problem isn’t whether or not it can be accomplished. The problem is that it overrides an accepted and expected default behavior for most visitors.

    As much as I value good design, I do not believe that custom-designed form fields are a valuable addition to a site. It’s making things “pretty” just for the sake of being pretty, and the time invested to those ends could generate much better results elsewhere. Why reinvent the wheel? Maybe I’m too practical, but I firmly believe there are much better ways to improve a site’s overall experience.

  10. I’m not really comfortable with the message. While I agree it’s a case of priorities and styling form fields is definitely far down the line of it, I still think that saying one should not style the look and feel of form fields is too far. Blame the incompetent designers who do not know when their work degrades usability on their forms, but that does not mean there are many forms who do match the look and feel of the environment they are presented in and still function perfectly fine.

    It’s all about affordances. Through design you create expectations and with the user glancing over the site you slowly introduce him or her to the fact that the next section is likely to present data input. Popping an input field right in the middle of a page with no context whatsoever that even hints the user to expect data input is as bad as it is when it’s styled with a red border instead of the default OS one.

    Styled form controls are not inherintely bad. I would expect to see proper education on what is accepted and how to achieve that to be a better solution than condemning it.

  11. May 24, 2006 by Carlos Bernal

    I strongly disagree with your article.

    The article should of been “Carefully customize the look and feel of form fields”. While I do agree it’s by no means a top priority any form like any other element should be or not stylized according to the needs and expectations of the visitors to the website.

    I have also read elsewhere that we shouldn’t change the default color of links and also keep all text black on white background. So if we were to mind these extreme points of view we would have web pages that closly looked like pre 1990’s!

    Let’s be reasonable and say let’s design to the needs of the target visitors…that’s all!

  12. “Carefully customize the look and feel” is OK, I think. Myself, I always test with ‘don’t allow styling of forms’ and similar options in browsers that have them, just to make sure the “look and feel” will work at the user-end - regardless of my styling.

  13. May 24, 2006 by Oliver

    I’m with Carlos.

    forms with custom form fields such as rounded corners, image backgrounds and so on, could cause serious usability problems.

    This is just Nielsen-esque paternalism: no one migrating from Windows to a Mac would be confounded by the fact that the radio buttons are blue or that the submit button is glassy and rounded.

    Moderation in all things. Doesn’t make for a hot topic for discussion, but certainly beats one-dimensional thinking.

  14. May 24, 2006 by Jeff Hartman

    Let’s see some examples of styled forms…

  15. or that the submit button is glassy and rounded.

    That is input type=”submit” and it is an inaccessible feature of Safari forms. Try changing your font size in Safari everything else will increase except input type=”submit” or input type=”reset” which are restricted by the size of the background image. Note Camino does not have this problem.

    The problem is each browser maker has decided independently on their methods for styling form elements and they are quite different. You can find a sample of how different browsers render the input type=”submit” and button elements in a presentation I gave (slides 3 to 8)

    Some people will argue that you should not style forms because that is what people are used to. I disagree your forms should reflect the styling of the rest of your site, because if your site is styled one way and then suddenly the forms are not styled, then you damage the site’s crediblity in the eyes of your visitor.

  16. I agree with Carlos and Nick Cowie. CSS didn’t allow us to modify these elements just so we can come back and say, “ah hell, just leave it the same”. Come on now.

  17. May 24, 2006 by Roger Johansson (Author comment)

    Arik: If a form control is styled in a way that makes it look unfamiliar to the user, it forces the user to think (if only for a fraction of a second).

    Bruce: Changing the colours on focus is a case where styling can indeed improve usability, if done responsibly.

    Carlos: Perhaps that would have been a better title.

    Oliver: Messing around with background images on form controls can definitely cause usability and accessibility problems. Saying so is not “Nielsen-esque paternalism” or “one-dimensional thinking”.

    Arik:

    CSS didn’t allow us to modify these elements just so we can come back and say, “ah hell, just leave it the same”.

    Thing is, CSS doesn’t allow us to style form controls. Or rather, it does not specify how CSS can be used to style them.

    From CSS 2.1, Conformance (working draft):

    CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.

  18. May 24, 2006 by Alex

    Maybe there’s an exception case to be made, for when your audience will understand the change. Case in point would be a lot of people using the very Spotlight/Tiger-style search boxes with the round corners, magnifying glass and blue focus ring. Apple themselves are using it on much of their site (e.g. Developer Connection) and I’ve seen it cropping up on a number of other sites (esp blogs) lately. Does anyone else think the “search ellipse” is becoming common enough to be considered an intuitive, understandable form field style?

  19. Hmm, I get the impression that once we’re using analogies applied to God-like tampering with genetic engineering to compare with styling form elements we’ve meandered a little off the path.

    I think I can speculate as to the true motivation behind this suggestion: the impending release of a Safari browser based on the recently added changes to form element rendering in WebKit. Once this happens, Safari users will be (for the first time) unshielded from the plethora of badly-styled form elements out there in the wild. A sad thing, and one which doubtless will diminish a fair few Safari users’ web experience.

    But reason to make styling form elements entirely off-limits? I think not.

    It is our responsibility as experts in this field to know when to use appropriate styling and when to use no styling at all. Sometimes, in particular on the new wave of minimalist sites springing up today, no styling is acceptable. In other places the aesthetic of the site will require it. If we know our job well, we’ll be able to tell if it works and if it doesn’t, when to style and when to leave it as vanilla.

  20. This is something that one of my colleagues touched on a few months ago.

    I agree that a little customisation can be a good thing, but it’s so easy to get it very very wrong. A form is by its very nature a functional object, and design can be used to enhance functionality if done correctly. What should be objected to here is the wholesale breaking of both established convention and functional design.

    Humans may respond well to convention and familiarity, but we also appreciate evolution and innovation, so let’s not blind ourselves to the potential to do something in a better way simply because “that’s not what people are used to”. We need to make sure that we are indeed making something that is genuinely better, not just something that is simply “different” for the sake of being different.

    A wise man once said that you need to wholely understand the rules before you can properly break them…

  21. I am perfectly comfort with styling form fields, but not the buttons. Buttons vary so much, once i saw a site from some dude who made literally all screenshots available in all browsers and OS. And i was amazed how much this differs… The button is the thing which users can identify them with. But a little padding or margins on the form itself, or some colorings on the fields and borders: no problemo i say.

  22. I’m with Carlos Bernal on this - I disagree with your article for a number of reasons, most of which have been stated in comments already.

    The main problem I have with it however, is the sweeping generalisation upon which the viewpoint is grounded. Sometimes designers, shockingly perhaps, actually know about usability and can design forms that work just as well as ‘plain Jane default’, but without looking out of place in the design.

    Leave the choice to the designer - if the site is hard to use that’s a reflection on the abilities or inability of the designer, and that designer will sink or swim depending on that. If the usability of the form fails, that’s because the design was poor - it’s got nothing to do with ‘default styling’ being inherently superior to ‘custom styling’.

  23. Ben Darlow, I agree and that is what I’ve been trying to say all along. Pushing the limits of CSS requires knowing your audience and the goals of your decisions. Not to mention their implications.

  24. The other thing about default forms is that they really jump out from the page. The user knows what a search box looks like and can immediately find one on your page when it looks like all the other search boxes they’ve used. They can also immediately find any other interactive form controls, like where to enter their login information or where to sign up for your newsletter. I’ve seen some designers customize forms so much that they blend into the design and don’t map onto what the visitor expexts to see. Which might be fine if you want your form controls to be difficult to find :)

    I think that a subtle background or minor changes to form controls are fine, but many designers get carried away to the point that the form stops looking like a form.

    In Opera you can disable styling of forms.

  25. May 24, 2006 by d_fens

    I dont get it. I click on your inputs and theres bevels and border colours I assume. I think examples for good and bad would be in order rather than saying dont style them at all. Safari if I remember didn’t allow you to style forms which in fairness can make a site look different from all other browsers. Is apple guilty of styling forms there?

  26. May 24, 2006 by Roger Johansson (Author comment)

    Look, I clearly stated in my comments here that I find light and responsible styling acceptable and that I could have given this post a better title.

    Changing text, background, and border colours can be useful. It’s when you go overboard and start trying to force form controls to look the same in all browsers that usability and accessibility usually goes out the window. I’ve seen some examples of designers (or maybe the term “decorators” would be better in that case as it appears they care more about the visual appearance of the controls than if people can use them) using JavaScript to completely replace the look and behaviour of select boxes, for instance.

    I’ll see if I can set some time aside for creating examples. Until then, you’ll find plenty of examples in my article Styling even more form controls.

  27. @Megan

    “I think that a subtle background or minor changes to form controls are fine, but many designers get carried away to the point that the form stops looking like a form”

    Correct i agree, But i’m a little affraid of that “Jakob Nielsenianism” around the web. Usability: fine, but please get a grip people… I’ve seen flash sites that blow away any discussion on usability for decades. Some are very intuitive, and overall faster then a script packed HTML page. And no blind person will watch such sites anyway.

    IMHO: I refuse to give people space who still uses 800x600 screens, come on buy a better screen for C sake. We’re in the information age, not the internet stoneage.

    Where does this end?

  28. It’s perfectly possible, and there are many cases where it can increase usability, to use javascript to replace select boxes (probably the most unusable basic form element) in a manner that degrades when javascript is disabled.

    Using Javascript, it is possible to create more usable multiple-select boxes (Ctrl/Shift clicking is confusing) with better visual indications of what is and isn’t selected.

    The web offers no basic form element for “combo boxes” where the user can select from a list OR enter a new option. To do this using basic controls, you need to render a select box, a text input box, and a set of radio buttons. Using Javascript, you can still render this as the basic form, but replace it with a combo box familiar to users of any desktop application.

    These are two basic examples off the top of my head. There are countless others that crop up when developing web apps.

    Nice going on calling Shaun Inman a “decorator”, too. I’m sure he’ll appreciate that one.

  29. May 24, 2006 by Roger Johansson (Author comment)

    david: If done really well, which it rarely is. But yes, web applications that are used repeatedly may benefit.

    I wasn’t thinking of Shaun here. I take it you are thinking of the drop-down menu thing he has on the front page? That actually isn’t a form control at all, just a styled unordered list. No scripting involved. For some reason I can’t find the examples I was thinking of that use JavaScript to basically create your own select box. Oh well.

    I got the term “decorator” from the recent discussions about “ugly design”: Pretty Ugly, Pop quiz on the meaning of “web design”. (a decorator only makes things pretty while a designer cares about aesthetics, usability, functionality, readability, accessibility… the lot)

  30. May 26, 2006 by Jeff L

    I completely agree - but the problem is, I work for an agency that doesn’t. I’ve wasted far too much time recently trying to completely reinvent the select box using unordered lists because the designer designed something that isn’t possible with a normal select. However, it goes even further in that this is what clients want.

    Now, should it be the responsibility of an agency to explain to the customers why they DON’T want this? Probably. But if the agency has the ability to pull it off and gain work because of it, it would be a hard business case to convince the agency of that….

  31. May 26, 2006 by Johan

    I participated a while ago over at cssplay to style a form, is this going overboard? My submission was named shadesofred.

  32. May 26, 2006 by Nicolas R

    Roger:

    Thing is, CSS doesn’t allow us to style form controls. Or rather, it does not specify how CSS can be used to style them.

    Yeah but..what about selectors? They pretty much say “style everything”.

    I believe that just because we can do something, it doesnt mean that we have to. Just like we can do beautiful things with CSS we can also do things like this!

  33. May 28, 2006 by Roger Johansson (Author comment)

    Johan: Kind of, yeah. Especially the resized checkboxes and radio buttons, and the restyled submit and reset buttons. The styleswitcher for that page doesn’t work in Safari so I can’t check what it looks like there.

  34. May 30, 2006 by Ryan

    Agh does he (Garrett Dimon) have to highlight so much text like that! It looks horrible, make it bold for christ sake if you have to do this crap.

  35. September 16, 2006 by Fosco Jones

    Well, I agree to a point with what has been said here.

    I agree that forms primarily should be functional - that’s rather like saying that cars should get you from a to b. Of course they should. That doesn’t mean that we shouldn’t spend a good deal of time ensuring that our forms fit in with the sites we build.

    Consistency in any design is key (in 9.9 cases out of 10). I hate the look of the standard form styles.

    The issue here is that some designers are lazy, not taking the time to thoroughly test their forms in every browser they can get their hands on.

    I’m guilty of bending my brain to improve the look of a select input and bring it inline with sites I design, but as I haven’t found a reliable and accessible method I haven’t yet changed it. That’s where responsibility comes in.

    Don’t tie designers hands by telling them to leave form fields alone - its insensible

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.