We Live in a Time-Poor World…
Introducing the Dial
--
If there was a design element superior to the card, what would it be? I set out to answer this question... and introduce the Dial: A hyper-card (containing dynamic data); which always references time.
What is a Card?
The card has been a popular design element at Google and is embedded into the philosophy of getBootstrap; not to mention frameworks such as SemanticUI. It also has some significance for TailwindCSS. The design of the card has been adopted by companies on an even wider spectrum. Here’s an example of a card design element from Apple.
The Definition of a Card
Each design philosophy (e.g. material-UI) might reference the card in a totally different way. But there are some basic characteristics of the card:
The card:
- … is a bounded element.
- … contains content about a single subject.
- … typically exists in an array.
Furthermore, every card in an array of cards displays data with a similar hierarchy / structure / organisation.
The Hypercard
I define a hypercard as a content-card that contains dynamic data.
It is a complex design unit and below is a fictional example of such an element.
The dynamic content here is the Like Counter, which increments “on-Click”. It’s a very simple example and its main purpose is to allow for the introduction of the Dial, which we will now do.
The Dial
The dial is a hypercard which references time. Here is an example:
Here — and I hope it is immediately / highly intuitive! — consumption is timed for the link. In this example, the dial indicates that there is a 2 MIN recommended read time or consumption time, and that the time (which at that moment, 13:23:42 (and continually updates)), will take the user to 13:25:42, once exploration of the link is complete.
So that’s the Dial. It gives the end-user information relevant to the time right now. The copy or descriptive text of the card could be defined as explanation as to why the user should spend time exploring the link. The “copy” should at its most basic-level answer the question, “why should I click on you?” The user can then make an informed (ideally snap-second lightning-speed) decision as to whether to click-through the link or not.
Benefits of the Dial
The Dial times the user experience. The Dial quantifies the user-experience. The user learns how to use the site in terms of time. The user is informed how long to consume content. As such, their experience is qualified and informed by past behaviour. A more complex dial could include a progress bar, logging of the user experience and offering completion metrics. A more complex dial could monitor and feedback UI / UX productivity…
Motivation for the Dial
Fundamental to the modern experience of the user-interface are the concepts of time and attention. The user has a finite amount of time and their directed-attention is likewise a limited, precious resource. This resource must be preserved. Wastage minimised. The sites and apps that experts design are “shepherds of user-direction”.
The software engineer directs the user to this and that with notifications, announcements, email releases and product roll-outs, and the time each “direction” takes should be optimised.
Is the dial an example of a chronograph? I’d like to know! If you’re familiar with watch mechanics feel free to inform me below!
