Inclusive Design

The benefits of designing for the full range of diversity and how you can integrate it into your process better.

Transcript

1. INCLUSIVE
   UX/UI DESIGN
   @jason_markle
   

   View Slide

2. Inclusive UX/UI Design
   ACCESSIBILITY VS INCLUSIVE DESIGN
   @jason_markle
   Accessibility means that people with disabilities can perceive,
   understand, navigate, and interact with websites and tools, and that
   they can contribute equally without barriers.
   Inclusive design involves designing products to be usable by everyone
   to the greatest extent possible, without the need for adaptation.
   —W3C
   

   View Slide

3. Inclusive UX/UI Design
   THE BENEFITS
   @jason_markle
   Increased access (Performance, Semantic code)
   Reduced friction (User Interface, Accessibility)
   More emotional context (Solid Info Architecture, Easy to complete tasks)
   1
   2
   3
   

   View Slide

4. Inclusive UX/UI Design
   THE FIRST STEP
   @jason_markle
   The first step in designing inclusively
   is to
   recognize exclusion.
   

   View Slide

5. Inclusive UX/UI Design
   UNDERSTAND
   @jason_markle
   Disability = Mismatched human interaction
   Learn from diversity.
   

   View Slide

6. Inclusive UX/UI Design
   CONSIDER
   @jason_markle
   Increased mobility of technology = increased moments of disability
   We can solve for one, and
   extend to many.
   

   View Slide

7. Inclusive UX/UI Design
   PERSONA SPECTRUM
   @jason_markle
   TOUCH
   SEE
   HEAR
   SPEAK
   PERMANENT TEMPORARY SITUATIONAL
   One arm
   Blind
   Deaf
   Non-verbal
   Arm Injury
   Cataract
   Ear Infection
   Laryngitis
   New parent
   Distracted Driver
   Bartender
   Heavy accent
   

   View Slide

8. Inclusive UX/UI Design
   CASE AND POINT
   @jason_markle
   Device Screen
   Comfy
   Strenuous
   OUCH!
   Jess only has one arm due to a birth
   defect. They have a limited ability to
   clutch the device because of a
   permenant disability.
   

   View Slide

9. Inclusive UX/UI Design
   SOLUTION
   @jason_markle
   Device Screen
   Comfy
   Strenuous
   OUCH!
   By adding navigation within the
   comfy part of the screen and docking
   it there, Jess can always navigate the
   site easily and efficiently using the
   native site or app design.
   Menu
   

   View Slide

10. Inclusive UX/UI Design
    Extent of Solution
    PRACTICE WHAT YOU PREACH
    @jason_markle
    ONE MANY
    

    View Slide

11. Inclusive UX/UI Design
    PERSPECTIVE
    @jason_markle
    Inclusive
    Tools
    Method
    Mindset
    User
    We are the tool to reintroduce
    diversity into our work.
    Itʼs up to us to create a system
    of checks and balances that
    measure the inclusivity of the
    designs we produce.
    

    View Slide

12. Inclusive UX/UI Design
    PROCESS
    @jason_markle
    All developers have a different workflow
    Workflow is not process
    All processes should start with inclusivity in mind
    1
    2
    3
    

    View Slide

13. Inclusive UX/UI Design
    STEPS
    @jason_markle
    Identify the needs of your users
    Solve how someone with a permanant disability completes that
    need
    Extend that solution to all users in a semantic and accessible
    way
    1
    2
    3
    

    View Slide

14. Inclusive UX/UI Design
    ADDITIONALLY
    @jason_markle
    Audit content for readability
    Identify content gaps
    Create an information architecture
    1
    2
    3
    

    View Slide

15. Inclusive UX/UI Design
    DESIGN
    @jason_markle
    Create a style guide
    Mock it all up
    (AS A MOBILE VIEW)
    1
    2
    Logo Space
    Search Action
    Connect with us
    Main Content Sidebar
    Navigation
    THIS
    IS
    GARBAGE!
    

    View Slide

16. Inclusive UX/UI Design
    IT’S NOT AS HARD AS IT SOUNDS
    @jason_markle
    The best part about inclusive design is that you can start doing it
    right now.
    Recognize exclusion
    Learn from diversity
    Create a solution that can be extended to as many people as
    possible
    1
    2
    3
    

    View Slide

17. THANK YOU
    @jason_markle
    

    View Slide