Let’s break the rules of the classic clock 4.

Change over time

Tamás
5 min readNov 4, 2022

On the classic clock only the hands are moving and nothing else, they move around and around, and the other parts stay still. The background, the dials with their graduation and numbers are all fixed, they do not move at all. I’m talking about the visualization layer, not the measurement system which is of course fully loaded with moving parts, springs and wheels and pivots. On the visualization layer we only have the hands moving.

This rule cries to be broken.

Utilizing the flexibility of digital visualizations where the limitations of the physical world do not exist, we can break practically all the rules of the classic clock visualizations. Why not to break this one.

Moving dial

The dial is static and the hands are rotating around — this is the classic clock we are used to. The following example challenges this rule, where one of the dials, the hour dial is static, while the minute dial is moving around, and the intersection of the two dials gives the actual value on the minute dial. As two circles can have two intersections, somehow the relevant intersection must be highlighted, here the hour hand points to the appropriate intersection. Thus the hour hand which is the only hand here points to two values at the same time on two different dials: the hour value on the hour scale which is the static one and the minute value on the minute scale which is the moving scale.

The intersection of the moving minute dial and the static hour dial shows the hour and minute values, the role of the hand is to point to the appropriate intersection

The next one follows the same logic, the only difference is that the only hand is on the moving dial, it moves together with the minute scale and thus emphasizing the minute value better.

Moving minute dial, the hand points to the appropriate intersection. The hand is moving together with the minute dial

Same logic, no hands, only a dot shows the actual intersection, thus the actual hour and minute value.

The minute dial is moving in a way that the intersection of the two dials shows the hour value on the hour dial and the minute value on the minute dial. Two circles can have two intersetions, the role of the dot is to highlight the approprite one.
The above example on a gif. It shows time from 9:00 to 12:00

Below example is also using moving dial, but here the minute dial is much smaller and can roll all the way the hour dial within it. The minute hand is also not classic, it is a tangent circle arc which shows the actual minute value at the point it touches the minute dial.

The little blue circle is both the hour hand and the minute dial, the yellow circle arc is the minute hand.

This one has the same logic: the hour dial is the big circle and within it moves the minute dial, and the minute dial plays the role of the hour hand, the actual hour value is where the two circles (the outer one and the blue) meet. The smallest circle is the minute hand which moves around the minute dial and the point where they meet is the actual minute value.

The blue circle is both the hour hand and the minute dial, the yellow circle is the minute hand.

Same as the previous one except that the small circle which is the minute hand is moving within the minute dial.

The blue circle represents the minute dial, the inner yellow circle is the minute hand. The blue circle has another role: it is the hour hand too,
This is how the previous example works. It shows time from 9:00 to 12:00.

Yet another example with the same logic: the hour dial stand still, while the minute dial moves around within the hour dial. Here the hand is moving with the minute scale.

The white circle is both the minute dial and hour hand, the hand within the white cirlcle is the minute hand.
The same example as above

Components with changing attributes

Moving is the change of the location over time — but other attributes can also be changed over time. We can also change the shape of the elements. Or the color, or any other attributes.

The shape of the elements of the classic clock (background, hands, dial) are static: the hand looks the same all day long, so does the background and the dial. But why leave this rule unchanged?

Lets create clocks with elements which do shift their shape over time.

In the below example the minute shape is changing every hour to the shape of the number of the actual hour.

The shape of the minute dial is changing every hour

On the next one the color of the hands are changing.

source: https://www.yankodesign.com/2017/12/21/do-hue-have-the-time/

The below example features a solution where the central point of the hands are changing and with that the visible section of dials are also changing. We only see those quarters of the dial where the hands show a value. Just as if a kid was cutting out the quarters with a scissor and put the pieces above each other.

The central point of the hands are changing

But the attributes of the components could change following any logic one could imagine. Like a kaleidoscope the background of the dial could change in every second.

These changes can happen in a way that is has no meaning, simply esthetics: the shape is changed because it looks good. Or it could have a meaning: it could somehow represent one of the now value.

--

--

Tamás

With backgrounds in economics I’m interested in UX, business analysis, semiotics, and data visualization. I think all these go back to the same roots: language.