Up at 5AM: The 5AM Solutions Blog

3 Steps For Narrative Data Design

Posted on Thu, Oct 03, 2013 @ 06:00 AM


Design and layout are often neglected when it comes to large quantities of data. The go-to answer seems to be, "put it in a table and call it done." However, if you take the time to think about the layout and design, you can get your audience to the information they need more quickly and easily. Below are some ideas on how to improve the presentation of your data.


505798928 c03d2f4aa2 z resized 600

Imagine walking into a room full of hundreds of people all waiting for you to interview them for a job. There is no plan or organization in place for this meeting, so the mob of eager applicants all start talking at once. In order to impress you and catch your eye, many of them are wearing brightly colored suits and many of them are yelling to get your attention. Sounds like a wall of noise. Worse yet, imagine going into a second room where every applicant is wearing the same suit and quietly sitting, eyes straight ahead. In either scenario, it will be a long tedious day trying to find the one person who has the skills to get you the information you need to get your job done.

This is what it's like when your reader is presented with a large amounts of over- or under-formatted data.  By neglecting to design and structure the "narrative" of the data, it is often lost in that wall of noise.  

Here are 3 steps to follow to reconnect your data with its narrative voice:

Step 1: How many ways can you chunk?

The first step is to find the chunks.  Group your data and put it in order. Are there things that are of the same importance? same category? same topic? What are the non-obvious ways you can group the information?

When you group things together they can create a message on their own. In the same way you can sort applicants by their skills, you can sort your data - but don't stop at the obvious. Category sorting is easy, so try and think of other ways you can sort your data. Think of the order of the data. Think how the data is produced and ask if it reads in a different order.

For instance, on the recent redesign of the NBSTRN website, 5AM transformed several projects pages into one easy-to-view table. Before the redesign, you could only see which state participated in which project. After the redesign, you have the added benefit of seeing which research has the most projects and which has the least.

Try to stick with the rule of three. Most people can't keep track of more than three groups at a time…or at least not very well. Try to keep your headline levels and color choices to no more than three.

Step 2: Give it a Voice

Now that your data has some order, find ways to illustrate what each group is trying to say.

  • Use icons to symbolize repetitive information. Try to create a visual language. Are there symbols that can reasonably replace words or concepts? For instance, most of us could quickly understand what a checkbox or an "X" means. Scan your data for areas where things can be symbolized, such as "approved/disapproved," or "Started/Stopped/Paused."  With the hundreds of cheap or free icons available it is possible to symbolize almost any set of choices without too much effort.

  • Use color as a pointer, not a hammer. Every time you add color to your data, ask yourself, "what am I trying to say?" If the answer is "to make it look pretty," then put the mouse down. With data it can be very easy to go too far. We have all tried to read a rainbow-colored spreadsheet or chart. Too many colors becomes the room full of over-eager applicants.  Color theory holds that we generally can’t differentiate more than about 11 colors from each other on a single visualization.  More is not better.



Step 3: Cull!

One of the best things you can do is to cull. What isn't essential to what you are trying to say? Perhaps you can't delete information because it is part of a larger concept, but can it be moved? Maybe instead of having one graph with a year’s worth of data on it, you only show the top three months, or the most significant genes, etc.

Keep these steps in mind the next time you design for data, and you’ll let your data speak clearly!

- Leigh Boone

LeighBoone AuthorStamp











Tags: NBSTRN, data narrative, UX


Diagnostic Tests on the Map of Biomedicine


Download the ebook based on our popular blog series. This free, 50+ page edition features updated, expanded posts and redesigned, easier-to-read maps. 

FREE Biobanking Ebook

Biobanking Free Ebook
Get this 29 page PDF document on how data science can be used to advance biorepositories.

 Free NGS Whitepaper

NGS White Paper for Molecular Diagnostics

Learn about the applications, opportunities and challenges in this updated free white paper. 

Recent Posts