Adding Fuel to the “Styling Form Elements” Fire
February 25, 2008
This post is not a tutorial on how to style form elements, but rather to hear how others out there feel about it. Many usability aficionados will say it is not okay to alter the appearance of form fields for the users’ sake. A user comes to expect certain things about fields and what to do with them based on their appearance. Is this reason enough not to change their appearance?
I recently added a client section to my web site to serve as a central place to exchange files, see updates, collect feedback, etc. I didn’t want the login to be buried making every trip to the members section a journey, so I settled with adding it into my header. The standard form fields felt extremely obtrusive when used in this instance where the form is not a primary object on the page. I also knew I did not want to rely on javascript to handle the form; I wanted to maintain a standards-based, valid PHP form that would be usable and unobtrusive.
Enter the styling.
I styled the fields to blend with the rest of the site. Does a user look at them and not know what to do with them? I hope not. Of course, this is a pretty specific instance and I can see the argument for avoiding styling registration or order forms, but I do not agree with some who say we should not style forms because it is “what users expect to see”. As a designer, sometimes that is enough reason to insist on changing them!
Although, one does have to take into consideration that the web is not a perfect world, and the varying renderings of forms, even in standards-based browsers is almost enough to make a front-end developer go kicking and screaming back to the designer saying “don’t mess with forms!” I do my development/browsing with Camino. I think it is the most evolved browser, and would encourage others to use it. And as such, I am happy with the form appearance in Camino. Safari keeps their white bevel/drop shadow border around the elements, which is frustrating, but not enough to make me give up yet. Firefox seems to bloat the form and make it larger than other browsers. As of writing this, I haven’t checked IE (I know, tisk, tisk).
So I guess my take on the whole thing:
- Standards and usability: Very important
- Design/development: Also very important if it enriches the user experience
Jakob Nielsen is a very intelligent and highly respected individual, but I don’t want all my hyperlinks blue and underlined, or all my text black on a white background, or all my form fields to follow the prescribed layout.
I think as long as they stand out as form elements, and aren’t over styled too much (crazy background images, fonts, low contrast colors) that form elements are cool for styling. I guess for heavily used sites like banks, amazon like sites, etc. (sites with heavy traffic, and many monetary transactions) maybe designers and developers should think more about straying from the default/basic style of form elements. I feel the most focus with forms should be with the layout and ease of use as well as being accessible for handicapped website users.
Comment by Zach Frank — February 26, 2008 @ 9:23 am
What about using Javascript in forms? Not everyone has it enabled, although it is fairly common. I am a little undecided on that issue, because it can improve user experience, but it can take away from the accessibility and usability.
For example, using a bit of JavaScript to check that all the fields have valid values before sending the request with PHP. Then the user will never even be directed away from the login page if they haven’t filled out a form correctly. I know there are ways to do a similar thing with PHP, but not without leaving the original page (I think).
Comment by Evan — February 29, 2008 @ 11:41 am