Button System Design for Cognitive Impairments

This project presents part of my paper entitled 'Advancing Accessible Interfaces: Evaluation of Design Patterns and Recommendations for Users with Intellectual Disabilities', published by the Association for Computing Machinery (ACM) Digital Library, as part of the proceedings of the 11th International Conference on Software Development and Technologies for Enhancing Accessibility and Fighting Info-exclusion (DSAI '24). This work is focused on the redesign of a museum mobile app for individuals with intellectual disabilities ACCESS+, aiming to rethink its information architecture and a new, dedicated design system that addresses the needs of individuals with cognitive impairments.

Read the full paper: https://dl.acm.org/doi/10.1145/3696593.3696613

Research

Together with my co-authors, I conducted research to identify the current issues and potential improvements of the existing application. Based on these findings, and in compliance with the WCAG guidelines, we subsequently designed new buttons.

Color Palette

We carefully selected a color palette that fully complied with the WCAG guidelines, paying close attention to text, background color, button borders, and accent colors. The interface predominantly features a white background with black text to ensure maximum contrast. Additionally, buttons utilize shades of gray to prevent the UI from becoming visually heavy and overwhelming for users.

Buttons

Each button is outlined with a gray 3px border that defines the clickable area and has a minimum height of 90px, making it significantly more spacious than required by the WCAG. The style draws inspiration from Duolingo to reinforce the abstraction of digital buttons with their physical counterparts; accordingly, each button includes both a clickable state and a clicked state. The minimum text size used for microcopy is 21px semibold with the Inter typeface, ensuring readability even for visually impaired users. The language is concise, featuring short texts and easily understandable terminology.

Button States

There are four possible states: Primary, Secondary, Tertiary, and Disabled. The sub-states — clickable and clicked — are used to display an animation confirming that the button has indeed been pressed. When a choice needs to be made (e.g., radio buttons), the button changes to the secondary style to indicate that it is not only clicked but also selected in comparison to others. Finally, if a selected button can be deselected (e.g., checkboxes), it will display a filled circle and maintain a clickable appearance to signal that the click action can be performed again.

Below, you can see the complete application with all its interfaces. You are also welcome to view the full project if you wish.