December 22, 2021 3 minutes read
We all know how useful it is today to access data by using date ranges. This is a powerful feature that helps us stay on track and get valuable insights. But, there are also some bumps with it, if not designed properly. Keep on reading.
There are times when you need to look back in time to make sure you have all the information you need or find out what happened at a certain point in time. Or maybe you want to compare a time interval to another. With these needs in mind, we come up with this blog post – on exactly how to design date ranges that can help you meet all your requirements for time-based analysis.
Without further details let’s get down to the creative process. Let’s say we’re building a wallet mobile app that helps us track expenses, set up saving goals, and finally save some money.
This is the place where you see all your transactions. The main element that controls everything underneath it, is the date selector from the right-hand side of the top header of this page.
For the default value, you can pre-select the results from the current day or week. I decided to have a broader view, so I’ve chosen the current month, but you can go with any value that you want. I think the recent the interval, the better.
As you may know, empathizing with the user is one of the most important phases of the design process in my opinion. We have to ask ourselves some questions before we go with the ideation process:
When he clicks on the dropdown, a tab will appear below. Something like this:
Now, I will show you exactly how I went with the whole process guys. I will bread down the images with each interval. Should be self-explanatory with no complicated stuff.
After he clicks on the monthly tab the specific information appears. At the top, I added the year. We can navigate to a specific one with the help of the prev/next arrows from left and right. Make sure the next arrow is disabled if we are in the current year, also outline the current month. These are some details that make all the difference. As you may know the famous quote:
The details are not details, they make the design.
Charles Eames
Here is very simple. Just select the year you want to see the results from and make sure you outline the current year. Display years from the beginning of his first transaction to the present moment.
There are times when you want to compare two different time intervals with one another. If you want to be more specific, the tab named custom might come in handy for that.
Guys, I hope you find these tips useful. If you want to download this freebie you can do it from here.
Meanwhile, is there anything you want to add to this use case? If yes, shoot me a message at [email protected]
Thanks,
Dorin