Artboard – 2.png

UX Design

UI8-mockups4K-macbook.jpg
 
 

Image Enhancer

Self-directed project (2019)

 

Overview

Perceiving web images is challenging for people with low vision. Through this project, I explored image enhancement filters as a tool for more accessible images.

 
 
 

 

Problem

Existing vision aid accessibility tools provide
limited customization for image manipulation.

 

Solution

I built a Chrome extension allowing users to build customized photo filters and apply on web images.

 
 
 

 
 
 

Brief

Vision loss is a complex disability. The term "low vision" refers to a non-correctable visual impairment through surgery, pharmaceuticals, glasses, or contact lenses. One of the common misconceptions about vision loss is that it is a black-and-white disability. However, there is a large grey area called “low vision” exists between the two extremes of being blind and being fully sighted. Compared to its complexity, accessibility tools provide solutions that are too simple to be effective for a broad range of low vision users. Therefore, many users still experience some level of difficulty in perceiving images with these tools.

 
 
 
 
 
 

 

Research

To find the root of the problem, I penned down questions came to my mind. Then I did my research to find an answer to each question.

There were three types of research I did.

  1. Textual research

  2. Interviewing experts in related fields

  3. Interviewing target users

From these research methods, I was able to collect information about pain points from the use of accessibility tools and their strategies to bypass these struggles.

 
 
 
 
 
 

Findings

I learned that people with low vision have the same motivation to access images as fully sighted people. However, many of them are discouraged by them not being accessible to them. Some people use their own strategy to overcome their accessibility issues.

1. Some people ask for help from their family, friends, and peers. However, they are not always available to assist them.

2. Modifying the hardware setup is another way to bypass the perceived visibility issue, but it generally takes a longer time than digital image modification. e.g. adjusting monitor settings.

3. Some people with low vision use additional photo editing applications to enhance images. They experience difficulty using them as they are not primarily designed to support people with low vision.

 
 

From the research, I noticed that the fundamental problem comes from a lack of accessibility support for web images.

 
 
 

 

Problems with current low vision accessibility tools

Which part of these accessibility tools are lacking in support for images? I did a competitive analysis of common low vision accessibility apps to find out the reasons.

 
 
comparison.png
 

The chart above shows accessibility options related to images. Among them, color changers are ones directly manipulate images. However, accessibility options are presented in dichotomous way.

Here are some examples I found from common accessibility tools.

Accessibility options in Windows 10 OS. Color filters are available as toggle mode.

Accessibility options in Windows 10 OS. Color filters are available as toggle mode.

 
 
Google High Contrast provides accessibility options in toggle mode as well.

Google High Contrast provides accessibility options in toggle mode as well.

 
 

There are two major problems with the toggle mode.

  1. It covers a narrower range of users.

  2. The effectiveness of the solution diminishes as users deviate from the target user group.

This type of approach works well for text enhancement though. As long as text maintains a certain contrast ratio to the background, it will be readable regardless how distinctive it is to the background color. On the other hand, images have more complex data. Each pixel value is different therefore finding a right balance to make all pixels optimally visible is important.

As an example, let’s say there is a contrast enhancement option optimized for people with moderate vision loss. Providing this option in toggle mode will be less effective to users closer to the left or right extreme.

Web 1920 – 2.png
 
 

Customizable options can make the solution equally effective to a broad range of users. e.g. providing contrast enhancement in a slider format.

Web 1920 – 3.png
 
 

 

Prototype V1

From the research stage, I found that there are two major variables affects the perceived visibility: contrast and sharpness. For instance, Leat’s scholarly article shows that moderately sharpened images with high contrast provides optimal visibility to people with low vision.

Therefore, I decided to build a two slider pop-over application.

 
 
 
 
 
 
sketch – 2.png
 
 

This is the final UI for prototype V1. The page has an app title, a short description, contrast, and sharpness sliders and a button to switch themes.

 
 
 
 

Here you can see how the prototype works on a Chrome browser.

 
 
 
 
 

Feedback

I conducted usability testing with a focus group. Each session was about an hour, it consists of 40 minutes of observation and 20 minutes of the in-person interview. These were the main questions I investigated during the sessions:

  1. How does the app improve perceived visibility of web images?

  2. How well does the app integrate with the user’s web experience?

  3. Are there any additional features that might help users perceive images better?

 
 
 
 
questionaire@2x.png
 
 

Here are some notes from the interviews:

  • Sliders are a more suitable form to fulfill users’ needs than checkboxes.

  • There is a demand for more filter options.

  • Photo enhancement has a reduced effect on small images.

  • The text font is too small for some participants.

  • Accessibility of the text in the image is still low.

Key Findings

  • Users appreciate flexibility in filter customization.

  • Considering other variables is important to increase the perceived visibility of the image.

 
 
 
 

 
 
 

Prototype V2

 

User testing helped me to identify peripheral problems around perceiving web images. One of the biggest weakness of the first prototype was that it has reduced effectiveness on low-resolution images.

In many cases, low-resolution images are resized ones. A good example is image search results which display resized thumbnail images. There were two major obstacles preventing thumbnail images from being more accessible to people with low vision.

 
 
 
  1. Thumbnail images are too small to identify
    it is difficult for people with low vision to do a quick check on thumbnail contents. Enlarging thumbnail images using screen magnifier apps is an option but it gets pixelated as they do not have an optimal resolution.

  2. Access to raw images takes multiple mouse click
    Sometimes people want to view raw images. Accessing raw images on the web is not convenient as it requires users to go to the source page and find a direct link of them.


 
 

From here I came up with solutions for these issues. First one is the preview window, which displays higher resolution images when the mouse cursor is on thumbnails. The second one is the gallery page, which displays the raw image in the separate tab upon clicking thumbnail while pressing the Ctrl key.

V2_3.gif
 
 
 
 
 

The chart down below is the comparison of user flows.

Web 1920 – 1.png
 
 
 

 

I came up with an idea of integrating image manipulation sliders with a gallery page. I opted for the side navigation bar on the left. The settings panel has two-page levels, which is general settings and filter settings.

 
 
 

General settings

V2_4.gif

This is the first level settings page. From here, users can activate three features.

  1. Auto full-screen mode

    This feature activates the full-screen mode when raw images are loaded.

  2. Smart background

    This feature changes the background color to maintain the optimal contrast ratio to loaded images (higher than 4.5:1).

  3. Text Detection

    This feature detects text in the image and converts it to HTML text element, which is compatible with other accessibility tools such as screen readers. I used Google Cloud Vision API.

 
 

Filter settings

v2.gif

Clicking “Edit filter” button opens the filter settings page. Prototype V2 provides more photo enhancement options for a higher level of customization.

 
 
 
 
 

 

Lastly, I created an onboarding page where users can set up their first photo filter and activate the app.

 
 
v2_2.gif

The eye icon in the middle works as a visual cue for people who might not be able to perceive the difference in color. It represents the on/off status of the app.

 
 
 
 
 

 
 

The chart below illustrates the entire app structure.

Artboard – 1.png
 
 
 

 
 
 

Reflection

From this project, I was able to learn the importance of considering the needs of marginalized users in the early production design stage. Considering non-mainstream users at a late stage would most likely cause complex and expensive retro-fitted solutions. As an example of image search result pages, each platform is designed and structured differently. This results in a significant amount of time and effort to come up with a customized solution for each one. Following the universal design/design for all guidelines and evaluation is necessary for the most effective development of usable and pleasant digital products for the widest range of users.