Designing the Dreaded Form

Alright, so I used to really hate designing forms. I hated trying to figure out what areas should be left up to the browser and what areas I could design that were still easy to develop. I hated trying to figure the best usability – will the user be able to easily fill out the form quickly and not get confused or lost. I always saved the form for last and then when I eventually got to it, I usually just grabbed a PSD UI kit and threw it in, not giving any real thought to the design. While I still don’t love designing forms, I have started to enjoy putting them together and experimenting with different form patterns and learning how to skin elements better.

There is a better way to design the dreaded form though. The biggest difference for me has been setting up and making those UI decisions ahead of time, before I click the Photoshop icon in my dock. Now, I won’t go into any great deal about the look and feel of form design — color, contrast, hierarchy, or any other design principle or element, we’ll leave that up to you and your excellent creativity (or future article) to compose a really beautiful design. The focus of this article is more about overcoming those evil form layout issues and hopefully provide you with some new ideas and examples so that you can get started designing your forms correctly… and hopefully you’ll learn to enjoy designing forms.

Picking a Pattern

There are a lot of differing opinions when it comes to form UI patterns. Some studies prove that users can complete one type of pattern faster and better than another, while those others prove the exact opposite. But in my experience the form pattern’s conversion rate has more to do with the choosing a pattern that best suits your site design and look, what type of users you are dealing with and of course, how many form elements are you dealing with. The most successful forms — in my opinion – seamlessly blend into the site and make your users feel comfy cozy.

Obviously, the shorter form you have the better, so before you even start putting together your form, figure out exactly what elements you really need to get from your user. Do you really need their full address? Do you really need a primary and secondary phone number? Besides thinking about what elements you will require your user to fill out, think about how to group the elements together to make it easier for your user to navigate. Lump all shipping info together in a group, pile all user details together like: username, passwords, email address. But wait, there is one more thing you should consider before you begin to frame up your UI — how are you gonna structure the elements?

The Basic Patterns

The basic UI for any form is the label and the input. That sounds pretty easy but this label/input layout is where the arguing becomes contentious, almost as contentious as a political argument (well, not really). There is really only about three ways to lay out your labels and inputs:

• Up and Down
• Side to Side
• Teaser Labels

The up-and-down form is really the easiest and most basic of all form layouts – the input label sitting above the input. This type of form layout has been proven to have great readability and clarity that generally makes it easier for users to fill out faster. While it’s easy to build and simple to use it also has some big cons. Theses elements can be harder to style and they tend to take up a lot more room on the page. Making an up-and-down form look good can be hard, simply because it’s such a simple and basic layout, but the trick is not to over-think it and just make sure your inputs aren’t too long or too short (this may make them look awkward) and make sure you use enough spacing so that your form elements are clearly separated.

The side to side layout is really great when squeezing forms into tight places. Because the elements are resting next to each other you can more easily save room on the page and squeeze in a bunch of form elements without them looking really crammed together. Some UI “experts” claim this layout is slow and hard to navigate because the user’s eye must go back of forth instead of just simply down to the next form element. However, depending on your users and the overall look of the site, this “slower” eye movement may not slow down your user. For example, expert computer users and web surfers generally use the ‘tab’ key to navigate between inputs which speeds up the eye tracking, although still leaving the readability an issue. A simple way to improve the readability of the side-by-side form is to align (usually right-align) the text up against the input element it’s sitting next to.

Forms with teaser text as labels are usually my favorite. The teaser labels take advantage of the good attributes of both, the up-and-down and the side-by-side layout. First, you really lose the label all together and don’t clutter up the form with any extra text or elements which allows you to cram in your form elements into small spaces while not losing readability. The added bonus of teaser labels is that you not only are giving your user the name of the input but you can also give them a little hint of what you expect with it. Instead of making your users read more, this lets you clearly guide your user through the form better while still keeping the design simple and clean. This type of form also blends well into really any site design.

The Dreaded Long Form

Meh, long forms. If you still have a lot of required form elements even after you have determined some to been redundant or useless, you’re stuck with the dreaded long form. The long form is one of the hardest web design elements to do well. If your form is too long the user bails out on you before they get to the end. Really, creativity is your best friend when it comes to designing a long form. While there are some really great and proven UI patterns for handling long forms, your creativity may be your best friend in overcoming the long form problem.

The standard long form UI patterns:

• The step-by-step (wizard)
• Tabs
• The Accordion

For years the best way to collect a lot of info from the user has been to use some form of “wizard”. A wizard is really just breaking up the form into sections or pages and then guiding your user through the form step-by-step. There are a lot of ways to design a wizard form. You can load each section into a new page while guiding the user through the form with ‘back’ and ‘next’ buttons (similar to installing a software product) and some more sophisticated wizards are simply embedded in the site and use JavaScript to store and load new info while providing the user feedback in the form of a status or progress bar.

The tab method is pretty much just a wizard as well, except, instead of using “steps” or status bars you simple just take advantage of tabbed navigation in order to help your user go through the steps. The advantages to using tabs is that they don’t take up a lot of room, most users are very familiar with tabbed navigation, tabs provide a quick and easy way to give feedback to the user and they also provide a really simple way for the user to go back to a previous input if they have messed up.

But the real best new way of implementing long forms is to use an accordion. Just like accordion navigation, each section of the a form is broken up into collapsable elements that can be manually or automatically opened to expose the user to the individual form elements. The accordion has the same advantages as using a tabbed navigation except it is much easy to use in general and takes advantage of the up-and-down navigation and eye movement theory. With the accordion, you can provide your user and real slick experience while still providing them backward navigation for editing form elements and a super easy way to provide progress and validation feedback.

The Bottom Line

The bottom line really is this: plan it out. Planning out your form and knowing what and where elements are gonna go will save you a ton of time rather than fiddling around in Photoshop for a while or even neglecting the form elements all together — you’ll just wind up slapping in some ugly, standard form inputs, blech. Spend some time up front and figure out which pattern and UI elements will best fit the overall experience of the site. When planned ahead (like anything designed correctly) forms blend in and become a part of the site just like any other element. Just whatever you do, don’t let your form become the afterthought of your page; in modern web sites, forms play a huge and important role on any site so make sure you let your user know that it was important to you as well.