Music: Redesign Part 2

[tituscmd]

Hey everybody,

Since creating PR #2292 and introducing a small little redesign of the music app, I've had some more time on my hands and finally came around to creating a better version of it.

I've moved the artist and track name up a bit to add a new progress bar that shows the progress of the song you're listening to, with the time that has passed shown on the left and the time remaining shown on the right. Sadly, I've had to remove (comment out) the disc animation in the top right because of space issues. If anyone is especially fond of the disc I'm sure space can be made to fit it back in. It is definitely not a final decision by me, hence why it's only commented out and not removed altogether. But now that I've temporarily removed the disc animation, the top of the screen seemed quite empty to me. And after some thinking and digging through the code, I stumbled upon these lines of code in the Music.cpp:

294 - // Let's assume it starts playing instantly
295 - // TODO: In the future should check for BT connection for better UX

And so I thought "why not do that?" and I added an indicator text at the top telling you if you are connected via bluetooth. Please share your opinion on this.

Finally, here are some pictures of it all:

[github-actions[bot]]

Build checks have not completed. Possible reasons for this are:

1. The checks need to be approved by a maintainer
2. The branch has conflicts
3. The firmware build has failed

[liamcharger]

Definitely like this better than the current UI!

But what if you replaced the "connected" with the status bar/icons instead? That makes more sense imo

P.S I always thought the disc was a waste of space :)

[mark9064]

Aw I quite like the little disc

Looks like a good change overall

I interpret the comment about Bluetooth as clearing the presented data when Bluetooth is disconnected, rather than showing an indicator. Since if Bluetooth isn't connected, we don't know anything about the music state and none of the controls are going to do anything. So I think it might be better UX to disable the controls and show "No connection" when Bluetooth is down rather than having a status bar, that way you get that space back. What do you think?

[tituscmd]

I think that's a good idea.

The initial reason for that status bar/"Connected" text was the fact that the little disc physically didn't fit with the new design, but without it the top seemed so empty.

I'll share some screenshots of the different ideas talked about in this PR later when I have the time again. Then we can see and decide which one we like best. How does that sound? 🙂

[mark9064]

Sounds good to me :)

[tituscmd]

I've played around with the design a bit and read some more older discussions on the music app design, what do you think of this?

It shows everything the regular old way, until you're disconnected. Then it says so where it would usually say "Not Playing" and the buttons below are a bit darker. I've also added the time up top, since some people in those discussions proposed that idea and I like it. How does this look?

[mark9064]

Looks nice! What do you think about having the full status bar rather than just the time? I'm thinking if we're already using that top space we may as well fill it with the full bar - I get the feeling that putting anything else in that top space is going to look weird

Or maybe left align the time and bring back the disc top right :P

I think it's good as is though, you don't need to like either idea :)

[tituscmd]

Im not necessarily against any of those ideas, it just seems to me that, from a UI perspective, the status bar is only ever present in watchfaces or "transition screens" i.e. quick settings, app launcher. I feel like an app should feel like its own separate entity from those, so including the status bar breaks that.

I like the idea of moving the time to the left and adding the disc back, but it's ever so slightly too large for the new UI. Would it be easy/doable to make that disc a bit smaller?

[liamcharger]

I agree with @mark9064 here about the status bar. It shouldn't be exclusive to the launcher and quick settings (usually there just isn't enough space). I can think of too many times I would've liked to check the time while I was inside an app I didn't want to close

[mark9064]

Yeah more broadly there is #1592

The disc could be resized, it's a small PNG that's been converted to LVGL format. The original PNG is in the tree (icons/music/disc.png)

[tituscmd]

I agree with @mark9064 here about the status bar. It shouldn't be exclusive to the launcher and quick settings (usually there just isn't enough space). I can think of too many times I would've liked to check the time while I was inside an app I didn't want to close

I agree partly. In an ideal world, the status bar should be visible in any app. But since that is not the case right now, I think it’s better to stick to this pattern until we find a better solution for every app/globally, so everything remains predictable for now.

[LinuxinaBit]

