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

Unnecessary inputs

From: Web Form Design Best Practices

Video: Unnecessary inputs

Every question we ask people on a web form requires them A) to understand what the question is B) think about how they're going to respond to it and then 3) put in their answer in the affordance we've provided for them. That's a lot of thinking for every single question we ask. As a result it makes a lot of sense to be very vigilant about everything we're putting in front of people. As I mentioned earlier in talking about form length, asking ourselves, Can this question be removed? Can this question be postponed? Or, can it be inferred based on information we already know? In other words, what are the ways we can really cut down on unnecessary inputs.

Unnecessary inputs

Every question we ask people on a web form requires them A) to understand what the question is B) think about how they're going to respond to it and then 3) put in their answer in the affordance we've provided for them. That's a lot of thinking for every single question we ask. As a result it makes a lot of sense to be very vigilant about everything we're putting in front of people. As I mentioned earlier in talking about form length, asking ourselves, Can this question be removed? Can this question be postponed? Or, can it be inferred based on information we already know? In other words, what are the ways we can really cut down on unnecessary inputs.

There are some obvious examples, but there are also a few that take a little bit of thought, but the benefits can be really big. So let's look at an example from eBay's original registration form. This was pre-2004 so around 2003 and when somebody actually signed up to use eBay to either buy or sell something of interest to them they were asked a series of questions. Some of these questions were pretty standard like your email address, your full name, not that confusing. But right after that information was a series of questions titled optional that asked you, how did you hear about eBay? Not too bad.

What's your date of birth? Why did you need to know that? Annual Household Income? Hold on a second, why is this information necessary for me to join eBay? Even though the section was labeled optional information at the top, it's still crept people out. In fact, this was a key point of drop-off in this registration form. So what the team did when they actually redesign the eBay registration process as they took these unnecessary inputs and they ask them after someone had already registered. This change of context around these questions actually dramatically increased the percent of people who have filled these in.

If thought the thinking probably would something like this okay, I've registered now you're asking me for a little bit of additional information I'm happy to help out, or, ooo this looks a little bit like the survey. When the same questions were asked in the actual registration form they felt intrusive and out of place. I'd need to know my household income if all I'm trying to do is buy a laser pointer on eBay. So unnecessary inputs can be dictated by context, but they can also be dictated by things that we can infer. There as an example, let's look at a pretty standard payment form, this one comes from PayPal and here they're asking me for my billing information associated with the credit card.

So it makes sense to ask, what credit card I'd be paying with, right? You can note that the third input field is card type, I can pick MasterCard, Visa, American Express. Yet, it really turns out that this is an unnecessary input and it's not one that's glaringly obvious at first sight, but in the redesigned PayPal form you'll note that they put this payment type information after the credit card number, because based on the credit card number that you enter, they can actually tell what credit card you're using. It's not necessary for them to ask you to specify what credit card type you're paying with.

They know a credit card that's starts with 5 is a MasterCard. This example has been applied to other places and it's worth noting some of the usability details that come along with this type of solution. On Apple, they're actually doing something that I consider to be a no-no. What happens here is they put the pictures of the card that they support before they ask you for the number. So people when they see these images are quite inclined to actually click on one of them to select the type of card, they see it as a question, even though it's simply series of images.

Now when you enter your actual credit card number the appropriate card number highlights. Much better to manage it like this, where the credit card number is the first field you ask, then use that inferred information to highlight the one below it, thereby making that section really look like a label as opposed to an input field. In other words, which card have you paid with? Now little shortcuts like this of removing input fields can actually go a long way on mobile device as well. As I have mentioned earlier the constraints of mobile are a lot tighter, screens are smaller, inputs a little bit harder, so every little detail we use to make things simpler and easier on mobile and to eliminate errors goes a really long way.

You note the same pattern on a very small screen form here on this Railways site. As you enter a credit card type, it boiled it down to Visa. Card that's starts with 42 can only be a Visa card. Now on more advanced mobile devices here we're looking at a pretty basic feature phone running this form, but a device like the iPhone can do a lot more. So the native iPhone application for the payment service square, this is how credit card information is requested. Your first step is to actually enter a credit card number and you'll note, the icon to the right of the sample number is a generic credit card.

As you actually enter your credit card number that graphic changes to represent the card you're using to pay. In this case let's switch to Visa. Now the same input field here is actually shifted a bit to allow you to enter your month, year, and zip code, but we'll save that topic for input masks later. Now it maybe tempting to start looking for unnecessary inputs all over the place and while the credit card example we looked at is a great model of something we can infer and don't really need to force people to take the time to consider what we're asking to formulate an answer and then to input it.

There is other places where we maybe a little over zealous about removing requirements. Take for example from the same Apple checkout form the idea of simply asking for a ZIP code to infer a City and State. Here when somebody enters a ZIP code a little drop-down menu pops up that says oh, you're in San Jose, California. Now the reason they have a drop-down menu is some ZIP code they are associate with more than one city and state combination, so it's necessarily sometimes for you to pick. This doesn't seem like a very big deal, but when you look at the same implementation on Weber's checkout form, you notice something interesting.

As an interface designer, I'm generally tuned to areas of usability problems and where I can see a usability problem in the making or usually in existence is where I see a bunch of help text. The more help text, the bigger the problem tends to be. If that help text is red probably an even bigger problem. If that help text is big, red, and bold usually a sign of a severe issue inside a form or any other kind of web interaction. So here on the Weber checkout form you'll note that there is a whole block of text explaining how this feature of entering the ZIP code and getting your city and address works.

I've expelled out after entering your zip code above you must select click to highlight your city state combination from the left, after selection it will autofill display in the category below. Man, it's a lot of work. Most people know the city and state they either living, or they're shipping something to and in fact entering that is pretty simple. This solution seems to make them think an awful lot as indicated by the amount of help text they have decided they need to work people through it. So it tried to be a quicker solution by removing city and state as input fields actually turns out to be something a bit more complicated.

And the lesson here really on not necessary inputs is, don't just remove things for the sake of removing things, because sometimes that complicate stuff. Really look for opportunities where unnecessary inputs make things easier and streamline the process as we saw with the credit card example. Anywhere you're able to remove the need for people to see a question, parse it, formulate an answer, input their answer; you've cut down not only in the time, but on the mental load they needed to think through your form.

Show transcript

This video is part of

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

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

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.