15

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 :)

  • 1
    Some solutions from here could help: ux.stackexchange.com/questions/75362/…. The options can be to add some extra info in the message like "Expire in less than an hour, 00:59:23", to use another format, like 59m 23s or use just minutes before the last minute, like you did in the other cases. – Madalina Taina Jun 19 '18 at 9:29
  • On a sidenote: i believe a fixed-width font is applicable here. :) – Ideogram Jul 1 '18 at 7:06
30
+50

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.

enter image description here

enter image description here

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.

enter image description here

  • 2
    But, as the right portion is ticking, do we need to explicitly write 'm' and 's'? Yes I get your point. It helps users understand. But it is excess baggage if users understand without that itself right? – Kishan Jun 7 '18 at 10:34
  • 2
    I understand its more information, but I feel it is worth having that excess baggage for more clarity :) – Akhil Ashok Jun 7 '18 at 10:38
  • 2
    @AkhilAshok I wouldn't call this excess nor baggage, it's simply a necessity. – MonkeyZeus Jun 7 '18 at 11:44
  • 30
    No colon in "59m 59s". – David Richerby Jun 7 '18 at 13:13
  • 5
    @Kishan I don't have an "official" explanation but the colon acts like a decimal point and you wouldn't write "5m.23cm". – David Richerby Jun 7 '18 at 13:37
11

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?

  • Understood the point. thank you. But, In my scenario, countdown from 1 hour is what the client wants. I am to find out which is the best representation for users. – Kishan Jun 7 '18 at 9:18
  • In most cases, the reason we add a per-second countdown is not to convey precision of information, it's to emphasise the countdown through "movement" and convey a sense of urgency. The human eye tracks change far better than it reads static information. If it just shows minutes, a user may simply not notice. The continuing countdown will grab the user's attention and emphasise its time-sensitivity. On the other hand, cases like how long ago a post was made on stackexchange are not time-sensitive and only show a static value, and not even a precise one. – Ruadhan2300 Jun 8 '18 at 13:12
10

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...").

  • Chill bro. Take it easy! – Kishan Jun 7 '18 at 14:52
  • I AM CHILLED!!! :-) Er, I mean, sorry -- I wasn't annoyed/angry/whatever and didn't mean to sound that way. – David Richerby Jun 7 '18 at 20:50
9

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.

  • 1
    Great. Now I have one more person thinking just like me. – Kishan Jun 7 '18 at 9:22
  • 10
    "59:59 mins" doesn't make sense. You have two units here—minutes and seconds. Labeling only one of these units gives the user two equally valid ways to parse this value. Forcing the user to resort to watching for the value to change a couple times means they have to spend at least 1-2 seconds just trying to figure out what the units are, as you mention. – maxathousand Jun 7 '18 at 13:23
  • 1
    "59:59 mins" is still unclear, because the colon functions a lot like a decimal point. Some people will interpret that in the same idiom as they'd interpret "59.59 metres", i.e., 59 units (minutes) and 59 sub-units (seconds). Other people will think "Well, I think it means this thing, but what does the programmer think it means?" – David Richerby Jun 7 '18 at 13:28
  • 4
    I would definitely steer clear of 59:59 mins. At that exact moment it seems fairly unambiguous because it's very unlikely that 59 could mean hours, but if I saw 04:59 mins I think I would be at least as likely to interpret that as 04h 59m, rather than 04m 59s - probably more likely, actually. In general, it seems like a bad idea to separate a number from its unit, with another number in the middle that has no unit specified. – Nye Jun 7 '18 at 14:57
  • 1
    Using "59 min 59 sec" would also be consistent with how all other times are displayed, and consistency makes UI more readable. – Llewellyn Jun 7 '18 at 17:42
3

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.

  • 3
    Update speed isn't good unless it really is minutes and seconds. If you just say "59:59" and it's not updating once a second, figuring out if it updates slowly or not at all is really tedious. I really shouldn't have to wait a minute to see it change. Actually, wait, was that really a minute? I guess I should check my system clock. OK, so it's 14:21 now. But when it ticks over to 14:22, that might only be 30s, so I'd better wait until 14:23 and... Just tell me what the numbers mean. My time isn't amazingly valuable but I prefer to do something interesting with it. – David Richerby Jun 7 '18 at 13:23
  • 1
    @DavidRicherby in the question it is about mm:ss though. – JAD Jun 7 '18 at 13:26
  • @JAD The user doesn't know that. – maxathousand Jun 7 '18 at 13:26
  • 1
    @maxathousand the user sees that in a second. That's exactly my point. In this specific case, where the update speed is 1 second, the user can see it update frequently enough to infer that it is mm:ss. – JAD Jun 7 '18 at 13:26
  • 1
    @maxathousand I think it's a fair point. The answer is written in the style of "Whichever one it means, the user will be able to figure it out." My criticism is "If it means hours and minutes, it's a pain to figure that out" but JAD's response is "OK but in this case, it is minutes and seconds, which is easy to figure out." – David Richerby Jun 7 '18 at 13:30
2

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.

1

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.