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

Input groups

From: Web Form Design Best Practices

Video: Input groups

Field length and required indicators aren't the only ways we can help people understand how to provide input. The natural structure between a series of input fields can actually communicate a lot. Input groups are the way we represent that structure inside of web forms. Input groups can provide valuable clues about how to answer a question about organizing things in a structure that makes sense to people; most common of these structures is the Address field. From years of writing letters, receiving letters, and encountering our addresses in various contexts, we've come to understand what the pieces of an address are, and how they form a block.

Input groups

Field length and required indicators aren't the only ways we can help people understand how to provide input. The natural structure between a series of input fields can actually communicate a lot. Input groups are the way we represent that structure inside of web forms. Input groups can provide valuable clues about how to answer a question about organizing things in a structure that makes sense to people; most common of these structures is the Address field. From years of writing letters, receiving letters, and encountering our addresses in various contexts, we've come to understand what the pieces of an address are, and how they form a block.

So when you see a US postal address, one in France or one in Spain, the structure remains relatively similar. People who lived in these countries for years can simply look at that block and understand it's an address without necessarily seeing the labels. When you break that structure, challenges can emerge. So looking at this form from Nintendo Wii, you'll see that the Address block is broken up across two lines and it doesn't really look like the address you encounter everywhere else in life. When you break natural conventions, you make people work a little bit harder and thereby have to read all the input fields in order to understand what you're asking them.

Input groups can have different shapes; there is Compound Input types as you can see here in this example of a Scheduled Start time of a day and time. There is Related Inputs such as specifying the number of something, and the number of items in each of those, in this case lots, and there is Parent/Child relationships where you have a Selling Format such as Online Auction which contains some elements that define it like the Starting Price, Quantity, and Duration. These different input groups again provide valuable clues about how to answer a question; the fact that a Schedule Start time consists of a day and time helps you understand it.

The fact that there is Related Inputs, or Parent/Child relationships help you once again to provide the right kind of answer. You can this in action on this example from eBay. Each of the different shipping services you specify has a location you'll Ship to, the Service you'll use and a Cost, and there's three options available. Further below, you can see that there is a different kind of structure at play; Parent/Child, Where Will you Ship to, and specifying those countries in more detail if you so choose. When you use input groups appropriately, you can help people understand what's being asked.

When you use them inappropriately, you can actually confuse people. Looking at this example from Southwest Airlines is the information below there related to credit card payment details or PayPal payment details. The close proximity of the input fields to the PayPal label makes it feel like they are coming from PayPal, but if you actually toggle that radio button, it turns out they were actually related to the credit card details above. The proximity of these related input fields draws people's attention and forces them to think twice about what am I actually entering in here.

One of the ways that we can communicate more meaningful relationships is by visually grouping elements that are related. Now, there is a couple of different ways of doing this. What you see here on this example is a lot of different visual elements being used to individually wrap nearly every single field. That's a lot of visual noise that starts to take attention away from labels in the input fields. In fact, when you look at this form, you start thinking about its structure a lot more than you start thinking about the questions that are being asked. There's a line between each field, there are yellow colors, there are brown colors, red colors, bold.

That stuff starts to take your attention instead of the questions being asked. Another example that's pretty common is actually striping all the questions. People resort to this type of visual treatment when they want to make a clear comparison between the left-aligned label and the right-aligned input field. People use this visual layout when they want to make a clear connection between a left-aligned label, and the input field on the right. Though people can quickly parse a label and its input field in this format, a little bit of visual communication can help as well. The problem is though this introduces a lot of visual elements which ultimately add up to noise.

Let's look at just how much simple visual change like this adds. So if we add two different background colors and just separate them by single pixel in order to separate out the fields, we've actually created 15 different visual elements in this simple little form. And as people go down and say, Scan the Labels, each instance of a change in visual information stops them, causes them to pause, and pairs scanning. When you put something on the page visual, people will look at it and try interpret it, and try understand it.

So making those visual distinctions meaningful goes a long way to communicating what makes an input group distinct and you can really use just the minimum amount necessary. Looking at this form, there are one, two, three related sections, and a Submit button. Each section of related input fields has just a slight visual contrast to distinguish it; the one at the top is white, the one in the middle is light blue, another white one and then light blue to finalize the form and a Submit action button. The fields in each of these sections are related, but the amount of visual information used to indicate that relationship is minimal.

Here is another example back on eBay form. Here, to separate information about yourself and about the account you're creating, they've used a single thin rule, not a lot of visual way, just a simple indicator that says okay, now you're onto a different type of section and these input fields are not related. Input groups in general can be used to communicate the relationship of different input fields, but you really don't need a lot of visual information to do that. In fact, the minimum amount necessary generally is better, because it doesn't lead to confusion about what's related and what's not.

If you apply too much of visual information, or you group input fields in ways that imply a relationship, people are likely to read into that and assume those things actually aren't related in ways you may not intend. So if you are using input groups, make them meaningful, and use visual communication to communicate that meaning, so that it's deliberate, not unintentional.

Show transcript

This video is part of

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

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