Professional Documents
Culture Documents
Web Form Design Guide December 2010
Web Form Design Guide December 2010
Web Form Design Guide December 2010
Text Input boxes Text elds Radio buttons Drop-down menus Secondary actions
3 4
4 5 5 6 6 7
8
8 12
17
17 19 21 26 27 27
29
FOREWORD
If youre reading this, its probably because you want to improve your web forms. Good for you! This guide is your rst step toward creating more beautiful, functional, and user-oriented forms. Naturally, its a complement to CoffeeCup Web Form Builder (http://www.coffeecup.com/form-builder/), but the advice provided holds true for all forms on the web, even those not built with our software. Please note that all the examples in this guide were created with Web Form Builder, and that there are a few places where Web Form Builder is mentioned. This is because the program makes certain tasks easier than if you were coding a form by hand in HTML. Although the information in this guide is effective regardless of how you build your form, it is safe to say that you will get the most out of this guide and CoffeeCup Web Form Builder when you use them together. Okay, thats all we have to say here. Read on to start learning more about web form design!
Text
Youre going to be titling your form, labeling input boxes, and giving brief instructions on other elements within your form; as a result, you should give careful consideration to the font and font sizes being used. Unless your form is highly stylized, you should probably stick to a standard web-safe font for two reasons: Your information will be clearly read by the viewer, and you can be assured that the proper font is displaying on their computer.
Web-Safe Fonts
If youre scratching your head and asking yourself what in the heck a web-safe font is, heres your answer: Theyre fonts that display the exact same way regardless of what browser, computer, or operating system your users are using. The most useful web-safe fonts are: Arial Courier Georgia Impact Lucida Palatino Tahoma Times New Roman Trebuchet Verdana MS Sans Serif
The size of the fonts you use also depends on your design. Sure, you may want to use a larger font for the title of the form, but you dont have to. It really depends on whats appropriate for your page. Heres one suggestion, though: You may want to consider making instructions, errors, and minor labels for elements small so that the user doesnt get distracted while lling out the form.
What about the weight bold or regular of your fonts? Well, typically most items on the form are normally weighted, but important or required items could be labelled with a bold font. This helps to ensure that the user understands that the text eld or checkbox is labelled by the bold text next to it.
Input boxes
The main purpose of your form is to collect information, and an input box is the primary method by which a user will enter a small amount of text. Generally, these are used for inquiries that require an answer thats anywhere from one to several words in length. Because they collect one line of information, input boxes are not vertically adjustable; however, you will want to consider the width of the box so that it is appropriate to the information being collected.
Text elds
Text elds are very similar to input boxes except that theyre intended to collect information that may be longer than a few words. A text eld can be adjusted vertically to allow for several lines of text to be entered. They are generally used when trying to get feedback or comments that couldnt be addressed anywhere else in the form. Your text eld should utilize what is known as text wrapping so that a lengthy response doesnt appear on a single line in the form; when the text being entered reaches the right side of the text box, it will automatically return to the beginning of the next line. Limiting the number of characters that can be entered into this element of your form may be important as well, so that users merely enter information that is explicitly necessary.
Checkboxes
Checkboxes are small squares placed next to items on your form which can be selected. They are used when you want your visitors to be able to select more than one option in a given group, or no options at all.
Radio buttons
Radio buttons are similar to checkboxes in that they display a list of options, except that in this case users can only select one option. Theyre best used when a selection is required. For example, if you want your users to select their gender, options for male, female, and trans would be present, but only one could be selected.
Drop-down menus
Similar to checkboxes and radio buttons, this type of menu shows a list of options in which generally only one selection can be made. Their implementation is necessary when trying to conserve space, especially when an enormous list of options is available (such as a list of all of the states in the United States). A large number of options can be reduced to a single line by showing a single item with a down arrow next to it; when the arrow is clicked, the other options are temporarily displayed on the screen as a list.
Primary actions
Your primary action is the conclusion of the form; it is the main reason that a user is lling out the form to begin with. Generally, this is the Submit button if the intention is to send information to you, but it could be other options such as Save or Print. The primary action button should be plainly visible at the bottom of the form.
Secondary actions
A form will often utilize buttons or links alongside the primary action which will allow the user to perform a secondary action. Typical secondary actions include: Reset/clear buttons More information Go back File upload Link to a help page Though these other actions can be useful, it is extremely important for the user to not confuse primary and secondary actions. Using a different text size or careful placement of the secondary action is recommended. Thats it for the nitty-gritty technical elements of the form. Next up, well talk about the best ways to transform these boring, standard elements into a cohesive, stylish web form.
Thats a lot of different options! How do you know which one is right for your form? Well, according to an eye-tracking/user-feedback study conducted by researchers at CXPartners (http://www.cxpartners. co.uk/cxinsights/web_forms_design_guidelines_an_eyetracking_study.htm), there are two layouts in particular that make your forms easier and more enjoyable for your users to ll out. They are (drumroll please)...
Vertical Layout
In most cases, this is the most intuitive layout, because users ll out form elds from top to bottom. There are a few exceptions, of course, including date elds and rst and last name elds. In those cases, its okay to put these elds on the same line, as long as you label the elds in such a way that its clear they are related.
Left-Aligned Labels
Bold, left-aligned labels were reported to be clear and easy to read, and made for a clean-looking layout. Of course, theres not just one layout that works best for all forms. The most important factor to take into account when determining which layout to use is the length of your form. In the coming sections, well discuss different common form lengths and the best layouts to use in those situations.
On the other side of the coin, lets say you have mostly required elds, but only a few elds that are optional. In this case, you can omit any wording about required elds. By the elds that are optional, include the word optional in italic letters or in parenthesis, or both. When a user sees only a handful of elds marked optional, logic dictates that the rest are required, so this is a clear way to show the user which elds are required and which arent. Keep in mind that you should only mark as required elds that are actually required. If your users are faced with a long form packed with required elds, they may feel pressured, frustrated, or even annoyed and that could reduce the chance that theyll actually ll it out.
Teeny-Tiny Forms.
When we say teeny-tiny, were talking about forms with no more than three elds. In this case, you can do something unique with the design: a horizontal layout.
You can see why this wouldnt work with a longer form, but for a short form like this, its actually very streamlined and direct. Of course, you can also use a vertical layout too.
10
Medium-Sized Forms.
Were calling a medium form anywhere between four and eight elds. This should be the length you shoot for any more than eight elds, and your users may get annoyed. If youre creating a mediumsized form, you should work with a vertical layout. Left-aligned labels are a decent option, but the vertical labels are usually your best bet.
Long Forms.
Any form longer than eight elds is what were calling long. Unless theres a real reason why your form needs to be this long, we recommend trimming the fat and only asking for information thats essential. Now, lets say you legitimately need a lot of information from your users. Thats cool! To make your form seem shorter which your users will appreciate break it up into smaller chunks. This could mean having it span multiple pages or using headers to divide up information into relevant groups.
11
Heres the thing about headers: People tend not to read them. But thats not actually a bad thing. Even if your users dont carefully peruse your header content, the form still seems shorter. If your headers are truly important, just do something to make them stand out, like bold them or apply some cool highlighting.
Make it pretty and ashy. Like we said, your form is a great place to let go and get a little creative. And if youre design-challenged, CoffeeCup Software offers beautiful themes to match any website design.
12
Write some creative text. Youre not limited to purely descriptive text in your form. In fact, it can make your form seem more friendly and approachable if you use a conversational tone.
All right, now that weve covered the concepts you need to know to design a great form, lets put those concepts to use. In the following steps, well walk you through the process of creating a medium-sized form. Lets dive right in!
13
Youve laid down some good groundwork for the rest of your form. Kudos!
This not only allows users to quickly choose the service they want, but it also allows you to control the choices a user has, helping to reduce user error. The drop-down menu is a good way to save space while offering these options.
For example, if you choose to have a single input box for a persons name, it should be the only item on that line; if you choose to have separate inputs for a persons rst and last names, it makes sense to place them on the same line. Similarly, an input box for a visitors e-mail address should be on a line by itself. As the visitor scans down the form looking over the information being requested, unnecessary items can get in the way of the ultimate goal. Extra instructions, precariously placed labels, the word required next to nearly every item each serves to confuse or distract the user. Try practicing a little feng shui on your form design to see if a more minimal style comes across as more intuitive.
For instance, an e-mail address is something most people are a little uneasy to give out. Nobody likes receiving spam or having their e-mail address sold to mass marketers, so guarding our e-mail addresses has become as much of a security measure as locking the door to our houses when we leave. A clean description and a bit of assurance can go a long way toward easing your users minds, as youll see in Figure 3 below. Weve also added a comment to the Additional Info text eld to urge the user to give a bit more information, since that will help us serve them better and increase our chances of making a customer out of them.
Fig. 3. Cleanly styled and concise comments can help you assure users and inuence the data you receive.
Notice how the comments are styled differently from the rest of the text in the form namely, the font is a size smaller. Different styles can convey different types of messages. When a eld is crucial, you might consider changing it to a more noticeable color, like red or orange but be tasteful! Keep your comments and descriptions clean and concise. Explain only what you need to explain in your comments after all, you have the rest of your website to say anything else you want to say.
16
17
Fig. 10. This is our form after weve made some practical changes to it. Now we can contact customers by phone and/or e-mail, and they can choose more than one service for their quote.
Thats a pretty good-looking, functional form. Its clean and contains all the information we want from our customers. But lets take it one step further and actually communicate with our users, rather than demanding information from them. This involves the wording we use in our form. Remember earlier, when we talked about using creative, conversational language to spice up an otherwise bland form? Prompting the user with short, lifeless labels like E-mail Address, Service, and Additional Info is poor communication. Lets actually talk to the user. Imagine youre face to face with your customer. If you ask for their name, you arent going to stare them in the eyes with a rigid expression and demand, Full name. That sounds unfriendly and more than a little creepy. If you were looking to garner a positive response from this person, you would instead open with a smile and say, Hi, whats your name?
18
Fig. 11. This is a more user-oriented form. The labels begin communication with the user.
This is the rst step to a vast improvement of our form. Notice that our layout now combines left- and top-aligned labels all the labels are now top aligned, but the left edges of all the main elds still lead straight through the form to the Submit button. This saves space while still ensuring that the users eye can easily and naturally ow through the form. And hey, now were actually communicating with the user! By asking questions and providing instructions, you prompt a much more natural response from the user.
If youre at a social, non-business event like a party and youre just looking to meet some new people, you could tell the other person what activities you enjoy, your favorite restaurants, and maybe tell an old story about that time your dog actually did eat your homework. Ideally, the other person would listen to you, absorb everything you said, and then tell you everything about them in the same way you just did. You would listen, retain everything, and then, hey, youve got a new customer/friend/contact! But thats not at all how communication works. You cant throw large quantities of information at someone and expect them to remember everything heck, its way too much to expect them to actually pay attention. Most of us, unfortunately, are simply not that interesting. Communication involves the exchange of ideas in small, manageable sections. You introduce yourself, and the other person does the same. You mention what you do for a living, and the other person has a comment or question. You remark back, or answer, and this prompts another response. In a good conversation, the information is a steady, back-and-forth ow. A form, being another method of communication, should be the same way. You may be asking for quite a bit of information, but that doesnt mean you have to throw it all at the user in a huge block. As we mentioned earlier, you can use headers, horizontal rules, or colored bars that match the design of your site to separate the information into small, easily understood chunks.
20
Fig. 12. Headings separate the content of this form into manageable, easily understood sections.
Although our form has grown in actual vertical size, to the user, its actually decreased in complexity. Why? Before, our form was asking for six different things: name, phone number, e-mail address, method of contact, desired services, and job description. Now, to the user, its only asking for three things: contact information, availability, and how we can help them.
Be clear.
Try to answer any potential questions your users may have about the form. Right now, our example form is pretty clear. But some questions that immediately come to mind when looking at it are: Well, my e-mail address is guaranteed to be kept condential, but what about my phone number? 21
Are any of these elds optional? Which ones are required? If I choose multiple services, do I get a quote for each one, or is this a quote for all the services together? Also, some users may get confused and think this form is actually placing an order. This confusion is bad for two reasons. First, if someone actually does want to place an order and they think this is an order form, theyre going to be at least a little annoyed that the form didnt take them to another step to input their payment information. Second, if someone just wants a quote, but is confused and thinks this is an order form, theyre not going to ll it out. You can clear all of this up in the form. There are a couple of different ways to handle all these common questions. First, we will add an informative title explaining just what this form is all about. Below it, well put a note stating that all elds are required in this form. Well change the comment about the customers e-mail address being condential to include their phone number as well. Well also use a default selection for our radio button group, which ensures that the user will choose one of the three options. Well further clarify our form by beeng up the label for the services section. Finally, we will add a small note above the submit button letting the customer know that this is only for a quote and that no purchase is actually being made. Check out the result on the next page.
22
Fig. 13. Weve added some notes and changed some things to eliminate confusion.
This is a nice, clean, user-oriented form. It accomplishes everything we want it to, and it does so in a way that makes it a form of communication rather than an obstacle. A few notes about some of the changes we made: First, using a default selection for a group of radio buttons or checkboxes can be an excellent way to make sure your users select one of these options. However, this technique can be abused, and some users may be wary of preselected buttons or checkboxes that seem untrustworthy. 23 For instance, say you have an occasional newsletter you like to send out. You could put a preselected checkbox at the end of your form, like so:
Thats perfectly reasonable. But lets say you also had special offers you sent out occasionally, and that you had afliates who offered occasional newsletters and special offers of their own. To avoid looking suspicious, you might want to hold off on using preselected options. Even if theyre all perfectly legitimate offers, to the average user, this:
Translates to this:
Second, simply stating that all elds are required wont guarantee that your users will ll out all the elds. However, if youre using Web Form Builder, you can check the Required Field checkbox for all required elds. That way, if your user misses one or more of these questions, theyll be taken back to the form after they click the Submit button and asked to ll in the elds they missed. As we mentioned in the last chapter, you can also make things clearer to the user by adding effective icons to your form. See Figure 14 to get a good idea of how this can positively affect a forms readability. You should be very careful when using icons and other images in your forms, though. Always make sure they complement the other colors in the form or on your site, and make sure they have a truly functional purpose. If they dont, they may clutter your form, which looks tacky and can distract your users. The icons in Figure 14, for example, serve as more than just decoration. They have two different functions. First, they help to further separate the content of the form into manageable sections. Second, notice how the icons are purposely pushed off into the left margin of the form. This gives them the same effect that bullets have in bulleted lists. See how the bullets in this list are off to the side? The text still lines up properly. 24
But the list gains organization and separation if the bullet points are located off to the side. Notice how the content in the third bullet spans two lines, but you know it still all belongs to the same bullet. The same goes for the icons in Figure 14.
Fig. 14. Carefully selected icons and imagery can enhance a forms readability.
Its not always easy nding attractive, useful icons for your form. The icons you see above are part of a graphics pack sold by CoffeeCup on our website (https://www.coffeecup.com/store/graphics/). Our form is practically ready to put on our page now. Theres only one more thing to consider: What does the user see when they hit the Submit button? 25
Fig. 15. A sample post-submission page. This gives the user a bit more information and releases them, letting them know they are done with the form.
26
Fig. 16. CoffeeCups Web Form Builder can create a custom page for you. By default, it looks something like this, but you can add your own style and HTML to suit your site.
Additional Resources
If you want some inspiration, check out these unique form designs chosen by Smashing Magazine: http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/ For more information than you ever wanted to know about web form design, read Luke Wroblewskis denitive guide, Web Form Design: Filling in the Blanks: http://www.lukew.com/ resources/web_form_design.asp
27
28
29
30