Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Required fields

From: Web Form Design Best Practices

Video: Required fields

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.

Required fields

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.

Show transcript

This video is part of

Image for Web Form Design Best Practices
Web Form Design Best Practices

30 video lessons · 12247 viewers

Luke Wroblewski
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Form Design Best Practices.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.