How can I improve this Big Timer app for workshops?

over 2 years ago from

I regularly have tightly planned client workshops. Occasionally, people just can't stop talking, so I'm making a big countdown timer to make sure everyone can see how much time we have left for each exercise. There is an early prototype on bigtimer.net.

I have a whole backlog of features, but before I share those ideas, I'm curious what you would like to see in such an app!

I'm aware of a similar project from Lucas Lazaro and the comments made about it (keyboard shortcuts, indication when timer reaches 0).

It would be very helpful if you would tell me:

  • What do you find missing in existing timers?

  • How could I improve the current Big Timer prototype to make it good enough for you to use?


  • Tom ReinertTom Reinert, over 2 years ago

    This is nice. I like the simplicity and that you actually get feedback this early.

    Here are some things I noticed:

    • I was intuitively expecting that I can edit the minutes and seconds by clicking on them, or by typing numbers directly.
    • There should be a sound or visual indicator when the timer hits 0
    • The buttons keep the default blue focus-border after clicking on them.
    • Generally the buttons need some finer styling. (Hover states for example)
    2 points
    • , over 2 years ago

      Thanks! I did one little user test in which I also observed that they tried clicking the numbers to change them. I’ll add that next. And for those button outlines I apparently need to do better cross browser testing.

      0 points
    • , over 2 years ago

      Hi Tom, I've tested the CSS on Mac and PC on different browsers and none show the the blue focus outline and they all do show hover styles. What setup did you have when you noticed these things?

      0 points
  • , over 2 years ago

    Alright, it took me some time, but I've managed to address almost all issues that were mentioned here.

    Please have a look at https://www.bigtimer.net/ and let me know if you have any issues or ideas!

    Would you use it at a meeting or presentation? Why? Why not?

    Some things I've done since last time:

    • You can now change the minutes and seconds with the keyboard by clicking on them. In order to show durations like 0:01, so with a 0 preceding seconds < 10, required almost as much engineering as building the rest ... But there is some sweet validation and correction in there now!
    • There's a background animation when timer hits 0:00. It's still a bit crude though, so if anyone has an idea for something better?
    • Default button:focus styling should be replaced with nice dotted outlines
    • I gave the buttons a lot of love, what do you think, Tom Reinert?
    • Quickly setting 3, 5, 10 minutes etc goes really fast with + and -. The last used duration is saved in local storage, so if you just need a 15 minute timer, it will be there every time you load the page.
    • While I was at it, I perhaps over engineered it a bit: you can start a timer, close the tab, the browser, restart your computer and reopen the page. Then you'll find the timer still running. Not just continuing where you left off, but as if you'd never close the page and the thing was just running in the background
    • I put the font/ink trap issue on the backlog for now, as I first wanted to make it work and test it in real situations. It on my mind every day though. Suggestions for a font that has numbers similar to Lato or Avenir (geometric but friendly-looking) are welcome!
    • You can just click anywhere on the screen or pushing space starts and stops the clock
    • Background could change color to signify "started" and "paused."
    • "The background could change to red when time is almost out.": I added a click sound at every second from 10 counting down.
    • There is a gong at 0:00. The sounds don't work on iOS yet though, that requires using the web audio API and is hard.
    • There should be no bugs (-:
    0 points
  • kubarius kernerkubarius kerner, over 2 years ago

    Looks good. Instead of a pause and start button you can just click anywhere on the screen or pushing space starts and stops the clock. Background could change color to signify "started" and "paused." the background could change to red when time is almost out.

    Definitely needs some alarm sound when time is out.

    also, there's a reproducible bug that if you max out the time by holding the plus and then hold the minus until the time drops under 1:30, the clock goes haywire and the page needs to be refreshed. Dunno if people would actually do that but just letting you know.

    0 points
  • oli ingram, over 2 years ago

    Great idea, and I like your execution!

    Couple of things, that could just be my opinion but thought it would be worth sharing:

    Could you have a set of buttons down the bottom right or similar that allow you to just quickly set or increment the timer by 5mins, 10mins, maybe 1 or three mins etc.

    Otherwise if I want to set 5 mins I have to click the plus a lot of times and then click start.

    One other thing, what if the start/stop button was really big, maybe even acting as a fixed bottom bar? That way you could start and stop it really easily without having to focus too much on clicking the mouse.

    Great work though!

    0 points
    • , over 2 years ago

      Thanks! Have you tried setting 5 minutes? The plus and minus try to be smart and don’t actually require many clicks. You can even hold the buttons for longer durations. I guess I should make that more obvious!

      Good point on clicking anywhere for start/pause. I was about to let that drop in favor of allowing keyboard input when clicking the numbers, but there definitely should be an easy way to play/pause without having to be too precise with the cursor.

      0 points
  • Jesse MartinJesse Martin, over 2 years ago

    I agree with Tom, really nice concept and overall it looks pretty good! I noticed the font doesn't seem to handle the larger display very well, maybe try using an svg solution? Get a set of 0-9 nicely designed SVG elements. A bonus will be that you can open it up to some fun styling options in the future like outline fonts or svg filters.

    0 points
    • , over 2 years ago

      Thank you! What do you mean exactly with the font issue? The indents in the corners? I wouldn’t have thought of making SVG elements. I guess I’ll first try and find a better font to start with

      0 points