User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
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.
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.
Fitness apps are often goal driven and use these ideas to motivate users to reach certain goals every day, week or month.
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.
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.
