Recently mashable.com published this post regarding the market share of internet browsers. The author focused on how well Google Chrome could establish itself in it’s one year existence. To visualize the market share of some of the most popular browsers the author used a diagram from Market Share / Netshare.com. It’s one of the stereotypical 3D Piecharts we all know from tools like Excel or PowerPoint. I mainly struggled to read the pointers to the smaller wedges. I took this struggle as inspiration for a quick redesign of the chart.
On the left hand side we have the color coded 3D Piechart with the percentage of market share as digits. On the right we see a legend listing the browsers by color and again the percentages.
- Pure data
I reduced everything to the bare data—just the percentage and the name of the browser. Already clear and understandable but maybe a visual representation could improve for intuitive reading…
- Horiziontal barchart
With a horizontal Barchart next to the browser name we show the varieties in a relative manner. Colors can be dismissed but for the sake of focus on Google Chrome I introduced red as a “signal color“. I am not yet sure about the position of the digits, therefore…
- Position of digits
Moving digits closer to the barchart would describe the bars better and would give the reader an immediate indication about the absolute values that are represented. But should they be aligned to each other or rather…
- Aligned digits to the bars
The placement of the numbers right next to the bars may harm readability of the numbers in sequence a bit but it lets the viewer focus faster on the promoted value (Chrome’s market share in this example). Reading a vertical barchart isn’t as common as a horizontal one, so let’s try another version.
- Horizontal alignment
Once horizontally aligned, the barchart seems easier on the eye. Reading from left to right to the promoted value is intuitive and the position of the percentages feels natural. But the labels are too long for a horizontal alignment and the abbriviations don’t feel common enough to be used (GC, anyone?) — is there a solution for this regarding the web-savvy audience of mashable.com?
- From name to icon
As any of the labels represents a brand itself (beside the nasty “other”), and as these come with a memorable logo (used on websites, as favicons, as the application icons, etc.) it is a save option to use the logo itself as the representation. This saves screen real-estate and helps avoiding the usage of uncommon abbriviations. Also we can get rid of the underline to clean up the visualization even more.
- Removing the metrics
Update: removing the % sign from the actual digits helps getting faster to the numbers. As suggested in the comments from Taurice and Naomi I moved the metric to the title and thus leaving the visualization even cleaner and better readable.
That’s it for this quick analysis and refinement. Did I neglect something that is present in the original graphic? Or could I reduce it it more to make the graphic even easier to read? Any of your comments would be highly appreciated.