Unless you are a data-analyst or a statistician, you will probably be using two commonly used types of data analysis: Comparison and Composition.

Comparison of data is the most common and easy to understand type of data analysis. And that makes it the perfect starting point. So let us dive in.

Comparison of data

Consider the following cases:

• You want to compare the Quarterly Revenues of a product company over a period of 4 years.
• You want to compare the total visitors of ten competing websites for the month of May.
• You want to visualize the population trends of a country over a period of 170 years.

All these are examples of comparison of data. Let us now see how we go about deciding which chart to use for which situation.

1) Comparing Quarterly Sales over 4 years

We make a note of the following points:

• The Revenue (in dollars) will be shown along one axis.
• The time (quarter number) will be plotted along another axis.
• There are four categories: Q1, Q2, Q3 and Q4.
• Each category will have 4 columns for years 2006 through 2009.

Since the number of categories is quite small (less than 5) a column chart will be apt for this case.

2) Comparison of total visitors to 10 competing websites

We make notes again:

• The names (URLs, which are pretty long) of websites appear on one axis.
• The number of visitors appear on another axis.
• The number of categories is 10 (the number of websites).

We will choose a bar chart for this scenario because:

• A bar chart is suitable when the number of categories is higher than 8 and lower than 15.
• Bar charts give you more space for long text (since the screens are wider than they are high)

3) Population trend of a country over a period of 10 years.

Notes, yet again:

• Time (years) will be plotted along the X- axis (people are used to seeing time on X-axis. Physics guys nod your heads here).
• The Total Population will be plotted along the Y-axis.
• The number of categories/data points is very high (much more than 20).

We will choose a line chart for this plot because:

• The number of data points is very high and a column or bar chart will look pretty cluttered.
• Our aim for this chart is not to show the maximum or the minimum population. We are trying to show the trend, that is the rate of change of population (steepness of the line) rather than the population itself. A line chart is best suited for showing trend-based visualization.

This chart easily shows Abracadabra’s population growth to be almost parabolic with occasional negative spikes indicating catastrophes such as famines, etc.

So far, we have talked about data visualization for comparison of data. Next, we come to charts that depict composition of data.

Composition of data

Consider the following cases:

• You want to plot the break-up of traffic sources to your website.
• You want to plot the break-up of the visitors to your site by the duration they stayed on your site, in turn broken down on a day-wise basis.

All these are examples of composition data plots. Charts that are ideal for this kind of data are Pie/Doughnut charts, Stacked Charts, Multi-level pie charts etc. So let’s take this case-by-case and see which chart will be the best for each case.

1) Break-up of the visitors to your site based on traffic source

• There will be 4 categories: Direct Traffic, Search Engines, Referring Sites and Others
• We will plot the values in %, as we are interested in a comparative study more than the exact values.

The pie chart is a good fit given the conditions above, as we need to visualize the part to whole relationship of the traffic sources.

The pie and the doughnut chart are inter-changeable, and the choice mostly depends on your (or your client’s) taste.

2) Break-up of the visitors to your site depending on the duration of stay

• The number of visitors will be broken down as per the time they spend on the website.
• We also need to compare the above statistics depending on the day of the week. So the number of visitors by duration will in turn be broken down by the day of the week
• The total number of visitors to the site on every day also has to be displayed.

We will use a stacked column chart for our purposes because:

• It can show the break-up of visits by duration and show the whole using the same data plot.
• The number of categories is small – five, or seven if you want to consider weekends as well.

The stacked area chart could have been considered. But it is better suited when you want to see the trend of composition, rather than being concerned with the exact quantitative values.

So we have talked about Comparison and Composition of data. There is also another type of data analysis that combines the merits and functionality of both Comparison and Composition into one.

Distribution of data

Consider the following cases:

• You want to plot the variation of relative humidity with temperature.
• You want to plot the variation of rainfall with temperature.

In both these situations there are two parameters where one depends on another. In the first case for every temperature value (in centigrade) there will be a corresponding value of relative humidity. The data set includes a set of such pairs of values (temperature, RH). This is ideal for the use of a Scatter chart.

Similarly we will use a Scatter chart to represent the variation of rainfall with temperature.

Thus, a scatter chart is used when:

• There are a large number of discrete data points.
• There are two variables that are inter-dependent.
• If there are two or more sets of data (multi-series scatter) and you want to show similarity in their variations with respect to a single parameter. The common parameter is usually plotted along the horizontal axis.

We have reached the last leg of our article where we will talk about a chart where every point has-not two-but three associated parameters. Thus, it shows the inter-relationship between three variables. In the previous example, if you wanted to plot both the relative humidity and the rainfall of a place against the temperature, you can use the Bubble chart.

The chart has temperature along the horizontal axis and relative humidity along the vertical axis. The location of the circles therefore shows the variation of RH with temperature. The radius of each circle or bubble represents the amount of rainfall for a particular set of {Temperature, RH}.

The End. Or is it?

It is pretty difficult to have a guideline for all types of charts that soak in all kinds of data. For that a book will not be enough, let alone a tutorial. However, I have tried to cover the basic data representations and how to classify them as one of the three types viz, Comparison, Composition and Distribution.

