#001: Another Timer App
Timer software has become ubiquitous on electronic objects. My favorite are kitchen appliances; they have the simplest timers. While the functions get better and the complexity gets higher on personal devices like phones or computers, the distractions get even worse. Why would I want to use a timer app to help me focus that’s on my phone? Phone usage during timer breaks is bound to happen. This won’t work.
I’ve become a fan of the pomodoro technique of time management recently: work hard for 25 minutes then take a 5 minute break, or any sort of pattern like that. Starting to use some desktop apps, I would usually work over the 25 minutes to really get things done, so I’d then change my minutes to a higher margin, set 5 minute breaks after two sessions, turn off the alarm when I’m listening to music…it became a lot of maintenance. A lack of pure customization led me to search for the best timers out there, the simplest ones.
Yeah, you can use a regular clock, or just watch the numbers, but all I really wanted was an app where I could put in how many minutes I wanted, only minutes (1-60), have that notify me when it’s over, and do absolutely nothing else.
Most of the timer apps I found on the macOS app store don’t have the best designs or user experiences and the features were just too much; it all felt super “heavy”. Kept pressing the reset button in place of play, accidentally hit the break button when I just wanted to start another session, had to list my task in order to be timed…This sounds wild, but I couldn’t believe how much of a tough time I was having. A design with no scary red status bars (pomodoro -> tomato -> red -> of course!) , no ambiguous icons or buttons, just something simple and straight to the point is what I wanted. Pushing away from the attention-focused designs we all hate but still use today, and towards the design of software that is mindful in its design process. So I thought to design and program one specific to myself.
Of all the design constraints, one thing I knew was that this thing had to be a menubar app. Functionally, the menu bar is the easiest on sight for quick recall, but to me apps in this placement feel like they are running in the “background” away from the main activity of the machine; they feel like they are floating. One thing I could agree on with the timer apps I found was that a circular ring does the best job at representing the progress of time. Its form makes it easily recognizable as a cousin to the clock due to its 360° progression. The original aim was to use a background blur to make it really out of the way, but if the background doesn’t have much going on, the blur just looks like a mistake rather than a texture. Outlines and hard fills were nice at the beginning, but the drop shadow does a great job at giving something prominence, while staying out of the way. An outline for the progress ring gives off serious UI anxiety about “finishing” or “the end” so I omitted an outline and let the ring grow to create a final form on its own. Using text-as-button leaves out all the what-ifs and easily gives you what you see.
I was kind of ambitious at the beginning and thought I could pickup Swift really quick and build a total native macOS app. I quickly discovered Electron.js and this companion library for building a menubar app and never looked back. Programming the UI with Vue.js was a good time, but the real issues came up with timers and their performance. What I discovered was that using a setInterval() method for timing was a bad idea, and it’s a better idea to use the built in Date() object, which makes sense since the Date() object is handling real time, while the setInterval() method creates it for you. I designed some icons in Figma, built a demo and download website, packaged everything up using Electron.js, and had my own timer app. It’s a weird feeling using your own software.
A timer app that puts an emphasis on simplicity and thoughtfulness, void of infinite features, unnecessary design, or unpleasant notifications. Designed to be floating on your screen, out of the way, kind of like a cloud.
A simple start, pause, and reset button interface.
A single constraint of a timer interval between 1-60 minute(s), because you should be taking a break after an hour.
Built for the menu bar, but still in the dock if that's your vibe.
Programmed with electron.js using menubar by maxogden.