Adaptive UI for vision impaired users

Most prior research into adaptable and adaptive user interfaces primarily focuses on facilitating consistent user experiences across devices and pays less attention to facilitating universal access for diverse end users. We address this shortcoming by developing adaptable user interface components for a category of diverse users, the vision impaired. This paper presents a framework that supports run time adaptation of web components to suit vision impaired users by using a set of adaptable, reusable widgets. We developed a prototype using these components and evaluated its effectiveness. Our results show that an such an adaptable user interface provides significant benefit in many key W3C accessibility areas, helping to make the web more accessible for diverse end users.

Project aim

Existing functionalities of the web do not get adopted based on a person's’ disability, i.e. green-red colour blindness filter applied on page on Zomato website to simulate view of green-red colour blind user (image above left).

  • Poor colour contrast
  • Difficult to see links as the font colour becomes light yellow

The aim of this project was to explore the challenges faced by those with vision impairment, specifically colour blindness and partial sightedness, and provide these diverse users with a better user experience.

The project sought to answer the following questions:

  1. What are the limitations surrounding current frameworks that support adaptive UI? 
  2. How can we determine the degree and type of accessibility required by diverse end users?
  3. When used does our adaptive user interface framework impact user accessibility?

What did we do?

Developed a framework using Adaptive Widgets using Flutter. Using this framework, a site will adapt it’s UI based on users preferences.

Project findings

During the user evaluation, we found the website with adaptive UI ranked higher in in ‘All elements’ and specifically in -

  • Color/Differentiate without Colour
  • Contrast
  • Text Size

Conclusions

The student group were able to present a framework that grants the user autonomy to modify the interface based on their preferences. The evaluation indicated that an adaptive Zomato outperformed the original Zomato website in all anticipated sections from the W3C guidelines for accessibility. Participants found the functionality provided by the accessibility menu helpful for their simulated vision deficiency, enabling them to easily view certain elements on the website.

It is recommended that future work focus on enhancing this accessibility configuration menu, explore in more detail other W3C guidelines such as ‘Customise at an element level’ and assess the implementation of adaptive screen reader capabilities for users with no vision.

Publication

  • Luy, C., Law, J., Ho, L., Matheson, R., Cai, T., Madugalla, A., Grundy, J.C., A Toolkit for Building Adaptive User Interfaces for Vision-impaired Users, 2021 IEEE Symposium  on Visual Languages and Human-centric Computing (VLHCC2021), 10-13 October, St Louis, USA -- Author pre-published version PDF

Tool Source Code

Project Lead

2020 Students enrolled in FIT4003 unit,

  • Calvin Luy
  • Jeremy Law
  • Lily Ho
  • Richard Matheson
  • Tracey Cai

Project Supervisors

Adaptive UI for vision impaired users image