Designers often avoid projects that involve designing web forms. There is a common misconception that such design is boring, unimaginative and tedious.
But in today’s world, input forms are an essential element of almost any website or application. It is the main platform where the visitor and website company interaction. And, in many cases, a form’s design determines the success or failure of the site.
Here enters the role of the web designer, who must make the form not only useful, readable and effective but also beautiful and creative!
So, what kind of techniques, components and styles should designers use when creating forms? I’m here to share. 🙂
Before the aesthetics
Would you be excited if someone handed you a form and said, “this is going to be confusing to fill out”? Probably not. As designers, we need to ensure the viewer enjoys every step of the form.
It’s not about listing out the form fields you need to design. It’s about reading the brief and finding out exactly the journey the viewer needs to take to accomplish the company’s goal.
Here are a few things to think about before jumping into the aesthetics.
Form components with HTML and CSS
The default look of HTML form elements as seen on Windows 7 in Firefox browser.
Keep in mind your design will be transformed into some kind of HTML/CSS and possibly Java Script. With HTML, there are a few available form components:
- text input fields
- larger text areas
- radio buttons
- drop-downs: for selecting items
- buttons: for submitting form or performing other actions
There are a few more components, like file upload and password fields, that are introduced in HTML 5. Some of these elements are not possible to style via CSS or are very limited in this aspect: in particular drop-downs, check-boxes, radio-buttons and file upload fields. Their look on a web page is determined by the operating system and browser.
Design follows usability
There is a well-founded opinion that using standard (default) formatting of form elements has many advantages, like better usability. Sticking to a default look makes form elements easily recognizable from users who have seen it a hundred times before.
Although, form elements with default look are easy to recognize, some designers opt out of using them. They might not be the best way to communicate the company’s message or might not keep stylistic consistency with other parts of the website.
When you start designing a website, focus on the client’s priorities and purpose. Ask yourself:
- What is more important to the client: style or simplicity?
- Would using nonsystem elements add or reduce usability in this particular case?
Create a form as if you’re having a conversation
Design forms as if they are people having an engaging conversation with the viewer. Create a friendly atmosphere with logical organization, content grouping and visual hierarchy of information.
Just like any good conversation, we should put more effort into asking thoughtful questions. It should also highlight calls to action which are usually done with submit buttons.
Different form types and styles
There are different types of web forms that come in many styles. You can get as creative as you’d like just as long as you keep the conversation engaging. Let’s check out a few examples.
Sometimes the task of a website — to inform, engage, register and collect information — can be done on just 1-page.
In the examples above, the company wanted to inform the vistor about their business and collect information from users in 1-step. The forms were pretty simple and straightforward but to keep them engaging I added a few touches by adding textures such as paper, tape and wood fencing background.
If you need to ask quite a bit of information but don’t want to overwhelm the viewer, then step-by-step forms are the way to go. It allows the form to be broken up and simplified on each screen. And its important to clearly communicate how many steps the viewer has until the end.
In the example above, you’ll notice the whole design is built using just texture, typography and a monochromatic color scheme. This gives the form a little flare while still keeping it simple and to the point.
Often times, a company will put their most important call to action on the front page. In this example, the company’s focus is having potential customers request a consulation. This example is simple, clean and attracts attention with the bold brown color contrasting with the background image.
Footers — the seemingly unimportant section — have recently been getting more attention. They are being turned into a story of their own and are a pretty good place to ask for e-mail.
Being able to spice up a complext footer is great! In this example, the whole footer incorporates call to actions as well as a contact form.
Contact Us forms
The Contact us page is a common part of most websites. In this example, the contact form attracts users with the use of color. Although it uses simple CSS it remains blended well with the rest of the site.
The whole reason for this page is to give viewers a button that unlocks the hidden world behind it. Search forms are like gates and the surrounding graphics need to suggest what will be found if the user searches with it.
Visual metaphor forms
In this form, the visual metaphor is the case register.
As we stated earlier, a visual metaphor is an interactive graphic used to visualize and explain the purpose of the form more effectively. In this example, I used a case register to show the steps.
For more on using visual metaphors, check out this article, “Using Interface Metaphors to Improve Your iPhone App Design.”
Surprise effect forms
A surprise effect can create entertainment for the viewer… it’ll make sure they’re still paying attention. 😉
While designing “Subscribe to the Burgasmic Rss Feed,” I used a small effect. When the mouse is moved over the black and white hamburger, it changes color along with the Send button — simple and fun!
For real creative freedom, you will work with a company who wants a site chalk full of illustration.
The main focus is to keep the form style consistant with the rest of the site and of course, keeping the conversation friendly and fun.
Web forms have come a long way from boring and uninteresting, to eye-catching, creative and often times beautiful.
I presented a few examples in hopes of inspiring all you web designers out there. But enough talking, it’s time to start practicing. The first step? Experiment!
You’ll be happy to know: the number of solutions is unlimited.