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.
Too many services online start the conversation off with new users with a form. That is, you find something new and interesting, you want to become a part and what greets you, well, a web form. I think we can do better. The principles behind Gradual Engagement can get people involved in new services and products; I am actually starting to use them, rather than filling our web form first. To illustrate this principle in action, let's look at the process of joining a site where we can create family trees. We can go to site like Online Family Tree Maker.com. The process of using this means filling out this Registration Form, Name, Last Name, Gender, Address, City, Origin of family tree, you get the idea.
Nearly every field has little red asterisk (*) which of course means it's required, right? Now we can apply a lot of the best practices we talked about earlier in this course under form interaction and form organization. And the My Heritage site, which also allows you to create family trees has, they've cut down the number of fields, to maybe the minimum amount necessary, they've introduced some messaging on the right that make things more secure and explains why they're collecting information. And they actually have a big notable primary called to action at the bottom that allows you to continue.
Chances are making these sorts of adjustments to the Registration Form for a family tree site can actually boost conversion, but there are other techniques. If we look at the site Geni, we'll see that they're taking a very different tact to allowing people to create online family trees. Starting off on the front page of Geni, you'll see, Create your family tree and stay in touch. The way you get going here is entering your First Name, Last Name and E-mail and starting to make a tree. The entire purpose of Geni is to make a family tree. So what's the first step in the process? Not registering, but actually getting going.
Once I fill in my name, the next step is adding my parents, and before I know, I've actually got a family tree up and running. Now in the background, Geni sends me an email that says, I have an account and I can go back to my family tree, and once I finish completing it, I'm given the option to save it or share it with others, but you'll know there isn't a first step called Register. I'm not explicitly filling out a form with no purpose other than signing up. The input fields that are presented to me are very explicit to what Geni does, which is create online family trees. I just get up and running right away.
After I do so, Geni will send me occasional newsletters to remind me about my tree and new features. This approach is proved very successful, given that they've established five- million profiles in just five short months. It's Gradual Engagement at its finest. Let's look at another example. The moviemaking site Jumpcut allows you to register, but also allows you to actually start making a movie this is what the purpose of the site is, to create movies right there in your web browser and edit them. So rather than having a first step of register, we can just click Make a Movie, site asks us for a title and some media.
We can grab pictures from our desktop or from Facebook, then we upload those images and we're up and running, we can pick a style, we can edit it, we can publish it. Again, you haven't seen any Registration Forms. No one has asked me for my first name, last name, email address or asked me to agree to any terms of service. Instead what I start doing is through a few short steps getting into the service and using it. Through this process I learned what Jumpcut does, it's a place to make movies. In fact, I have already started making one. Few more examples, and in this case we'll look at a Before and After, this is a site called Online Quiz.
With the Online Quiz maker, the example at the top shows what their design used to look like. You could take a tour, look at the key features of the service. When they redesigned and took a Gradual Engagement approach, there is only one action upfront, Create A Quiz, that's what the site is for, why not just get up and running? If you don't feel like doing that there is still an option to explore below, but - the idea of getting someone up and running with what the purpose of this site is, through a few short interactions is what Gradual Engagement is all about. Now let's see how we can actually use this approach.
How do we apply a Gradual Engagement technique to our websites and services? The first thing we need to do is understand what the core service of our product is. As an example, let's look at patientslikeme, patientslikeme is a service where people with serious medical conditions can share the treatments, symptoms and overall progress they're experiencing. It's all about sharing real results with real patients. So how do we do this as a gradual engagement approach? Currently clicking Join Now brings up a typical web form where we collect a bunch of information, you agree to a number of terms of service, and then you jump in, but a Gradual Engagement approach, instead, might look more like this.
Since the site is all about finding people who have common treatments and conditions to what you have, why don't we make that the first step? In other words, tell us a bit about yourself? What condition you have? What age you are. Just a small bit of information, then click Find patientslikeme, and they return data that tells you, hey, there are actually 262 people like you in our community that you can learn from, gather new insights about, and actually connect with. This Gradual Engagement approach introduces you to the concept behind patients like me; it's all around finding others who share the same situations that you do.
Through a few short interactions with Gradual Engagement you figure it out. Now Gradual Engagement doesn't necessarily mean taking all the input fields you have in a form and just splitting them out across a number of pages. So while I applied what Fidelity has been doing here with their retirement planning tool, asking me upfront how old am I, how much I have saved, and then dropping me into where I can start to manipulate that information, taking these individual questions and breaking up across multiple web forms isn't really Gradual Engagement, but this approach does have some potential. When we think about Gradual Engagement, the big idea is to consider using it as an alternative to giving people a registration form upfront.
On patientslikeme, it was just telling us the condition you had and how old you are. These little lightweight interactions and the results that happen afterwards can really guide you into what value a website or application has for you. Ideally, they also make you successful right upfront. Will Wright, the creator of Spore and the game Sims has a philosophy. He says you should have a win within the first five seconds of playing a game. It makes you feel good, it boosts confidence, and it keeps you going, same thing with Gradual Engagement. Right when I enter my name, I've already got a family tree going. Right when I tell patientslikeme what I'm suffering from, I've already made some connections.
This instant win, success, is a nice transition from what this service is all about, "Hey, I can actually do this." If you do auto-generate accounts using Gradual Engagement; be aware that people might not know they have them. So if you're just sending an email in the background, double that up with the ability for somebody to recover their data on the site or give them a way to actually create account after they create an asset they're interested in. And last but not least, Gradual Engagement doesn't just mean taking all the fields in your form and separating them across multiple pages.
There has to be more of a purpose involved that explains what the service is for and how you can start using it moving forward.
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.