151
You are right to ask this question. It really depends on who your users are.
In labor-intensive environments, users are often very familiar with the HH:MM notation for duration, so it's OK to use that format.
But, I agree that even for those environments easy to get it confused with time.
Is there a better way?
Let's start with the existing solution. ...
107
Add the time of the last update. That way users have a better understanding how old or new the information is. But it only works if you can use the users system clock to determine the shown time.
If you see that people don't think about refreshing the page, you can also provide a link for it:
98
There is no reason to calculate this for the user unless you truly believe they cannot tell time.
"Your order will be ready at 18:12" should suffice; it does not matter how many minutes away that is.
This allows the user to make a quick mental note of when to check on their order instead of forcing them to think "Oh, it's 18:10 right now and 9 ...
76
You could also show both formats: 13:35 (2 hours ago)
This way the user could figure out either one easily, depending on what they wanted. You could also allow searching/filtering by either.
60
I'm not sure about hard research, but there's a good article from UX Movement:
Absolute vs. Relative Timestamps
When to use absolute timestamps:
There are times when users need to look back on past content to retrieve information. Without absolute timestamps, users can’t target a specific period to find the information.
Sites that host photos, documents, ...
57
Jira has a great and clear way of doing this when entering time estimates in the task estimate field, simply using 1 letter after the weeks (w), days (d), hours (h) and minutes (m).
By not allowing a user to enter decimals, visualizing and reading the data is much easier.
For example, if a user adds 1,50h would they mean 1 hour and 50 minutes or 1 hour ...
46
Why make the user click when they don't have to? You could easily show all of the open and closing times for the week, and I don't think it would be information overload as the user will already know what day(s) they're looking for. Here's a rough sketch of what I'm talking about:
It simply and elegantly displays what days and times the store is open/...
38
It depends on what is more vital for users — «love to retrostyle» or effectiveness (speed of reading without mistakes).
The following illustration from Handbook of Aviation Human Factors represents how effective are digital visualizations of altitude in comparison with classic analog gauges both for expert and novice users:
36
Try showing them visually, as they build the restriction and exemption times. With each criterion added, the timeline updates.
I'm not sure I fully understand your use case, but it sounds like users need to clearly see the results of their restrictions and exceptions. I'm focusing a little bit on how to see the outcome as feedback.
Forcing them to read and ...
30
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 ...
28
The mental image of time is indeed thought to be influenced by language and culture.
Scientists discovered years ago that spatial representations of time
are affected greatly by linguistic conventions. If English is your
native tongue, you're likely to think of time as moving from left to
right, but if Arabic is your language of choice, time moves ...
27
In my opinion, Option 2 is the most user friendly.
Reasoning:
If the hour has its own up and down arrow you do not expect that using the up and down arrow of the minutes can change the hour as well. to me, individual controls means individual effect.
If you want to have the effect of changing the minutes influencing the hours, this is what you need:
or ...
25
It varies, but for English language...
Generally the time taken to read a flash notice will vary according to the complexity of the information, length of notice, and focus/distraction level of the user.
That said, I tend to use the following informed approach:
1. Flash notices should be short
If a notice is longer than about 1.5 lines, it likely too ...
25
A plus sign is sometimes prefixed to the time format indicate offset. It can also imply duration. For example:
+4:00 +10:00 +4:00
+6:00 +0:00 +6:00
23
Another possibility would be to add a "prime" mark at the end, as is sometimes (often in race times) used. Minutes and seconds would look like 4′33″, so a single prime is minutes, so use 1:30′ for an hour and a half.
20
My initial idea is to use a slider where you can chose timestamps appropriate to the user. The further back in time, the more rough time steps you have in this logarithmic scale. It might not be appropriate everywhere, but it’s fast and intuitive:
download bmml source – Wireframes created with Balsamiq Mockups
20
In this situation, the solution Facebook uses is great if you can do it. A "skeleton" of the page is immediately shown and then the actual content fills in the skeleton when it's available. The skeleton boxes are animated to show progress.
If the page loads quickly, the skeleton is very quickly replaced by the actual content, and the user might not even ...
18
You can also show the minutes with a smaller font.
On stopwatches, this is done for the seconds or milliseconds.
download bmml source – Wireframes created with Balsamiq Mockups
16
The international standard ISO 8601 would suggest P04:00 or P4H. Its part on periods, durations or time spans and repetitions, though, is hardly ever followed – and you aren’t using its date format in the first place. JFTR
Please note that 4h00 is not unambiguous, since some people tend to write clock times that way. 4h00m or 4h00min would be better.
There‘...
15
Times for flights are almost always given as local time in a 24-hour
format.
https://travel.stackexchange.com/questions/83626/how-to-read-time-of-flight-for-emirates-airline
Most airlines use the 24-hour clock system when telling time. They use
this system when assigning trip departures, check-in times and other
forms of time designation. The 24-...
14
You could use decimals. So for example:
90 minutes would be 1.5 hours instead of 1:30
3 hours and 45 minutes would be 3.75 instead of 3:45
This format is highly scannable and makes it easier to sum the values in your head.
13
Your first solution is the classic one. The most of the timelines on the web are made with this solution. Just google "timeline" and take a look to the pictures. But you said, you only have a small area to use your timeline, so this could be tightly. I would use a version, where you have the line at the bottom of the page and just show up the events upwards. ...
13
Based on Jakob Nielson's research, I'd say 1 - 9 seconds is an acceptable time if you add a spinner and the minimum is 1 second.
See this article, Website Response Times:
The 3 response-time limits are the same today as when I wrote about
them in 1993 (based on 40-year-old research by human factors
pioneers):
0.1 seconds gives the feeling of ...
13
Standard format for time (and time intervals less than 24 hours in duration) is set by ISO 8601.
Using extended format (hh:mm[:ss]) fits best (note :!), clearly conveying time nature of the value.
From my experience, even though it says:
Decimal fractions may be added to any of the three time elements. However, a fraction may only be added to the lowest ...
11
In the Arabic world, time series charts are more often shown as right-to-left, as this flows more naturally with reading from right-to-left. Al Jazeera (a large Arabic based news organisation) for example user right-to-left charts quite regularly, as shown below. Note that I have no idea what this chart is referring to.
However, most speakers of right-to-...
11
Make your decision based on your user's location. So, someone in the USA will see AM/PM times and someone in Qatar will see 24H.
Having just one of the two will confuse users of the other region.
Edit
More information here: Date and time representation by country
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 ...
11
You can make something like :
11h32m
or
18m17s
Which is both short and pretty clear.
11
Second choice is better to manage user expectations about estimated time.
You can create background process auto refresh every X second for update estimated time left, so user don't need to refresh the browser manually.
Make Optimistic UI with time display as countdown and give progress bar on circle.
Only top voted, non community-wiki answers of a minimum length are eligible