Pomodoro Clock - user perspective


I just completed my pomodoro clock here: http://codepen.io/Bagongo/full/xqLWoq/

I was trying to go some extra mile implementing a rotation system resembling the mechanics of a real pomodoro clock.
It took me quite a while so i’d really appreciate some feedbak especially from a user experience standpoint. I’d like to know if you find it easy and intuitive enough to use…

Thanks a lot!!!

First, nice stylings! And congrats on a working timer.

Now, if you really want UX feedback, I do have some thoughts:

  • Going into it I tried to see how many seconds it took me to figure out how to use things, and it was a while. “Do I click here? There? Oh wait, there are instructions…” I feel like a UX rule of thumb should be “if a one-page app needs instructions something’s wrong” (though I’m guilty of that myself).
  • The mechanics of clicking and dragging don’t respond in a way that gives the user feedback on the operation. I see the code there, with getAngle etc, and am not familiar with that method, but the result is 1) The first thing that happens when I click and drag is my cursor turns into :no_entry_sign:, which tells me “You can’t do that / you did something wrong”; 2) the display updates only after my dragging operation, on mouseup; and 3) sometimes (perhaps if I mouseup outside the graphic?) it gets stuck thinking the mouse is down and flicks all around. Kudos on coding a “click and drag” mechanic from scratch–but mightn’t it be easier to leverage a feature that already has that functionality–a slider, maybe (https://msdn.microsoft.com/en-us/library/windows/apps/hh466182.aspx, http://www.html5tutorial.info/html5-range.php --I’ve even seen some that can wrap into a circle)?
  • As a user, I might be coming in with a specific predetermined time ratio that I want. “I want 23’ work, 7’ break!” The slowest, most difficult way for me to achieve that is by clicking and dragging around a circle. Optimal would be to have a text input box. Your “work” and “break” divs above the timer would be great for that! (N.B.: for mobile it would be the opposite. Manipulative input faster, text input slower. But even then literally “dialing it in” can get tricky and frustrating.

But hey, congrats again on getting a working timer done! No small feat.


Thanks for taking the time to answer! I agree with what you pointed out pretty much 100%.
The only thing is I am not experiencing any cursor change or dragging issue, everything is working well on every browser I am testing the app on, can you please tell me what you are using?
As for the rest, I also cringed when deciding to resort to instructions, the fact is that the layout was supposed to include time marks around each knob -like those you see on real clocks- but I was always having trouble with the positioning, so I had to ditch them. I think if I managed to implement those the app functioning would have resulted to be quite obvious…
Also adding the capability to type in the values is surely a useful feature to be added.

Thanks a lot for your sincerity and thorough commenting on the app, it really helps to keep on going with this thing.!

Yes, I’m on Chrome 56.0.2924.87 on Windows 10. But I notice now that I don’t always get the slash-through-circle cursor, just sometimes. It’s what you get anytime you try to click and drag on any image–the “Hey, where are you trying to drag that? You can’t drag that!” cursor.

Got it. chrome is the browser I overlooked the most while testing. I’ll take a better look into it now…
Thank you again for your help!