2

I am looking for a visual way to display the elapsed and remaining days within a month without displaying a calendar.

Basically the purpose of the app is to reach a goal in a month time frame. So for info and motivation purpose I need to somehow display that you are at day 5 out of 31 days of a specific month in a visual way. (I looked into progress bars but it's not quite right).

Do you know any way of doing this?

1

Two possible solutions:

Circle

Create a circle that represents the goal for the entire month. Color in a certain amount that represents how much of the goal was completed. You can add any information you want in the middle or below the circle, like something that says it is "Day 5/31" or "26 days left". The circle can also be split into segments to make the units like days of the month more separate.

Bar Chart

Create a bar chart that is split into daily or weekly segments. Each bar can represent how much of the goal was met.

You can also create a single stacked bar to represent the entire goal, and use different colors for the days of the month, but that might look too much like a progress bar.

Examples:

Fitness apps are often goal driven and use these ideas to motivate users to reach certain goals every day, week or month.

Google Fit

If you look at the Google Fit app, steps and move minutes are represented in a circle. As the user moves toward the goal, the little circles with the arrows move around the big grey circle, and the grey circle gets colored in. As an extra visualization and kind of reward, when the goal is met, the circle turns into an octagon. In this app, most of the information is placed below the circle instead of the middle, but that can easily be changed.

This app also uses a bar chart on the bottom to represent how much of the heart minute goal was met. The dotted line is used as a goal measure and the bars are used as a way to show how much of the goal was met.

Google Fit

fitbit

The fitbit app uses a series of circles and bar charts to represent data. The steps circle on the top is similar to the Google Fit circle, and the grey part represents the goal, with the colored in part representing the completed amount.

If you look at the orange circle on the bottom, that example shows an idea that breaks the circle into segments and also displays "3 of 5 days".

The bar chart shows how much of the goal was completed each day in a month, and you can add a dotted line to show the goal.

fitbit home   fitbit steps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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