Showing progress on activity over large time period

Question

Background

I am making a mobile app, where users need to perform some task N times a day. The target audience is women, with interest in healthy lifestyle (so not engineers who are comfortable with a lot of data, charts, etc).

Every day can be classified either as successful (the task was completed at least N times), almost successful (e.g. the task was completed between N-1 and N-3 times), or unsuccessful (everything else). Although, I don't want it to carry any negativity with unsuccessful days (so bright red things screaming FAIL is a no).

The Problem

What I am struggling with is displaying the progress over the last 7 and 30 days. I am trying to come up with something simple to understand over a glance and high precision is not really important. Meaning the end user doesn't really care if she succeeded 10 days out of 30 or 11. So color coding is a potential solution because it gives a good idea, briefly, not emphasizing accuracy.

Solutions I came up with

1. Textual information. For example: you completed your goal 10 days in a row! This could be an addition to other solutions, rather than the sole solution. Pro: unambiguous. Con: provides plenty of text and is not clearly obvious whether it's good or bad. The user has to read it every time.
2. Color coded calendar. Similar to github: Pros: color coding makes it easy to understand quickly, simple for 7 days tracking because only 7 squares. Cons: tricky for longer period of time (30 days), not obvious at first glance that it's a calendar.
3. Charts. Feels like it's a wrong solution as it emphasizes accuracy and absolute values rather than one of the 3 states. The users might not be very comfortable with charts.

I am seeking to use the same solution for both 7 and 30 days visualization to keep the consistency. But maybe the difference between 7 and 30 states is too big to use the same solution (e.g. color coded calendar is less user friendly for 30 states compared to 7).

Answer 1

I think solution 2 is the best option to start with, only because colours and calendars fit with the natural way we might think about time periods and statuses in the context of what you have described.

I think that there is too much difference between the 7 and 30 day ranges to present them at the same time, and so you should stick to the normal design of allowing the user to switch between these two views (e.g. Microsoft Outlook Calendar).

The github calendar is slightly more difficult to read between it is displayed from top to bottom and not horizontally as it normally done, so if you take a standard calendar with the dates displayed and colour code as you have designed then it should work fine for the 30 day view.

Answer 2

This may give you some ideas: https://github.com/mbostock/d3/wiki/Gallery

Also could try something like these: