Focus with filters

Description

When setting up filters in your design, begin with thinking about what filters you need to have and begin to group them. Consider the best way to narrow the data down to the information you care about. Choose logical groups and think about whether or not you’ll be using TAGS. The filters you decide on should help someone answers the questions who, what, when, where and how much. Generally filters are broken into 3 types of groups:

Metrics – numerical filters
Groups – text based groups, such as type of employee, lists of items, etc.
Time – time based filters, such as months, quarters

When laying them out in your design, they should be direct and easily accessible. Avoid lots of configuration screens – they tend to be chunky and not as easy to access.

Examples

Good usage: www.JWT.com – simple, obvious and categorial filtering supported by sort and searching controls.

home-JWT.com_1.jpg

Good usage: Crossfilter – rapid feedback on filtering.

Crossfilter1.jpg

Good usage: Elastic lists – advanced filtering shows cascading filters.

5-years-of-infosthetics1.jpg

Resources
Best practices for designing faceted search filters
Live Filter Design Pattern
Faceted search: 4 design tips

Related Principles
Encourage exploration
Keep it lightweight
Control detail density
Allow direct manipulation

Provide next steps

Description
When providing the next steps for a user in an application, it is important to keep the an end goal in mind. The challenge is that goal can be very different for each person; so, without overburdening them with everything they can do, predict logical next steps at meaningful points in time.

There are multiple ways to organize how a user attains information and which method to use is based on how linear or fluid the path to the end goal is. For a linear, sequential path, there would always be a specific next step that must be taken. To lead the user to the next step, a clearly labeled button or input component would be necessary. You don’t want to make the next step difficult to find or get to.

An example of this would be something like a Travel booking site, such as Travelocity, or an online shopping site. There are clear steps laid out for the person making the purchase – find the product you want to buy, select the product, decide which options you want included (quantity, color, etc), give your shipping and billing information and whalah! You’ve followed the steps to reach your goal of buying something.

For a less linear path to completing a goal, it’s necessary to organize the information well and provide clear guidance to the next possible steps. To know what steps to guide them to, think of the goal. Are there multiple factors affecting the ability to attain that goal? If so, direct the user to those different factors. You could even rank the usefulness of the different options to guide the user to what would have the most impact up front, or to show them a logical order, though they may not want to follow it.

For example, on LinkedIn when you are setting up your profile, there is a section where it lets you know how much of your profile is complete and gives you suggestions of different ways to complete your profile and make your profile more attractive to other professionals.

linkedIN.png

In a data visualization context, if you are looking at sales goals and sales numbers, you can try to point the user to information about their productivity that will inform on ways to have their sales numbers match their goals. Maybe there is a stronger correlation between the number of sales calls made and sales results than between the number emails sent and resulting sales. Showing a ranking of the various things that can be done to reach a goal not only provides a next step for the user, but provides some context for which step to take next.

Examples
Poor usage: After opening this program, the very first thing I saw was a prompt asking me a very specific question. At this point I hardly, knew what the program was for, let alone what my camera’s frequency should be and if that mattered.

Source: ASUS Lifeframe

Source: ASUS Lifeframe

Good usage: Here is a familiar process, done perhaps better than you’re familiar with. This is a very linear process keeping the required action very large and obvious on the left with any additional detail updating as needed in deemphasized text to the right. The scrollbar shows your progress naturally.Test it out.

Source: https://en.wordpress.com/signup/

Source: https://en.wordpress.com/signup/

Related Principles
Suggest related items
Flow
Gradual reveal
Contextual help
Provide instruction
Encourage exploration
Present invitations
Provide goals
Communicate progress

Consider data comfort and expertise

Description

People using your application may have all different types of backgrounds and understandings of data and visualizations. It is important to keep this in mind when designing. If you will have a mix of novice and advanced users, it is important to think about how that will affect the application’s workflow and the data presentation. You don’t want to overwhelm and confuse the novice user, but you want to include appropriate features for the advanced user.

Choosing the right chart for the information you have and using the simplest appropriate visualizations, especially if you will have novice users, are two important things to consider. Simpler options would include things like a standard bar chart, pie chart, map or trend chart. More advanced options would be a bubble chart, treemap, heatmap, parallel coordinates or sankey chart, among others. Of course if you will have more than one level of user, there are some options to keep in mind to make the application most useful for everyone.

