5

I am working on in house LMS. It displays a list of courses in a card view. Essentially it shows

  • thumbnail of course
  • Title of course
  • Version of course
  • Duration of course in hours

Now as per a new requirement, we have to display the course duration in hours and minutes. What is the best way to represent the duration so that it could be understood by most of users across world speaking different languages?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this question

2 Answers 2

Reset to default
3

The answer of @Dominik Oslizlo is interesting, however the clocks seem a bit like full moons. I'd put it in the comment, unfortunately my reputation is still too low for that.

I'd suggest keeping the numerical form but reverting to international symbols of minute (apostrophe): 2h30'

When using a colon, keep the unit to hours: 2:30h

And revert from using a decimal delimiter. For an engineer a notation of 2.30h can pose a riddle of "is it two and a half hours or is it two hours and eighteen minutes (0.3 of an hour is 18 minutes)?"

Improve this answer
3
  • Interesting to know the 2h30' format. It makes a lot of sense. Interestingly if it is made 2hour30' it looks very confusing and not easy to understand, visually atleast.
    – Prashant Dubey
    Mar 27, 2017 at 18:20
  • I think @Mike is right – let us not try to reinvent the wheel. I believe that 2:30' or 2h30min would be clear for most Users, no matter where they come from.
    – Dominik Oslizlo
    Mar 27, 2017 at 18:32
  • @pzv - I was intentionally avoiding using "hours" word, as h stands also for "horas" [es] or "heures" [fr], should one be not familiar with English.
    – Mike
    Mar 27, 2017 at 21:35
1

A tempting answer would be: adding clocks.

However, I think there is only one case when presenting the time visually this way really works - and it is when the time up to one minute or up to one hour. Then you could display a semi-filled clock.

When trying to represent the same within a day, hesitation arises as additional questions appear:

  • is it just duration or from-to hours?
  • is it 12AM-12PM or 12PM to 12AM? Or is it full 24 hours? – with the latter being very unnatural.
  • as a result: how to show something that e.g. extends from 9AM to 2PM?

What is more, it is hard to show really small time pieces this way. Imagine an even 12-hour clock icon with 2h 10m marked versus 2h 30m marked on them – there would be no noticeable difference.

One thing you could consider, though, would be displaying two full clock icons, and one partially-filled – I think this could give quite a good reception and popular understanding, as for a course, the seconds measure would be automatically rejected and Users would understand that these clocks represent hours. However, I would strongly suggest supporting these clocks with a textual information saying e.g. "2:10 minutes", as it is hard, again, to show exact duration on such element.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Should you need to show not just duration, bit starting and ending time as well, though, you may go for showing a timeline within a day. Then you would need to mark the start and end hours of the timeline itself (e.g. 8AM - 8PM) and mark the exact times and duration within these constraints. The problem is that for this to work, it would use up quite some space, or again it would be illegible.

Improve this answer
3
  • 1
    it's a unique way to show time as dots of clocks. Just wondering what if it is 24 hour duration course.
    – Prashant Dubey
    Mar 27, 2017 at 18:14
  • Besides, I think the tim3 scale is not of much importance here. AM or PM. Wondering if my question demands or misleading. But indeed it's tempting to add clock:)
    – Prashant Dubey
    Mar 27, 2017 at 18:17
  • Yes, you are right (+1 for that!). Dots, by the way, are just a simplification – it was hard for me to design a clock in the embedded Balsamiq. But still, the Icon could look like this one for example: flaticon.com/free-icon/… or this: flaticon.com/free-icon/… or use a real clock face with a semi-transparent colour overlayed on it. The thing is that no icon clearly representing a time unit exists, I believe, except 24h (including "24h" text by the way).
    – Dominik Oslizlo
    Mar 27, 2017 at 18:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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