New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

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

Creating form fields

From: User Experience Fundamentals for Web Design

Video: Creating form fields

Now let's talk about the individual fields on your form. You've properly seen some forms where every field is the same length. That may look neat, but it's essentially unhelpful to visitors. When people see fields of different lengths it gives them clues as to how much information you expect them to provide. Phone numbers are a different length to credit card numbers which are different length to card verification numbers. Using fields of the correct size helps people work out what information to put where. You should also help people out by giving them a clue as to which fields are required and which aren't.

Creating form fields

Now let's talk about the individual fields on your form. You've properly seen some forms where every field is the same length. That may look neat, but it's essentially unhelpful to visitors. When people see fields of different lengths it gives them clues as to how much information you expect them to provide. Phone numbers are a different length to credit card numbers which are different length to card verification numbers. Using fields of the correct size helps people work out what information to put where. You should also help people out by giving them a clue as to which fields are required and which aren't.

The typical way to do this is to use an asterisk, that's a star, next to the required fields. Another way to help people is to limit their choices. A dropdown list box or set of radio buttons means that people get to pick from a set of options rather than having to think about what to type. In terms of human memory recognition is much easier than recall. As long as you've put the right options on the page it's easier for someone to just make a selection than it is to have to start from an empty field. It also allows you to make a default suggestion so long as that default is in line with what most visitors want, it will reduce the time it takes them to complete the form.

When you start putting controls on the page, make sure you use the correct one. Radio buttons and checkboxes are different for a reason. Checkboxes let your visitors choose one, some, all, or none of the options. Radio buttons only let them choose one. Knowing where the name comes from will help you remember which one to use. Old car radios used to have buttons to choose a station. These were physically connected to the tuning controls. Only one could be pushed in at any time, because you could only listen to one station at a time. When you pushed a different one in, it popped the currently selected one back out.

Just as a reminder, here is one case where Fick's Law comes into effect as well. The target size of checkboxes and radio buttons is really small. The solution is to make sure that the text is clickable too. This should happen automatically in most modern browsers, but please check it's working for your forms. Radio buttons and checkboxes are also the exception to the labels to the left rule. Use the checkbox or button is a bullet point so the label goes to the right and put each option on its own line, because otherwise it's how to tell which selector goes with each label.

Another way to make form filling faster and more accurate is to add Help text in line. People won't always click on help links in a form, because they're scared they will be navigated away from the page and then lose their information. If you instead put the help text alongside the form information, it lets them see what's required without the risk of leaving the page. Before you write any help text though, see whether you can make visitors lives easier by making sure the field labels are clear as they can be. A well laid out form shouldn't need masses of extra help text.

One final thing about form layout. Back in the mist of time, the default buttons at the bottom of the form was Submit and Reset. Please do not put a reset button on your forms. The pain that this button inflicts on people who accidentally click it is not worth the hassle. Also, try and use a verb on the submit button that sums up what's going to happen once the user clicks it. For instance, register or sign up for newsletter or request information. Any of these are more educational than the word Submit and they help customers understand what is they will get as a result of completing the form.

You might want to put a Cancel option on a page, more as a reassurance to visitors any the data they've typed in won't get sent. But if you do, make sure it has less visual weight and is physically removed from the submit button so that it doesn't get click on accidentally. And when people press the submit button make sure you reassure them that their data made it through by providing a confirmation screen.

Show transcript

This video is part of

Image for User Experience Fundamentals for Web Design
User Experience Fundamentals for Web Design

52 video lessons · 25010 viewers

Chris Nodder
Author

 
Expand all | Collapse all
  1. 1m 7s
    1. Welcome
      1m 7s
  2. 4m 37s
    1. Building a site for your visitors
      1m 29s
    2. Understanding how people browse the web
      45s
    3. It's all about information
      48s
    4. What causes people to leave sites?
      1m 35s
  3. 3m 50s
    1. Simple design
      1m 9s
    2. Consistent design
      1m 11s
    3. Standard design
      1m 30s
  4. 20m 55s
    1. Elements of navigation
      1m 21s
    2. Content has a structure
      2m 18s
    3. Understanding menus
      3m 19s
    4. Reviewing some menu myths
      2m 4s
    5. Working with site maps
      1m 5s
    6. Adding search to your site
      2m 53s
    7. Understanding links
      3m 43s
    8. Exploring clickable elements
      1m 18s
    9. Understanding Fitts's Law
      2m 54s
  5. 11m 19s
    1. People can begin from any page on your site
      1m 24s
    2. Elements every web page should have
      3m 25s
    3. Creating progressive navigation
      3m 22s
    4. Arranging your content
      3m 8s
  6. 8m 7s
    1. How people read on the web
      2m 31s
    2. Writing for information exchange
      1m 43s
    3. Formatting pages for information exchange
      3m 53s
  7. 7m 21s
    1. Using your homepage as a site summary
      1m 50s
    2. Creating fresh content
      1m 20s
    3. Displaying navigation and search
      1m 25s
    4. The five-second test
      2m 46s
  8. 8m 8s
    1. Showing people what you've got
      3m 50s
    2. Making comparisons easy
      1m 24s
    3. Creating landing pages from ad campaigns
      2m 54s
  9. 11m 22s
    1. The real purpose of detail and product pages
      1m 16s
    2. Writing descriptive text
      2m 4s
    3. Using images to set context
      2m 17s
    4. Showing the price for products
      2m 27s
    5. Have a call to action
      1m 36s
    6. About Us: a special detail page
      1m 42s
  10. 10m 58s
    1. Ask for information in context
      2m 25s
    2. Making forms as painless as possible
      2m 34s
    3. Creating form fields
      3m 37s
    4. Handling errors gracefully
      2m 22s
  11. 9m 9s
    1. Using different types of media
      1m 55s
    2. Simple question: Does it enhance the experience?
      2m 15s
    3. Using graphics for explanation, not decoration
      1m 17s
    4. What is interactive content?
      1m 58s
    5. Laying out your page for media
      1m 44s
  12. 5m 3s
    1. Making money without selling out
      1m 37s
    2. Adding graphical ads
      2m 10s
    3. Creating text ads
      1m 16s
  13. 3m 42s
    1. Simple, consistent, and standard design
      2m 4s
    2. Consider your users and you'll be fine
      1m 38s
  14. 1m 31s
    1. More resources
      1m 31s

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

Are you sure you want to delete this note?

No

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.