How to Design Date Ranges On Mobile. Tips & Tricks.

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.

1. The Transactions History Screen

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.

2. Let’s Define the Date Ranges

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:

• How he might want to see results, by week, day, month, or custom?
• What is the most accessed interval?
• How he might navigate through them?

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.

3. Monthly

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

4. Yearly

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.

5. Custom Date Ranges

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.

Bottom Line

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