Since the first discussions about Hypergraph, accessibility has been a priority. We recently completed an accessibility audit, and while things aren’t perfectly accessible, we know where to focus our energy.
I firmly believe accessibility does more for a product than expanding the pool of potential users, but also serves as an idealized baseline of design and engineering. It places positive constraints on the design process that make for a better over-all product for everyone.
Here’s a small example:
As the product developed, we saw a need for a network status indicator. Our previous engineer, Julian Gruber, clarified that we needed three states to be represented in a peer-to-peer context: (1) connected, (2) disconnected, and (3) a halfway state, where a regular Internet connection is available but the peer-to-peer connection is not permitted (e.g., due to a firewall).
A text based indicator would provide too much visual noise to our minimalistic aesthetic, and a color only indicator would be inaccessible for the population that has red-green colorblindness (protanopia).
Left: Our green, yellow, and red branding colors. Right: Simulated imaged of red-green color blindness (protanopia)
The inaccessibility of color only indicators has been addressed in many ways (one of my favorites being Trello’s colorblind mode), and there was a lot of inspiration to draw upon.
The challenge was to create a minimal, visually unique status indicator for the three potential connection states that wasn’t reliant on color alone. I settled quickly upon a “vessel” approach with the visually empty shape representing a disconnected status, the half-full shape representing a lack of hole punching, and a filled/complete shape being indicative of the all clear. After establishing this, it came down to playing with different shapes and positions to find the one that works the best for us. Here are some examples of ideas that were left on the cutting room floor:
Preliminary designs
Finally, after some trial an error we settled upon the design we have currently implemented in the product:
Left: Close up view of the chosen design. Right: Example of the indicator "in app"
In conclusion, it would’ve been easy to just have it change color and call it a day, but making it meet accessible standards really raised the bar and gave the feature a unique and crafted feeling that makes me happy every time I see it in the side bar 😊
