A table-based redesign

I'm a big fan of the data-driven approach, and I love basketball, so one of my favorite sites is Ken Pomeroy's stats site, where he tracks tons of statistics for every team, on offense and defense, and lets you break down exactly which parts of each team (rebounding, turnovers, etc) contribute to their success, and which players (efficiency, no. of possessions used, etc) are the most influential. The site used to be entirely plain text on a blue background, which worked for me, but Ken redesigned the site this year. Last week he posted on Twitter asking for feedback on the redesign. I agreed that it was hard to read and I had some feedback. Here's Ken's initial version: Data presentation legend Edward Tufte always says that your design should be as dense as possible; that is, every single piece of ink should convey some bit of information. The table is a good format, especially when you need to search quickly by team instead of by efficiency, but you can change it to make the information easier to scan. The first step was to replace the heavy black lines between teams. These convey no information and clutter up the design. The best alternative is so-called zebra-striping, where you shade in every alternate line with a light color. The lines are still there, because there are color differences, but they're much more subtle and don't clutter up the display. I also took out the vertical dotted lines. However, the purpose of these was to distinguish between like groups. We've already used color to distinguish between line elements, and instead of doing a checkerboard pattern I decided to use spacing to group like elements together. I moved the small-text rankings close to their associated item and increased the space between some of the columns. I also pushed the table width to the full 960 pixels. The final step was to make it easier to associate the numbers with the team names. I added a gray bar that highlights the table row you are hovering over with your mouse. All in all, I think it's much more readable and when I have more time I'll explore some other ideas about how to stretch the data. Check it out here.

Liked what you read? I am looking for work.

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments are heavily moderated.