Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Web services

From: Web Form Design Best Practices

Video: Web services

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.

Web services

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.

When we click Sign up, and let's take a guess at what it's going to greet us, that's right, a web form, but digging in we see some details. At the top we're asked for our Username. This will be your username. It must be alphanumeric, 3-15 characters long, can contain underscores, but no spaces. If you've already set it on mobile, pick a different one. E-mail, we're going to send you a confirmation e-mail, so make sure it's right. Password, got to be at least 3 characters and retype it, so you don't make the mistake. Go in a little bit further Are you a human? Last, but not least agree and read our Terms of Service & Privacy Policy.

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.

Show transcript

This video is part of

Image for Web Form Design Best Practices
Web Form Design Best Practices

30 video lessons · 12746 viewers

Luke Wroblewski
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Form Design Best Practices.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.