One thing to do is to use common language. Someone that is more familiar with the data or data field may understand the jargon associated with it, but novices can easily be confused by language that is confusing or misleading. Instead of technical or specialized terms, stick to standard and common language.

You can also make a more complicated visualization usable for a novice by clarifying with annotations, tooltips or other using other ways to provide instruction. For example, this interactive from The New York Times uses a stream graph. This would be considered a more advanced visualization, which the The New York Times is known for. But as a newspaper, they must also make their graphics accessible to the general reader. To make this chart more friendly for the general reader, they added keys and explanations as to how to read the chart on the right. Someone that doesn’t need that help can easily ignore it, but it’s there for those that need it.

Another option would be the use of drill down. Often it’s possible to have a more simple data up front, and reveal more detailed information and visualizations upon clicking and drilling down. This type of data flow would make it easier for a novice user to see how the data relates and not get too much information too soon, but it’s also easily accessible for the advance user.

Customization is also an option, though not used often. As users get more familiar with the data and interface, controls could be added that would allow for deeper exploration and more advanced visualization and control.

Examples
Beginner charting example: Chart Chooser line chart

trendChart.png

Advanced charting example: NY Times stream graph

nyt-streamgraph.png

Resources
Can Familiarity Trump Usability

Related Principles
Provide instruction
Explanation before information
Clarify with annotations
Allow customization

Make it conversational

Description

What does it mean when we say to make it conversational? It can mean a couple different things, but overall the idea is to make information more accessible and recognize opportunities to add some personality.

Some initial places to look for opportunities to add personality and a conversational tone could be in labeling, instructions and section headers. For example, instead of labeling a section “Number of visitors to your website,” consider making it more conversational with “How many people visited your website?” Breaking up information in smaller parts with labels structured the way that people would ask something in conversation can make getting to the information easier and more fun. Another place where this might be appropriate could be when greeting a user upon login. Instead of being more formal with “Hello, Jane” you could spice it up with “How ya doin, Jane?” or something along those lines, depending on the tone and personality you are trying to achieve.

Places where a more conversational tone can be used would also be in annotations and pop ups that give additional information. Instead of shortening information to fit nicely on screen, those are places where a little more text and explanation in a conversational tone could be appropriate.

Another slightly advanced approach to making things more conversation is within an actual visualization itself. There are not always opportunities for this, but if you find one, this can be a great way to lead a viewer through the data. For example, if your data is broken into a few different visualizations and charts that actually make the information feel disjointed and less cohesive (ie. several repetitious labels), consider trying to combine things into a different visualization that would allow a more clear conversational data structure.

With all these opportunities for making things more conversational, it is important to remember to keep the context of the information in mind and think through whether or not adding these things actually helps the information you are presenting and makes it more accessible or not. If that’s not the case, then maybe that isn’t the right place to insert it.

Examples

Scoutmob.com – Exhibiting one of the growing trends in writing that’s personable and fun.

Scoutmob_iPhone_Android_and_BlackBerry_apps-20120330-150418.jpg-e1333135874603.jpg

Google Docs – Arrow points out information that typically would be bullet points is now in a short meaningful sentence.

Technology_Bracketology_-_Round_4-20120330-145955.jpg-e1333136275146.jpg

Pipeline Deals – Customize the header sentence as a filtering mechanism

PipelineDeals_-_Deals-20120330-144238.jpg-e1333136378903.jpg

Juice.com | About Us – Section are expanded and collapsed based on a sentence structure to the left.
 

About-Us-–-Juice-Analytics-1-e1333136472519.jpg

Resources
Groupon Editorial Manual

Related Principles
Use common language
Avoid info overload
Match data structure visually
Clarify with annotations

Use common language

Description

This principle is all about the words you use. It is important to use common language that is easily understandable. If someone using your website, dashboard, etc has to google several of the terms used, that is a problem.

When thinking about the language you use, think about your audience. Who is it? How do they talk and write? How well do they understand the details of your industry, etc.? For example, within the medical world, it may be understood that “cephalalgia” is a medical term for headache, but if you tell the average person that you have a cephalalgia they may wonder if that’s a disease or some kind of growth. That’s probably not what you want. With many viewers, you want to use language that the person with the least understanding will be able to follow. If there is not a way to take a concept and break it down, have a definition handy and accessible, such as in an annotation.

