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.
While labels ask people the questions we need them to complete in the web form, the questions we ask them might not always make sense to everybody. In those situations, we may turn to Help and tips to help clarify what we mean. In particular, if within a web form we are asking for unfamiliar data or people may question why we are asking them for specific data or maybe there is recommended ways of providing an answer or if certain things are optional, help and tips can really help clarify things. While a little bit of help in a web form goes a long way.
Examples where there's too much can quickly overwhelm a form and turn people off, and as I mentioned earlier, usually examples of too much Help text are sign of a broader usability problem that play. In other words, people might not understand the big concept or why they're being asked for something and no amount of Help text could help that. When we do enter a situation though where a lot of help is required, there are dynamic solutions that we can turn to, to help manage things through automatic inline exposure, user activated inline exposure or user activated section exposure.
Well, that's a lot of fancy terms, so let's actually look at some pictures that illustrate that. Here where I am asked for my email address, so a number of questions that pop up. If I am going to be asked for my e-mail so that Boingo can send me a receipt, I might not only be willing to give them my e-mail address, I am going to actually think it makes a lot of sense. However, if Boingo is going to be using my e-mail address to send me promotions, or worse yet, get send me promotions from other parties, then there's no way I'm putting my e-mail inside that input field. Unfortunately, there is really no way of knowing whether or not that email address is going to be used for promotions or for getting a receipt.
There is no help text on the screen. This is another disadvantage of these bottom aligned labels. When the bottom aligned labels sits underneath the input field, there is not a lot of room for Help text. Maybe we could fit a little bit to the right, but in general that's the place where help text goes and not labels. The other place on the Boingo form where a little Help text could go a long way is the whole User Account Information section. If I just want to get online for a couple of hours at the airport, why do I need to create an account on Boingo? A User Name, Password, Confirm Password, Password Recovery code, all those things really seems unnecessary.
A bit of Help text could explain why I am being asked that and what the benefit to me could be? So the other examples of where Help text could be useful, now let's look at how we actually can present it. The easiest way to tackle Help text is just a super simple line of text right then and there on the form. So on the Sign up screen for the videoegg service, you'll see, where they're asking me for a password, there is a little bit of help explaining what kind of format that password has to be in. In this case, 4 or more characters, I don't want to look very far or think about it too much, the Help text is right there helping me along.
Little bit further where they're asking me for Email, they have put another simple note that says, We don't spam. Once again, getting a little bit of reassurance around why this information is being asked and what's going to happen with it. In the case of the password I am being given help text around formatting, in the case of e-mail I am being in help text around why this is required and what will be done with it. Similarly on mobile devices, placing bit of help text right next to the input field where it applies tends to be the simplest solution.
So when I was signing up for Twitter, you can see that my full name includes my first and last name, and my username is how I am going to be known on Twitter, plus it needs to be at least 6 and no more than 15 characters, super simple tips right in place helping me a lot. Now let's look at a counter example. This is the first screen of selling an item on eBay as it looked a little while ago, and your first choice is simply the selection of one of three radio buttons where a default choice has been set for you.
Yet, if you really count them up, there are about twenty ways of getting help on the screen. If we count each line of help text and then we start to count the actual links to further information you can see how they add up. In fact, if we start counting through the various ways of getting help starting at the top with the Help link 1, the Live Help link to the right 2, to Learn how to sell, seller's checklist and selling fees on the right-hand side, plus the eBay Solutions Directory, we are already at 6 items for getting help. Now counting the each line of help text and the links within it, gets us to 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, and finally, if you can't figure out how to pick one of three radio buttons where default choice is set for you, somebody else will do it for you with the Trading Assistant, leading us to number 18.
That's right, 18 different ways of getting help selecting one of three radio buttons where a default choice has been set for you. Now I mentioned before one of my tools for interface design diagnosis, is taking a look at where there is a lot of help text. Usually, that's a sign that something else is going on. In this case, people are being forced, upfront, to make a decision between a bunch of eBay formats they're not familiar with, nor that they understand the difference between. What's really the difference between an online auction, a fixed-price item, or selling your items within an eBay store? People coming to this form are new and perhaps even more savvy sellers may not know the difference.
Rather than not having people worry about that and doing what's right for them eBay forces them to make the choice upfront and resorts these 18 different ways of getting Help. There are situations however where a decent amount of Help text is required. In those instances we can turn to dynamic help solutions rather than littering our page with lots and lots of help paragraphs. Let's take a look at an example of one of these. So here is the solution that automatically exposes help text as people go along completing a form.
Moving to the first input field or your e-mail address as requested, we see a little block of Help text pop up automatically. This is how an automatic inline system works. As you move between the input fields, Help text automatically shows up directly inline of the question you're being asked. In this case you need to supply a valid email address, which we will not be selling to anybody. Great. That gives me some reassurance about how this information will be used. Next, you can apply automatic inline exposure to a section of inputs.
Rather than a single input, always getting a line of Help text, which may not makes sense for your form, this example from Intuit, highlights an entire section, such as first name, last name, date of birth, social security number and gives you information about whether you want to change this in your text, documents or not. The dynamic inline exposure that shows up on the right applies to more than one input field. Another solution is User Activated Inline Exposure. Again, a similar concept of showing the Help text that's relevant to the field not automatically, but when somebody requests it.
So here you're seeing a question asking me for a PAC code IMEI code. Let's say I don't know what one of those is. There is a big question mark that I can actually click that explains to me the international mobile equipment identity number and what it does. I can also close that up and hide that information and make my way through the form. This highlights one of the challenges of this method. When you expose the stuff, the page jumps around a little bit and you can get disoriented to where the next step is, especially if these blocks of help tend to be pretty big.
So imagine you have clicked Help a few times and now all of a sudden the input field is separated by large blocks of text, making it challenging to follow a path to completion through the form. To manage this, some forms have applied user activated inline solutions with on-hover effects. So in this example of looking at Issuing Banks and all the different sections of this form, you can actually just move your mouse cursor to the section number that applies to each question and get a sense of what's required. What is the issuing bank? Why do I need to fill it in? Let me keep my mouse here for a bit and get that data.
Now just as I described it there are some challenges there. You need to keep your mouse steady, keep it over the field. When that field is there this little dialog window covers up other fields. So again, not a perfect solution. It also doesn't do a great job of providing enough room for more detailed help text. Let's say we want to show some images or a chart. One of these little tool tips isn't really going to cut it and inserting that information directly inline in between fields could even make things messier. So instead we can use user activated dialogs.
A user activated dialog solution is a good bet when you have got a chart. A large number of images are just a big chunk of help text that's required. Here somebody can quote how they get to savings for college going and you can see the labels or links right there in that column, and when they click on one of those they get this chart that really gives them the projected cost of college in detail, thereby allowing them to make an informed decision on the question they are being asked in the form. User activated dialogs sometimes have challenges with how they are implemented, especially if you use separate browser windows.
So there are some disadvantages to this approach as well. In the redesign of the selling flow on eBay, you see that the team has actually taken different tact. Rather than littering a page with lots of blocks of Help text, they've actually created a standalone Help frame. This Help frame, as you see on the right here in yellow, is default activated for new users. So if you are coming to eBay for the first time or you haven't been back in a while, this is exposed to guide you along the way. The content in the Help frame changes based on the input field you're in.
So it's very similar to an automatically activated inline solution, except, rather than changing where the location of the help text is with each field, it stays consistently in this column. You can also bring up this Help column by clicking on the question marks (?) to the right of any label on the form. So if you need a little extra information about how to create a good title when describing your item, click the question mark (?) and the Help column will show up with that information intact. There are also global controls for closing and hiding the column up at the top and upper right of the little column area itself.
People are completely in control of whether or not this column shows up and the type of information it displays. If you leave it open as you go through the form, the content will update to reflect the field you are on, and by default if you're new, or haven't been back in a while, you'll get some of this Help text to guide you along. Now this solution actually proved quite effective in the context of something like selling on eBay, but I am not 100% sure and automatic section makes a lot of sense if you are asking for very familiar information. For example, on the Vizu Registration form, several paragraphs explaining your username, perhaps unnecessary.
The fact that every input field on this form has several blocks of Help text is probably also not a good idea. For example, do we really need three paragraphs and three bullet points explaining what's going on with e-mail, when on the Videoegg we saw simple line, did the trick? We will not spam. Usually, that type of Help text is enough and we don't need this dedicated automatic section of help for forms asking us for common information like our Name our e-Mail Address. To wrap up what we do with Help and tips in web forms, generally, our best practice is to minimize the amount of Help and Tips required to fill out a form.
So I have mentioned earlier, one of my diagnoses for a form that has problems usability wise, is looking for large blocks of help text. When you see a lot of help text, when you see it in red, when you see it red and bold, when you see it red, bold and blinking, chances are there's an issue there. So the less Help text in general your form requires, the clearer your labels are, and the easier time people have making their way through the form. If you do need a bit of help text, visible and adjacent right next to the request usually works best, but there are situations where you do have a lot of Help and you may want to consider a dynamic system.
If people are unsure about how or why to answer a question, automatic inline systems could be a good way to go. For forms that tend to get reused, putting people in control of that User-Activated Help as we saw in the eBay example; tends to be a good idea. Generally, you know how to fill it in, but every now and then, you need to refer back to something or need a bit of assistance. Perfect opportunity for a user activated solution. Inline help that is showing help information as close to the question as possible works best in most cases except when you have got a lot of stuff like graphics or tables.
In that case you may want to move to a dialog solution or some of these hover effect solutions that we looked at earlier. And last but not least, a consistent help section is actually a great model for keeping help text in a specific area yet contextual at the same time. So if you've got a situation where there is a lot of help text, sometimes you include images, sometimes include charts, and contextually people can refer to it, consider using a consistent help text solution. In aggregate, all these options are at your disposal, which one is right really depends on the type of form, audience, and task you have ahead of them.
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.