The best way to select the right chart for your data is to ask yourself what you intend to analyze. Is it finding out a pattern? Is it seeing the break-up of one-complete-whole-something? Once you have your answer, your data analysis can be categorized into one of the 3 methods we just discussed. Then go ahead and plot the chart you think is the most suitable (with the help of the pointers given in the tutorial). If you are able to analyze whatever data you set out to, there you have it. If you could not, try out the other charting variations possible in that category. Sooner or later, you will strike gold.

Even though time consuming to start with, it is a very methodical approach. Once you master the art of selecting the right chart, it will serve you forever, placing powerful actionable information in your hands.

This post was written with the help of @hatfullofrain

One of our primary goals as designers is to constantly improve the usability of our websites and blogs.  Content, while very important, doesn’t help readers if they can’t easily get to it.  In this post, I’d like to outline several ways to quickly improve a blogs usability.

1. Work Above the Fold

We’ve probably all heard that statistic that viewers leave if they don’t find what they’re looking for above the fold (The view port seen on entrance without scrolling).  That’s so old, right?  We’ve got scroll wheels and bigger monitors now, so that rule no longer applies to all of my very interesting content.  Wrong. How are your viewers supposed to know that you have such brilliant content if they don’t see it as soon as they come to your site?  Is your Blog that much better than everyone else in your niche that viewers will feel inclined to stay longer looking for what they need?

Even from the point where I start creating mock-ups for my Blogs, I like to have a layer in Photoshop that shows me exactly what my users will see when they land on my site.  Having your top content above the fold will ensure that you send more viewers in the right direction – rather than away.

2. Track Your Blog’s Statistics

You can’t really design for above the fold until you know where the fold is for your viewers.  For this reason (and so many others) it’s very important that you know more about who your viewers are, and how they behave.  Statistics and Analytics programs can get you the data you need, and they’re very easy to come by.  Google Analytics is great solution to start out with, it’s free, and very easy to install.

Analytics programs like these can show you what content your users find most interesting, details about your viewers capabilities (screen resolution, browser, operating system, country, etc), where your viewers are coming from on the web, and much more.

3. Apply Those Statistics – Pareto’s Principle

Pareto’s Principle (Or the 80/20 Rule) basically states that anything in few (20%) is accountable for many (80%).  Now – that’s all very philosophical sounding, but it applies in Blog Usability too.  20% of the Blog is the most important to 80% of your viewers.Another way of putting it: Your viewers will spend their time and use 20% of your Blog, 80% of the time… or perhaps a more useful way to you as the designer – You should spend 80% of your time on the 20% of your Blog which viewers use most.  Sure – it’s not a perfect rule, and rules are sometimes meant to be broken, but it’s a great starting point.  If you see that most of your viewers come to your blog, and are immediately attracted to a specific page, make sure you spend lots of time making that page more helpful and usable.  Even use it to direct viewers to other areas of your blog.

4.Make Your RSS Feed Very Visible

We’ve talked about making your most important content very visible, and the same should apply to your RSS Feed.  Don’t rely on your viewers to spend their time searching for some fancy-schmancy RSS design you put together, and don’t think that they’ll check below the fold either.  Your RSS links should be prominent, above the fold, and sticking to the standard icon can help.

5.Make your Search Work Better (Wordpress Users)

Wordpress’s search tends to suck by default.  While there aren’t any incredibly easy ways to fix that, we can at least make it suck less.  Denis Bernardy’s Search Reloaded Plugin for Wordpress will at least make a few minor fixes that will list more accurate search results in a manner that makes more sense to your viewers.  Also worth noting is that most viewers expect to see a site search at the top right of your site.

6.Put Your Pixel Real Estate to Good Use

Don’t waste too much space on your Blog with nothingness.  While you should never confuse your readers with too much, it’s a good idea to put some of that white space to good use.  Try filling the gap with your most popular posts (as decided by your viewers), an extra search bar on the side of your blog, or extra links to your categories.  Be sure to get rid of elements that are unused based on your statistics.

7.Show Related Content on Individual Posts

Sometimes, Usability is a lot like herding sheep.  We want our viewers to act in ways that our desirable to us, so it’s our responsibility to lead them in the right direction.  We’ve given our readers direction from the home page of the blog, but what about the individual post?  Give your readers somewhere to go next.

A great plugin that can help you with this task is the Similar Posts plugin for Wordpress.

8.Your Links Should Make Sense

You’re links should be easy to differentiate from the rest of your content, and should be plainly obvious as to what they do.  A link to a post should give a description or title of the post.  A link that says “Comments” should link to the comments of a post.  If your content is typed in black, make your links another color – and consider underlining them, or doing something else to make them stick out.

9.Test.  Test Again.  Repeat as Needed

Testing your site is probably one of the most important parts of improving usability.  Find a couple of friends that are interested in your niche, and give them the opportunity to see how your blog works.  After they look through it, ask them things like:

• What was the site about?
• What was the first thing you saw?
• Did you see *page that you desire your viewers to see*?
• Was the design hard on the eyes?
• What was your favorite thing about the site?
• Least Favorite?

In short, your objective can often times be amounted to leading your viewers in a specific direction — and more importantly, a direction that makes sense to them.  Use statistics to see how your viewers are browsing your site, and constantly make improvements to make those numbers reflect how you want your viewers to be browsing your site.

In the long run, that’s what Usability is really all about: Directing your viewers to the parts of your site you want them to see.