Another thing to consider is native language and the country your audience may be from. If you will have people from various countries viewing your site, having a language control could be important. Also, words in one country can mean something different in another. For example, in the U.S. when we ask for chips at a restaurant, we mean chips, right? Like Doritos or tortilla chips. But in some places chips refer to what we in the U.S. call fries. You’ve heard of “fish n’ chips” haven’t you? So keep that in mind in the case that you have an international audience.

Examples
Poor usage: It’s almost too easy to find this principle horribly implemented in error or notification messages. In fact, it can be downright comical:

image1.jpg
to-delete-or-not-delete.jpg
Disable-and-Remove-Windows-Genuine-Advantage-Notifications-Nag-Screen-«-My-Digital-Life.jpg

Good usage: Perhaps one of the most experienced and worst examples of poor common language is html error pages like a 404 page. You’ve experienced those, so instead let’s look at some good ones.

Bergan-BLue-Error-404-Page-Not-Found2.jpg
Error-404-Not-Found1-12.jpg

Resources
The Writing Center
Customer Communication? Stop Talking Gibberish
Data Quality from the Ground Up – Use Common Language Please

Related Principles
Flow
Clarify with annotations
Support role
Allow for casual use

Promote patterns

Description

Patterns can be many things – a spike on a trend of products at a certain time, or clustering of objects in a bubble chart showing a pattern of commonality. A primary goal of patterns is to discover cause and effect.

But when displaying data with the purpose of showing patterns, you want to make sure that your users are actually seeing those patterns. In order to do so, it’s important to know how to emphasize and call attention to them.

One way to do this is by showing a view that allows one to see multiple sets of data at once. When looking at all of them together, a pattern may be seen. Examples of this include small multiples and whisker plots. Both have examples shown below.

Another way would be to highlight certain information that reveals a pattern with the use of contrast, shape, movement and/or size.

Take the wind map from below for example. Through the use of contrast and movement, wind all around the country is shown in patterns. On the other hand, you could also take multiple wind maps and place them side by side in a small multiples format and show patterns of wind over time.

Despite your approach, make sure the pattern stands out and that the use of visualization and layout complement your desire to show patterns.

Examples
Small multiples – Zach from Juice discusses the comparison tradeoffs in this chart type which simplifies pattern recognition. Here is another example of these as trends.

smallmultiples1-1.png

Wind Map – This beautiful visualization by the good folks at hint.fm shows patterns by plotting all wind data simultaneously as it happens. The culminating shape and speed of the wind itself is comparable from region to region.

Wind-Map_-Historical-1-1-1.png

Win-loss whisker plot – Here is another type of small multiple that allows one to quickly scan patterns between two options. In this case it is wins(blue) or losses(red) or ties(grey) of the 2011 MLS season.

Sparklines-for-MLS-Season.png

 
Related Principles
All on screen
Track changes
Emphasize the interesting

Consider data set extremes

Description

There are a few ways to think of data set extremes. The most obvious seems to be actually looking at the outliers of a data set. Whether you have a little or a lot of data, chances are there will be some data points that aren’t nicely lined up with everything else. You may have one big cluster and then a few others that throw everything off, including scale. It’s important to consider those outliers when thinking about your design or chosen visualization. How will you handle them? Will you not include them in some views, but have other views where they can be seen?

Another important part of data extremes are the amount of granularity in your data and what you actually want to show. If showing an amount of time all the way down to the seconds is available, ask yourself if it’s really valuable for your purposes before including it. Also look at the length of time over which your data expands and how you choose to show that. If you show data from a long period of time in a small amount of space, the amount of granularity that someone will be able to see may be minimal.

Comparisons are also quite important. If you have two charts that are being compared, but the minimum and maximum numbers are quite different, scaling the axis’ appropriately so they can be accurately compared is vital for quick and easy comparison. If the axis’ are not to scale comparatively, people may actually misread the data at first glance.

