Web Form Design Best Practices
Illustration by Petra Stefankova

Input masks


From:

Web Form Design Best Practices

with Luke Wroblewski

Video: Input masks

There are a number of situations where we need a specific format or structure for the questions we ask people. When we do so, we want to try and prevent the errors that they can make. A technology that helps us along is Input Masks. To talk about Input Masks let me first illustrate the different ways we can ask people for an input. We can: One (1) give them a blank text input and ask them to specify the information in a particular way, so at the top when we ask for Phone Number here, you can see there is a single input field and then the structure of format that we need in help text to the right.

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course Web Form Design Best Practices
3h 46m Appropriate for all Oct 14, 2011

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.

Topics include:
  • Understanding why forms matter
  • Deciding on the form length and structure
  • Adding tabs to a form
  • Creating required fields
  • Adding input masks
  • Creating selection-dependent inputs and actions
  • Displaying success and error messages
  • Adding inline validation
  • Understanding gradual engagement
  • Enabling touch and audio input on devices
Subject:
Web
Author:
Luke Wroblewski

Input masks

There are a number of situations where we need a specific format or structure for the questions we ask people. When we do so, we want to try and prevent the errors that they can make. A technology that helps us along is Input Masks. To talk about Input Masks let me first illustrate the different ways we can ask people for an input. We can: One (1) give them a blank text input and ask them to specify the information in a particular way, so at the top when we ask for Phone Number here, you can see there is a single input field and then the structure of format that we need in help text to the right.

We can also enforce a very strict structure by dividing the phone number into a number of input fields The first one will only take three characters, the second one three and the last one four, or we can provide a single input field and accept any of the valid ways the Phone Number can be answered. Now this requires a little bit of work on our end to determine if the answer that they enter is actually valid or not, but it gives people the flexibility of providing an answer in the format they see fit. One of the questions that come up there when we apply this Flexible Style to an input field is, how will I know what the right format is, and can we help people with some tips to let them know they're moving in the right direction? Input Masks can do that and more.

Here's an example of a simple Input Mask at play. You'll see that there is a label e-mail address and a little bit of help text inside the field telling people the format that they need to respond with. In this case an e-mail address that ends in @me.com. Now when I start to enter an Email Address into this field, the Input Mask will actually keep the format intact as I provide my answer. So note, I enter an S the @me sticks around, I enter a T the @me sticks around, and so on, as I go through entering my e-mail address If I were to type an @, the Mask can simply ignore that field and move me on.

So no harm done if I type @me.com, it's not going to be duplicated into input field, because the Input Mask ignores it. This again maintains a consistent structure and helps to cut down on errors. In fact, I can't really make much of an error here at least with the @me.com part. I can still provide a wrong Email Address, but, hey, we can only do so much, right? Now input masks are used in a lot of native applications on mobile. So we can see here an Input Mask doing the exact same thing inside the iPhone address book.

I type in an l, luke and the @me sticks around. Google's Android system also uses Input Masks, but it uses a little bit of a different technique to enforce the formatting required. Here after I enter my Username in the Username field and move onto the next input of Password, an @gmail.com format is appended at the end. This sort of formatting after the fact isn't as effective as keeping that formatting upfront, but it's different enough that it begs the question" What's the right way to do Input Masks, should we be doing it the way iOS is, or the way Android is? Since in the Web browser we actually need to implement these Input Masks ourselves using JavaScript, there really isn't native support yet.

We need to know the details that make an Input Mask work. So let's look at that and we'll start by looking at a counter example. In this case entering the Phone Number fields. You'll see that again there's a little bit of help and tips inside the input field indicating what the format of the Phone Number could be. Now let's start actually entering the Phone Number in here. Wow, that's a pretty big difference when the format that was promised. In fact, as I go along entering this Phone Number, you'll see that the formatting gradually starts to reveal itself from parentheses to dashes (--) to , all of this format just sort of shows up as I go along.

I call this approach the gradual reveal. We're not going to tell you what kind of format you actually need to use, we're just going to have it pop up as you go along. This can be pretty disconcerting, kind of like somebody grading or changing your answer to a test, as you're providing the answer. The other problem with this approach is that the expectations that are set with the Input Mask are quite different from what happens in the actual result. The format promise at the bottom is not the one that you end up with above. So instead, as a good example, let's look at providing a Tax ID.

Here, the format that we see upfront is the one that sticks with us throughout the process of answering this question. So as I start entering numbers, the dashes (--) and the format stays in place. It's important to also now that this Input Mask can do a lot more than just enforce a format It can strictly require me to use numbers, and if I use an alpha character such as A, B or C, it can ignore that, knowing that only numbers constitute a valid tax ID. Again, if I insert a dash (-) or slash (/) or a space , it can assume I meant dash and just use that character, thereby preventing me from making errors.

So maintaining a consistent format is a really good way to start with the right expectations and keep them as you go through the form The other interesting factor here is not making that input field to look like an answer upfront. So you'll see that what we were using is underscores (_) and dashes (--) that indicate what the format is going to be, without actually providing values that look like an answer Having fields look like they have an answer within them, is a good way to get people to ignore them, assuming that that answer has already been provided for them. So the more you can make your Input Mask format look like a question rather an answer, the better you'll be at prompting people to actually provide the answer you need.

Looking at Input Masks in general, I think there are very viable technologies, especially on mobile devices for helping people prevent errors and provide the kinds of formats you need. By being very fault tolerant, allowing characters to be ignored and maintaining a consistent format that you can see throughout the process, Input Masks give people a way to provide strictly formatted inputs with confidence and a bit more precision When you do use Input Masks though, make sure that you provide that structure upfront and not change it people as they go along through a gradual reveal.

Also try to avoid cryptic Input Masks, that give people more information than they actually need. Generally, something that looks like a question is enough with the format that works. There is no need to get into the specifics of whether you support numerical characters, alphanumerical characters, punctuation points and all that, just use what people's expectations are with the type of question you're asking.

There are currently no FAQs about Web Form Design Best Practices.

 
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.

* Estimated file size

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 ?

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 preferences from 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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.