Could you integrate the volume buttons onto the main page instead of still requiring the swipe up? (A good PR demonstrating the current behavior: #1875 )

Something like #1901 would be very nice.

[tituscmd]

Could you integrate the volume buttons onto the main page instead of still requiring the swipe up? (A good PR demonstrating the current behavior: #1875 )

Something like #1901 would be very nice.

While I agree that the current system of swiping is not ideal, I am personally not a fan of how it looks like when the volume buttons are stacked on the right. It's a lot of visual clutter and I don't think it's the way to go. We could go with something like how the Paint app does it, i.e. tapping and holding the screen and that changes the buttons (with a little vibration)

[LinuxinaBit]

That's still completely obtuse and gives the user no indication that the controls exist. Far better to figure out some way to put it on one page imo.

On August 18, 2025 5:24:36 AM CDT, Titus @.***> wrote:

tituscmd left a comment (InfiniTimeOrg/InfiniTime#2337)

Could you integrate the volume buttons onto the main page instead of still requiring the swipe up? (A good PR demonstrating the current behavior: #1875 )

Something like #1901 would be very nice.

While I agree that the current system of swiping is not ideal, I am personally not a fan of how it looks like when the volume buttons are stacked on the right. It's a lot of visual clutter and I don't think it's the way to go. We could go with something like how the Paint app does it, i.e. tapping and holding the screen and that changes the buttons (with a little vibration)

-- Reply to this email directly or view it on GitHub: https://github.com/InfiniTimeOrg/InfiniTime/pull/2337#issuecomment-3196077158 You are receiving this because you commented.

Message ID: @.***>

[tituscmd]

I mean yeah, I agree, but I really don't like how the UI looks that way. I don't believe that that would be the best solution to the problem.

[liamcharger]

Regardless of if there's an indicator or not, swiping is a bad design. A button-based system is much simpler/more predictable, although I agree it does take up more space than I'd like

Like @LinuxinaBit mentioned (#1875), there should be a scroll indicator at the bare minimum

[tituscmd]

I played around with the UI a bit. What do we think about a button like this? The button label switches between "Volume Controls" and "Track Controls".

We kinda have to sacrifice the time at the top for this, since otherwise the screen is gonna be too cramped to read, but I think that's fine

[tituscmd]

Looks like this on-device, I quite like it

[LinuxinaBit]

What about just this instead?

No need to make one tap into two, I figure...

[dariusarnold]

@LinuxinaBit I like the design with the volume buttons always visible. I think that it might be possible to shrink them a little horizontally and use that to display the connected/disconnected state. Then there would still be two lines for the track + artist above the progress bar. Depending on how the connected state is displayed (maybe a blue and greyed out symbol), there might also be space for the time. Then everything would be displayed. That might be worthwhile to consider, but maybe I am imagining the display larger than it really is.

[liamcharger]

Looks like this on-device, I quite like it

While it informs the user of the volume controls, I don't think that's intuitive either. The hint itself looks like a button, and I don't like the idea of it being permanent.

@LinuxinaBit 's solution is great, although the button colors should be uniform. We don't lose any current elements, and it fixes the entire issue.

@dariusarnold Since we already have "disconnected", an icon isn't necessary. Shrinking them vertically also wouldn't leave enough room for the actual buttons (they'd be too small to hit reliably)

[tituscmd]

While it informs the user of the volume controls, I don't think that's intuitive either. The hint itself looks like a button, and I don't like the idea of it being permanent.

It is indeed a button and achieves the same as the "old" swiping gesture, but as a button

@LinuxinaBit 's solution is great, although the button colors should be uniform. We don't lose any current elements, and it fixes the entire issue.

Very fair. How about we place the buttons below the current three buttons though, so it looks more like it belongs to those control buttons?

[tituscmd]

How about we place the buttons below the current three buttons though, so it looks more like it belongs to those control buttons?

I like this a lot actually. I've changed the height of the buttons to match the InfiniTime Vision on UI and I think it looks really good. I only added the "Some Track" string to visualize how it will look like with a song playing, it will be removed once I actually push all those commits

[LinuxinaBit]

There are two reasons I didn’t group the buttons like that:

• So the touch targets could be made bigger (expanding down past the visual button)
• So there’s extra space providing some good visual separation

Both of these are sorely needed on a screen this small.

As for the colors, I themed it the same as your Volume Controls button to provide some visual balance and avoid making it too uniform (the volume icons should’ve actually been a bit more gray to match). I think it looked a lot better than when I tried making them the same shade.

Main thing is that I really wanted to avoid making it just another grid of icons because it just doesn’t look all that good, and is less usable to boot.

Edit: A unified grid also moves the song title/artist text a bit too high for my preference...

[tituscmd]

As for the colors, I themed it the same as your Volume Controls button to provide some visual balance and avoid making it too uniform (the volume icons should’ve actually been a bit more gray to match, but I forgot to do that). I think it looked a lot better than when I tried making them the same shade.

The darker color is actually already used when the watch is disconnected, showing that they're disabled. As far as I can tell, that's the visual cue for the user to understand that the button currently won't work in general in InfiniTime (see stopwatch app -> lap button)

Main thing is that I really wanted to avoid making it just another grid of icons because it just doesn’t look all that good, and is less usable to boot.

Not sure what you mean by less usable to boot. Otherwise, the grid of icons is down to preference I think. I think having the volume buttons up at the top separates them too much from the controls and makes them look out of place.

[liamcharger]

The colors should be the same as it doesn’t make sense to have them different. And as @tituscmd mentioned, the darker gray is used for the disabled state.

As far as positioning, I believe keeping them on the top of the screen is more practical, as the user is less likely to hit another button accidentally. The volume controls are also not "main” actions, so keeping them separated is more natural imo

[tituscmd]

I'm really not a fan of buttons on the top edge of the screen :sweat_smile:

Here are the two variants next to each other, as well as a third one I just made which I think is even better than No. 1 ..... .....

If we were to go off the InfiniTime UI guidelines, it says buttons should generally be on the bottom edge. Now of course that can be disregarded if we don't have enough space, I'm not going to say we should 100% stick to those guidelines no matter what, but I get where they are coming from because imo it looks the best (picture 3)

[LinuxinaBit]

I think part of the problem is that the spacing isn’t consistent with the bottom ones, and they aren’t tall enough. I think fixing both of those issues will help.

[LinuxinaBit]

It might also be worth just making them a different shade (not the disabled button or the standard button shade) just for visual variety. I think it could end up looking really good if you find the right combination.

[tituscmd]

I think part of the problem is that the spacing isn’t consistent with the bottom ones, and they aren’t tall enough. I think fixing both of those issues will help.

The spacing I chose is just the usual spacing of two buttons next to each other in InfiniTime, i.e. Firmware Validation screen

It might also be worth just making them a different shade (not the disabled button or the standard button shade) just for visual variety.

We have to keep in mind what @liamcharger said "The colors should be the same as it doesn’t make sense to have them different." I'll try to play around with the spacing a bit to make the screen less cramped maybe