Dials: Upgrading HTML / CSS Card Components with Time Dials using JS
Time is a sacred and finite phenomenon. The websites and apps we use consume our time. The interfaces we interact with do so directly. Acknowledging the ‘price of time’ to the user is the goal of the design upgrade I propose in this article:
We should let our users know what the time will be after a piece of content has been consumed, before they even click on it.
We can go further than displaying a reading time or a duration length. With Javascript, we can actually display the literal digital time “fast-forwarded”.
The Ultimate in Time-Optimization
Displaying the content-length in terms of time is a common tool used by developers to empower the user. Medium uses it. Youtube uses it. It’s probably implemented by every content network out there.
The “3 min read” marker is informative, but I believe we as developers can go further. 3-min read is solely concerned with the content-piece in question, and tells me nothing — as a user — about the time I will see on my clock when 3 minutes is up.
With Javascript, we as developers can remedy that situation and I propose that we could instead display the literal time on the clock that the user will receive in 3 minutes.
Here we are told (as a user not only that the read is 3 min, but that at 19:37 we will be finished. Using Javascript, this time can be added dynamically, so that it updates, second-by-second, as we browse.
This is a powerful time optimization: It seeks to empower the user to use their time effectively. The user can have a sense of immediacy in relation to the clock (which is always ticking) and act to affect their precious time in the most effective way possible.
Another before and after
Before: We can see that the movie will take up 2h and 1m of our time. After, we are additionally informed that the movie will conclude at 19:37:
Tools and Techniques
The goods news is that there are plenty of Javascript time libraries 🎉 which can facilitate this kind of functionality, e.g. luxon, and there are many others out there, which do something similar.
Concluding Thoughts
Updating each content-piece with a dynamically-updating time-display — what I call a Dial — can dramatically reduce the gap between the user, the content they love and time itself.
