1 / 25

Web Design for Neurodiverse Users

Learn how to design websites that are accessible and user-friendly for neurodiverse individuals. Explore techniques for visual communication, interface design, and user experience design. Discover the challenges faced by the neurodiverse population and how to address them in your design process.

dennisj
Download Presentation

Web Design for Neurodiverse Users

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web design for neurodiverse usersClaudia De Los Rios PerezPh.D. candidate, Curtin UniversityPerth Web Accessibility CampFebruary 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.

  3. Neurodiversity Neuro = brain (Neuro system) Diverse = range of different kinds Neuro-typical = Most common condition Neuro-diverse

  4. Neurodiversity • Dyspraxia • Dyscalculia • Dyslexia • ADHD Attention deficit hyperactivity disorder • Tourette syndrome • Autism Spectrum disorder • And other conditions.

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

  6. Neurodiversity The neurodiverse population in the world is about _____ 20 %

  7. Neurodiversity • Challenges • Planning • Organizing • Memory • Concentration • Shifting attention • Multitasking

  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 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 https://www.i95dev.com/how-to-structure-an-online-store/

  11. Online shop* Skeleton (Wireframing) and Surface • Simplicity

  12. 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

  13. User Interface (UI) elements • Background • Typography • Button styles • Navigation bar • Alert styles • Form elements • Checkboxes and radio buttons Link: Colour contrast checker

  14. User Interface (UI) elements • Background • Typography • Button styles • Navigation bar • Alert styles • Form elements • Checkboxes and radio buttons

  15. User Interface (UI) elements • Background • Typography • Button styles • Navigation bar • Alert styles • Form elements • Checkboxes and radio buttons

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

  17. User Interface (UI) elements • Background • Typography • Button styles • Navigation bar • Alert styles • Form elements • Checkboxes and radio buttons Colour blind population

  18. User Interface (UI) elements • Background • Typography • Button styles • Navigation bar • Alert styles • Form elements • Checkboxes and radio buttons Closed Caption

  19. User Interface (UI) elements • Background • Typography • Button styles • Navigation bar • Alert styles • Form elements • Checkboxes and radio buttons

  20. 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

More Related