Other types of extremes to consider are text based extremes. If you have some lists that will be really long and others that will be short, how should you handle that? Word labels will vary in size and you may have some that are really long. Think about the approach to that. Should you show part of the label and have the full label show upon rollover? Or should you have the label jump to two or three lines, if necessary? Is there a better solution? Each scenario is different, so think about what works for what you are doing.

Also, be sure to account for perceived color differences if you are choosing colors to represent your data. The more categories you have, the more tricky this can become. If you think two colors may be a little close, find different colors. You may know that they are different, but others may not seen those differences if they aren’t pronounced enough.

Examples

Poor Usage
This Network of Data Visualization references does indeed have lots of useful information; however, the enormity of the data in combination with a network diagram leads to your classic hairball example of mismatched design and purpose. There is an attempt to remedy this with a fisheye interaction, but it manages to both not solve the problem and add difficulty actually making selection.

Data-visualization-references-network-625x350-e1339614209637.png

Good usage:
Gapminder World examples one good consideration to deal with its extremes by presenting an optional toggle directly on the axis to switch between a linear and logarithmic scale.

Gapminder-World-1-e1339614385775.jpg

Related Principles
Communicate true scale
Time contextualizes
Choose the right chart
Focus with filters

Rarely use 3D

Description
Often people will try to make charts look more interesting. Though this is a worthy effort, it can lead to graphics that emphasize interface verse information. Moreover, this effort can undermine the worth of data, which should be interesting enough. 3D effects is the most common technique, but should actually rarely be used. Only if the use of 3D will actually enhance your understanding of the data – not just make it cool and fun to explore – should it be considered. In most cases, the use of 3D can actually distort the information and make it more difficult to read and understand clearly.

Some situations where communicating information in 3D may be appropriate: the data dimension in fact exists within 3D space (geography), or for highly advanced scientific visualizations where the z-axis could show another variable. But again, before using 3D consider if it really does anything to actually enhance understanding. Just because something exists in 3D space doesn’t mean it’s most easily understood that way as a data visualization.

Examples
The chart below is attempting to show the difference between what people actually make (income) versus what they take on in debt in order to achieve the “American Dream.” However the use of 3D severely hinders a quick and easy understanding of the actual data. Without looking closely, it is difficult to compare the height of one bar to another, and the little figures on top of the bars certainly doesn’t do anything to help. You can’t even see the top of the home mortgage bar with the house on top of it. And what value do the figures add anyways? Without them, would you not understand what a mortgage is? Or what marriage is? Even the text is written in the 3D space on the bars, making that difficult to read as well. There is so much going on in this bar chart that is takes much more time to figure out than necessary.

american-dreams-to-debt-solutions-1.png

The visualization by Time Magazine is showing population in the U.S. At quick glance, it is easy to see that New York City has the largest population (that is if that label were displayed – though is it on rollover). From there though, the comparisons become difficult. The question is whether this is more easy to understand that a standard flat map of the U.S. with cities/counties/etc colored by population. The other question is who is your audience and what information do they care about? If something general like what you can get from this map is all they want, then it would serve its purpose. If they are looking for more detailed information, this would not be the map for them.

time.png

The map below is from The New York Times and shows subprime mortgage foreclosures. Again, does the use of 3D enhance the understanding of the information? Considering it’s very difficult to see the differences in height, some 3D bars may be hiding other bars and the shadows from the bars make distinguishing the colors of the bars difficult, I’d say not. Perhaps a map like the 2 below would have been more effective. Maybe not as cool and eye-catching, but certainly it would show the data more clearly.

foreclosures.png

The chart from GOOD Magazine below shows the most frequently used words in two different books, but it is not effective. I believe it’s supposed to be a bar chart, but the use of 3D for the bars makes it impossible to accurately compare them. Without the numbers in the callout boxes, this chart would actually read incorrectly. For example, look at the two Bush bars. Without looking at the numbers in their callouts, they actually look the same when in fact they are not.

On-Words-Concordance.jpg

Related Principles
Minimize illusions
Communicate true scale
Use simplest appropriate visualizations

Use gradients appropriately

Description

To gradient or not to gradient, that is the question. Thankfully, there is much less subjectivity to this principle than most people think. How many times have you seen a bar chart that looks like similar to this?

bad-gradient-bars.png

One particular design element it got wrong (amongst others) is the vertical gradients starting from a darker hue at the bottom of the bar to a lighter version of the hue at the top. This illustrates the first aspect of this principle:

