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

Errors

From: Web Form Design Best Practices

Video: Errors

We can do our best with asking clear questions using form labels, providing great efforts as using Form Input Fields, and laying things out appropriately, but errors still may happen. When they do, we want to do our best to resolve them as quickly as possible. Let's look at how we do that. Not too long ago I was asked to register for the Fairmont President's Club. This is a club for people who stayed at the hotel more than once. I was given a card number and asked to fill in this form, pretty much no problem. Went through the form, and, can you tell what happened? Somewhere on this form is actually an error message.

Errors

We can do our best with asking clear questions using form labels, providing great efforts as using Form Input Fields, and laying things out appropriately, but errors still may happen. When they do, we want to do our best to resolve them as quickly as possible. Let's look at how we do that. Not too long ago I was asked to register for the Fairmont President's Club. This is a club for people who stayed at the hotel more than once. I was given a card number and asked to fill in this form, pretty much no problem. Went through the form, and, can you tell what happened? Somewhere on this form is actually an error message.

Down at the bottom of three paragraphs of text, we see some bold text, which tells me, hey, we are sorry, but we can't actually find that card number. Please verify the number and try again. Well, how exactly do I do that? It doesn't really seem like there is an opportunity to do so on this page. This indicates a number of problems with the way that Fairmont has treated errors. Number one, it's difficult to know that an error has actually occurred. There's not a lot of visual contrast of this error message. In fact, it's very below three paragraphs of text and only made bold. Two, the way they tell me to actually correct the issue, is impossible, there is no way to verify the number and try again on this page.

The only choice I am left with this to hit the Back button and try going through the form again. So how can we make the errors on the Fairmont site more effective? For starters, we can put a primary message at the top of the page that indicates an error has happened. When there is an error on the form, it's arguably the most important thing, therefore, let's treat it that way visually, really making it pop with bold fonts and icon and even a red border. Secondarily what we've done is associate that primary message with the error that's causing it, so you can see red font is also used near the Fairmont President's Club input field.

The association between that message and the thing causing the error is a great way to see, well, what's really wrong here. And then the third what we've done is given people ways to resolve the error, both in the message at the top and at the input field causing it, we have text that says, Please try again or contact us. Contact Us is a link that gets you to help to fix the problem. The actual point where we message an error requires a doubling of visual language. That is, we do more than one thing to indicate where an error is. We can do this in a number of different ways, and here are some examples.

The first one uses an icon, bold text, and a red color, and even a gradient to indicate where there is an error. Second one below uses an icon and some additional text. Third one below actually uses a background color, and so on. The idea here behind doubling visual language is that it brings more attention to the areas that have problems. It also helps people who may have colorblindness or who may not see a subtle differentiation in just bold or just color, find where an error is happening. More than one change in visual language creates more contrast helping people find errors quickly and effectively.

Let's look at this technique on a form. If you remember this form from our previous discussion of Primary and Secondary Actions, you'll note that I've made one important change. The Confirm action is now the primary button and the secondary action of Cancel has just been turned into a little link. But let's say someone goes to this form and doesn't fill in a Subtitle, but hits the Confirm button. What do we do? Well, here's the same techniques around error messaging. You'll note at the top we tell you that you need to correct the information, we point you to where the error is actually happening, and again, we double the visual language at the point where the errors occurred, by turning the title red, bolding it and inserting a line of text directly below the input field that tells you how to resolve the error.

This resolution of the error is the third important piece of error messaging. Enter a subtitle or click Cancel. Both ways will get you out of this error state. On forms where there is multiple points of error, we can apply the same technique. So on the eBay, Post to Want It Now form, you can see Title, Description, and Category are missing, and we've applied the same treatment for indicating what's wrong to each field. Each one gets a doubling of visual language, each one gets a set of text that explains how to fix it and everything is wrapped up at the top in an overall error message.

Now some people may react to seeing a form like this and say, hey, that's way too much red text for a simple little form like this. Do you really need to highlight every single input field in the same way? Well, number one, it's unlikely that somebody is going to go to a form not fill anything in and click Submit, this is kind of an artificial state. But number two, especially on longer forms, it really helps to know where the error is. Consider this example on Jotspot. Here, there is an error message at the top that says, this e-mail address is already registered.

Hey, there is not an association with where the input field is, so I need to look a little, but because it's a short form that's not such a big deal. The bigger problem is there is really no way to resolve this error. That is, what if that is my e-mail address, what if I don't know if I've already registered? And assuming I already have registered, how can I resolve this problem? There is no way to get help doing so. In fact, this form only contains one of the three pieces of what I think makes an effective error message. That is, it has a primary message at the top that tells you something is wrong, but it doesn't associate that message with what's wrong, and it certainly doesn't give you a way to resolve the problem.

Especially on longer forms, the idea of associating that primary message with what's wrong is a big deal. That is, the error may actually be off- screen, and if there is multiple errors, we can't just move the page to where the error is, we need to give people an overview of what's wrong. So on this long Balance & Draws form, having that error message at the top really helps, and then doubling the visual language with where the error actually is, allows you to scan through the form by scrolling and finding where the problems lie. Last but not least, we also need to consider how to deal with error messages in dynamic forms.

That is, in places that don't have this page model of Submit and Refresh the entire page. So on Apple's Checkout Registration form they are using an accordion model. Let me illustrate what that means, and then show how an error state can show up there. We are filling in Shipping information, and we click Continue, that section rolls up. Note there wasn't a Page Load and Refresh, everything is happening dynamically. As we go through the payment information and click Continue there, you'll note an error pops up, the little yellow field I am correcting right now. Because we are not leaving the page, we are actually dynamically inserting the error state into the form as people go along.

This way we can manage errors without having people actually leave the page. To wrap up Errors Best Practices, the first big deal is that we need to communicate an error has happened. When something is preventing you from submitting a form, that's a big deal, and usually the most important thing on the page, therefore we should treat it that way visually. Strong prominence, big message at the top, bold, red icon, whatever it takes to grab people's attention and tell them they need to address the challenge. Secondarily, we want to associate that big message with the thing causing it. So some level of visual communication that is similar color, similar type treatment similar icons that lets you know where that error is.

Third, and perhaps most important, is giving people a way to resolve that error, that is, providing actionable remedies that allow them either to get out of that state or fix the problem. And don't forget to double the visual language where you're highlighting errors. This will let people quickly find an error without having to rely on a single bit of color coding.

Show transcript

This video is part of

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

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