Inclusive Design Lecture


Published on

Published in: Technology, Education
1 Comment
  • Good to see Tobii being used for more than just usability on websites!
    Please join the eye tracking group here!
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Inclusive Design Lecture

  1. 1. Dyslexia and web interaction: Seeing through dyslexics’ eyes Areej Al-Wabil, Panayiotis Zaphiris, Stephanie Wilson Centre for HCI Design, City University London
  2. 2. Overview <ul><li>Dyslexia and web interaction </li></ul><ul><li>Exploratory study of web navigation: Strategies and personalised approaches </li></ul><ul><li>Investigating dyslexics’ visual search of web pages through eye tracking </li></ul>March 11, 2008
  3. 3. What is dyslexia? <ul><li>C ognitive difficulty with the written form of language </li></ul><ul><li>I ndependent of intellectual, cultural, and emotional causation </li></ul><ul><li>N eurobiological in origin, persistent condition </li></ul><ul><li>H ighly individual condition – combination of difficulties and abilities that affect people to varying degrees of severity </li></ul><ul><ul><li>D ifficulties: reading, writing, spelling, auditory processing, visual processing, directional confusion, weakness in short term memory, organisation, sequencing, orientation </li></ul></ul><ul><ul><li>S trengths: Intuitive problem solving, creativity, good at visualisation, making links between things and seeing connections </li></ul></ul>March 11, 2008
  4. 4. How does dyslexia affect technology use? March 11, 2008 Akiyoshi Kitaoka, Rotating Snakes (2003). This picture by Kitaoka appears to move due to the luminance contrast between the black, blue, white, and yellow.
  5. 5. Visual processing difficulties March 11, 2008
  6. 6. Visual processing difficulties March 11, 2008
  7. 7. Technology assistance <ul><li>Dyslexia is a highly individual condition </li></ul><ul><li>Previous work has focused on interface design issues concerned with readability. </li></ul><ul><li>Navigating the web is affected by a range of issues beyond the readability of text </li></ul><ul><ul><ul><li>working memory </li></ul></ul></ul><ul><ul><ul><li>order perception skills </li></ul></ul></ul><ul><ul><ul><li>visual-spatial abilities </li></ul></ul></ul>March 11, 2008 SeeWord SpeakOut
  8. 8. Exploratory Study: Web navigation <ul><li>Sense Making Methodology: User-centred approach to studying and understanding users and designing systems to serve their needs </li></ul>March 11, 2008
  9. 9. Example 1 – Navigating within a web site <ul><li>Consistent location of main navigation </li></ul><ul><ul><li>Inconsistent navigation causes disorientation </li></ul></ul><ul><li>Scrolling difficulties – visible navigation </li></ul><ul><li>Dynamic navigation </li></ul><ul><ul><li>Sensitivity to cursor movements </li></ul></ul><ul><ul><ul><li>Eye hand coordination / Dyspraxia </li></ul></ul></ul><ul><ul><li>Overlapping text </li></ul></ul><ul><ul><ul><li>Reading difficulties </li></ul></ul></ul><ul><ul><li>Reduces onscreen complexity </li></ul></ul><ul><ul><ul><li>Visual Processing </li></ul></ul></ul>March 11, 2008
  10. 10. <ul><li>Most participants were not aware of their existence – even on sites they visit often </li></ul><ul><li>Were not perceived as useful aids </li></ul><ul><ul><li>exacerbate their difficulties </li></ul></ul><ul><ul><li>too much information </li></ul></ul>‘ I find those - pointing to sitemaps - difficult to look at… The text gets blurred and starts moving around. Sometimes I feel a bit of anxiety coming and I need to take a break.’ Example 2 – Sitemaps March 11, 2008
  11. 11. Exploratory study: Key findings <ul><li>Dyslexics face many of the same problems that users experience on the web, but with greater severity and in some cases to a degree in which these problems inhibit access to web content (e.g. animations and sitemaps) </li></ul><ul><li>Dyslexic difficulties and strengths directly influence their search strategies on the web </li></ul><ul><li> consistency in the design </li></ul><ul><li> provide alternative aids </li></ul><ul><li>Despite the existence of many standards-conforming web sites, the web still suffers from many deficiencies in support for navigation, particularly for users with dyslexia </li></ul>March 11, 2008
  12. 12. Investigating the visual search of web pages <ul><li>The exploratory study yielded results suggestive of the presence of patterns in scanning web pages by dyslexic users that may be different from typical web users. </li></ul>March 11, 2008  Investigate the visual scanning of web pages by examining dyslexics’ visual attention and web exploration patterns through eye tracking. Image source:
  13. 13. How can eye tracking help my work? <ul><li>User population </li></ul><ul><ul><li>Difficulties in articulating their thoughts </li></ul></ul><ul><ul><li>Faulty eye movements </li></ul></ul><ul><ul><li>Causes of the problem are still debated by researchers </li></ul></ul><ul><ul><li>Attentional processes </li></ul></ul><ul><ul><ul><li>Eye-mind hypothesis </li></ul></ul></ul><ul><ul><ul><li>Reliable measure of attentional mechanisms </li></ul></ul></ul>March 11, 2008 Do Don’t do Diagonal of indecision Benefit of doing Cost of doing Low High High  Decision-plane model of the costs and benefits of using eye tracking in my study Adapted from (Rosenthal & Rosnow, 1984)
  14. 14. Eye tracking: Seeing through dyslexics’ eyes <ul><li>Eye movement researchers have used eye tracking devices to examine the visual scan path of dyslexics </li></ul><ul><li>It has been established that visual scan paths of dyslexics differ in reading and non-reading tasks </li></ul><ul><li>Dyslexic readers make longer fixations, more fixations, shorter saccades and more regressions than non-dyslexic readers. </li></ul>March 11, 2008
  15. 15. Seeing through dyslexics’ eyes: Investigating dyslexics’ visual scan paths on the web <ul><li>In depth observation study: compare eye movement behaviour of dyslexic and non-dyslexic users in their interaction with the web </li></ul><ul><li>The problem of how cognitive deficits associated with dyslexia affect web navigation is addressed in this investigation </li></ul>March 11, 2008 Video: Gaze replay
  16. 16. Study design <ul><li>Data collection </li></ul><ul><ul><li>Performance Measures </li></ul></ul><ul><ul><ul><li>Efficiency – time on task </li></ul></ul></ul><ul><ul><ul><li>Effectiveness – number of errors </li></ul></ul></ul><ul><ul><li>Process measures </li></ul></ul><ul><ul><ul><li>Fixations </li></ul></ul></ul><ul><ul><ul><li>Attention switching </li></ul></ul></ul><ul><ul><ul><li>Scan path similarity </li></ul></ul></ul><ul><li>User selection </li></ul><ul><ul><li>Representative sample </li></ul></ul><ul><ul><li>Experimental and control groups </li></ul></ul><ul><li>Task and Stimuli selection </li></ul><ul><ul><li>Navigation – ‘find a page..’  menus </li></ul></ul><ul><ul><li>Informational – ‘find the contact number for..’  read/scan </li></ul></ul><ul><ul><li>Exploration – free viewing  memory </li></ul></ul>March 11, 2008 Accessible Inaccessible Site Nav Info Task Experimental design
  17. 17. Dealing with data: preparation & recording March 11, 2008 Cognitive Profile
  18. 18. Preparing data for analysis March 11, 2008 Creating segments and defining scenes Creating filters and generating plots & maps
  19. 19. Design: Seeing through dyslexics’ eyes <ul><li>Think-Aloud </li></ul><ul><ul><li>Concurrent </li></ul></ul><ul><ul><li>Retrospective - with or without gaze replay </li></ul></ul><ul><li>Care with movement </li></ul><ul><ul><li>run through a task </li></ul></ul><ul><li>Audio/Video capture </li></ul><ul><ul><li>Annotating gaze replay </li></ul></ul>March 11, 2008
  20. 20. Design: Seeing through dyslexics’ eyes <ul><li>Do dyslexics exhibit distinctive web navigation behaviour? </li></ul>March 11, 2008 Dyslexics Control Group
  21. 21. Design: Seeing through dyslexics’ eyes <ul><li>Example: Strategic search patterns </li></ul>March 11, 2008 Dyslexics Control Group
  22. 22. Analysis: Dyslexics’ visual search <ul><li>What are the dyslexic impairments that can cause functional difficulties specifically in relation to interacting with web navigation structures? </li></ul>March 11, 2008 Gaze Plot Heat Map
  23. 23. <ul><li>Explore how dyslexic difficulties (e.g. weak short term memory) relate to behaviour and performance measures? </li></ul>Analysis: Dyslexics’ visual search March 11, 2008 Direction of scanpaths, # of fixations Dwell time, spatial density of fixations Apply filter WeakMemory  Examine data
  24. 24. Analysis: Dyslexics’ visual search March 11, 2008 Export to statistical software packages Statistical analysis provided by Studio
  25. 25. Final notes <ul><li>Performance data does not always tell the whole story. Eye movements provide a more complete picture of interaction by filling in the gaps between observable events. </li></ul><ul><li>Participant set-up is important </li></ul><ul><li>Apply selectively to the right problems </li></ul><ul><li>Temptation to over interpret </li></ul><ul><li>Relating eye tracking metrics to cognition </li></ul>March 11, 2008
  26. 26. Thank you Areej Al-Wabil, Panayiotis Zaphiris, Stephanie Wilson Centre for HCI Design, City University London, UK [email_address] [email_address] [email_address] March 11, 2008