TL; DR Skimming a website is difficult for visually impaired users because they do not have access to visual cues. This concept works with screen readers to enable the eyes-free skimming of websites.
Location: Capstone project funded by Mozilla Research Grant 2018
Role: Interaction Design, UX Research, Independent project
Methods: Research by design, Moderated remote usability tests,
Tools: Sketch, Dreamweaver, Javascript, Web Audio APIs, Trello
Thus, visually impaired users need a lot of time to get a high-level overview of the web content. However, sighted users rely on visual cues to quickly skim through web content. This gap in web experience hinders the ability to explore many websites in a short time, which can be frustrating.
How might we enable web content skimming when using a screen reader?
Visually impaired users miss out on the usefulness of the website because valuable content is difficult to reach quickly.
Many changes on the websites are conveyed visually, making changes difficult to identify and unclear.
Many users find it difficult to trace the source of validation errors while filling forms.
The ability to add custom markers or flags allows users to retrace the web content enabling selective focus.
This concept complements screen reader output without being obtrusive. Further, the sounds are inspired by real-world counterparts to add materiality to the web experience.
Let's look at the design process that led to this design!
Current screen readers do not provide a quick overview of the website. Hence, visually impaired users have to sequentially tab through several UI elements before they can decide whether the website is useful. This requires a lot of time.
“Sometimes, I do not even pay attention to the screen reader. I quickly go to the part which I need by tabbing.”
"I do online shopping, read the news, or connect with my friends on social networking sites. But, I miss out on so much content until someone says something."
“Often, I am unaware of what changed on the website if I click on something. For example, am I already logged in?”
"Learning screen readers was not easy. It took me a while to get used to it. So I played a lot of games!"
Key finding: Visually impaired users miss out on a lot of information and changes on the websites.
I realized that any design change should make learning screen readers easier for new users. But, it should not hinder experienced users who have been using it for more than 20 years. Creating persona inspired by user stories helped to portray user intentions.
"Using JAWS is second nature to me. It has been there since I was 15, I know it is not perfect, but it works."
"Getting used to a screen reader has been a challenge. I had to practice a lot to get this good!"
Key learning: Experienced users rely on their workarounds to overcome the pain points while using screen readers. New users need assistance to get used to screen readers.
I began by speculating a future where web experience is conveyed by audio instead of sight. Then I mapped several discernable properties of sound to replace visual cues. This led to acoustic experience ideas beneficial towards six kinds of websites.
Key learning: Several properties of sound such as pitch, frequency, position, distance, stereo image, space (wet/dry reverb percentage, type of reflections), envelope (Attack, Decay, Sustain, Release) have functional qualities. Moreover, cohesiveness and compositional properties have aesthetic qualities.
After building the prototypes, moderated remote evaluations were done with 10 participants. First, the participants were asked to familiarize themselves with sounds and their purpose. Later they interacted with the prototypes, which imitated the problematic situations. Finally, participants were asked to describe their experience by filling the google form. Let's look at the key findings.
View prototypes now
User evaluations demonstrated the usefulness of audio signifiers in specific scenarios. Additionally, it unveiled that users needed tutorials to learn various ways to use audio signifiers. Moreover, they expressed the need for customization. Hence, I created a workflow to enable customization and learning through tutorials.
I felt the pressure of achieving deadlines as the project was funded by the Mozilla research grant. My ability to handle pressure and doing whatever it takes enhanced greatly!
Recruiting participants was tricky. Hence, I had to think out of the box and publish podcast-style audio to get people interested.
The next steps in this project are conducting remote moderated evaluation studies for Phase 3 and writing a deadline ready research paper.
