Making a Streak Visualization More Intuitive

Question

I'm currently working on a website for tracking habit change. On the report page, I have goal cards users interact with in order to record their progress:

The donut chart in this example is trying to communicate the user's current streak is 1.6 days, as compared to his longest streak of 2 days. The red donut represents the percentage current streak divided by longest streak.

I don't think this representation is very clear. How can I make this data visualization more obvious while still keeping a compact form factor?

Result:

Based on the wonderful answers to this question, I originally redesigned the interface to appear like this:

I was still finding that this was discouraging to my userbase, so recently I updated the design to include a health meter that displays a rolling exponential average of their progress over the past 365 days.

Answer 1

Your graphic seems to require far too much information to describe what it means. Github does this through a table of Longest Streak next to Current Streak. It is easier to understand with just text.

To keep it compact you could remove everything but the most important information:

^{download bmml source – Wireframes created with Balsamiq Mockups}

If it is a pure visualization that you want you could use the Github concept of boxes for days:

Edit

Adding in a leader board, so you're not just chasing some target you hit a year ago by fluke, you're showing that you've beaten other targets.

^{download bmml source}

Answer 2

**Here are two alternative ways to represent ratios **

Using a high watermark line.

• This allows them to contrast their all time best with the current streak while also affording them to see some minor trends in their performance.
• A risk is them not understanding the high watermark which a screen overlay the first time might help them out.
• Apples health webkit does this well with steps walked and I will attach my own mockup.

Below is my mockup of what this might look like with a high watermark of 3 days vs 2.6 days in ones current streak.

The bottom line chart I believe is better because they can see the trend and after a while they will understand the high watermark. I also think that would work better with less screen real estate because drawing bars takes up more space.

In my opinion apples health webkit does this well with their # of steps walked. See their design below.

Put a Circular dial inside of another Circular dial for a smaller form factor (Aka partial circle inside of circle)

• You could put two different shades of colors inside of each other say a Dark green partial circle representing your all time high and then a lighter green partial circle representing your current streak.
• The two next to each other provides a nice natural contrast
• The reason I alter the color is because some people are color blind and red vs green might be similar so i elect to use two different shades of the same color.
• Quick mockup below

Also similar to the circle idea is a same contrast with bars is below that I made.

Answer 3

Take a page from video games and treat your personal best streak as a high score.

Classic games like Pac-Man show your high score at all times as a goal to reach, and when you achieve it you get to see both numbers change at the same time to reinforce the fact that each point is setting a new record.

More recently, Diablo 3 offers increasingly elaborate frames for your character's portrait as you level up. It's a small but tangible reward that visually reinforces your progress and provides additional incentive to get to "better" frames or just to see what comes next.

Rock Band not only tracks a high score, but also various levels of "stars" that get filled in when your score crosses various thresholds. (On the middle right, below the score.)

Some games like Geometry Wars that are all about chasing higher and higher scores will also show the high scores of your friends next to your own. This can serve as bragging rights, or provide incentive to try a little harder when you see your own top score trumped by someone else's.

Here's quick mockup using some of these ideas:

1. Make the current streak count larger since it's most important.
2. Show the "high score" on the screen as a goal to reach.
3. Use smaller units for good numbers and larger units for bad numbers. Measure the current streak in days so that you can see it tick over into double, then triple digits, but measure the time to catch up to the personal best in weeks or months so the numbers are smaller.
4. Change the image, color, or shape of the badge around the number as incentive to keep the streak going. It's a small reward, but checking back every day to see how things change can create a feedback loop and you'll have a rudimentary Skinner box.
5. Consider having additional week or month counters that fill up over time as the streak reaches those thresholds. The visual feedback of a nearly full container and the perception of a sunk cost (in that they've come to far to give up now) can be a powerful psychological force.
6. Only have a single button to keep the streak going. No one wants to admit failure and making them manually press a button to wash away their hard work is a little mean. Either they'll cheat and not press it, or they will and feel mad at the app. It should be enough to have them check in at regular intervals and hit the button to keep the streak going. If they fall off the wagon and avoid using the app out of shame, that should be enough to break the streak. (You should offer encouragement when they have the courage to return to the app and start a new streak.)
7. If your app has a social component, consider adding the streaks of the user's friends as well as their own. This could allow you to use peer pressure as a positive force.

There are many other game concepts you could use like multipliers or "ghosts" when trying to catch back up to your previous record. But be careful you don't go too far down the gamification path. It will be hard to do successfully when the rewards (better health) don't fit inside the game system loop.

Pac-Man image from http://www.arcade-museum.com/game_detail.php?game_id=10816

Diablo 3 Paragon portraits from http://diablo.wikia.com/wiki/Paragon

Rock Band image from http://en.wikipedia.org/wiki/Rock_Band

Geometry Wars scores from https://pokehface.wordpress.com/2010/11/

Answer 4

Is there a reason you're doing a ratio of "current streak" to "longest streak"? I don't know why that would be helpful to the user and encourage them to continue with their habit change.

Do you want to go a more aspirational route? The user is either going to be 1) In the middle of creating their longest streak or 2) working towards meeting their longest streak. I think it would be more helpful to focus on visualizing the current streak and then you could include the longest streak as either a marker that encourages them to get to it. (For example, if you represent the "current streak" as a line, the "longest streak" would be a marker somewhere in front of the end of the current streak line).

This post has some examples that you can use as inspiration.

Answer 5

I think you should look at the use of bullet charts/graphs, which is an enhanced version of bar graphs commonly used instead of dashboard gauges and meters. Characteristics of the bullet chart allow you to a lot of information in a small amount of space, and are cluttered with useless and distracting decoration. The bullet graph features a single, primary measure (in this case the current progress), compares that measure to one or more other measures to enrich its meaning (for example, the personal best or target streak), and displays it in the context of qualitative ranges of performance, such as poor, satisfactory, and good.

I'll let you have fun and work out how you can implement this if you think it is a good strategy, but also happy to discuss if you have more questions. Some examples from the wiki page is provided for your reference:

So putting everything together you have:

Answer 6

I like your circle, and I think the idea is on the right track.

In this suggestion, the central number denotes the significance of the circle and celebrating the client's accomplishment of goals. The lesser prominent number is the client's current score. The important thing to illustrate is setting goals and achieving them. Green, cyan, and blue are the favorite choices. Red isn't encouraging enough, my friend.
Note : in this case, the central number would have to change font size as the client's record becomes more verbose. However there is precedence for this behavior. Good luck!

Answer 7

There are great ideas in the other answers. But I'll add some thoughts, because I found the question very interesting.

I think there are several situations that need to be considered:

• There is no old streak <--
• There is one old streak
• There is more than one old streak
• The current streak is higher than the biggest older <--

The problem with the first one is that there is no comparison to be made and the last one has to manage the situation that the overall maximum will change. So you need a representation that can grow, that works when there is no streak set and that can compare several streaks.

An option is to set individual units of time, like dots, and place them in the screen, they can start at 0 and grow up.

Other idea is a spiral.

Or concentric circles, although a bit more complex to understand than the former.

The design can be certainly improved, but I hope I could make the idea clear.

Answer 8

Idea is to show 'best' in a subtle way