Skip to content

Universal Design

Kristian Vestbø edited this page Apr 21, 2026 · 3 revisions

Universal Design

What is Universal Design?

Universal Design means designing products and systems that everyone can use, regardless of their abilities or disabilities. The goal is to remove barriers and make the application as accessible and easy to use as possible for all users.

Visual Design

The application uses a white background with blue buttons and interactive elements, providing a clear visual distinction between content and actions. Black borders are used on cards and input fields to ensure sufficient contrast against the white background, making elements easy to identify for users with reduced vision.

A font size of 12 is used consistently throughout the application. While this meets basic readability requirements for the target audience of users aged 30–50 with average technical skills, increasing this to 14 could further improve readability for older users.

Organization cards display the logo of each organization as an image. However, these images currently do not have tooltips or alternative descriptions, which means users who cannot see the image clearly have no fallback text to identify the organization. This is a known limitation.

Navigation and Interaction

All interactive elements are large enough to click comfortably with a mouse, reducing the risk of misclicks for users with limited motor precision.

The application supports keyboard navigation using the Tab key, allowing users to move between fields and buttons without a mouse. However, there is currently no visible focus indicator showing which element is currently selected when tabbing. This means keyboard-only users may struggle to know where they are in the interface. This is a known limitation we did not have time to address.

Forms and Input

All input fields are clearly labeled so users know what information is expected in each field. When a user makes an error the application displays a descriptive error message explaining what went wrong, rather than just highlighting the field in red. This helps users of all technical levels understand how to correct their mistake.

Feedback and Confirmation

The application provides clear feedback after key actions:

  • Donations, after completing a donation, the user is shown a confirmation screen so they know the action was successful.
  • Loading, when organizations are being fetched, the relevant navigation button is grayed out and a loading text is displayed, preventing users from clicking multiple times and making it clear that the system is working.

Language

The application is written in English, making it accessible to a broader audience beyond Norwegian-speaking users.

Known Limitations

Limitation Severity
No focus indicator when navigating with the Tab key Medium
Organization images have no tooltips or alternative descriptions Medium
Font size 12 may be small for some older users Low
Clone this wiki locally