CW&T Clock Fan Art

I’m a fan of the design studio CW&T. I’ve backed several of their kickstarter projects, and given their products as gifts.

When I saw their Superlocal Clock Kickstarter, I immediately backed it. I’ve often thought about a 24-hour clock, and of course they nailed the design.

I couldn’t wait to get my hands on it, so I decided to make my own software version of it, which you can try below.

Features

• Click the dots to turn them on and off
• Drag from a dot to toggle multiple
• Enabled dots are stored in your browser’s local storage, so it will look the same if you come back to the page later
• Hover over a dot to see a tooltip with the time that dot represents.

Design Details

Touch Areas

A pet peeve of mine is when touch areas are too small, especially when there’s room around the target item. I made sure to give a large text area around each dot.

Dragging on Dots

You can click down on a dot and drag to toggle multiple dots at once. If you have some dots selected, then click and drag to select more dots, you don’t want it to re-toggle all the dots you go over. To fix this, I check which type of dot you first click on, then only toggle that type of dot as you move your mouse.

Circling around

I had the urge to turn on all the dots quickly by clicking down then dragging around in a cirlce. The problem is that even with the comfortable click targets, it’s hard to remain in that zone while circling your mouse around. To solve this, I only require that you click down within a target area, after that, I track the angle of your mouse position relative to the center of the clock, so even if you go out of the click target areas, you can still toggle the dots by dragging across their respective angles.

Responsive with fast mouse movements

Browsers fire mousemove events periodically as your mouse moves. If you move your mouse quickly, you could potentially skip over a dot before the mousemove event fires. Many UIs on the web don’t account for this, but it can be fixed by comparing the previous mouse event to the current one and checking if the mouse crossed over a target in between events. In my case, I compare the angles between the mouse position during the current event, and the previous one to check if there are any dots in between those angles, and toggle those as well. This way, you can’t miss any dots by moving your mouse too quickly, and the UI has a more responsive feel.

Easter Egg: Scrolling The Clock Hand

Staring at this clock was a bit boring, because the hand moves slowly. I wanted to fiddle with it, so I added the ability to use the mouse’s scroll wheel to move the hand forward or backward. After a moment, the hand will return back to its true position, with a satisfying bounce. Enjoy fidgeting with it.

Video

I recored a video about the process of making this clock where you can see some of the features in action.