0
Dyslexia and web interaction:  Examining visual attention on web navigation structures with eye tracking Areej Al-Wabil, P...
Overview <ul><li>Dyslexia and web interaction  </li></ul><ul><li>Exploratory study of web navigation: Strategies and  pers...
What is dyslexia? <ul><li>C ognitive difficulty with the written form of language  </li></ul><ul><li>I ndependent of intel...
How does dyslexia affect technology use? April 2, 2008 Akiyoshi Kitaoka,  Rotating Snakes  (2003).  This picture by Kitaok...
Visual processing difficulties April 2, 2008
Reading and writing difficulties April 2, 2008
Technology assistance <ul><li>Dyslexia is a highly individual condition </li></ul><ul><li>Previous work has focused on int...
<ul><li>Sense Making Methodology: User-centred approach to studying and understanding users and designing systems to serve...
Example 1 – Navigating within a web site <ul><li>Consistent location of main navigation </li></ul><ul><li>Dynamic navigati...
<ul><li>Most participants were not aware of their existence – even on sites they visit often </li></ul><ul><li>Were not pe...
Exploratory study: Key findings <ul><li>Dyslexics face many of the same problems that users experience on the web, but wit...
Investigating the visual search of web pages <ul><li>The exploratory study yielded results suggestive of the presence of p...
What is eye tracking?  April 2, 2008 Attention deployment Target processing Visual search Video of gaze replay
Eye tracking: Seeing through dyslexics’ eyes <ul><li>Eye movement researchers have used eye tracking devices to examine th...
Seeing through dyslexics’ eyes: Investigating dyslexics’ visual scan paths on the web <ul><li>The problem of how cognitive...
Eye tracking: Seeing through dyslexics’ eyes <ul><li>User population </li></ul><ul><ul><li>Difficulties in articulating th...
Study design <ul><li>Data collection </li></ul><ul><ul><li>Performance Measures </li></ul></ul><ul><ul><ul><li>Efficiency ...
Cognitive profiles and eye tracking April 2, 2008 Cognitive Profile
Preparing data for analysis April 2, 2008 Creating segments and defining scenes Creating filters and generating plots & maps
Design: Seeing through dyslexics’ eyes <ul><li>Audio/Video capture </li></ul><ul><ul><li>Annotating gaze replay </li></ul>...
Analysis: Dyslexics’ visual search  <ul><li>What are the dyslexic impairments that can cause functional difficulties speci...
Visual attention on web pages <ul><li>Do dyslexics exhibit distinctive web navigation behaviour? </li></ul>April 2, 2008 D...
Design: Seeing through dyslexics’ eyes <ul><li>Example: Strategic search patterns </li></ul>April 2, 2008 Dyslexics Contro...
<ul><li>Explore how dyslexic difficulties (e.g. weak short term memory) relate to behaviour and performance measures? </li...
Analysis: Dyslexics’ visual search  April 2, 2008 Export to statistical software packages Statistical analysis provided by...
Final notes <ul><li>Performance data does not always tell the whole story. Eye movements provide a more complete picture o...
Thank you Areej Al-Wabil, Panayiotis Zaphiris, Stephanie Wilson Centre for HCI Design, City University London, UK [email_a...
Upcoming SlideShare
Loading in...5
×

brighton

893

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
893
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "brighton"

  1. 1. Dyslexia and web interaction: Examining visual attention on web navigation structures with eye tracking 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>April 2, 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>April 2, 2008
  4. 4. How does dyslexia affect technology use? April 2, 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 April 2, 2008
  6. 6. Reading and writing difficulties April 2, 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>April 2, 2008 SeeWord: Gregor et al. (2003) SpeakOut: Evans & Blenkhorn (2005)
  8. 8. <ul><li>Sense Making Methodology: User-centred approach to studying and understanding users and designing systems to serve their needs </li></ul>Exploratory Study: Web navigation April 2, 2008 Dervin, B. (1992). From the mind’s eye of the user: the sense-making qualitative-quantitative methodology.
  9. 9. Example 1 – Navigating within a web site <ul><li>Consistent location of main 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>April 2, 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 April 2, 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>April 2, 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>April 2, 2008  Examine dyslexics’ visual attention and web exploration patterns through eye tracking. Image source: Tobii.com
  13. 13. What is eye tracking? April 2, 2008 Attention deployment Target processing Visual search Video of gaze replay
  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>April 2, 2008
  15. 15. Seeing through dyslexics’ eyes: Investigating dyslexics’ visual scan paths on the web <ul><li>The problem of how cognitive deficits associated with dyslexia affect web navigation is addressed in this study </li></ul><ul><li>Objectives: </li></ul><ul><ul><li>1. Gain insight into how dyslexics view web pages and make sense of navigation structures on web sites </li></ul></ul><ul><ul><li>2. Formulate hypotheses about the effect of dyslexic cognitive impairments on web navigation </li></ul></ul><ul><ul><li>3. Empirically test hypotheses by examining dyslexic eye movements in navigation </li></ul></ul><ul><ul><li>4. Distil findings of the empirical investigation into a set of design implications for accessibility designers and researchers </li></ul></ul>April 2, 2008
  16. 16. Eye tracking: Seeing through dyslexics’ eyes <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 not fully understood </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>April 2, 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)
  17. 17. 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>April 2, 2008 Accessible Inaccessible Site Nav Info Task Experimental design
  18. 18. Cognitive profiles and eye tracking April 2, 2008 Cognitive Profile
  19. 19. Preparing data for analysis April 2, 2008 Creating segments and defining scenes Creating filters and generating plots & maps
  20. 20. Design: Seeing through dyslexics’ eyes <ul><li>Audio/Video capture </li></ul><ul><ul><li>Annotating gaze replay </li></ul></ul><ul><li>Think-aloud protocol </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>calibration </li></ul></ul><ul><ul><li>run through a task </li></ul></ul>April 2, 2008
  21. 21. 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>April 2, 2008 Gaze Plot Heat Map
  22. 22. Visual attention on web pages <ul><li>Do dyslexics exhibit distinctive web navigation behaviour? </li></ul>April 2, 2008 Dyslexics Control Group
  23. 23. Design: Seeing through dyslexics’ eyes <ul><li>Example: Strategic search patterns </li></ul>April 2, 2008 Dyslexics Control Group
  24. 24. <ul><li>Explore how dyslexic difficulties (e.g. weak short term memory) relate to behaviour and performance measures? </li></ul>Analysis: Dyslexics’ visual search April 2, 2008 Direction of scanpaths, # of fixations Dwell time, spatial density of fixations Apply filter WeakMemory  Examine data
  25. 25. Analysis: Dyslexics’ visual search April 2, 2008 Export to statistical software packages Statistical analysis provided by Studio
  26. 26. 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>Relating eye tracking metrics to cognition. Temptation to over interpret </li></ul><ul><li>Distil findings of this empirical investigation into a set of design implications for accessibility designers and researchers </li></ul>April 2, 2008
  27. 27. Thank you Areej Al-Wabil, Panayiotis Zaphiris, Stephanie Wilson Centre for HCI Design, City University London, UK [email_address] Presentation: http://www.slideshare.net/areejalwabil/brighton April 2, 2008
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×