Video: Web servicesChances are when you ask somebody for their name or e-mail address in a web form, you're not the first. That is, people have taken a lot of time to provide information to websites and services. There are ways that we can utilize that in our own web forms using a number of third-party solutions. Let's take a look at that in action. Here we have a pretty typical web application, brightkite. It's all about connecting with People, Places, and Friends. In order to get going you can either Sign up or Learn more. So let's try doing just that.
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
Chances are when you ask somebody for their name or e-mail address in a web form, you're not the first. That is, people have taken a lot of time to provide information to websites and services. There are ways that we can utilize that in our own web forms using a number of third-party solutions. Let's take a look at that in action. Here we have a pretty typical web application, brightkite. It's all about connecting with People, Places, and Friends. In order to get going you can either Sign up or Learn more. So let's try doing just that.
Where are the Friends, Places, and Fun I was promised on the homepage? All I'm doing is being interrogated here about information and it doesn't feel like any of it's for me, it feels like it's all for brightkite. But let's say I even get through this form and I fill in all the information to all their strict standards, without the typos they're suggesting I'm going to make. Where do I land? Well, it's kind of a ghost town. You'll note that I don't have a profile there is nothing really happening, in fact, I'm given the couple choices. I can read their FAQ or I can send them feedback.
Other than that there is not much to do. Now brightkite has redesigned and they're really simplified their Sign Up form. Again, applying a lot of the best practices we looked at the beginning of this course. We really cut things down to the bare minimum necessary. So now the Sign Up screen on the front page only requires an e-mail address, a username, and a password. I bet this has boosted conversion a lot, but brightkite made another change recently that's a bit more significant. Instead of having a Sign Up form on screen one, they replaced it with a Connect with Facebook button.
The ability to sign up with your email address is still there, but it's a tiny link below the Facebook button. So what happens if we use Facebook to actually sign up for the service? Let's give it a shot. Up pops a little dialog that asks whether or not I want to connect this service with Facebook. Now given half of Facebook's 750 million users are logged in any point in time, chances are good, all I need is a single click to get going with this service. So I click Connect, and the first thing I see is actually my friends from Facebook that are already using brightkite.
Once I connect with them, I land on a page that illustrates for me what everybody is doing. So contrast this to what happened earlier. When I went through the Sign Up form, I filled in a bunch of information that brightkite required and I ended up essentially in dead zone. Nothing going on, just a lot of work for me to do. Here using the Facebook system my profile information is already complete they grab my photo from Facebook, my name from Facebook, and my friends list. So later I can see how people I know are using the service. There is a much different experience from filling out the form.
When I went through that process I ended up on a ghost town. Here I actually see what people are doing and how they're using the service. This is the idea behind web services making use of work people have done elsewhere. I've already submitted my name, photo, and friend list to Facebook why doesn't brightkite just take that information I've already put elsewhere and give me the benefit of it? I don't need to go and restate my name and interests to every single site on the Internet. Let's look at another example of how we can turn the information I've already put online into a great first-time start experience.
This is the Question and Answer site Quora. As you can see the only way I can get going is actually by connecting to my Facebook account. Once again, my profile information from Facebook is pulled including my name, e-mail address, and photo, and all I need to do to get started is click Create Account. Now where do I see on Quora. I see the questions my friends are following, the questions they have answered, and I have a series of suggestions on topic I maybe interested in. Those topics come from either my interests on Facebook, or with my friends on Quora are already doing.
This is a great first-time experience. Instead of starting with the blank slate, I see the people I know and the things I'm interested in right there on the front page. Facebook has been experimenting even further. When I come to a radio station site like Pandora, it uses my likes on Facebook to start playing music I already know. In this case, we're going to start you off with a station based on artists you like. So Bob Marley kicks off right when I land on the page. When I come to the local review site Yelp, I get a similar experience. Here are the friends that I have on Facebook and what they're doing on the site.
All this creates a much more personal connection between me and the service that I know nothing about. Now while people may have concerns around some of the privacy things here, I think if you look strictly at user experience perspective, having that direct connection between a service, not having to fill in more information about yourself everywhere you go creates a much better initial start. We don't just have to use Facebook, in fact, for services that are more professional or focused on business, something like LinkedIn might work better. LinkedIn is a large professional social network, so it makes a lot of sense for a site like Elegant.ly which is connecting designers with companies to use LinkedIn as a starting point.
Again, signing in with LinkedIn is the only way to start using Elegant.ly. I click on Sign in, and authenticate to LinkedIn. The important thing to note here is that LinkedIn is controlling these credentials. That is I can go to LinkedIn at any point in time and tell them, hey, Elegant.ly can no longer have access to my information, but when I Grant Elegant.ly Access, my profile is all set up. You can see my photo, my name, my current titles, and my bio. 90% of the information I've to fill- in in order to create a profile on Elegant.ly is there for me.
This saves a ton of time and gets me up and running right away. Once more I want to repeat the core essence here, people have already done a lot of work on the web. why not take advantage of that instead of having them start over every time they encounter a new service. This doesn't just apply to desktop sites, it's even more evident on mobile. On mobile I can use a service like SCVNGR, when I do; I can connect with Facebook right out the gates. In doing so, once again, I can authenticate with Facebook and allow them to access my services, and I see what my friends are doing.
SCVNGR misses a bit of an opportunity though, because when I go to my Profile, you can see that none of the information has been collected, no photo, no name, there is a lot that can be done here. SCVNGR also has the option to connect to my Twitter account. So Facebook is an option, LinkedIn is an option, Twitter is an option and more and more of these services are popping up everyday. For example, on iOS, or an iPhone, or iPod touch device, I can actually Autofill form using information from my address book. So when I signed up for service like Gowalla, tapping one button will fill-in my First Name, Last Name, and E-mail address.
That gets me on the way much faster on mobile where typing things can be a bit hard. There's another example on mobile, when I purchase things from the Apple Store and I Add to Cart, I'm able to Check Out using my existing iTunes account. All I need, to do here is provide a Password and tada, I can buy something. No more credit card information details, shipping address, buying address, all that stuff has been filled in already, all I need is a password and I can buy, different implementation but same concept.
The idea is I've already done work elsewhere that this service can use, why make me repeat myself. Wrapping up around web services, I think they're great opportunity to remove barriers durring account creation. We've already told the Internet our name, we've already uploaded a photo, given that our e-mail address, why do we need to repeat that every time we encounter a new service? Using third-party solutions like Facebook Connect, LinkedIn Connect, and a few of the other examples I highlighted, we don't have to require people that recreate things. In fact, we you can deliver an instant-on start experience or purchase experience that makes things as easy as clicking a single button.
When people do so, their profile is filled in, their friends are there, or their purchasing and shipping information are already present. This makes things really fast and smooth especially on mobile devices.
There are currently no FAQs about Web Form Design Best Practices.