MODULE 4 – Visual Cues and Aesthetic Considerations
I do not like to criticize others work. Generally, I like the golden rule, if you have nothing nice to say…. Besides, we have no idea what happened in a given project. We do not know the challenges, restraints, approvers, deadlines and other factors to influence any final product. We do not know the gems that were rejected. Over the years, I have had a hand in a few of my own eye sores and mistakes, so who am I to throw stones? Nothing can turn a great work environment into hell faster than bruised egos. When I do have to say something that might be interpreted as negative, I tend to fall back on some learned phrases like “Have we explored other treatments”, “Is this the best solution?”, “If we needed to take an alternative approach, what would it be?”, “Would it be better if…” Questions are more important than answers or statements in those situations. The world has enough pain, why add to it?
However, this week we have been asked to pick out a few “less than optimal” graphics from “WTF Visualizations”, a blog that is dedicated to showcasing exceptionally awful infographics and vizzes picked and posted by its followers. Below are some examples and how I would revise them based on the principles outlined in the book “Good Charts” by Scott Berinato.
Example # 1 – The Oversimplification and axis mistake.
At first I thought that the only sin of this column chart, attempting to highlight the low cost of MISEN cookware against its competitors, was just being boring. But after looking at it closely, I noticed that although it follows many of Berinato’s guidance on making simple charts, it is actually confusing and even misleading. The vertical price axis begins at $250. Which makes me wonder, is the figure listed dollars over $250 or did the chart maker simply forget to scale the axis due to a last minute size requirement or some other mistake.
Either way, there are ways that we can tell this story a little better. Clearly, we want to convey that Misen is the lowest cost, and although this chart does a good job of that, they grays of the other brands are meaningless and even though this is a positive message, somehow the brand feels diminished by its positioning on the chart. The announcement is anti-climactic, maybe from years of looking at charts like this where the shortest bar is the “under performer”. So there are two possible alternative directions I would attempt on this visualization. First, I will try a 100% stacked column chart and work with the colors to emphasize the concept of “savings”.
The second direction would be to not use a bar chart at all, utilize illustration, making all the images of the product equal (a metaphor for equal in quality) with the sizes of the price tags being the point of focus. With this approach there is less eye travel as it is naturally drawn to the biggest tag. By the way, I looked average Misen starter set pricing and it is about $425, so I believe the axis issue was just an oversight. WTF has posted some very deliberately misleading graphs.
Just for fun, here is a darker version of the same treatment:
Example # 2 – Choosing the correct chart that best tells your story
Everything in this visualization is the same weight, approximate size and is competing for your attention. In fact, the most important part of the narrative, the amount of tv households are not being emphasized at all. The signal tower icon changes size, but with no established scale… this is meaningless. I believe the story would have been better told with a simple line chart, a low key axis and a better headline. Here we are attempting to restrict color to where we want comparisons made, to get color to draw the eye and understand immediately, “things are on an upward trajectory” without even reading the numbers. The Data Visualisation Catalogue is a handy way to quickly decide what type of chart to choose for a function, in this case we want to show a trend.
Example # 3 – Control color and the dominant proportion
The Skimm.com is an online community for millennial women. It provides news stories, self help and advice. “Skimmr’s” refers to the services subscribers. This one slightly suffers from “chart junk”, there are a few items in this graphic that are unnecessary, not aligned and/or obscure the message. In addition, a pie chart with percentages should always add up to 100%, no more, no less. There is not enough contrast between two of the categories and there is no logic to how the colors have been selected. I would remove the background images all together as there is not a clear connection between tea and the subject of mental health. The headline could be changed to something along the lines of: “Over 65%of Skimm’rs have addressed their mental health”. You may say “No fair! you are using a background image too!”, yes but in this case the image is not obscuring any of the text and calls attention to the “missing” 35% of skimmr’s. Using a monchromatic color scheme visually groups the categories together and creates the dominant proportion, supporting the headline. The headline has the highest contrast of the composition and so it draws the eye left to right.
having all the labels on the right side also makes it easier for the viewer to read the category descriptions. In his article “12 Visualizations to Show a Single Number.” Tim Bock argues and demonstrates that it can be effective to show the missing portion of a percentage, the empty space also speaks to the audience, he writes” The two-category pie chart and donut chart are special cases of a more general strategy, which is to show a portion of an image”.
Example # 4 – Accuracy and clarity or “Don’t just throw bars anywhere”
For extra credit, I selected this one because it presented a unique challenge: How do you present a small number (a negative) in a visualization? Honestly, I do not understand how this was added to the WTF website, as it really isn’t an infographic or a visualization, despite having some quantitative information contained within it. It looks like a bar chart, but the length of the bars have no relation to the figures presented. They are being used strictly for aesthetic reasons. The salaries are not listed from high to low. You have to look at this graphic for a while to kind of understand what it means and follow the information. I believe that the message is about the discrepancy between Judge and the other players, but nothing in the graphic indicates that message clearly. No highlight, no shape or color change, no copy…nothing. So it left me puzzled, suspecting that his salary number was a mistake. I looked up the Aaron Judge figure, but it is correct and is due to his status as a rookie player ineligible for representation and contract arbitration. Hopefully, he makes his earnings this year, although I think most of us would be pretty happy with a 600K+ salary for a seasonal job. So here is what I would have done differently:
Since we are noting the amount of home runs they hit the previous season, using that as a proxy for “value and performance” to be reflected in “salary”, I felt that it was it own value and using a clustered column chart would allow us to make the comparison and see the deviation more clearly. I get it, its a sports graphic so it needs to be high contrast and flashy, so I attempted to save as much of the original colors as possible and used the images of the player but muted them behind the columns. I added a key. I added a headline that presented a narrative. I highlighted the “low” number by making it bigger than the others. The columns are now accurate and proportional to their values. Salaries and home runs go “up and down” so I am attempting to use common conventions in the presentation. For me, the composition supports the eye travel from top left to bottom right. This was a tough one but I enjoyed it.
I did not select these graphics because they were the worse, they are by far not the most offensive posts on WTF, in fact, I selected them because they presented opportunities to apply some of the concepts from the course readings, were simple and could be revised within the assignment time frame. They just needed “tweaking”. I am by no means suggesting that my versions are better…anyone may argue that they prefer the originals, and that is part of the fun. Data Visualization is a collaborative design process. Sometimes a chart is just a chart…make it in powerpoint, slap it up there and get on with the show…we cant make every visualization into a masterpiece, we can only try. Beauty and clarity are in the eye of the beholder, I only offer these as demonstrations of visualization techniques as I understood them. Thanks and as always, I look forward to your feedback.
References and Resources for Further Exploration
The Data Visualisation Catalogue. (2019, January 22). Retrieved from https://datavizcatalogue.com/index.html
9 Types of Infographics and When to Use Them [+ Infographic Templates] – Venngage. (2019, January 20). Retrieved from https://venngage.com/blog/9-types-of-infographic-template
Wolter, A. (2015). Data Visualization 101: How to Visualize the Most Common Simple Data Points. Undullify. Retrieved from https://undullify.com/data-visualization-101-visualize-common-simple-data-points
How do you chart one number? Here are 12 examples. (2017, September 19). Retrieved from https://www.displayr.com/12-visualizations-to-show-a-single-number
Berinato, S. (2016). Good Charts: The HBR Guide to Making Smarter, More Persuasive Data Visualizations. Harvard Business Review Press. Retrieved from https://www.amazon.com/Good-Charts-Smarter-Persuasive-Visualizations/dp/1633690709
Recent Posts from the Graduate Series:
- Choices: Software and reading between the lines. - Mod 2- Writing Interactive Media, Professor Susan Tamulevich Safe choices Everybody asks me: Why did you leave? I want to…
- 5 Important Things I learned about UX Design - Mod 7- The Mini-Portfolio and Final Thoughts. The Final Assignment We have reached the end of the course! Before completing…
- Can I Tag Along? Customer Journey Mapping - Mod 7- Seeing Through The Customers Eyes with Prof. Bjorn Akselsen What is a Customer Journey Map? A customer journey…
- Ideation, Part 2 – Let it hit you. - Mod 6- Part 2 Ideation Techniques with Prof. Bjorn Akselsen Ideation Techniques As we mentioned in part 1 of the…
- Ideation, Part 1 – Odd & Unexpected Things - Mod 6- The "Mash Up" Ideation Technique with Prof. Bjorn Akselsen Ideation Overview Finally! We get to talk about ideas.…
- Problems, Part 2 – POV Statements - Mod 5- POV Statements with Prof. Bjorn Akselsen What is a POV Statement? According to the Interaction Design Foundation, a…