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:

Goal Card

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:

enter image description here

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.

enter image description here

up vote 21 down vote accepted

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.

enter image description here

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

mockup

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:

enter image description here

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.

mockup

download bmml source

  • 1
    +1 for simplicity! I am seriously considering this approach, complete with a waffle chart on the back of the card. What are your thoughts on the impact on motivation of this minimalist approach? – Nathan Arthur Apr 14 '15 at 23:03
  • 1
    This is just showing the "high scores". This fits well with the useful high scores comment from @NathanRabe. You could lay them out so that longest is at the top. – icc97 Apr 14 '15 at 23:42
  • I ended up following your approach most closely. See the edited question for the new design. Thank you! – Nathan Arthur Jun 4 '15 at 14:20
  • awesome! thanks for letting me know – icc97 Jun 6 '15 at 0:58

**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.

my high watermark mockup

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.

apples health WebKit using high watermark

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

enter image description here

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

  • Looking forward to seeing the mockup! – Nathan Arthur Apr 14 '15 at 19:52
  • just added the circle one – Frank Visaggio Apr 14 '15 at 20:02
  • I like these options. One question, though: For the bar & line graphs, what would you use for the x-axis? If each data point was a completed streak, space along the x-axis would not be meaningful. If each data point was the current streak length, whether completed or not, the graph would be limited to slow ascents followed by precipitous crashes--perhaps not the prettiest to look at. – Nathan Arthur Apr 14 '15 at 20:06
  • Typically X-axis are time but I would really just have nothing there. I would plot each data point a fixed distance away there's really only one data measurement being captured (the streak length). And then if it looks terrible after day 20 data points only show the last 20 or 15 points for a trend view". – Frank Visaggio Apr 14 '15 at 20:24
  • 1
    Space along the X axis represents no data just spacing between data points look at how you can represent data in Microsoft excel with just 1 column. Also the slow ascents and crashes are motivating for me for physical activity (if i work from home I have way less steps because my work location is very spaced out so I do a lot more walking). You could throw multiple designs on amazon mechanical turk to see what people find more or less motivating. – Frank Visaggio Apr 14 '15 at 20:27

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

Pac-Man screen

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.

Diablo 3 Paragon Portraits

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 stars

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.)

Geometry Wars Mode Select

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:

Sample Mockup

  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/

  • Great examples! The website is primarily for accountability, hence the ability to report a setback. Anyway, I'll definitely be considering your very concrete suggestions. Thank you! – Nathan Arthur Apr 15 '15 at 15:13
  • +50 for helping me think a lot more clearly about the psychology behind the stats! You can see the design as it stands now in the edited question. – Nathan Arthur Jun 5 '15 at 15:37

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.

  • Hmm, I like where you're going with this. So, for a currently longest streak, it might look like this: |======.====| And for a less-than-longest streak: |====----------| Am I understanding correctly? – Nathan Arthur Apr 14 '15 at 19:47
  • 2
    There's a lot you should borrow from video game high scores. The highest is always shown as a goal, and often when you meet it, both your current score and the high score update at the same time to further reinforce the fact that you are continually setting a new high score. – Nathan Rabe Apr 14 '15 at 19:53
  • @NathanRabe Yes, that is definitely the idea I'm trying to communicate. Can you point me to some examples of video games which do this well? – Nathan Arthur Apr 14 '15 at 20:03
  • 2
    @NathanArthur Not sure how many will fit in a comment, but some that come to mind: Geometry Wars: Retro Evolved on Xbox 360 shows your friends high scores next to your own when you start it up. Rock Band awards "stars" at certain score thresholds, as well as in game benefits of a streak. Many fighting games use a concept of a multiplier to increase your score more rapidly during a streak. It's no longer a linear score, but watching the numbers increase faster is a somewhat tangible reward for making it that far. – Nathan Rabe Apr 14 '15 at 20:22
  • 1
    @NathanArthur However, you'll also want to look at ways to mitigate the pain and frustration felt trying to work back up to that record after a user falls off the wagon. Racing games use "ghosts" to show you what the best time looked like, but I'm not sure what the parallel would be here. Perhaps a countdown of how many days are left until they beat the record? – Nathan Rabe Apr 14 '15 at 20:23

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:

enter image description here

enter image description here

So putting everything together you have:

enter image description here

  • Bullet graphs look like a great option! How would you recommend making these accessible for a non-technical and perhaps young audience? – Nathan Arthur Apr 14 '15 at 22:42
  • 1
    @NathanArthur what do you mean by accessible? I hope the example helps to illustrate the implementation from your design. You can encode a lot of information in a bullet graph, but if you want to make it accessible then try not to put too much information and perhaps throw in some nice colours? – Michael Lai Apr 14 '15 at 23:02

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

enter image description here

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!

  • +1 for recommending looking into the psychological effects of my color choices. – Nathan Arthur Apr 21 '15 at 22:55
  • I think this is a better way of displaying than the original - but shouldn't the current value be inside the circle - similar to when you have a clock. Then it would make sense to put the higher value above the circle – icc97 Apr 22 '15 at 11:17

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.

enter image description here

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

enter image description here

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

  • Good ideas for handling the very real constraints you've identified! Though still not obvious as to what is being indicated. Perhaps some labels, maybe on mouse over, would help? – Nathan Arthur Jan 6 '17 at 14:27
  • 1
    @NathanArthur You are right, I just looked into the way of representing the graph, but the context is incomplete. Possibly a title stating "Comparison of your streak in days" or something similar, could help. – Alvaro Jan 6 '17 at 14:30

Idea is to show 'best' in a subtle way

Idea is to show 'best' in a subtle way

  • 1
    If "best" isn't a full circle, what do any of the sizes represent? – Izkata Apr 15 '15 at 15:05
  • Full circle is what you planned. Planned: 2 days without smoking Currently: 1.6 days without smoking Best attempt ever: 1.8 days without smoking – Alex Debkaliuk May 8 '15 at 9:03

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.