I've decided to take a little bit of time and do a data table redesign for some government statistics. The information is plentiful, useful and full of design opportunity. As I looked through all of the data I said "Hey, I should make cool charts and graphs out of all of this data." But, as I thought a bit more about it, I realized that sometimes the data doesn't need to be in a graph, chart, or concentric circle solar system grid (see example). A table can be an elegant and effective solution.
I actually had a difficult time understanding the data in this table due to the current poor design, so, not every detail will be spot on. I created everything below in roughly three hours. I gave the table a quick refresh with simple typographic changes and created some key principles for next time.
Current government table design
This table currently shows no typographic hierarchy. The headings and sub-headings are unclear and the spacing acts as a barrier to understanding how information should be group and digested. The information is not optimized for a smaller device such as a smart phone. According to a survey from Think with Google, as of August 2011 there were 90,100,000 smartphone users. Could we do better for all of those potential users?
Three hour table redesign
In this redesign I gave more direction to the spacing, color and typographic hierarchy. By doing this we are able to guide the viewers eye from the title "unemployed civilian labor force" to the "categories" then "month/year" then to the "states values." Incase the user did not want to get so granular as to know about each county, the overall state values are a different color and bolded for quick scanning.
Smart Phone Design
Here, more consideration needs to be taken but this was the solution in the time allowed. It appeared that in the current table design all of the values were chunked into fours. By chunking each into fours, repeating the state/area and increasing some of the headings, the data can now be read much easier on a smart phone. Also, in this situation a "sort" functionality, among other things not yet investigated, would really improve the experience.
5 Touch Points To Be Noted:
1. Tables Before Charts
Don't force a graphic on to data unless it makes sense to do so. Don't let design motivate you to create something, let the users workflow motivate you to create something better.
2. Reduce, Remove, Reimagine
It is tempting to add elements to a table to increase its compartmentalization and improve its perimeters. However, adding some of the elements do more bad than good. If done in a soft and subtle way, as to be seen as background information only, a thin horizontal or vertical rule may be acceptable. It is best practice however to remove any extra elements that don't directly benefit the content.
3. No Web Font is One Size Fits All
Just because it is a web safe font, doesn't mean that the font is CORRECT for the CONTENT. Don't be forced to design with web safe fonts and sacrifice the actual communication of the design. Know the content, find the proper font, design a great piece and allow for other outlets for anyone outside of that area.
4. Front Facing vs. Back End
So you say that you want the data to be easily copied off of the website so that your users can do what they want with the data. Well, I tried it. Even the web safe text that is currently on the site now isn't that easy to remove and reconfigure in your personal programs. If the user needs to use the data, a separate data file should be created. When displaying information to be (only) viewed by the public, fast communication needs to be priority #1.
5. Handling Responsive Table Design
At least 50% of my personal internet usage, sometimes more, is done on a phone or tablet. We need to find a way to condense or group the information and get it on the phone so it looks and works great. Prioritize and condense the information and enlighten the user.