In a previous blog post we discussed the most effective ways to communicate using data visualization.
The post discussed how effective data visualization needs to be both visually appealing and communicate the information clearly. We also talked about what did and didn’t ‘work’ using examples.
On that note, we found this colourful example (excuse the pun!) of Crayola colours through the ages! The way the data is displayed can make all the difference as this Crayola chart demonstrates.
The team at Data Pointed created a colour chart of Crayola colours through time and released it onto the world, only to later discover the data could be visualized better.
In the original design the colours got squished in the square design making it hard to understand. So they went about redesigning their creation to make a beautiful clear radial chart. See the transformation here.
Here at E-Tabs we can’t get enough of infographics, and it seems like we aren’t the only ones.
Infographics are now everywhere, on almost any topic from politics to Pancake Day, and new ones are being created daily. We’re always posting infographics we like or think are interesting in our blog and on our Twitter page.
They’re a great way of communicating a lot of information quickly and visually. But what makes them so popular?
Agency NeoMam Studios studied the science behind why our brains crave infographics and how we process visual information, and what better way to communicate their findings than in an infographic! View it here.
The annual US presidential State of the Union address is typically a reflection of wider national priorities.
This past Tuesday was no exception. This is an interesting series of charts looking at the number of words devoted to subjects in the president’s SOTU speech going back to Obama’s first address to a joint session of the US congress in 2009.
Previously we looked at dataviz examples comparing designs which may or may not work well.
These examples are a little more straightforward; in fact, a couple of them are downright wrong…
Returning to the line chart idea, here Choice B is using the categories as the X-axis where you’d typically find the date/time breaks.
Stacked area charts can be quite tricky; they should be used carefully and can be very effective when used correctly. When not, watch out.
When is a lot of pie wedges too many pie wedges? Clearly Choice B has too many to show effectively. Conventional wisdom is any more than 4 or 5 wedges and the chart can be difficult to read, though this is of course affected by the size of the chart. If you’re using a full-page size, then Choice B would probably be just fine.
Ahhh, 3D pie charts… the chart every dataviz person worth their salt LOVES to hate! As illustrated in Choice B, they’re definitely the best way to show that 4.8 is actually greater than 8!
In the visual realm, what people “like” is by definition subjective.
What “works” and what doesn’t in the context of dataviz design, however, is usually something one can determine a little more easily. Effective data visualization is a combination of what’s visually appealing and what best communicates the creator’s ideas.
In a 2-part series this week and next, we’re going to take a look at some visualization examples and question what “works” best in terms of being effective and being accurate. As we’ll show, sometimes it’s a simple matter, and sometimes it’s not. In most cases, the nature of the data shown will drive the most effective way of displaying it.
These charts show the same data points but in very different ways. Line or trend charts are usually most effective in showing data trends over time; hence the name “trend”. Showing data across non-date/time categories doesn’t really lend itself to using a line chart. A simple side-by-side comparison of figures is really suited to using bar (or column) charts. Hence, Choice B is more effective.
Pie charts are designed to show what share of the “pie” each category has. Using the same data points, the bar chart is again the better choice in this example because it’s a simple numeric comparison.
This example is not quite as straightforward and perhaps a little more subjective. But unless the column colors in Choice B are tied to their respective categories, there’s no reason to use different colors, except just because you can. For that reason, using a single color for the columns looks less “busy”.
If we stick with the “single color” idea, then Choice A would probably be the better of the two, unless you’re an especially big fan of electric lemon yellow, or that’s the client’s corporate color. In which case, we feel your pain because we’ve been there.
Even without the prevailing consensus in the wider design world that “flatter is better”, we think the simpler design of Choice A is nicer to look at. Just because you CAN contort a chart into an angled, cylindrical format…
Should be fairly obvious… we hope…
Enough with the zeroes!
This last comparison may not register so quickly. Go on, take a few seconds, we’ll wait…
*checks watch impatiently*
You have to look carefully, which is the inherent danger of using a non-standard Y-axis range on a chart. (Did you catch it unprompted?) Unless Choice B appears in the context of other charts which also don’t start their Y-axes at zero, the user’s expectations are that it would start at zero.
At first glance, the charted column values in Choice B are quite big (c’mon, Shirts, pull your weight!). But checking the actual numeric values will show the gaps are not so dramatic after all. Of course, doing a chart like Choice B CAN be used to influence the viewer to a certain point of view, should that be the goal of the chart designer.
In our next posting, we’ll take a look at some examples that are a bit more definitively “wrong”…
If you’re familiar with the iOS 7, Windows Phone or Windows 8 operating systems, then you’re familiar with the anti-skeuomorphic paradigm that’s becoming de rigueur in the User Interface (UI) design world. Our recent post about overuse of 3D in design got us wanted to delve into this a little more deeply.
(For readers of the school of “tl;dnr”: skeuomorphism is the concept of designing icons and other User Interface elements to appear 3D like their real-world counterparts. “Flat” design is the opposite point of view.)
Since the start of the modern “computer age” user interfaces have been pretty much universally designed with an eye toward making an exciting new world as familiar to us, the users, as possible. Most credit Apple with establishing the trend in this regard in exposing graphical interfaces to the masses.
The first generation of desktop icons created by computer developers was naturally designed to look like their real-world counterparts. Of course, the very term “desktop” was borrowed unapologetically from the non-virtual world for naming the computer workspace. The idea was that people wouldn’t be so fearful of the familiar, even if set in a totally new context. So the early Macintosh computers used a simple diskette graphic to represent the disk drive, a trash can for deleting files, a file folder for the folders, and so on. Because they were using low resolution monochrome displays, the icons were more or less simple black “pencil” line drawings.
Windows version 3.1 changed all that. While still very limited in the color depth and pixel resolution it could display, the developers took full advantage of what they could do by designing much more visually complex (though not always “better”) icons. They decided that “realistic,” three-dimensional icons were the way to go, partly because they could at that point, and that became most people’s first exposure to the idea of skeuomorphism (that is, icons and imagery meant to look just like their real world objects) in computer UIs. Many icons also featured dropshadows in an attempt to enhance the 3D effect.
As computer graphics improved, the icons became more complex. On top of that, the UIs of many programs also dove headfirst into skeuomorphic design; probably none more so than audio and video playback software. They did their best to recreate home stereo components or the newly emerging portable music and home DVD players. Technical programs, such as audio editors, took skeuomorphism to an almost ridiculous level, even using rotary dial potentiometers the user had to “turn” up and down using their mouse.
This design paradigm carried over to almost everything digital/electronic. Websites of every type, personal media devices and first-gen smartphones, and then tablets, all jumped into the deep end of skeuomorphic design. Icons, buttons, tabs, navigation and UI controls, all took on an aggressively 3D form. Within the last decade, however, and far under most people’s radar to start, the game slowly began to change.
In 2006 Microsoft created what was then codenamed “Metro” (later to become the more descriptively-named “Microsoft Design Style”), a typography-based design paradigm and concomitant language intended at least in part to try and compete with the iPod with the flagging and now-defunct Zune platform. Metro itself was inspired by the International Typographic Style, a graphic design style developed in Switzerland in the 1950s that emphasizes cleanliness and readability. The idea was for UIs to focus on the content of applications, relying less on graphics-driven menus and more on typography for delivery of information. This was later referred to as “content before Chrome” (the shiny metal, not the browser).
Ultimately, Microsoft had a broader agenda than just to salvage Zune. Their idea was to radically change Windows itself and make it entirely cross-platform. With smartphones taking over the communications world, everything had to become smaller and simpler. (Years ago, recall, phone displays were much smaller and lower resolution than now.) Metro gave rise to the Windows Phone OS and eventually, Windows 8. And now, Apple too, has “pared down” with iOS 7 and Google (which will no doubt soon control the world) has developed their simplified UI for everything-Google as we know it today.
The idea of the “flat” interface has become the norm for the UIs of most technology with which people now interact, and to remove any aspects of a 3D, skeuomorphic context. The buzzword that developers use is “tiles.” Even this suggests a flatness in which you shuffle tiles around on a 2D surface to indicate their raised or lowered relative importance to you, as opposed to stacking them like they’re 3D objects. Many of us do this all time now on phones, tablets and other touchscreen devices without even thinking about it.
What all this means in the dataviz biz is that websites are trending toward more flat designs as well. It’s typically not difficult to do so; it’s a matter of replacing existing “3D” graphics and navigation features with “flatter” versions. This might be just removing some shading or dropshadow effects, to eliminate “raised” buttons and whatnot, or a more complete overhaul if 3D design is very heavily integrated into a site.
From the coffee grove to your home, the entire lifecycle of coffee as described by an infographic!
This is a unique representation I felt compelled to share due to the fact that there is interactivity involved with this inforgraphic. Using the mouse click wheel to scroll or the clickable arrow brings this inforgraphic to life! The interaction is what really makes this infographic stand out from other more standard derivatives.