Custom User Interface Form Design

When presented with the opportunity to design custom user interface elements in web projects, I often struggle. Technology has opened doors to allow for a homogeneous online experience regardless of browser or operating system and allows for graceful degradation. The ability to style these elements can be appealing to me as a designer. After all, when creating a specific aesthetic, the last thing I want is the browser to dictate what I can and cannot do. Companies with a strong desire to have a consistent brand experience usually like this option as well. This is especially relevant for HTML form elements such as radio buttons, dropdowns, and text fields.

So why don’t all sites utilize these styled form elements? The biggest dilemma I have comes in the form of usability issues. Since browsers use a default set of form elements, users quickly become accustomed to them. If you use Firefox every day, sometimes without realizing it, the native controls become your accepted standard. Even though changing the border color of a text field may not make it completely discernible, it still alters the experience. This can be especially important for sensitive web forms. Here at Gorilla, we design a fair amount of ecommerce sites where there can be a high rate of cart abandonment when landing on the payment page. If controls are poorly conceived, you run the risk of confusing or alienating the user. For this matter I believe the form elements on such pages should remain un-styled, leaving it up to the user’s browser to provide a familiar experience.

However, there are instances where a styled text field can be a welcome change. Common examples of this practice are the search field at Zappos.com or Apple’s attractive MobileMe.com login page. As long as it is not overdone, blends well with the design, and fits the audience, custom-designed non-critical form elements can be a pleasant addition.