Shopping in the Dark

Overview

A critique of e-commerce website accessibility for screen reader users, and a universal design solution to improve the online shopping user experience.

‍Context

Role

‍Researcher, UX/UI designer

Teammates

‍Gina Herakovic, Ken Caldwell

Timeline

‍Nov 25 - Dec 8, 2020

Purpose

‍Final project for accessibility course

Tools

‍Figma, Miro, Zoom, VoiceOver

The problem

Low-vision and blind users have difficulty shopping online using a screen reader because it is challenging to find the product information they need to make an informed purchasing decision. Although following Web Content Accessibility Guidelines (WCAG) is a start, we found that accessibility alone does not equate to a positive user experience for people using screen readers.

The solution

A browser-based plug in for product pages that synthesizes key information, and provides other avenues of finding information when it is not available on the page.

‍

Research

Our team conducted a literature review of nine scholarly papers and web articles relating to participatory design, assistive technology, dark patterns, and the behavior of buying. We also conducted structured and semi-structured interviews with life-long screen reader users. Both research aspects were used to critique the online shopping user experience with screen-reader technology, and helped to inform our design.

Our proposed project topic began as mitigating dark patterns in e-commerce for screen reader users. Upon conducting research through literature reviews and interviews, we concluded that dark patterns aren't as impactful on the screen-reader user experience as it is for sighted users because many dark patterns rely heavily on manipulative visual cues. Our research helped us discover that our target user (screen reader users) struggled with finding information on e-commerce pages due to a variety of accessibility issues.

‍

Interviews

Our team conducted four interviews with two blind participants to understand how they use screen readers in an online shopping context. The final interview was a semi-structured walkthrough of a participant navigating various e-commerce platforms (retail and travel) using a screen reader.

Key findings from our interviews are as follows:

HTML headings greatly aid navigation.

By coding pages with HTML semantic markup, screen readers are able to interpret the intended structure and hierarchy, helping users quickly navigate to relevant areas of the page and skip over others.

‍Managing focus of the computer cursor

while using screen reader software is a key facet in perceived usability. Focus order preserves page meaning for screen reader users and anyone navigating with a keyboard.‍

Helpful product information‍

for new products is paramount - product name, price, reviews, comparisons between similar products (if applicable). For used products - description, ratings, contact seller.

‍Product size and dimensions

are useful and often priority information for blind and low vision users to find on e-commerce pages, helping them put into context the physical footprint of objects and whether they will fit in their pockets or bags, for example.‍

Sharing a product with others

to get more information on visual appearance was a workaround for lack of image alt text on product pages.

‍Finding contact information

for the seller or customer support can be challenging, but is sometimes necessary to get more information that isn’t provided on the product page. ‍

Rate of speech

is also important. One participant we spoke to was accustomed to more than twice the normal rate of speech, and found it difficult to listen to slower rates. We also learned that reducing the number of syllables that users hear is an important effort, allowing people to read more efficiently.

‍

Design

We believe the process of shopping online can be a more intuitive and positive experience for blind users and the general population when web page clutter is reduced and key product information is provided up front. Specifications for product dimensions, rating, weight, and are useful for all shoppers to aid in making informed buying decisions. Hunting for this information can be a drawn out and belabored process for people using screen readers, especially when it is buried in pages full of content without HTML semantic markup.

Guiding Principles

While WCAG’s four main principles (perceivable, operable, understandable, robust) apply generally to web accessibility and all users, we identified certain clauses within each principle that relate directly to people using screen readers to navigate the web.

The specific guidelines we used to guide our design are as follows:

Guideline 1.3 (perceivable)

Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

Guideline 2.1 (operable)

Keyboard Accessible: Make all functionality available from a keyboard.

Guideline 2.4 (operable)

Navigable: Provide ways to help users navigate, find content, and determine where they are.

Guideline 3.2 (understandable)

Predictable: Make web pages appear and operate in predictable ways.

Guideline 4.1 (robust)

Compatible: Maximize compatibility with current and future user agents, including assistive technologies.

I also used a Teach Access tutorial on web accessibility to understand how to incorporate semantic elements into our design, and how a screen reader would navigate these elements.

Ideation

Based on our key takeaways from the research phase, we decided to design a browser-based plug-in that would assist users in finding key product information, but would not interfere with the product page content itself. My initial design exploration show the basis for the plug-in, customization options, and how the plug-in could potentially adapt depending on the type of e-commerce site (i.e., retail versus travel).

‍

From the sketches we brainstormed and prioritized features for the plug-in based on (1) how important we percieve them to be for a screen reader user's online shopping experience and (2) how feasible the features would be to include in our plug-in. The priority matrix below shows the final features we chose to include in our plug-in.

‍

Prototype

Below is our final prototype for the browser-based plug-in. You can also view our demo with VoiceOver. While the prototype was created in Figma and not coded, I used a 'wizard-of-oz' method to show how our design would interact with a screen reader.

Features

Product and image description

Pulling from the original product page content below, these two sections consolidate descriptive copy, including image alt tags, in one convenient place.

Product information

‍This section lists key information shoppers need to make an informed purchasing decision, particularly for those who cannot see product imagery. For example, we display readily accessible model numbers and SKUs that can differentiate items in a product line by material or color. We also chose to display the product’s physical dimensions, such as weight and measurements—information that can help people determine whether the item is easy to carry and store, for instance.

Share this item

‍A share button was included so blind users may ask friends and family members for validation about a product’s appearance and information, or for assistance in making the purchase if the page is inaccessible for screen readers.

Contact seller

‍A primary feature of the plug-in is to consolidate available information based on what has been published, but when that information is unclear or unavailable, users can quickly attempt to contact the merchant with questions.

Compare price

To give more insight to consumers, especially for websites that do not offer robust pricing capabilities, this feature displays price trends. By reviewing this data, users can understand whether the current selling price is a good value.

Semantic elements

The design of our plug-in is centered around semantic elements to make navigation with a screen reader easier. Although there was no coding involved, our prototype demonstrates how screen reader technology such as VoiceOver would navigate the semantic heading structure and table markup in the plug-in

‍

Design Considerations

Although our intent is pro-consumer, we recognize that merchants may not want this technology operating on their e-commerce websites. One perceived disadvantage for sales teams who operate the platforms is that product information is presented out of context from the marketing messages they have carefully crafted—meaning they lose control of the sales pitch. Pricing is one example that might be carefully protected and may not be available as trending data.

A counterargument is that our design does not interfere with any of the original website material. Users are free to view the complete product art and copy as it was intended, below the interface for our extension. Lastly, it could help e-commerce platforms reach users they have previously ignored or missed due to inaccessible web pages.

‍

Takeaways

Participatory design is the most thorough method to design for stakeholder needs

‍Although we could not incorporate this method due to time constrictions, our design was purely user-informed based on interview findings.

Screen reader users access and explore web content in fundamentally different ways than users with full vision.‍

Navigating a web page with a screen reader can involve different methods such as jumping from heading to heading; using the tab key to maneuver in tables, links, and forms; searching within the page for specific keywords; and more.

As designers, we should consider whether just implementing WCAG guidelines is enough.

Or, if there's more we can do to create a delightful user experience for people using assistive technology online.

‍