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.
Web forms are just one of the tools we have for gathering information from people. There is a whole number of common tools that people use everyday that we can actually use for getting input without requiring them to come to our sites and fill out our web forms. Let's take a look at some of these common tools. E-mail is a really big one, it's about 247 billion emails sent per day. SMS is another, 4 billion text messages in the US alone per day. Add up Instant Messaging, Twitter, Facebook, and there is a lot of communication tools out there that we can use to gather input from people.
Web Browsers are another category of tools. People will spend more time off your site than on your site, no matter who you are. There is an opportunity to use the Web Browser to gather input as people spend time across the rest of the web, we're not limited to only a single tool. We can use Multiple Tools for capturing input. The general idea here is that input can come from anywhere, not just from the forms on our website. Consider e-mail. When you get an email invitation to a social network in your inbox, the traditional process is click a link, end up on a webpage, fill out a form.
We can also use e-mail as a much bigger set of input. Here is a service called TripIt. What TripIt does is allows you to forward email confirmation messages from places where you book travel, send them over to them and they'll compile an itinerary for you that you can use to share with others, keep a record of where you've been, and just connect over destinations. When you click Get Started on TripIt, the first thing that greets you is not a web form, instead, it's a call to action that says Email Us Your Travel Plans, clicking on that link takes you to your email client.
When you send over a confirmation trip they'll respond with an e-mail that says follow this link to see your itinerary on TripIt. Again in the background they'll create an account for you, clicking that link takes me to my trip to Cancun, Mexico. As you can see they've taken the e-mail I sent them and parsed out all the important information. The dates I'm leaving, where I'm flying to and from, and they've added a number of other features, they put in the weather where I'm going, some maps of the area, and generally created a nice itinerary for me.
They've also created an account. Since I just sent them an email they know my email address and it's verified, so my account is up and running. One more example of using email as input. This is a service called Posterous. Right upfront they say, we don't need to create an account, in order to get going all you need to do is e-mail something to us. Now what posterous does is allows you to create a blog. If any of you have set up a blog before you know it's usually a series of multiple web forms collecting a lot of information from you. With Posterous, all you need to do is send them an e-mail, so let's try it.
In this case I am going to click on Gmail, which opens up my Gmail web client, you'll see that the To field has been filled out for me, a Subject has been put in, and a little bit of text that tells me to replace the subject line and body with whatever I want. So I want to go in here and change that title to Hello World, I'll attach a photo of a drunk bat, because why not, and I'll put a little line of text that says I'm going to post now. Sending this e-mail over to posterous results in a response. You can see here that they've told me my e-mail has been posted and I can click on the link, Your new post, to see what's happening.
Personally I'd like to see that link have a lot more visual prominence, because here the logo takes the cake, but it's a minor detail. Clicking on Your new post takes you to your blog, let me kind of repeat that. I just send an e-mail to posterous and I have a blog up and running. In fact, they've posted up that picture of the drunk bat and my title and text. Now if I wanted to do more of this blog, take it over, adjust some settings, I can click on this button, set myself up with a custom URL and then go ahead and manage things as much as I'd like, but I don't need to do that.
All I need to do to create a blog using posterous to send an e-mail and this is the general principle at play. Input can come from anywhere. We all spent lots of time in our email inboxes, in fact there's 247 billion e-mails sent per day worldwide, that's a lot of time spent in a lot of inboxes, which is a big opportunity for input, and this is paid off well for posterous. Looking at their statistics they had 700% Annual Growth. The quote from their CEO says it all. "We've always believed in avoiding account creation as much as possible.
You can post without an account, you can subscribe without an account. Accounts just really get in the way." In other words, the first step isn't a form, it's actually using the service. Let's look at another example, in this case SMS. Twitter is a service where you can follow along with your interests. To get started using Twitter you can either fill out a registration form on their site or you can simply use SMS to send a Tweet to the service. In this case I'd like to follow Notify New York City, one SMS message and I'm up and running using the site.
This was released in August of 2010 by Twitter and has seen tremendous growth. Because people can utilize a communication tool they are already really familiar with. Remember 4 billion text messages sent per day in the US alone people know how to send a text message. Here in order to get it going with Twitter all they need to do is send a text. But e-mail and SMS aren't the only tools we can use. People spend a lot of time off your site when they are browsing the web no matter what your site is, so the opportunities the Web Browser for input is very real. Consider a site like delicious.
Delicious allows you to save bookmarks on the web and share them with others. Now you can go to the delicious website, add a URL you want to save, tag it, categorize it, label it, there is series of input forms, or you can use a little bookmarklet inside of your Web Browser to do the same thing much faster and easier. So when I'm on a webpage I'm interested in I can just tap the little bookmark that I've added to my Web Browser to post to delicious, up pops a little window and all I have to do is click on one of the popular tags or recommended tags below to save this bookmark.
Note that the URL and the title has already been filled in for me using the little bookmarklet from my Web Browser. The Web Browser can actually do a lot more looking at a service like Notable from the company Zurb when I click the little bookmarklet that I have there it captures the information from a webpage, but much deeper information than delicious. After it's complete, it's grab the screenshot of the webpage which I can annotate with notes, it's grab the code of the webpage that I can discuss, comment on and share with others. It's grabed the copy from the webpage and a number of SCO notes.
Once again the basic idea is the same; use common tools that people are in everyday like the Web Browser to gather input. But we're not limited to just the Web Browser or Email or SMS, in fact, we can use a combination of tools to gather input. Remember the milk does just that. Remember the milk is a service where you can create to-do lists and share them with others. You can add a to-do item from your list by sending remember the milk and Email. You can send them a Twitter post, you can put an event in your Calendar it will add as a to-do item.
You can use your Google homepage or your Yahoo! homepage or you can use a little Web Browser bookmarklet to create it to do from whatever webpage you happened to be on. All these tools are supported by remember the milk and they support gathering input from just about anywhere. Using common tools for input means embracing an idea that input can come from anywhere not just from the forms on our websites. People will always spend more time off your site than on it, no matter if you're Facebook, Yahoo! or Google. An input can really come from all kinds of different tools not just web forms, e-mail, SMS, social networks, calendars, you name it.
Remember, the basic idea is input can come from anywhere not just in the web forms on your site.
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.