Accessible Version Control Change Indicators

Project Overview

The code change indicators mark lines that have been modified, added, or deleted in the code file. The existing indicators in Visual Studio's version control system were not accessible for all users, and didn't provide the change type information being inconsistent with for example VS Code. I led the redesign work to ensure they were accessible and usable by all developers, regardless of their visual abilities.

UX Problem

• The indicators had 2 visual states changed-not saved (yellow bar), and changed-saved (green bar) represented only by color. • Different kinds of changes (addition, deletion, modification) don't have unique indicators. • Imparity with Visual Studio Code. • Not accessible for vision impaired users. • Color contrast ratio is not sufficient for passing WCAG standards. • Some vision impaired users can’t distinguish unsaved changes from saved changes. • The change margin indicators don’t follow the Git status.

Emulation of how color blind users see the existing change indicators.

Objectives

• Align implementation with other Microsoft products. • Follow more industry standard style for code change indicators. • Make sure that the new implementation is fully accessible and passes the WCAG rules and Microsoft Accessibility Standards. • New design needs to support Line Staging feature the was being designed in parallel. • Design for both light and dark themes.

Design Process

First we conducted user research and usability testing with developers with visual impairments to understand their needs and challenges with the existing indicators. Collaborated with accessibility experts to ensure compliance with accessibility standards and guidelines. I explored various design options, including patterns, shapes, and textures, to create indicators that were easily distinguishable by all users. I developed prototypes and shared those in the community feedback tickets and user testing. I refined the designs based on the feedback from users and experts.

Design Iterations

We went throught multiple design iterations to explore different visual representations. I tested various shapes, patterns, and color combinations to ensure that the indicators were easily distinguishable by all users. I also considered the overall aesthetics and how the new indicators would fit within the existing Visual Studio interface.

Change indicator design iteration exploring various texture patterns to represent different change types. — I explored varions texture patterns to represent different change types.

Change indicator design iteration exploring various sign and character patterns to represent different change types. — Also explored various sign and character patterns.

Different design concepts in iteration 3 — In iteration 3, users clearly preferred design concept C3.2 over the other presented options.

Design iteration 4 was too complex. — Iteration 4 was one of the most complex designs as it showed both change type and staging information. This was concluded too much information for users to process at once.

Final Design and Impact

The final design was successfully implemented in Visual Studio 2022 version 17.3 and later. The design met the all the set objectives and received positive feedback from users, particularly those with visual impairments.

I submitted a patent application which was accepted and I received a patent award for the design work.

Some users still preferred the old design due to familiarity, and we provided an option to switch back to the previous design if desired. Even then, the yellow and green color values were updated for better contrast and accessibility.

alt text — All different change types in light and dark themes.

Links

Blog post about the line staging features by my PM partner: https://devblogs.microsoft.com/visualstudio/line-staging-interactive-staging/