Skip to main content

Representation of Timer in "Deal Expires in MM SS" [Resolved]

UI cards in my application expire after 3 days of creation. I indicate this in a badge as shown in the image.

enter image description here

The different states of the element are:-

enter image description here

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.

enter image description here

Please think about this and suggest the best way through this one :)

Question Credit: Kishan
Question Reference
Asked March 25, 2019
Posted Under: UI UX
7 Answers

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?

credit: Wristy Manchego
Answered March 25, 2019

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.

credit: Jaroslav M
Answered March 25, 2019

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.

credit: JAD
Answered March 25, 2019

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)

credit: Ruadhan2300
Answered March 25, 2019
Your Answer