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.
Not every question in a web form has to be answered by every person that encounters it. There are some questions that are required, that is, they have to have an answer, others that are optional. Indicating which fields are required is usually pretty useful when there are lots of fields, but very few are required. This lets people really scan the form and see what they need to complete. An indication of which fields are optional is more useful when very few fields are optional. Again, allowing people to really see where they can slack off. Neither is really useful when every single field is required.
Let's look an example here on barnesandnoble.com, every question has this little orange asterisks, if we look over the top, we see that the orange asterisk indicates Required. Yet, there isn't a single field here that doesn't have to be filled in, so what's really the point of the indicator. You'll note that when Barnes & Noble went through a redesign, they kept the asterisk on every question, but removed the key that indicates what it's doing. So now you have a little orange asterisk to the right of every single question, but no indicator what it actually means.
Luckily Barnes & Noble redesigned again, sadly, they kept the indicator around. Now I mention that, it's not really that useful to say, everything is required, when everything needs an answer. It's much more useful to actually call attention to the things that are optional. So here on macys we see, First Name, Last Name, Address, City, State, Zip Code, all these things need an answer, but the Attention field and the Phone Number are actually optional. Wal-Mart has a similar situation, but they've inverted the way they represent things visually.
Where there is actually an optional field, such as Address Line 2, they've added the word optional in parentheses afterwards, but there isn't an indicator of every other field being required, because frankly, if you put a question in front of someone, chances are it should be required. Overall, getting a rid of unnecessary questions as we've seen time and again in the examples we've looked at earlier, is a great way to increase conversion and to increase the rate of completion, so don't put questions in front of people that are optional, unless they really make sense a decent amount of the time.
There are some addresses that have a second line, but there are a lot of addresses that don't, hence Wal-Mart includes the field, but they label it optional, right then and there. Now the second question is, once you get over: which things do we label as optional; which things do you label as required; how do we call that out? On this form deliberately in Japanese, so that we can focus on the indicators, you see that the required indicator, once again asterisks, is right to the right of the label. This allows you to really quickly parse the form and see which fields have to be filled and which ones don't. Contrast that to another Japanese form and you note that here the required labels are put to the right of the input field, making it very hard to actually parse the form and see which things are required and which are not.
The rag of the different input types doesn't give you a clean column to scan and see where there is or isn't a red asterisk, instead, you've got to jump all over the page and try make out where that happens to be. In both of these forms a little red asterisk is what indicates that's required, but it's not always the case that little red Asterisks are used in web forms. In fact, the Grooveshark registration form uses a solid pink line ingredient to tell you what you actually have to fill in. Once again, there really isn't much of a point for this indicator, because every single question in the form is required. So why the pink line ingredient? Many cases people assume the asterisk means required, but again, this isn't always true.
Here on the Hogan assessments form, you'll note that Age and Gender has little asterisk next to them. If you're used to the convention of the asterisks meaning required, you may think that's all you need to fill in on the form, instead, if you read down in the gray text below, this is actually Optional Information for Research only, so we see the convention flipped on its head. This is why it's generally better to rely on explicit text than any kind of visual indicator. What does that pink line of the gradient actually mean? Doesn't mean required, doesn't mean optional.
What does that asterisks even mean? Is that optional or is that required? While many people think the asterisks indicates required fields, simple text is always going to be clearer. And once again, when we look at the overall best practices here, when most fields are required, instead choose the label just a few optional fields, because you are only labeling a few fields, the opportunity to use plain language texts right there at the input is available to you, you can just simply say optional. If most fields are optional and just one or two things that are actually really required, much better to call those out, rather than to inverse.
In both cases the idea is the same. Highlight the things that are different, rather than spending all your visual communication energy on the things that are the same. At a high level though, optional fields in general don't really provide a lot of use. Unless there are situations where a decent amount of people could use them, try not to include them in your forms. Every question you put in front of people requires them to parse it, think about formulating an answer and actually input it into the field. If they don't have to consider, because it's optional, why bother making them go through the effort? And last but not least, associating indicators with the actual labels of an input field gives you a consistent structure by which you can scan the list and see what is required and what isn't.
After all, isn't at the point of these indicators, if you place the indicators to the right of the actual input field, it makes it a lot harder to scan through and see what you do or do not need to fill in.
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.