Viewers: in countries Watching now:
Discover how to create a user experience that embodies utility, ease of use, and efficiency by identifying what people want from websites, how they search for information, and how to structure your content to take advantage of this. In this course, author Chris Nodder shows how to merge engineering, marketing, graphical and industrial design, and interface design to create a website that meets the needs of your customer, and is simple, elegant, and engaging. The course shows how to use graphics to help rather than hinder visitors, balance advertising and content, and integrate video, audio, and other media. Other tutorials consider the landing page experience and elements like contact forms from the visitor's perspective.
Now let's talk about how to handle errors in forms. Even with the best instructions and the clearest fields people may still make typing mistakes. Of course, you want to do your best to catch errors before they cause people trouble. Any error is going to be disheartening to your visitors and errors in forms are big cause of abandonment. Some errors aren't really errors as such, but are just misunderstandings made because the computer didn't understand the format of the entry. One way to stop these errors is to use forgiving formats. For entries like phone numbers let people enter spaces or parentheses as they see fit and then the computer can strip that information away before it checks that the entry is valid.
It's also best to do validation of each field. That way you can try and catch errors as they happen and let people know in line that the field needs attention before they submit the form. If people do make an error filling in the form, you need to help them correct it without scaring them off. If you found issues after they've submitted the form, you're going to need to walk people through the errors so that they can correct them. The way to do this is to put a description of the error at the top of the form. This should indicate the number of errors and list them. Be careful not to use language that blames your customer though.
These listed errors can be links to take the user directly to the corresponding field. Also, highlight each field that has a problem. One of the most effective ways that I've seen during user testing is to turn the field border red. You should also add a message for each problem that describes what the entry should look like. Maybe using an example from the data or tips on common errors like when people provide a user name rather than an email address. If you can manage it technically, one of the most forgiving ways of getting people to correct problems is to just show them the fields they need to attend to rather than displaying the whole form all over again.
This often makes the error correction experience seem much less daunting as only a few fields are shown on the screen. Forms can be a big source of confusion and frustration for your visitors and this can really hurt your user experience. I really suggest that you spend the time to usability test your forms with representative users. That means people who meet your persona description. Give them a task to complete that involves filling in the form and then sit back and watch them go through the process. Thinking out loud as they do it. You've learned a lot about a potential traps in your form design from this activity.
It's a great investment and it makes sure that your real customers don't find the same frustrations.
Find answers to the most frequently asked questions about User Experience Fundamentals for Web Design .
Here are the FAQs that matched your search "" :
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.