Week 12: Usability and Accessibility guidelines

Learning objectives

• Understand the key principles of Usability
• Understand the key principles of Accessibility
• Leverage resources to create accessible and usable designs
• Be introduced to the final project

Usability Heuristics

As a designer, to create a usable product, always adhere to the 10 Usability Heuristics (opens new window) established by Jakob Nielsen. Here is a summary explanation:

1. Visibility of System Status

   • Explanation: Keep users informed about what is going on with clear, timely feedback.
   • Example: Show a loading indicator when data is being fetched.

2. Match between the system and the real world

   • Explanation: The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon.
   • Example: use familiar language for your users that doesn't require them to do extra research. Use icons that match their mental modal and don't need explanation.

3. User Control and Freedom

   • Explanation: Provide users with options to easily undo or redo actions.
   • Example: Include a 'Back' button or an 'Undo' feature.

4. Consistency and Standards

   • Explanation: Consistency in UI elements (buttons, icons, fonts) helps users recognize and predict functionality across the app.
   • Example: Use the same style for all buttons and navigation elements throughout the app.

5. Error Prevention and Recovery

   • Explanation: Design the system to prevent errors and help users recover from them.
   • Example: Use form validation to alert users about input errors before submission.

6. Recognition Rather Than Recall

   • Explanation: Minimize the user’s memory load by making objects, actions, and options visible.
   • Example: Provide dropdown menus with options rather than requiring users to remember and type commands.

7. Flexibility and Efficiency of Use

   • Explanation: Design interfaces that can be used by both novice and experienced users.
   • Example: Include shortcuts for power users while keeping the main navigation simple.

8. Aesthetic and Minimalist Design

   • Explanation: Keep designs simple and uncluttered, focusing on essential elements.
   • Example: Avoid unnecessary elements and use whitespace effectively.

9. Help Users Recognize, Diagnose, and Recover from Errors

   • Explanation: Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
   • Example: Create clear and engaging error states with action buttons that allow users to recover from the error or know how to proceed.

10. Help and Documentation

• Explanation: Provide easy access to help and documentation to assist users.
• Example: Include a help section or tooltips for complex features.

Accessibility Guidelines

To ensure your product is accessible for all audiences, there are various areas to consider. Refer to the Wcag guidelines for designers (opens new window). Here are some important things to keep in mind when designing for accessibility. Make sure your design is:

1. Perceivable

   • Explanation: Ensure that information and UI components are presented in ways that can be perceived by all users.
   • Example: Use text alternatives for non-text content (e.g., alt text for images).

2. Operable

   • Explanation: Make all functionality available from a keyboard and ensure users have enough time to read and use content.
   • Example: Ensure the app can be navigated using only a keyboard.

3. Understandable

   • Explanation: Make text readable and understandable and ensure that the UI operates in predictable ways.
   • Example: Use clear and simple language, and provide instructions for complex tasks.

4. Robust

   • Explanation: Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.
   • Example: Use standard HTML and ARIA (Accessible Rich Internet Applications) attributes.

Best Practices for Usability and Accessibility

1. Color Contrast and Text Size

   • Ensure sufficient color contrast between text and background.
   • Use readable font sizes and allow users to adjust text size.

2. Keyboard Navigation

   • Design for full keyboard navigation.
   • Ensure focus indicators are visible and intuitive.

3. Responsive Design

   • Design interfaces that work well on various devices and screen sizes.
   • Test the app on different devices to ensure usability and accessibility.

4. Alternative Text for Images

   • Provide descriptive alt text for all images.
   • Ensure icons and decorative images are appropriately marked up.

5. ARIA Landmarks

   • Use ARIA roles and landmarks to improve navigation for screen reader users.
   • Label sections and elements to provide context.

6. Form Labels and Instructions

   • Ensure form fields have clear and descriptive labels.
   • Provide instructions and feedback for form errors.

7. Testing with Assistive Technologies

   • Regularly test the app with screen readers, magnifiers, and other assistive technologies.
   • Gather feedback from users with disabilities.

Using a plugin to test for accessiblity in Figma

Resources for Learning

1. Books

   • "Don't Make Me Think" by Steve Krug: A guide to usability principles and practices.
   • "Designing Interfaces" by Jenifer Tidwell: Patterns for effective interaction design.

2. Websites

   • Designing for Accessibility (opens new window)
   • 5 Visual Treatments that Improve Accessibility (opens new window)
   • Accessibility guidelines for UX Designers (opens new window)
   • Figma Accessibility and inclusion in design (opens new window)

3. Accessibility Resources:

   • Accessibility plugins (opens new window)
   • Accessibility chekclist for designers (opens new window)