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

Common tools

From: Web Form Design Best Practices

Video: Common tools

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.

Common tools

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.

When I got an email invite from Naymz, I click the link here in my e-mail and I ended up on a site that only required a single input field to be filled in. How? Well, the invite already had my name and email address, so all I need to do is choose a password and click Accept. Note that the Accept button has also been streamlined since we're not using the checkbox to agree to terms of service and privacy policy. As we talked about the Actions In Progress section this is a technique used to get people through forms quicker and easier.

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.

Imagine filling in all this information using a series of web forms, it would take quite a long time. Using the Web Browser though I only have to click one button and all this data is captured for me. Creating Web Browser extensions is gotten easier-and-easier over the years. We cannot use standard web development tools like JavaScript, CSS, and HTML to create Web Browser connectors in Firefox, Chrome, and Safari. These extensions can do an awful lot to gather input wherever people happened to be on the web.

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.

Show transcript

This video is part of

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

30 video lessons · 12584 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.

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.