Date and Time
Date and time may be displayed for information purposes (eg transaction history) or for delay tolerance (eg payment processing, OTP). Time can be absolute or relative, but it should always feel accurate and reliable for a user on our system.
Dates
Be specific
Use exact values, or a fairly reliable range of values. Avoid using terms like “tomorrow” or “half a day”. In some cases, this rule may be relaxed
Use recommended format
Use DD MMM, YYYY format for dates. Month can be written in full or using first three letters. Avoid using DD/MM/YY or MM/DD/YYYY formats.
Remember spacing
Write the full year
You may omit year completely for temporaries or interstitials. But, remember to never abbreviate the year.
Don't prefix 0 for single digits
Don't use ordinals in date
Use [-st/-rd/-th] only when you’re referring to a specific recurring day: “Repay on the 3rd and 18th of every month” [For non-dates, this rule may be relaxed. See: Numbers]
Aggregate date ranges
For date ranges, you may aggregate month or year if it is the same. Use a dash as connector. If there are space constraints, you may omit the spaces next to the dash.
Placeholder dates
For placeholder text in form fields, you may use the format [dd/mm/yyyy] as shown below
Time
Be specific
Avoid using vague time anchors (eg “in a moment” or “a while”). Instead use exact values, or a fairly reliable range of values. [In some cases, this rule may be relaxed. See: Loading States]
Also avoid terms like “noon” or “midnight” too, to keep consistency.
Use recommended format
Use the 12-hour clock in “00:00” format with “AM/PM” suffix. Always add a space before the suffix. Do not add any punctuation, dashes or periods in between.
Don't prefix 0 for single digits
Use numbers
Do not express time in words (See: Exceptions)
Aggregate time ranges
For time ranges, you may aggregate AM/PM if it is the same. Use dash as connector. If there are space constraints, you may omit the spaces next to the dash.
Dates and Time combined
Date, then day, then time
Maintain the same order even if one of the parameters is missing
Durations
If < 48 hours, use either [hr/hrs] or [min/mins] or [sec/secs].
- For [hours, minutes] or [hours, minutes, seconds] combinations, abbreviate to [h m] and [h m s]
- For dynamic countdowns like video durations and OTP timers, use [00:00:00] or [00:00] format
- Don’t mix up your singulars and plurals, please.
If [48 hours < duration < 7 days] use combined date and time stamp.
- For [days, hours] or [days, hours, minutes] combinations, abbreviate to [d h] or [d h m]
- You may also use just “days” if accuracy is not important or known.
- Avoid using weeks, months of years. Use exact dates in those cases.
If > 7 days, use the exact date.
Show at most 3 parameters
Date & Time ranges
Apply all the rules you’ve seen so far for complex Date and Time ranges. Example: 23 Jan 2022, Friday, 10:00 AM - 26 Jan 2022, Monday, 10:00 AM
Days of the week
Use “to” instead of dash when talking about days of the week. Don’t
Absolute and relative time
Using absolute time
Always use absolute time throughout the product, except for special cases.
Dynamic countdown (Waiting for OTP/Videos)
Don’t show elapsed time
Elapsed time can become a psychological burden for the user.
Even 5 minutes can feel like eternity if you’re counting every second without a clear end in sight. Hence, always show the time remaining rather than elapsed time.
Using relative time
Use relative time when accuracy isn’t important, but immediacy is. Examples:
- any service whose price is time dependent (eg price goes up per hour)
- payment reminders
- posts, reviews and comments
Relative time used in our product will be focused solely on duration. We will focus on how long ago something happened or in how much time it will happen.
You may also choose to show absolute time at a secondary level (e.g. on hover/on tap) whenever relative time is used.
Where to use
Bill payment reminders
Trigger | Show |
|---|---|
If due date is > 2 days away | Due on 14 Nov |
If due date is in 2 days | Due in 2 days |
| Due in 1 day | Due tomorrow |
| Due on date | Due today |
Overdue by 1-3 days | Overdue X days |
Overdue > 3 days | -- |
Plan expiry reminders
Trigger | Show |
|---|---|
Expiry > 2 days away | Expires on 14 Nov |
Expiry is in 2 days | Expiring in 2 days |
| Expiry in 1 day | Expiring tomorrow |
| Expiry on date | Expiring today |
Expired for 1-5 days | Expired X days ago |
Overdue > 5 days | -- |
Limited time offers
Trigger | Show |
|---|---|
| > 2 days | Expires on 14 Nov / Expires soon |
Expiry is in 2 days or less | Expires in 2 days / Expires in 48:34:01 / Expires in 48h 34m 01s |
| Expiry in 1 day | Expires tomorrow / Expires in 26:05:21 / Expires in 26h 5m 21s |
| Expiry on date | Expires today / Expires in 04:15:22 / Expires in 4h 15m 22s |
Exceptions
Some cases may not fall under any of the rules above.
-
When referring to 12:00 AM of a certain day, users may interpret it as 12:00 AM in the morning (same day) or 12:00 AM at night (the next day) In such cases, use 12:01 AM along with the day/date.
-
A periodical range: “Monday to Friday at 5:00 PM”
-
When we don’t know / can’t overpromise: “Coming soon”
-
When the main intention is to imbibe FOMO: “Offer expires tomorrow!”