Video: Input masksThere 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.
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.
- 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
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.
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
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
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.