Wednesday, May 4, 2016

usability - Representation of Timer in "Deal Expires in MM SS"


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



Answer



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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...