How to Design Date Ranges On Mobile. Tips & Tricks.
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.
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]
This site uses cookies that help the website to function and also to track your interaction with our website. But for us to provide the best user experience, enable the specific cookies fron Settings and click on Accept. Read More
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Cookie
Duration
Description
cookielawinfo-checbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".