UI cards in my application expire after 3 days of creation. I indicate this in a badge as shown in the image.
The different states of the element are:-
The live countdown timer starts once it reaches below 1 hour only. i.e it starts from 59 minutes and 59 seconds.
So my dilemma is about; how to show the mm:ss format. The general options that I had are shown in the below image.
Please think about this and suggest the best way through this one :)
According to me, the best option would be to use 59m 59s.
This will surely help a user to understand the time available without any confusion. Here the labels are clearly visible at the first glance along with the second's portion ticking provide the information more precisely to the users.
Moreover, users will be familiar with this format from other websites like Amazon and Flipkart.
Extras: I would never consider using the option "expires in 59:19" as it can be a little confusing to the users at their first glance. Maybe rephrasing it as "59:19 left" (eg. BookMyShow) and seeing the second's portion ticking, our mind would require lesser time to process the information but, still not better than the previous option.
Kishan I would step back and approach it from a deeper UX perspective; who are your users, what are they doing, what information is pertinent to them?
When you delve a little deeper, the answers might begin to come to the surface.
Thinking through it very quickly and without knowing your users or the context of this expiring card, I'd hazard a guess that your users will rarely need to know the exact second the card is valid for an entire hour out of expiration. They probably don't require such granular information and, like you've discovered, it becomes messy and a little confusing when you try to format it.
Perhaps the user only needs to see the seconds in the last 10 minutes, 5 minutes or 1 minute, much like the countdown of an Ebay item, once you hit the hour it could be minute based (58 minutes remaining) then when you hit the sweet spot, it changes colour/state and gets down to detail; 2 minutes 33 seconds remaining.
Worth a think through from your users perspective and what the countdown timer is actually trying to achieve; sales/bonus information/urgency etc?
Why don't you just give the actual time until expiry? At the moment, you're proposing to tell me that the offer expires "in one day". But what does that mean?
Let's say it's 3pm on Thursday. It would be really annoying if you'd rounded up 12hr 1m to "one day", because then I could come back tomorrow morning and find the deal already expired. By the same token, the deal must have expired before 3pm on Saturday or you'd surely have told me "two days". So all you've told me is that the deal expires some time between 3pm Friday and 3pm Saturday. Or maybe you did round it and it expires some time between 3am Friday (0.5 days) and 3am Saturday (1.5 days). That's maddeningly, frustratingly imprecise and we've not even got to the part you were asking about!
Now, for the options less than an hour.
59:59
This is vague. If it's updating once a second, it's probably OK. If it's not updating, nobody knows if it's hours and minutes or minutes and seconds. (And the user might be tempted to sit around for a bit to see if it updates after a minute or two.)
Strictly speaking, even if it is updating once a second, it's still vague. Perhaps it really does mean 59h 59m but you're evil and the expiry time goes down by one minute every second! This could be the case if, for example, you were selling me a voucher that would be valid for a certain amount of time and, to pressure me into buying, the voucher lasts longer if I buy it sooner.
59:59 mins
If it's not updating, this is still vague. The colon works like a decimal point, so it should probably mean "59 minutes and 59 sub-units of a minute (i.e., seconds)". But can I trust you to use the same logic as me? Maybe you think it means "59 somethings (i.e., hours) and 59 minutes". I shouldn't have to try to figure out your state of mind to work out what you mean: you should tell me what you mean.
59:59 secs
This is basically the previous case but backwards. The user can infer that it means minutes and seconds because you're probably not timing to the nearest hundredth of a second and, if you meant 59.59s (i.e., a little less than fifty-nine and three-fifths of a second), you'd have used a decimal point, not a colon. But, again, why make me work all of this out instead of just telling me.
My suggestion would be to just present all times consistently as "1 day 23h 45m 6s" (or whatever abbreviations for the units you prefer) and omit any leading zeroes (so "45m 6s" rather than "0 days...").
You also have an option to display it as 59m 59s, if you're worrying about ambiguity.
If you have to stick with the options you provided I would go for 59:59 mins, since 59:59 may be interpreted as 59 hours 59 minutes and 59:59 secs seem weird and I would interpret it as 59 seconds 59 milliseconds. But after one or two seconds when I would see how the values change, I would figure it out.
Based on the update speed (the seconds value changes every second) it should be pretty clear quickly whether it is hh:mm or mm:ss.
So the format mm:ss should be sufficient to remove the ambiguity.
Well, depending on your geographical location and type of users, you could stick to the French way, which is 59m55 for 1 hour minus 5 seconds.
The drawback of this is that it is unusual (anywhere non-Francophone, AFAIK). The good thing is that it cannot be read ambiguously, as it clearly is 59 minutes and 55 of the smaller unit than a minute. Note that it is the same system as used in resistor marking in electronics: 7R15 is 7.15Ω whereas 7M15 is 7.15MΩ.
I would, however, use this only if you are restricted in space. If not, I would still go with 59m 55s.
Given you have Seconds in the fields, it's extremely clear what's happening as long as the page is visibly updating and simply displaying 32:15 should be clear as the seconds value ticks down.
A static page that only updates the ticker when refreshed will need units though. In this case I'd abandon the MM:SS format in favour of "XXm YYs", so 32m 15s
If you're going to convey information it should always be immediately readable and consistently displayed.
Displaying units is my preferential choice as the MM:SS format may be confused for a time of day rather than a countdown if the page is not updating (due to glitch, ajax-failure or simply being a shared screenshot)
