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

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.

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.

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.

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

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.

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. 

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

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.

Online shop * Structure Taken from https://www.i95dev.com/how-to-structure-an-online-store/

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

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.

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.

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

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

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

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

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

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.

Chemist Warehouse website

Mailchimp.com

City of Cockburn website

Please contact me for questions, comments or to know more about my research: Email: claudia.delosriosperez@curtin.edu.au Mobile phone: 0415 911 205 Twitter @cladep1