jbenet / depviz

dependency visualizer for the web
https://jbenet.github.io/depviz
MIT License
49 stars 10 forks source link

Non-color blocker/dependency distinction: octagonal/triangular dep-indicator? #61

Open wking opened 7 years ago

wking commented 7 years ago

As part of a colorblind-friendly UI (#49), it's good to not rely solely on colors to display important information. One way to do that for dependencies vs. blockers would be to use an octacgon (⯃) or a (circled) triangle down (⎊), both of which are frequently used as stop signs and supported by the Vienna Convention on Road Signs and Signals. The circled version is too busy to also contain text at our sizes, but an uncircled down-pointing triangle would work (▼).

The visual tradeoff between ⯃ and ▼ is space for numbers (favoring ⯃) and recognizable distinction from a circle (favoring ▼).

The Vienna Convention allows countries to chose one or the other, which sounds like “we couldn't come to an agreement and eventually gave up” ;). From the Wikipedia page, ⯃ seems more popular than ⎊ for stop, but the yield / “give way” sign is ▼, which everyone seems to agree on, so the choice is probably a wash from the “conventionally a cautionary sign” perspective.

Here are some mocks with a triangle (inscribed in a radius 1.5 circle) and an octagon (inscribed in a radius 1.2 circle):

octagon-r1 2

triangle-r1 5

octagon-r1 2-gray

triangle-r1 5-gray

And we could put the completion pie on either of those, altough I didn't bother for the mocks.

jbenet commented 7 years ago