Closebuy accessible icons
Brief
Create map pictorgrams and SVG icons that pass WCAG contrast check as well as common colour-blindness checks.
Client: School project at ITHS
Role: Accessibility evaluation & WCAG compliance
Deliverables: SVG icons, contrast checker table, IxA
Core challenge
Map icons have to be visible on many different backgrounds, contend with other map markings and icons, and at the same time make up a flexible enough design systems that it can be expanded with more categories as needed. Tricky work and compromises abound!
OUtcome
A streamlined IxA allowed me to shave the icon categories down to six, which I then could solve for using both pictograms and colours, as well as provide a styling for the map.
app design & icon approach
The web app provides hyperlocal second hand shopping, and the design goal was to create an intuitive view of things for sale in your immediate area. A late version prototype shows the homescreen with some filtering enabled, and my icons are used both on the map and in the filter view in the footer.
Because we were going with a slightly unorthodox design, I needed to make the affordances as clear as possible. To that end I looked at how others had solved it – Google maps, Airbnb, Tradera, Foodora – and ran a few accessibility heuristics on their solutions. Turns out getting this right is tricky as there are a lot of moving parts and maps are expected to provide dynamic and rich media, which always ends up as a compromise between space, visibility and level of abstraction.
My approach to make sure we could be WCAG compliant:
1) Keep the number of necessary icon categories to a minimum so that the colours and shapes wouldn’t have to compete as much. it's unreasonable to skip a shopping category just because it would be expedient for the UI – at the same time the user can do some of the mental heavy lifting that comes with fewer categories, rather than suffer a cluttered UI.
2) Use a map API that allows me to remove unnecessary layers of the map as well as the option to style colours and line weights.
3) Use standard pictograms where available, and make sure that the colours are distinguishable. Test and test again.
Testing for visibility. Again and again.
We settled on six shopping categories and I went about looking at existing pictogram systems. I settled on using Material Design icons where possible, and created templates in a design application that allowed me to batch export PNG and SVG files as per the developer requirements.
At the same time I seet about trying out different combinations of icon and map colours. This required a lot of back and forth since it’s a dynamic relationship – when I changed one the other were affected and had to be nudged around. I didn’t find an automatic solution for this, so many hours were spent looking at colours and using a variety of tools to evaluate them for contrast, visibility, affordances, etc.
In the end I’d created a colour scheme which allowed me to have two states per button, with a reasonable visability for the most common colour vision deficiencies. In combination with a muted colour scheme for the map – with many layers turned off through in the API – I managed to achieve a successful UI toolkit for our web app.