Skip to content

0004 button design

Jump to bottom
Steven Steiner edited this page Feb 17, 2021 · 1 revision

Timer Button Design

  • Status: Accepted
  • Deciders: Michael Donaldson, Richard Duong, Brandon Liu, Bryant Shao, Steven Steiner, Nicole Trappe, Vy Truong, Felix Zhang, Lulu Zhu
  • Date: 2021-02-04
  • Updated: 2021-02-11

Context and Problem Statement

What is the best way to implement the button(s) that control the Pomodoro timer?

Considered Options

  • Option 1: One button that toggles as 'Start'/'Reset'

  • Option 2: Two buttons, one for 'Start' and one for 'Reset'

Decision Outcome

Chosen option: Single toggle-able button, because it is the most intuitive and straightforward design option for working with the timer, thereby catering towards the audience that may not be knowledgeable about using websites or even with the technique itself. Having no other buttons to press would essentially force the user to only interact with the most important one.

Pros and Cons of the Options

  • Option 1: This has good discoverability in that the user is aware, from the start, of the 2 options they have. If the user clicked a button, it would "grey-out" (be disabled) to enforce that the user can then only click the other button. This would help guide the user in terms of correct behavior (e.g. can't keep clicking start when a timer is counting down). However, it might be confusing to users seeing both options, especially if they do not notice the "greyed-out" behavior and think the button just isn't working.

  • Option 2: While this button doesn't initially indicate to the user all the actions that are allowed, it enforces good behavior. When we push the user in the correct direction and limit options, we might be decreasing problems with the button that would lead to frustration and distrust in the functionality of the app. The toggle makes it very clear than an action just happened (it suddenly changes from one mode to another) so that's good feedback. It also makes the UI as simple as possible.

Single button

This would work as a single button that says ‘start’ for work and breaks, and would toggle to ‘reset’ after starting the session.

  • Pros: Straightforward, intuitive, simple, stays truest to the spirit of Pomodoro technique by forcing you to only be able to start or stop rather than pause
  • Cons: May irk individuals looking to pause during their work session
Clone this wiki locally