Viewers: in countries Watching now:
In this course, interaction designer Luke Wroblewski shows how to create web forms that encourage visitors to enter information and covers ways to capture input without the use of forms. The course covers boosting conversion rates and customer satisfaction, organizing the structure of forms, aligning and grouping form elements, assigning the correct input field types, validating input, and handling data entry errors. The last chapter highlights alternatives to static forms, such as using dynamic inline forms, using web services, and leveraging device capabilities, which can be used to gather additional information or replace a traditional form altogether.
Field length and required indicators aren't the only ways we can help people understand how to provide input. The natural structure between a series of input fields can actually communicate a lot. Input groups are the way we represent that structure inside of web forms. Input groups can provide valuable clues about how to answer a question about organizing things in a structure that makes sense to people; most common of these structures is the Address field. From years of writing letters, receiving letters, and encountering our addresses in various contexts, we've come to understand what the pieces of an address are, and how they form a block.
So when you see a US postal address, one in France or one in Spain, the structure remains relatively similar. People who lived in these countries for years can simply look at that block and understand it's an address without necessarily seeing the labels. When you break that structure, challenges can emerge. So looking at this form from Nintendo Wii, you'll see that the Address block is broken up across two lines and it doesn't really look like the address you encounter everywhere else in life. When you break natural conventions, you make people work a little bit harder and thereby have to read all the input fields in order to understand what you're asking them.
Input groups can have different shapes; there is Compound Input types as you can see here in this example of a Scheduled Start time of a day and time. There is Related Inputs such as specifying the number of something, and the number of items in each of those, in this case lots, and there is Parent/Child relationships where you have a Selling Format such as Online Auction which contains some elements that define it like the Starting Price, Quantity, and Duration. These different input groups again provide valuable clues about how to answer a question; the fact that a Schedule Start time consists of a day and time helps you understand it.
The fact that there is Related Inputs, or Parent/Child relationships help you once again to provide the right kind of answer. You can this in action on this example from eBay. Each of the different shipping services you specify has a location you'll Ship to, the Service you'll use and a Cost, and there's three options available. Further below, you can see that there is a different kind of structure at play; Parent/Child, Where Will you Ship to, and specifying those countries in more detail if you so choose. When you use input groups appropriately, you can help people understand what's being asked.
When you use them inappropriately, you can actually confuse people. Looking at this example from Southwest Airlines is the information below there related to credit card payment details or PayPal payment details. The close proximity of the input fields to the PayPal label makes it feel like they are coming from PayPal, but if you actually toggle that radio button, it turns out they were actually related to the credit card details above. The proximity of these related input fields draws people's attention and forces them to think twice about what am I actually entering in here.
One of the ways that we can communicate more meaningful relationships is by visually grouping elements that are related. Now, there is a couple of different ways of doing this. What you see here on this example is a lot of different visual elements being used to individually wrap nearly every single field. That's a lot of visual noise that starts to take attention away from labels in the input fields. In fact, when you look at this form, you start thinking about its structure a lot more than you start thinking about the questions that are being asked. There's a line between each field, there are yellow colors, there are brown colors, red colors, bold.
That stuff starts to take your attention instead of the questions being asked. Another example that's pretty common is actually striping all the questions. People resort to this type of visual treatment when they want to make a clear comparison between the left-aligned label and the right-aligned input field. People use this visual layout when they want to make a clear connection between a left-aligned label, and the input field on the right. Though people can quickly parse a label and its input field in this format, a little bit of visual communication can help as well. The problem is though this introduces a lot of visual elements which ultimately add up to noise.
Let's look at just how much simple visual change like this adds. So if we add two different background colors and just separate them by single pixel in order to separate out the fields, we've actually created 15 different visual elements in this simple little form. And as people go down and say, Scan the Labels, each instance of a change in visual information stops them, causes them to pause, and pairs scanning. When you put something on the page visual, people will look at it and try interpret it, and try understand it.
So making those visual distinctions meaningful goes a long way to communicating what makes an input group distinct and you can really use just the minimum amount necessary. Looking at this form, there are one, two, three related sections, and a Submit button. Each section of related input fields has just a slight visual contrast to distinguish it; the one at the top is white, the one in the middle is light blue, another white one and then light blue to finalize the form and a Submit action button. The fields in each of these sections are related, but the amount of visual information used to indicate that relationship is minimal.
Here is another example back on eBay form. Here, to separate information about yourself and about the account you're creating, they've used a single thin rule, not a lot of visual way, just a simple indicator that says okay, now you're onto a different type of section and these input fields are not related. Input groups in general can be used to communicate the relationship of different input fields, but you really don't need a lot of visual information to do that. In fact, the minimum amount necessary generally is better, because it doesn't lead to confusion about what's related and what's not.
If you apply too much of visual information, or you group input fields in ways that imply a relationship, people are likely to read into that and assume those things actually aren't related in ways you may not intend. So if you are using input groups, make them meaningful, and use visual communication to communicate that meaning, so that it's deliberate, not unintentional.
There are currently no FAQs about Web Form Design Best Practices.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.