5 ms·
Let's talk data vis for a minute. The three values are sequential, so there's no need for tic-tac bar charts on every item. There's also no need for two colors
by notjustanymike 9y ago
Let's talk data vis for a minute. The three values are sequential, so there's no need for tic-tac bar charts on every item. There's also no need for two colors in the same chart, that's just more cognitive load. Something like this is crying out for a heat map, so you can quickly scan.
Here's my take after some quick hacking: https://i.imgur.com/w4AkvQb.png https://i.imgur.com/w4AkvQb.png
- mortenjorck 9y agoThis is a huge improvement. The original took me awhile to wrap my mind around because it uses more dimensions than the data actually has axes - your reduction to a single dimension of dot shading is a much tighter mapping.
- notjustanymike 9y agoThanks! Considering it took 5 minutes in dev tools, I can probably fork it this weekend :)
- function_seven 9y agoYours is much, much nicer. But it doesn't match the original chart. align-content in Gecko, for example. The multi-color tic tac charts says that it doesn't trigger anything on subsequent updates, but your chart says layout is triggered.
- notjustanymike 9y agoMine's just a dev tools hack (literally just changed some CSS classes around), so the obvious solution for mine would to not show a circle. I've never been a fan of traffic light style visualizations, which show a shape even when there's no value. The empty tic-tacs in the original do this, and prevents any advantage in parsing the vis you'd get from cognitive dissonance of the shapes. Not showing a shape when there's no data is the correct solution.
- antibland 9y agoAccessibility guy here. Don't forget that color blind/low vision users are going to have a tough time parsing meaning from that table. Color shouldn't be solely responsible for conveying informational meaning. Consider pairing color with another visual indicator like an icon.
- notjustanymike 9y agoHi Accessibility guy! I haven't had a chance to work directly with someone in this field, so this'll be fun. Quick experiment - changing border-size, border-radius, and intensity. Basically things get darker and more filled in the higher the level of consequence. Would this fly for the vision impaired? https://imgur.com/V4J3B8V https://imgur.com/V4J3B8V
- antibland 9y agoI think the problem is how subtle the gradation/intensity can be between steps. Icons may not honor the aesthetic you are aiming for, but they manage (with a labelled legend) to get the job done of explaining this table for every user.
- notjustanymike 9y agoMy concern is scan-ability. Introducing icons introduces shapes, which in turn increase cognitive load. On a layout like this, simplicity is key in order for users to process all the information. I did experiment with Gestalt principles (I've always wanted to say that!) and created a flat black line that rotates in 45 degrees increments for levels of difficulty. Seemed to tick off the basic vision impaired requirement - single color, no intensity changes, and works in B&W (Something all data vis is supposed to do). This has been fun!