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.
Here's where all of the hard work we've put into input fields, labels, form layouts, and interaction starts to pay off. People have filled in all of the information, they found the primary action, they've hit it, no errors. Ta-Da! Well, what kind of Ta-Da do we provide for them? Success Messages point the way. First of all, it's quite important to let people know that they have submitted a form successfully. Just dropping them off back on the form without an indication of what's happened is usually a way to lead to confusion. So you can see on this example what we've done is put a message at the top that says changes saved successfully Now with a form where we're going in to edit data and that's the entire purpose may make sense to keep people on the form page with the success message at the top.
That success message may be permanent or you can show it for a bit and then fade it away The important thing here is keeping people in context. In the case of editing data records, the context is the record you just edited. In other situations though, you may want to drop people off on where their changes have taken effect. So I'm LinkedIn. You can see, once I connect to somebody, they drop me off on a message that says me and this person are now connected Then I'm given opportunities to connect with other people. This allows me to keep going that is I can go on connect to other people.
Leaving people off at a dead end usually isn't a great way to provide a Success Message. We want to continue natural cycles and allow people to keep going with what they started. Here's another example of dropping off people in a successful context. When I create a new message on base camp and I fill in the information Title, Message body, click Save, you can see that I'm dropped off where that message will show up and the message is highlighted. The yellow highlight begins to fade as that message sticks. Here I'm shown where the message will show up and how it will look.
The little animation gives me an indicator of where it's placed. With Success Messages, the most important thing is letting people know that they're finally done and their submission has been successful. We want to drop them off in the right context. If it's just about editing data in a form, maybe the form is the right place. If it's part of the natural flow, we want to drop them off in a place where they can continue doing what they're doing and if the data they enter is being rendered somewhere or reflected in the different context, it may make a lot of sense to actually put the Success Message or animation on that page Last but not least, the way we represent Success Messages differs per site.
In some cases, we want to provide a very prominent message if things are important, in other cases, a little yellow fade that we saw on 37 signals will do the trick.
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.