We, the Nucleus Design System team, believe creating an inclusive design system is essential to make sure that everyone, including those with neurodiversity, can have a positive user experience. Neurodiversity refers to the natural range of human neurological differences, including conditions such as autism, dyslexia, ADHD, and more.

In this blog post, we will explore ways to make our designs (both the design system itself and the journeys designed using it) more accessible and user-friendly for neurodiverse people by focusing on each type of neurodiversity and the steps we can take to improve their user experience.

Designing for Autism Spectrum Disorder (ASD)

Autism Spectrum Disorder is a developmental condition that affects how a person interacts with others and perceives the world around them. Some autistic people can have difficulties with sensory processing, social interactions, and communication.

To improve the user experience for some autistic people, designers can take the following steps:

  • Avoid using flashing or moving graphics that may cause sensory overload.
  • Use clear, simple language and avoid using metaphors or sarcasm.
  • Use consistent and predictable layouts and designs.
  • Provide clear navigation and instructions.
  • Use visual cues to aid navigation.

Designing for Dyslexia

Dyslexia is a learning disorder that affects a person's ability to read, write, and spell. People with dyslexia may have difficulties with phonological processing, which can affect their ability to decode words and recognise spelling patterns.

To improve the user experience for some dyslexic people, the following steps may help:

  • Use clear, easy-to-read fonts.
  • Use dark coloured text on a light coloured background ensuring sufficient contrast.
  • Use simple, straightforward language.
  • Use bullet points and short paragraphs.
  • Provide alternative text for images.
The ns-highlighter component uses dark coloured text on a light coloured background may help improve the experience of some of our dyslexic customers.

Designing for Attention Deficit Hyperactivity Disorder (ADHD)

ADHD is a neurodevelopmental disorder that affects a person's ability to focus, control impulses, and manage time. Some people with ADHD may have difficulties with organisation, prioritisation, and sustained attention.

To improve their user experience, designers can take the following steps:

  • Use clear, concise headings and subheadings.
  • Use consistent and predictable layouts and designs.
  • Use visual cues to aid navigation.
  • Use interactive elements, such as ns-inputter checkboxes and selectors, or ns-timeline and ns-progress steps to help with organisation and prioritisation.
  • Use a clear and concise writing style.
    • (For British Gas we adopt a “Brilliantly simple” mantra.)
The ns-progress component steps show organisation and prioritisation, which can be helpful to those experiencing ADHD.

Designing for Sensory Processing Disorder (SPD)

Sensory Processing Disorder is a condition that affects how a person processes sensory information, such as touch, sound, and light. Some people with SPD may be hypersensitive or hyposensitive to sensory input, which can affect their ability to interact with their environment.

To improve their user experience, the following steps may help:

  • Avoid using flashing or moving graphics that may cause sensory overload.
  • Use clear, simple language and avoid using metaphors or sarcasm.
  • Use consistent and predictable layouts and designs.
  • Provide clear navigation and instructions.
  • Use visual cues to aid navigation.
  • Consider how they may need to adjust the brightness or contrast of the screen.

Summary

Designing a user-friendly and accessible design system for a neurodiverse audience requires careful consideration of a range of unique needs and preferences. By implementing the above steps, we can create design systems that are inclusive and user-friendly for everyone, regardless of their neurodiversity.

I have tried to provide reliable and evidence-based information in this post, but it is not exhaustive and should not be considered as medical advice.

Do you design for neurodiversity? Are there other considerations you take in when designing inclusively?

References