a-mabe
[Refactor] Improve Timer Configuration UX
Purpose
Improve the user experience for configuring a timer/workout. The configuration involves setting the name and color, number of intervals, interval timings, and sound settings.
Details
The design should take into consideration feedback from #197. Instead of the configuration having a forward "flow", the user should be able to easily jump between configuration pages without having to "jump back".
Mockups
Mockups all created using Figma.
As discussed in #212 , here are some quick and dirty tweaks to the mocks to accommodate limiting based on total workout duration, as well as randomizing the interval lengths. By no means set on any of this :)
The gist is, add a toggle to the first view that allows selecting how to limit the workout (probably there is better wording), either interval count or total duration. I kept the configuration values for both showing, one greyed out based on toggle. I imagine pressing on the greyed out one could implicitly flip the toggle to enable it.
Technically there are use cases where somebody might want both total count + total duration, however this is pretty awkward to handle on the 'set time' view since they are effectively forced into a fixed ratio of work to rest if not randomizing. So, I left that out, unless anybody starts asking.
On the set time page, I tweaked it to split the work/rest into a top section, since they are the most important settings that probably people want to see first. Also, we are only randomizing them and not the others, so sectioning off felt more intuitive. The view if the 'randomize' toggle isn't selected should be the same as all the others (ie, only one input box for seconds or minutes). If randomized, I set it to two boxes with a 'to' inbetween. It's "sort of" apparent that this means min/max? I fiddled with adding min max column headings but it flowed poorly. Maybe some hint text is needed.
https://www.figma.com/design/tN4mPwXnlE8YMkHQQUYrkW/OpenHIIT-New-UX?node-id=1-34&t=YEkeoQmTILkq7JcS-1
New icon assets used were all attribution-free:
- https://www.svgrepo.com/svg/514212/random
- https://www.svgrepo.com/svg/357119/finish-flag
- https://www.svgrepo.com/svg/348820/time
I was a bit confused about whether this configuration was only for an interval timer, or also an entire workout. I assumed interval timer based on the heading, but I do see the 'repeat workout' option. Maybe you were planning to combine the views somehow? Anyway, I don't have strong feelings on it.
Bit of an update as these things always work out different when implemented vs. when in Figma 😁 Screenshots and screen recording attached.
Ended up combining the General and Time tabs into one, and instead added an Editor tab. The Editor tab will allow the user to set the exercises. This combines the Interval Timer and Workout setup into one. Way down the road the Editor tab can allow for more edits - e.g. the user generates a timer and changes the seconds for a couple of the work intervals, etc.
This all will likely change overtime but for now the goal is to fully test out a beta version of the UI shown in this comment to keep the project moving forward.
https://github.com/user-attachments/assets/4ae63de6-e6f1-4ab1-a41e-7070e2f527d3
In terms of #212, I'm thinking allowing the user to set Total Duration or Active Intervals is too large a scope as both the UI and the backend logic gets complicated. Randomizing the work and rest intervals is very reasonable. A good in between may be to add a "Total Time" preview for the user to see so they don't have to calculate this themselves. E.g. if the user sets 8 active intervals, 20s work, 10s rest the app should display "Total Time - 4 minutes" and the user can adjust accordingly. For randomizing the interval times, Total Time would show a lower and upper bound.
@a-mabe thanks for sharing your thoughts! Understandable about wanting to avoid introducing a new layer of complexity by allowing setting total duration directly. Certainly the total time preview seems nice in general for conventional use cases.
Randomizing just the interval duration but not interval count kind of addresses my use case, but not all that well, since i'm trying to simulate a fight where the number of exchanges are variable. I'll need to think about whether that is something that I would actually use (and then carve time to contribute code for).