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