TalkCoffeeTo.me's Timer

Sometimes ideas from one area for solving one problem are good fixes for other issues in other areas. They just kind of stick in the back of your mind, percolating, until realization dawns on you. This post is about one of those stuck ideas.

I run a remote retrospective tool called TalkCoffeeTo.me (a.k.a. Talk Coffee). One of if not the most used feature is the built-in timer. Because it uses ideas from Lean Coffee, timeboxing discussions is a standard and central play for getting through a lot of topics and opinions. My first implementation was a digital-clock-styled element that counted down from, e.g., 5 minutes 0 seconds to 0 minutes 0 seconds.

Surprisingly to me, watching a digital clock tick down fills some people with anxiety, to the point of avoidance. No user ever said it so concisely, but the issue was clear. The digital clock was too precise, and participants felt the pressure of numbers as if they were being actively timed and judged.

Those aren't emotions I want people to feel when using my product, so I noodled and tried out other options, including removing the visible time altogether. I was not happy with those, and the best solution I've come up with didn't dawn on me for some time.

Read Make Time by Jake Knapp and John Zeratsky. No, seriously, read it.

Written by two people who genuinely know how products today sap your attention and focus, "Make Time" offers their strategy to beat these attention attractors. Instead of writing about their strategy, I want to focus on one specific tactic.

In Tactic #52, Knapp and Zeratsky suggest using a visible timer to keep a laser focus on a task. They weren't the first to find this, and they offer a tip of using a Time Timer. I'll let Time Timer explain what and why, but I gave this a try myself. And I loved it. And eventually, it clicked for me what to do for Talk Coffee.

In this component, zero starts at the top. Time is measured clockwise, and each colored arc segment is at most a minute long. In the posted example, roughly four and a half minutes remain out of five.

What I love about this design:

• Imprecise but visually distinguished. You don't count seconds, but you can quickly guess how much time remains.
• There's no loss of minute resolution. In testing, the seconds ticking away bothered people, but people noted a considerable difference with almost a full minute remaining compared to a few seconds.
• There are no numbers, and it is all visual.
• It was pretty straightforward to create. Each color is an arc in an SVG, representing each minute in the time. A five-minute timer would have arcs for five minutes, four minutes, three minutes, two minutes, and one minute. I layered these with the longest on the bottom and shortest on top. All arcs tick down every second, but we only visually see a change in the longest arc. If necessary and under current consideration, I can easily skip or delay ticks. This change would not be nearly as apparent as with a digital timer, and it would introduce some organic or natural feeling to a piece of clockwork.

What I don't love about the design:

• SVG somehow still isn't the easiest thing to work with on web applications.
• The arcs still tick by the second. I haven't committed to longer ticks yet.
• The accessibility of this is poor without screen-reader alternatives under the hood. Live-updating components are challenging for accessibility, but this is just a bunch of arcs and is noise to non-visual folks.
• It's difficult to make a nice and consistent color scheme with 10 (11 if you count the background) segments.