Gradients are great for sequential rates.

For example, if you’d like to show ordered values from 0% to 100% visually, it may be perfectly appropriate to use a gradient. If you are showing a single metric value, it’s almost never appropriate because you are presenting distracting visual changes that carry no meaning.

Many will say, “But my bar charts are boring without them.” To which I would say, “Then either you are showing boring data, or the overall styling of the interface is poorly designed.” Don’t let data readings suffer at the expense of bad design. This brings up the 2nd aspect of this principle:

Calm gradients mimic reality.

An information purest usually won’t touch a gradient with a ten foot pole. However, the simple reason they can be helpful is they communicate something inherent to the world we live in: light and shadow. It’s this natural metaphor that makes gradients useful for defining interface elements and providing overall structure for how things are visually grouped. An appropriate example may be giving a slight drop shadow to a tool tip that would appear “above” the interface. The definition is natural because it mimics what natural light does from one thing being in front of another. Also note, however, that excessive and pronounced use of gradients mimic cartoony, unrealistic imagery and promote further distraction.

Examples
Poor usage:This interface uses a lot of gradients. So many are used in what seems to be an attempt to highlight things that everything is screaming for your attention and you don’t know where to go first. And many of the gradients are quite drastic, such as the yellow to green gradient on the “Generator” button. A gradient doesn’t need to be that drastic to add some dimension and interest. The dark grey gradient at the top is nice and subtle.

Source: http://www.stripemania.com/

Source: http://www.stripemania.com/

Good usage:This website interface uses gradients, color and drop shadows well to differentiate sections and highlight. The gradients that are used are subtle and create some dimension. The drop shadows are varied and give a sense of depth.

Source: http://www.colorschemer.com/

Source: http://www.colorschemer.com/

Resources
Color Brewer 2.0

Related Principles
Color has meaning
Remove junk, increase data-to-ink ratio

Color has meaning

Description

More often than not, dashboards get lit up with color like an over-dressed Christmas tree. The color is applied indiscriminately and adds little to the meaning of the dashboard. Appropriate use of color requires restraint. In our dashboard designs, we typically start by using only grey, then we gradually add color where it conveys useful information.

Color can draw your eye to what is important and tie together similar things. For example, if we increase color brightness, it will attract attention and make a point seem more important. Similarly, use of the same color hue can be used to connect things that are related.

Color can communicate emotion and feeling. For example, red can be associated with positive feelings like excitement and desire, but also with negative feelings of danger and alarm. One common use for color in data visualization is using red for negative/loss (like a loss of money) and green for positive/gains. If you were to have a green arrow pointing down to show loss and a red arrow pointing up to show gains, that would be confusing.

The meaning of color differs by culture. For example, in the U.S., white is the color worn by brides to symbolize purity. In China, white symbolizes mourning and death, and red is the color for brides and celebration.

Meaning-in-color-e1328906744180.png

Colors can be broken into high-level dichotomies such as “earth-tones” versus “unnatural” colors. We perceive earth-tones as calming (Edward Tufte has said that these are the kinds of colors you want to use if you just want to use color very gently on your page). In contrast, unnatural colors jump out at your audience, making them ideal for showing an alert.

Color to display data
When you are using color in your graphs to represent data, there are three types of color schemes to consider:

  • Sequential when you are ordering values from low to high.
  • Divergent when the values are ordered and there is a critical mid-point (e.g. an average or zero).
  • Categorical when data falls into distinct groups (e.g. countries) and therefore requires contrast between adjacent colors.
gradient-values-e1328906861195.png

Examples
Poor usage: With red being such a bright, powerful color that can create strong positive feelings of passion and desire or strong negative feelings of alert or alarm, it is generally a color used more sparingly. The use of red here doesn’t really support the content and its overuse becomes overwhelming to look at for long periods. Also, color should be used to highlight things or separate sections of information. Because the red is so prevalent and bright, it becomes unclear where to start when you first look at the page.

poor-usage1-e1328906992445.png

Good usage: Mint.com’s mobile application uses red to alert overspending or a loss, green to show good money usage or a gain, and yellow to warn that you are getting close to overspending.

Mint.com mobile app

Mint.com mobile app