Creating an Accessible Network Status Indicator

Patrick explains how he designed the network indicators for Hypergraph in an accessible manner.
In: design, Hypergraph

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).

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:

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 😊

Written by
More from Liberate Science

Interested in working with us? We provide ample ways to explore options, or get to work immediately!

Contact us
Great! You’ve successfully signed up.
Welcome back! You've successfully signed in.
You've successfully subscribed to Liberate Science.
Your link has expired.
Success! Check your email for magic link to sign-in.
Success! Your billing info has been updated.
Your billing was not updated.