Good examples of how to display a bunch of tabular data.

May 1, 2017 3:11 PM

I work on a web application that has a small problem that's been gnawing at me for awhile. There's no way around it--we have to display some really giant tables. 15+ columns across and sometimes hundreds of rows. Can anybody think of any examples of websites that display that kind of quantity of data in a vaguely readable way? I'm not picky about what kind of data the page is displaying, as long as it's in a table that's at least more than one screen wide and freely available to view.

Displaying less data on the main screen is not, at this point, an option that's on the table. (Haha, get it, sob.) I don't expect there to be any way to do this great, but my team is not going to have the resources for a real designer anytime in my lifetime, and I can't think of anywhere that might do this well that we could at least use for inspiration, so I thought I'd check in with the Hive Mind.

posted by Sequence to Technology (15 answers total)

Displaying less data on the main screen is not, at this point, an option that's on the table.
So pagination is out?
posted by thelonius at 3:12 PM on May 1, 2017

Can users sort the data?
posted by soelo at 3:15 PM on May 1, 2017

Google Sheets?
posted by primethyme at 3:27 PM on May 1, 2017

Electronics components suppliers present information like this all the time. They tend to have fairly sophisticated select/sort/search interfaces, which help users find the records they are looking for -- I don't know if that's relevant to you.

The key to making information usable is imagining the specific moment-by-moment ways people want to use it. Who are your users? What questions are they trying to answer when they come to the site? Who are they trying to help? What will they know already? What will they do with the information they retrieve? That's the only way to be more helpful to them: figure out what they need to see and when.

Then, make a prototype, and actually sit down with a user at a computer, ask him or her to perform specific tasks, and have him or her narrate their thought process as they attempt to go through your software.
posted by amtho at 3:40 PM on May 1, 2017 [12 favorites]

I've been in the same situation (can't show it yet) and I used a combination of the following:
- sticky headers (which gets rid of the "hundreds of rows" issue).
- automatic horizontal sliders (via overflow) so that users can browse the table horizontally.
- if columns can be grouped, it is possible to have only one group shown by default and the other groups shown on demand using radio buttons (with some underlying javascript/JQuery that hides/shows columns).
posted by elgilito at 3:48 PM on May 1, 2017 [1 favorite]

Socrata is glitchy and not super fun to use, but is an example of displaying data in the way you're looking for. Most government open data sites are using it these days (NYC 311 data as an example).
posted by snaw at 3:52 PM on May 1, 2017

baseball-referrence.com? Most of the tables presented use header abbreviations plus a pop-up glossary link at the top. It may not be exactly to your specs but it's a stat heavy site which often displays 15+ columns per table and is very readable.
posted by moxiequz at 3:58 PM on May 1, 2017

The link above is to the home page. This might be more useful to you: Example player page
posted by moxiequz at 4:00 PM on May 1, 2017

Agreed that sticky headers are very useful for tables with many rows. The primary techniques I've found for dealing with multiple columns boil down to: Scroll (whole table or with sticky first column), collapse or hide columns. Datatables.net has examples for each type, and I've found it pretty easy to use their examples with my own JSON to test the tables with data of my choosing. Be sure to check out the extensions section for examples of the fixed column and responsive types. Filament group also has some compelling examples that focus on show/hide capability.
posted by homesickness at 4:10 PM on May 1, 2017 [2 favorites]

I won a corporate department award (2 hours of extra time off, mentioned at department meeting, silly little trophy) for making an overly large table more readable and usable at work. I borrowed upon my GIS training to do so. I do not have a copy of this thing, so I can't show it to you. Thus, description follows.

I was working in an environment where the entire department had dual monitors. This meant we had two monitors side-by-side such that they were each taller than they were wide. I customized the data to display all of the most pertinent information within one screen and put "extra" stuff at the bottom. It had previously required scrolling side-to-side to do the most typical tasks and a lot of little used data was actively in our way. This piece of it was mostly done by tweaking column widths and just taking the least used information and moving it to its own section at the bottom, out of the main body.

I had a class in GIS map display that taught me that the human mind can only readily distinguish 7 colors. So I limited my color selection to no more than 7, and then varied hue within grouped information to make further distinctions. In other words, an overarching category was all blue, then some sections were lighter or darker to further segment the information within that section without confusing people. Rinse and repeat with other color choices. I was consistent from category to category as to what kinds of info got made lighter and what kinds of info got made darker.

This was a contact list for the department for certain issues. So, for this use case, it might be something like "People in the department on this team are all blue, supervisors are dark blue, some other related info is a lighter shade of blue." and then "People in the department on this other team are all peach, supervisors are a darker shade of peach, some other related info is lighter peach."

I used a lot of black, white and shades of grey for basic architecture. The mind doesn't seem to readily recognize that as "more colors." It helped it not look overly cluttered while making it easy to visually navigate. I also used typeface tricks to make distinctions. This can be as simple as making the font smaller in less important areas or using italics. Make sure you do not overuse italics. Only use them for things that will be in small chunks, not paragraph upon paragraph.

Also, be careful with yellow (especially bright yellow). It is a much stronger color than most people realize. It works great for small highlights. It is terrible and cringe-worthy for using in large swaths. (In GIS school this was demonstrated with a map that had a very large country, like Russia, shown in yellow on one of the sample maps of What Not To Do.)
posted by Michele in California at 4:11 PM on May 1, 2017 [6 favorites]

Crossfilter and its d3-implemented version, dc.js may be helpful to check out.
posted by suedehead at 4:11 PM on May 1, 2017

A really really good resource is Edward Tufte and his seminal book The Visual Display of Quantitative Information. It's a spectacular book and may give you some good ideas.
posted by MovableBookLady at 7:48 PM on May 1, 2017 [1 favorite]

How about the tables on the Census pages? American Fact Finder lets users create huge tables. Here is an example that illustrates their methods. Sticky headers, breadcrumbs, banded rows, and allowing users to download the file are all best practices.
posted by acridrabbit at 8:17 AM on May 2, 2017

Response by poster: That's the only way to be more helpful to them: figure out what they need to see and when.

We know what they need to see and when: I should clarify that the challenge here is not what to display, it's how to make it as readable as possible. They already have filtering functions and pagination, but the pages are still quite large and the number of data fields in each row for some of these things is huge. (The number that NEED to be displayed for each record is dozens, from several hundred fields we actually have data for.)

There are some additional technical tricks here that we're not currently doing and may be useful, but the visual design element is the biggest thing.

This is an internal, very very very specialist kind of tool and the general attitude has been forever that nobody cares what it looks like, but currently what it looks like is nearly unreadable and I'm trying to transition something just a little less terrible. The census data is a good example and very useful.
posted by Sequence at 9:20 AM on May 3, 2017

Have you looked at Airtable? It's a hybrid between a relational database and a spreadsheet. They have a pretty clear, simple, user-friendly UI. Each 'sheet' can have multiple views on top of it, so you can have a 'simple view' vs. a 'show me everything' view. It has sticky headers and assumes that you'll need to scroll around. It also has a view where you can click on each 'row', and will expand it into its own window so you can delve deep into the data. Here's an example they provide.

It may be helpful to look at for reference. I use to collaboratively manage a member database with 20 columns and 500 rows, and it works very well.
posted by suedehead at 9:51 AM on May 3, 2017