# Display multi-part progress

I am trying to come up with an effective way to show progress towards a college degree.

I have tried a couple of different things, but no solution has been able to solve all of my requirements.

I started off with a pyramid, where each level represented a level of courses (1000 level, 2000 level, etc). I liked this approach because it gave a degree of separation: you could see which components you were missing (for example, you hadn't finished all of your 4000 level courses). Unfortunately, the pyramid doesn't make sense for a degree, since the number of 1000, 2000, and 3000 level courses are usually similar, making for an oddly shaped pyramid, and I didn't like how it looked like a Christmas tree:

Next I decided to try something more traditional: bar graphs. I didn't like bar graphs though, because it gave the impression that all years of school had the same amount of courses:

So I switched it for a bar graph like following, which better represents how many courses are involved with each year:

My problem with the bar graphs is I find its hard to get a feel for how much is left in total. For example, you see that there is a little left to go for 3000 and 4000 level courses, but don't get a feel for the total.

So then I thought about one of these, which gives you a better feel for the overall completion, but I'm not sold on it:

Can anyone suggest a better approach? To summarize, what I am looking for is something that gives some feeling of modularity, but still represents the degree is a whole.

• Have you looked at stacking your bar graph instead? It gives the user a percentage of completion toward the end goal, but it would effectively take some away from what remains (unless you had two content areas, one for completed, one for remaining) – PW Kad Jan 22 '14 at 4:00
• My quarrel with the stacked bar graph is that you can't really tell how close each part is to its own completion. I guess I could colour code the parts or something. – TylerAndFriends Jan 22 '14 at 4:18

I would consider visualizing courses as individual units in the graph. After all, they are the building block of your degree. Displaying the graph this way will also give a more accurate view of your progress: You can see which courses you have passed, failed or skipped/remaining. You could also display more information about the individual courses on hover (right-click the image below and save or view in new tab to see it in full scale).

One more thing I would add to the above screenshot is highlight the current year. This will help tell which courses were skipped (past years) vs. the ones that are due (this year and next years).

## Pie like chart solution

The idea is that the whole program for the college degree is represented by the circle. Each year is a pie from this circle, so you may have tree of five or how ever many you need. Then, you fill each of the pies according to the completion of that part of program. That makes it easy to see progress for each of the years.

If you want to vary the total course load per year, you could vary the part of the circle that is used to represent that year.

It is a variation on the spider or radar graph. In a spider graph, the years would be on axis instead, with lines connecting the axis, optionally filling the spanned area:

## Rectangular area based solution

An alternative solution could be something like this:

The idea in this mockup is that again the total program load is reprented by the graphs total area. Each year is represented by a strip in the graph, who's hight is proporional to the proportion of the course load of that year in relation to the total course load. Every bars fill represents the progress in that year.

So, in the example above, the first year would have the highest course load, the second year would be relatively light, the third year would have a heavier load again, with the final year just containing a few courses.

In the graph, I drew the not-completed part of the bars too, to make it visible what the load of that year is even if the progress for that year is still at 0%. Otherwise, no bar would be drawn at all, and that makes it hard to see the course load for that year.

I would recommend some form of a stacked progress bar, a la:

The key here is to be able to present information in sections (via the coloring and/or labeling the sections in the graph) but stack them so as to present the overall progress towards the degree. You can use muted coloring (and popovers) to represent progress within each category.

You should maintain accurate proportions for each section and completion percentage (likely determined by the total credit hours of the section). If the senior year has twice as many credits as the freshman year, it should be twice as big in the context of the overall bar; this is the main difference between this method and your last example.

• it doesn't tell how much of each type is left. – kBisla Jan 22 '14 at 12:07
• @BlueFlame You would use muted colors to indicate progress within each category. I thought that was obvious, but I'll update my example. – Joshua Barron Jan 22 '14 at 15:49