1. Web design for neurodiverse users Claudia De Los Rios Perez Ph. D
Web design for neurodiverse users Claudia De Los Rios Perez Ph.D. candidate, Curtin University Perth Web Accessibility Camp February 2019

2. Web design Web graphic design
Visual communication and communication design.
Interface design
How the graphic elements will be presented.
How to design for different platforms (laptop, smartphone, tablet).
User experience design (UX)
How a design will make its audience feel and react.
Web design encompasses many different skills and disciplines in the production and maintenance of websites.  The different areas of web design include: web graphic design, interface design, and user experience design.

3. Neurodiversity Neuro-diverse
Neuro = brain (Neuro system) Diverse = range of different kinds Neuro-typical = Most common condition
Neuro-diverse
Neuro system: The system of cells, tissues, and organs that regulates the body's responses to internal and external stimuli.
To be neuro diverse doesn’t reflect on physical appearance. It’s a cognitive condition. Neurological conditions are the result of normal variations in the human genome, because we are all born different and raised differently. Our ways of thinking result from both our inherent “machinery” and the experiences that have “programmed” us.

4. Neurodiversity Dyspraxia Dyscalculia Dyslexia
ADHD Attention deficit hyperactivity disorder
Tourette syndrome
Autism Spectrum disorder
And other conditions.
Dyspraxia: neurological disorder that impacts an individual's ability to plan and process motor tasks.
Dyscalculia is difficulty in learning or comprehending arithmetic, manipulate numbers.
Dyslexia: makes it difficult to read, write and spell.
ADHD Attention deficit hyperactivity disorder includes attention difficulty, hyperactivity and impulsiveness.
Tourette syndrome involves repetitive movements or unwanted sounds.
Autism presents difficulties with communication and interactions.

5. The neurodiverse population in the world is about _____
Neurodiversity
The neurodiverse population in the world is about _____

6. The neurodiverse population in the world is about _____
Neurodiversity
The neurodiverse population in the world is about _____
20 %
As these conditions are frequently co morbid it is difficult to estimate the total number of children and adults in the population who are experiencing some difficulties from one, or a combination of the neurodiversity. Many children never get diagnosed, or do so later in life after years of struggling or at a crisis point in their lives.

7. Neurodiversity Challenges Planning Organizing Memory Concentration
Shifting attention
Multitasking
These ‘ailments’ can be viewed as superpowers. They come with positives that can make people incredibly valuable. 

8. Web design process
Strategy: why we do it, who are we doing it for, why they need it. User needs and business objectives.
Scope: Defines the functional and content requirements. 
Structure: Defines how users interact with the product
Skeleton: Skeleton determines the visual form on the screen. (i.e., laptop, tablet, smartphone, wearable)
Surface: It’s the sum total of all the work and decisions we have made. 
The Five Elements of UX
As the user experience includes the majority elements of web design let’s see the 5 layers described in “The Elements of User Experience” book written by Jesse James Garrett.
There are five dependent layers, each level builds on the level before it, and they start with abstract level towards concrete one(from bottom to top).
“The Elements of User Experience” book written by Jesse James Garrett

9. Online shop – Strategy and Scope
An Online shop, available 24/7.
Main content: Products, Search, Sign-up and Log In, and Check out.
Side content: Returns, Shipping, Contact Us, Support.

10. Online shop * Structure
Taken from

11. Online shop * Skeleton (Wireframing) and Surface
Variation of a page according to the media/interface.
Simplicity

13. Content / Information structure
Give one instruction at a time
Point out the important information
Use clear and direct language (readability test tool)
Prioritize by importance
Write in plain language, icons and idioms is not recommended.
Simple sentences and bullets.
Do not underline, use italics and only capitals.

14. User Interface (UI) elements
Background
Typography
Button styles
Navigation bar
Alert styles
Form elements
Checkboxes and radio buttons
Link: Colour contrast checker
No images as background, good contrast between background, font and images.
There are many contrast checkers online.

15. User Interface (UI) elements
Background
Typography
Button styles
Navigation bar
Alert styles
Form elements
Checkboxes and radio buttons
clear, simple and size adjustable

16. User Interface (UI) elements
Background
Typography
Button styles
Navigation bar
Alert styles
Form elements
Checkboxes and radio buttons
Make buttons descriptive, never ever again use Click here button.
It applies as well for links and headers

17. User Interface (UI) elements
Background
Typography
Button styles
Navigation bar
Alert styles
Form elements
Checkboxes and radio buttons
Breadcrumb:
Clickable navigation

18. User Interface (UI) elements
Background
Typography
Button styles
Navigation bar
Alert styles
Form elements
Checkboxes and radio buttons
1 in 12 men (8%) and 1 in 200 women in the world.  Red-green colour blindness is the most common form, followed by blue-yellow colour blindness and total colour blindness.
If you’ve used red text for negative items and green text for positive items mixed together in a single list.
Do a print preview of your pages in black and white. 
Don’t rely on colour only to tell your story — enhance colour with labels, icons, or other visual markers.
error messages display.
Icon with label warnings: success is green with a checkmark or tick. Error is red with a cross, warning is yellow with an exclamation mark, and general information is blue with an icon of a letter i.
Colour blind population

19. User Interface (UI) elements
Background
Typography
Button styles
Navigation bar
Alert styles
Form elements
Checkboxes and radio buttons
When an item receives focus and contrast, is that item styled in such a way that the focus is obvious?
Tab through the entire page using the ‘Tab’ key. Does the tab order make sense?
Are there any keyboard traps? A “keyboard trap” occurs when a person using a keyboard cannot move away from an interactive element/control using just the keyboard.
For video content use captions, and a transcript. An option to pause and stop. Do not limit time to fill forms. Give enough time to complete an action.
Advise to save work and continue later
Buttons and notifications in contexts, close enough to show the correlation.
Do not use the placeholder attribute as a substitute for the label.
Closed Caption

20. User Interface (UI) elements
Background
Typography
Button styles
Navigation bar
Alert styles
Form elements
Checkboxes and radio buttons
Large clickable actions and spaces, do not demand precision
Clickable elements enough space.

21. Chemist Warehouse website

23. Mailchimp.com

24. City of Cockburn website

25. Please contact me for questions, comments or to know more about my research:
Mobile phone:
Twitter @cladep1