Stopwatch UI

[eduardslu]

This is an idea I have of what a stopwatch UI could look like. I think it needs a bit more tweaking when implementing, like an accent color somewhere and a redesigned flag symbol, but as a base I think it's okay. I also don't know what would be the behavior when it reaches a full hour, would it cut off milliseconds or make the whole font size smaller.

I'm not a professional designer (not even close to one), but I wanted to contribute to this awesome project in some way.

[eduardslu]

Noticed that spacing is uneven between saved values.

[uvwxy]

Maybe we should move the icons to the locations where the buttons are? (which is not quite clear without having the watch or a mockup, iknow :))

[nithinkodadhavadee]

@uvwxy My PCB is on the way, can I work on this? Maybe something for me to start with.

[uvwxy]

@nithinkodadhavadee of course you can !

if someone else wants to work on this at the same time is fine for me too. the more apps and variations we have for this platform, the better it becomes.

[eduardslu]

Maybe we should move the icons to the locations where the buttons are? (which is not quite clear without having the watch or a mockup, iknow :))

I think that the icons could be next to the buttons at the start and when there are no saved values. That would be more intuitive when using it the first time. When there are saved values I think the user would already know what each button does. The icons would just create a space in which nothing could be shown with this design. Putting the icons at the side used less space, so I went with that.

[eduardslu]

I moved buttons close to where the buttons could be (like you suggested).
I made icons smaller and further away from divider when they are to the side (like discord user culture suggested).
I also removed the large gap between the last and the other saved values, which makes them look more like they're from the same group.
I also fixed the paused view. I think that the resume button should be on the top, so there is a smaller chance of it getting accidentally reset.

Thanks for the suggestions! I think the UI now looks better and is more functional. Can't wait for more suggestions!

[Tomaskocarter]

I think it would be smart for the user to push and hold (for 3 seconds or so) to reset. This will minimize accidental resets if you accidentally bump the button. As far as the visual indication of resetting the time goes, this is what first came to mind.

A small circle next to the reset button that forms over the course of 3 seconds or so. Basically like pizza slices, it starts off as one slice, then the second slice gets added, then it's a quarter circle, then a semi circle, then 3/4 of a circle, then finally a full circle.

[eduardslu]

I think it would be smart for the user to push and hold (for 3 seconds or so) to reset. This will minimize accidental resets if you accidentally bump the button. As far as the visual indication of resetting the time goes, this is what first came to mind.

A small circle next to the reset button that forms over the course of 3 seconds or so. Basically like pizza slices, it starts off as one slice, then the second slice gets added, then it's a quarter circle, then a semi circle, then 3/4 of a circle, then finally a full circle.

Great idea!

[eduardslu]

I think it would be smart for the user to push and hold (for 3 seconds or so) to reset. This will minimize accidental resets if you accidentally bump the button. As far as the visual indication of resetting the time goes, this is what first came to mind.

A small circle next to the reset button that forms over the course of 3 seconds or so. Basically like pizza slices, it starts off as one slice, then the second slice gets added, then it's a quarter circle, then a semi circle, then 3/4 of a circle, then finally a full circle.

Added @Tomaskocarter idea that the reset button should be held to prevent accidental resetting and added a splash of color (someone said that there is a global accent color, so the pinkish red would be the accent color selected, the icons behind it would be 50% (or lower whichever value looks the best), of the actual colors brightness), made icons rounded and put the pause icon behind the timer(if it can't be implemented, the old design is fine as well).

[richtepa]

Is no one working on this (code)?
@nithinkodadhavadee: Do you?
If not, I would like to look into it this week.

[eduardslu]

I realized that there is no way that you could see older flagged times. Maybe when there are more of them the flag icon when paused should transform into an arrow and when you have scrolled down it would also show the arrow in the stop buttons place.

[richtepa]

Used the conversation above as inspiration. You can add up to 28 laps (4 pages x 7 laps).
Feedback appreciated.

[eduardslu]

There are too many colors, I think the accent color would be enough. The flag doesn't really fit in, I think it should be filled. The page selection dots should be centered on the left side. Also, maybe the stopwatch itself shouldn't be colored, but instead there should be a line under it, it could make it a bit more readable and prettier.

I still think that when you have times flagged, the button icons should be in the corner and smaller, because then the timer itself could be bigger and there would be less space wasted, but that's just my opinion. Other than these little issues, I like it.

[richtepa]

There are too many colors, I think the accent color would be enough.

Ok, I used the warning color for reset and the flag for the last 7 (page) laps. For the page indicator I used the info color. I will test accent color only.

The flag doesn't really fit in, I think it should be filled.

I agree. Some polishing has to be done.

Also, maybe the stopwatch itself shouldn't be colored, but instead there should be a line under it, it could make it a bit more readable and prettier.

I'll change that and post an update.

The page selection dots should be centered on the left side.
I still think that when you have times flagged, the button icons should be in the corner and smaller, because then the timer itself could be bigger and there would be less space wasted, but that's just my opinion.

I personally like it when the icons are next to the buttons. I think at the moment we are using this scheme everywhere.

Maybe we can think about coloring the labels for buttons.
Then we could move them to the center when there is not enough space. (Globally in all OSW-OS-Apps.)

[eduardslu]

Ok, I used the warning color for reset and the flag for the last 7 (page) laps. For the page indicator I used the info color. I will test accent color only.

I think that the accent color will work better, because it will look good with any accent color, whereas if we put a constant color that is not black, grey or white, it may not look very good.

I personally like it when the icons are next to the buttons. I think at the moment we are using this scheme everywhere.
Maybe we can think about coloring the labels for buttons.

I would like them in the middle because it allows for more data or bigger fonts. I think that when there is enough space, icons beside buttons is preferable, but in this case it just looks weird, the icons take up way too much room, while the small icons wouldn't interfere and would use screen space that isn't used.
I don't know if the button icons should be colorful, I think they maybe need to be gray to not distract the user from using the app itself.

Then we could move them to the center when there is not enough space. (Globally in all OSW-OS-Apps.)

I would love if it was available for all apps to use easily, it would make apps feel coherent and would provide a more space efficient (both storage and screen space) and polished experience. #15 is implementing some utilities to use in the UI, maybe suggest it there.

Also the line under should be with the accent color, not just white, should've mentioned it in the previous comment.

[richtepa]

I updated the design:

• accent color only
• changed flag icon
• added the line
• moved the buttons on the right to the center (if laps on screen)

The page-indicator is stays near the button to keep it intuitive.

How should the line behave when scrolling trough pages?

[eduardslu]

This design looks very good!

The page-indicator is stays near the button to keep it intuitive.

Didn't know you could use that button for apps, in that case it makes a better choice than centering it/

How should the line behave when scrolling trough pages?

What do you mean by this?

I don't know how it would be to use it, but wouldn't it make sense for the newest flagged time to be above the line? Also, when scrolling through pages the value above the line should be the latest one.

[richtepa]

Also, when scrolling through pages the value above the line should be the latest one.

Ok, fixed that.
PR #151 is ready for review.

[uvwxy]

@Kokofruits1 thanks for the awesome design
@richtepa thanks for the implementation

the code is now merged into the develop branch!