Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Accessibility for UX Designers

Well done!

You have completed Accessibility for UX Designers!

Sign up for Treehouse Back to Library

Error reporting screen

4:12 with Anwar Montasir

You might recall a Nielsen Norman Group article I mentioned previously that gave us three principles for error reporting. Error messages must be easy to notice and understand, highlighted visually, and accompanied by clear instructions for fixing the problem.

When Reporting Form Errors

  • Make messages easy to notice and understand
  • Highlight errors visually
  • Keep instructions simple

Further reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    You might recall a Nielsen Norman Group article I mentioned previously 0:00
    that gave us three principles for error reporting. 0:05
    Error messages must be easy to notice and 0:11
    understand, highlighted visually, and 0:15
    accompanied by clear instructions for fixing the problem. 0:20
    With those principles in mind, I'm going to duplicate 0:28
    the frame I created and call my new frame error reporting. 0:33
    I'll mock up two types of common errors, 0:41
    a user making an invalid entry and leaving a required field blank. 0:45
    Using the text tool, I'll create sample information for 0:54
    a user named Maria Hernandez. 0:59
    Here's her email address. 1:05
    And I've omitted the @ symbol, making the address invalid. 1:09
    I'll also create a street address, but 1:17
    no zip code, which means a required field is empty. 1:23
    I'll start by making the error fields red, 1:30
    since many users associate red with stop and green with go. 1:33
    However, I know that's not enough. I haven't told users how to fix the errors, 1:59
    and I haven't provided additional visual cues to help 2:05
    colorblind users who might not notice the red highlights. 2:09
    Font Awesome offers an icon called exclamation triangle 2:15
    that looks like an error warning. 2:20
    So I'll add that to the labels above my problem inputs. 2:22
    I'll use the space below the inputs to explain each error. 2:34
    With the email address, I'm trying to be as specific as possible. 2:46
    Something like "invalid email address" 2:51
    would offer no clues as to why the address was rejected. 2:54
    So I'll try "Email address must 2:58
    contain a single @ symbol". 3:03
    And "Please enter a Zip Code" 3:09
    should explain the error on the empty required field. 3:18
    I've included resources in the teacher's notes on form error messaging. 3:24
    It's not an easy thing to get right, and 3:29
    you'll definitely want to user test your proposed solutions. 3:32
    If you have time, go ahead and complete the designs for the Billing Information 3:37
    and Review Order screens. I'd love to see what you come up with. 3:42
    And as you build your portfolio, and position yourself to enter the industry, 3:47
    be sure to refer back often to the resources we've covered here. 3:52
    Designing with accessibility in mind isn't always easy, but 3:57
    designers who put in the extra effort to make sure their product is available 4:02
    to users with disabilities will always be in demand. 4:07

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up