[Feature Request] Plans for a better UI? (Redesign Discussion)

[JingAr87]

Right now the UI is totally usable, but it looks certainly dated compared to other media streaming apps. Do you have any plans for a revamped UI?

[jmshrv]

I would like to add some more colour to the UI, but I can't think of any specific bit that needs improving. Do you have any ideas? I'm not a UI person so I've been sticking to the Material guidelines 🙃

[quite]

What issue creator might mean is that the UI is not same as in some other app they are used to. I just found Finamp, and think that the UX might be slightly better for me, than some other apps. (Myself I'm most confortable with terminal and keyboard based programs, but i'm not comparing Finamp to my tools there of course). But perhaps issue creator only means the appearance of the UI? Not at all the functionality?

[jaen]

I've came across the app just now and want to try it for the offline playback capability. I've used Gelli so far (a fork of Phonograph) and while finamp's UI is not terrible, I think Gelli/Phonograph – while still quite minimal – are a wee bit neater.

Some colors go a long way to make it more readable and the "now playing" screen is considerably more slick – it infers a matching background colour from the album art (the audio notification also follows that colour, which is neat) and has a really nice quick playlist access, you can even swipe it up to easily navigate to past items. It also has an alternative layout for the landscape mode that works well (I think finamp doesn't). The navigation is also more fluid – for example when you're in the track list mode and you have that bar at bottom showing the current track, then swiping it up has a continuous fluid motion of it transforming into a full screen view (while finamp has a basic fade instead), making it a subjectively more smooth experience.

I'm not sure how much exactly should you ape Gelli/Phonograph, but I'd give them a spin and try navigating around (Gelli should be easier one to try, since it's also a Jellyfin client) and see how a very similar basic layout of the application feels much more polished due to just a few small differences and consistent attention to UX details. I feel like you don't have to reinvent the UI totally (it's already quite similar to Gelli/Phonograph, which I think works well), just invest a bit into polish. Also, the UI seems to lag quite a bit (and even sometimes crashes) when you're batch downloading stuff, I'd look into it (I queued some whole artists for ~5k downloads).

Hopefully it's an useful 2 cents.

[jmshrv]

Those are some really useful suggestions, thanks :)

About the animation when opening the player screen - I did try to implement a nice slide animation but it's quite a hard thing to implement. I want it to sort of be like an animation as well as a page transition, which means that I have to mess about with custom navigator stuff that I don't quite understand. It's possible, and when I was looking into it I tried understanding Sweyer's implementation (and even made an issue asking how it worked lol), but ended up not looking into it futher.

Another thing I'd like to add is an animation when opening the search bar, even a basic fade would help a lot. I need to refactor the main music screen because it's a mess so maybe I'll implement that if I ever get around to it.

As for the UI lagging when many items are downloading, this is a known issue and should be fixed when I implement a new downloader package (#213).

[seniorm0ment]

I'd like to see smoother more fluid animations.
Also I've given my suggestions on UI in oast, but yeah I agree it could use a little tweaking. It feels a bit.. boxy and sharp imo. I know it's material, but maybe a bit more subtle roundness could be nice to match with the new Android style and iOS.

[Chaphasilor]

Hi there! I've recently started to work on a visual overhaul of the Now Playing view, and have been in touch with @jmshrv about this. Here's what I came up with so far:

It should look a lot more colorful and friendly, have a clear and easy-to-reach layout and contain all the info and functionality you need. While I've tried to incorporate requests from this issues as well as others (#211 @MarkWieczorek, #208 @nathancoooper), I've also tried to make it look somewhat unique.
Now I would like to now what you think! Please also look at the other examples below and tell me what you like, don't like, or if there's anything you're missing. I'll try to implement as much as I can, so that everyone is satisfied with the end result.

Some more examples (click to expand):

[seniorm0ment]

This is absolutely gorgeous, personally not a fan of the boxing around the buttons I feel it makes it look constricted whereas everything else has a nice floaty look. And I would probably prefer the buttons above the seekbar. Just personal preference though.
Maybe instead of seperating the info with •, you can badge them (Look at how Poweramp does it). Would be more readable and fit with the theme.

But overall beautiful! Amazing work, can't wait to see in release.

[MarkWieczorek]

I think that these look good. The only thing that is missing for me is the year that the album was released. would it be possible to add this after the album name?

[jmshrv]

I've begun implementing this design in the redesign branch :)

Note that the code is a bit ugly, I'll tidy it up once I've got everything figured out

[Chaphasilor]

This is absolutely gorgeous, personally not a fan of the boxing around the buttons I feel it makes it look constricted whereas everything else has a nice floaty look.

Yeah I struggled a bit with this. Without the box the layout look a bit strange though. Will tinker a bit more :)

And I would probably prefer the buttons above the seekbar. Just personal preference though.

This will probably be toggleable in settings!

Maybe instead of seperating the info with •, you can badge them (Look at how Poweramp does it). Would be more readable and fit with the theme.

As of yet none of the text has background, and I feel like badges always imply being clickable. Maybe I could use an outline if that looks good, or just keep it like this.

Thanks for the feedback! <3

[Chaphasilor]

I think that these look good. The only thing that is missing for me is the year that the album was released. would it be possible to add this after the album name?

Yep, this will also be an option :)

[nathancoooper]

One small adjustment that I would make is that I would have the title, album, and artist test all centred as opposed to pressed against the left side. Just personal preference though.

[seniorm0ment]

I agree with centering

[Chaphasilor]

Center-aligned text will be available as an option, and may end up being the default. We'll see :)

[MrPotatoBobx]

Id like to pitch in my own ideas as well, with these (horribly drawn) drawings.
Here is what id envision the album pages to look like:

I think by default its already fine, but the improvements include:

• More rounded square circle as the main album cover
• Removal of the download button atop and replacing it with a switch beneath play buttons
• Round off the play and shuffle buttons
• Favorite and download buttons in each song listed(yes, this does mean individual downloads would need to be implemented)
• And finally, perhaps blur at the album info header, or the whole thing(im not good with that stuff)

Another thing I envision is the menu that pops up when long pressing a song

The pop up will take approximately half(or 75%) of the screen, and shows the album art and song name at the top, followed by the options(the order of which must be thought of).

I hope @Chaphasilor can actualize this so we'd have a clearer idea on how it'd look like

[Chaphasilor]

@MrPotatoBobx thanks for the mockups, they are great, honestly! It gives me additional input/ideas to go off of :)

I can already tell you we're in agreement about the rounded album cover with text to the right. Also, I assume you intended to keep the information shown next to the album the same, given that you've used the same icons? Or is there some piece of information that you (don't) want to have there?

I'm curious, what's the reason you would like to have the download button in this position and as a switch? Is it because this is how other apps (like Spotify) do it? And would you mind if the "Like" button were in the same spot, maybe on the opposite side?
I would like to keep related or similar controls/buttons grouped.

@jmshrv is it possible to get information about the "discs" through the jellyfin API? If yes, this would likely be another option that can be turned on in settings, but separation by disc would probably be off by default, given that I know no other (mobile) music player that shows albums like this.

I'll think about the song layout some more, not sure yet how much space there will be for icons. I always like to maximize the width of shown text whenever possible. Maybe, once things like #125 are implemented, we could simply have taller list items that can fit more information without making scrolling long lists impossible.

Regarding the song menu:
I'm actually in the process of designing this right now, specifically for the "three-dots" menu on the Now Playing screen. You can take a look at the current version down below. One thing I was trying to solve is how currently the menu always pops up in a different spot, depending on where you press. I'd also like to add a link to the artist, ideally one for each artist if there are more than one. Now my questions are:

1. Would you prefer if the menu would not cover the whole screen?
2. Is reachability (e.g. one-handed) usually an issue for you (or anyone else)?
3. Do you have any frustrating experiences with menus in other apps?

Here's the mockup:

Keep the ideas, requests, criticism and drawings coming! 😁

[nathancoooper]

I think one-handed usability should definitely be kept in mind but, as long as you can swipe to close the menu with just one hand holding your phone then I see no problem with it covering the entire screen.

[seniorm0ment]

Would love to see two rows at the bottom of albums, and even playlists with "More from this artist" and "Similar to this artist"

I would prefer it to cover the entire screen, however I wouldn't be opposed to the idea of adding an option that shrinks it "One Handed Mode".

Also a reply about the badges for the audio quality. You could make them into buttons, that open up a box that displays highly detailed audio quality information. This would actually be very nice.

Also this may be a stretch, but it would be so nice to have an option for something to grab album information. I love learning about the albums stories, and artists sometimes.
This is something a lot of streamers like Qobuz has.

Like Wikipedia for information, Genius has some info (also Lyrics!), Lastfm has some info.
I'm not sure if there are any libre services, but maybe this is something that Jellyfin needs to implement not the app idk.

[Chaphasilor]

Would love to see two rows at the bottom of albums, and even playlists with "More from this artist" and "Similar to this artist"

"More from this artist" should be absolutely possible. Jellyfin also seems to provide a "More like this" category through the API for albums, so guess this can also be shown. Any preferences about the layout, or do you maybe have examples of music apps that do this well?

Also a reply about the badges for the audio quality. You could make them into buttons, that open up a box that displays highly detailed audio quality information. This would actually be very nice.

That's a very good suggestion! Maybe we could even go as far as being able to change transcoding settings right from there!

Also this may be a stretch, but it would be so nice to have an option for something to grab album information. I love learning about the albums stories, and artists sometimes.

Jellyfin provides that for artists only, not for albums, and even then only if the information is present on TheAudioDB. Whether or not we can integrate third-party meta-info fetchers is up to @jmshrv, not me. I'll try to add the description somewhere on the artist page once I get there, then it shouldn't be too hard to also add it to the album page if that is ever needed :)

[MrPotatoBobx]

I'm curious, what's the reason you would like to have the download button in this position and as a switch? Is it because this is how other apps (like Spotify) do it? And would you mind if the "Like" button were in the same spot, maybe on the opposite side?
I would like to keep related or similar controls/buttons grouped.

I find that it ( as a switch) makes more sense. The album download status is either yes or no, and so the switch makes sense when you have two mutually exclusive options(i guess the same would also have to apply to the favorites button but i feel like a download button would be harder to convey the "undownload" option like the heart does) . As per the position, yes, mainly inspired by other apps, but also because having all that stuff at the top makes you forget that it ever exists, putting it near there always signals the option to download and favorite the album. And yea, its fine to group them together, it makes more sense.

Would you prefer if the menu would not cover the whole screen?

I would, because in that state you could exit by swiping down or tapping the part where it doesnt cover it, and also i wouldn't know how you'd animate the screen popping up.

I'll think about the song layout some more, not sure yet how much space there will be for icons. I always like to maximize the width of shown text whenever possible.

The icons don't have to be as big as drawn in the photo, or even clickable for that matter, they could be just status icons to see which songs are favorites/downloaded, finamp already does this for favorite songs.

Also, I assume you intended to keep the information shown next to the album the same, given that you've used the same icons?

At first it was yes, but then i thought the song number thing was pretty useless, and that this extra info should be shown in another page. so the first page is just the album name and artist name below it, and swiping to the second one shows the artist name(i thought this one redundant so it think it is better to actually just put song number instead) album time, and the release date.

Look here(ignore the back button, i assume you'd want to round it off like the player screen):

Also, for the existing mock up, it think the shuffle and repeating stuff is already found in the player screen so there isnt a need for it.

[jmshrv]

I think one-handed usability should definitely be kept in mind but, as long as you can swipe to close the menu with just one hand holding your phone then I see no problem with it covering the entire screen.

That menu could be implemented as a dialog, so pressing outside the menu would dismiss it.

Whether or not we can integrate third-party meta-info fetchers is up to @jmshrv, not me

Hmm, I'd have to leave API keys in the source code, which is a pretty big blocker. There are also concerns about interacting with non-free services. Maybe it would make sense as a Jellyfin plugin? That way everyone is in control of what services are used.

These are all great suggestions btw :)

[Kaaybi]

I will soon get to work onto Jellyfin-server code to allow the user to chose a rating mechanism (likes or 5-stars for instance), I would be interested to see what it would look like on this gorgeous UI revamp :)

[Chaphasilor]

I think one-handed usability should definitely be kept in mind but, as long as you can swipe to close the menu with just one hand holding your phone then I see no problem with it covering the entire screen.

That menu could be implemented as a dialog, so pressing outside the menu would dismiss it.

Well I'm really not concerned about closing the menu, but about being able to properly reach all actions with one hand. But maybe it's better to test that with a working prototype ^^

[Chaphasilor]

I will soon get to work onto Jellyfin-server code to allow the user to chose a rating mechanism (likes or 5-stars for instance), I would be interested to see what it would look like on this gorgeous UI revamp :)

@Kaaybi I'm sure we can figure something out once that lands, but honestly before there is an actual implementation where it is clear what the "requirements" are and how the mechanism works, I don't think it's useful to design this. This could implicate pretty big changes to how the app in organized, so it might be necessary to adapt a lot of things to support this.
I'm not opposed to this in any way, I'd just like to do one thing at a time for now and not think too many steps ahead 😅

But if there's some sort of discussion about how this should end up working I'd be glad to read up on it and keep it in mind while designing the other things!

[seniorm0ment]

Thanks for the replies, I want to add that animations make the app. As long as they're not too slow, or over the top. Light and responsive. This is something imo Apple devs shine with.
I find Geometric Weather to be an amazing example of an Android app that has quality animations that just feel right.

Pair this with the ability to do certain things such as swipe down om the album art on playback screen, to go back to the playlist or album menu.

Also I think I mentioned it in another issue, but I'd love to see near the codec type info, what it's playing back on. For example bluetooth - device name, USB-C dac, when casting is added then that device, to Wifi Sonos or Mopidy, to 3.5mm Headphones, etc.

Also the replaygain info, and decibel info is really nice to be able to see.
Check out Audirvana

I point out Audirvana because there are currently no great libre audio solutions that compare to it's clients. The amount of information it provides, PAIRED with their beautiful apps is just amazing.

Third party meta-info fetches

Thinking more on it, it's probably best to just pull from whatever jellyfin can get. But if Jellyfin can pull info like lyrics, and genius info, etc through plugins then it can be relayed through to the app if it detects it and if not just hide those options or something. That way the app makes no connections to third party servers or connections, and is just relaying what jellyfin has.

[ZarK]

This here thread is amazing, and really inspiring to watch. I check it daily, and the effort, suggestions, designs and discussion here are all superb.

I don’t have the capacity to contribute at the moment, but if there is a way to patron some development, I’m up for it.

I finally found Finamp as my solution to Jellyfin music, and this new design will be fantastic. I can’t imagine it will take less than a year to complete, and it will be well worth the wait.

[ae5960e8-a6fc-491f-b252-898ecf59af95]

Not much is needed to vastly improve the UI.

• add a pure black theme
• add the option to change the accent color
• make opening and closing the player more responsive (like Gelli's)

Please don't take the advice of those suggesting to use quirky fonts or to aim to achieve a clone of another app. Keeping the app as simple and light as possible while using the modern Android menu system as much as possible is the way to go, similar to the philosophy of Simple Mobile Tools. "Music" by Zion Huang does this well as an example of a very lightweight app which uses the modern standard Android 12 components.

If there's to be any major change to the UI I think your time is best spent using the latest Android material design for simplicity, lightness, speed, longevity, and visual appearance too.

[TheRealGramdalf]

@TheRealGramdalf could you open a discussion for this? It doesn't really fit the issue, but I'll definitely try my best to get you set up :D

Done!

[StayBlue]

@Chaphasilor That's fair. Thank you for replying to my suggestion in earnest and explaining your thought process. I'm still fairly new to UI/UX, so I have a long way to go.

[Chaphasilor]

I mean UX is not an exact science by any means, so it's not like you're wrong!
I'm just trying build something that works well for anyone, and that usually means that it's not perfect for anyone. We can probably introduce some customizations down the road that will allow you to hide the controls you don't need. But it's still a long way there, there's so much that needs to be done during the beta 😬

I'm actively preparing the launch though, there are just some more improvements that I need to get in before that...

[mihawk90]

The only thing I'd like to point out from the above screenshot is that the margin at the bottom seems fairly large. There is a considerable amount of "emptiness" that could be better used by moving the controls and track info down and enlarging the album cover for the gained space. But maybe that's just me.
Also is the Direct Streaming/Downloaded/Transcoded info (bottom left in the current UI) gone or am I missing it in the screenshot?

[Chaphasilor]

Yeah, I still need to figure out how best to adapt to the available space. I've had some trouble on my old phone where it's hard to fit all elements on the screen. It will be improved over the course of the beta.
And you are correct, that info is missing at the moment. I did design it though, so I'll make sure to put that in for the beta :)

[IlmariKu]

How could I get the beta into personal use? APK's at releases are the stable ones, I can't find "beta"-links on Google play (or in F-droid). Do I need to install flutter, build it on my own machine from the branch and then install manually?

[Chaphasilor]

The beta has not yet been released, we're still working on tying up some loose ends :) It took a bit longer than anticipated, but the the initial beta release will pack a few more features than we originally planned for 😁

I'll be working on integrating all pending pull requests over the weekend, and then I need to coordinate the release to Play Store and Testflight with @jmshrv. I've already written the release notes, so we really are gearing up for the launch ^^

You can of course build the project yourself if you absolutely can't wait to check it out, the necessary info can be found in the CONTRIBUTING.md file.

[IlmariKu]

Thanks for the info! I'd love to contribute @Chaphasilor. Just found the Finamp and amazing that it exists. But, I'm personally no Mobile / Flutter -dev, (web-fullstack), so I'd need to pick up Flutter first.

I'll keep it in mind. It would be nice to get into flutter.

[Chaphasilor]

I'm also coming from a Web background, it's not that hard to get into. You'll miss CSS for a bit, but you'll see that you can live without it for the most part ^^

It'd be wonderful if you could contribute something, let me know if you need anything to get started (just create a discussion and mention me)!

[TheRealGramdalf]

How could I get the beta into personal use? APK's at releases are the stable ones, I can't find "beta"-links on Google play (or in F-droid). Do I need to install flutter, build it on my own machine from the branch and then install manually?

If you want to build it yourself I can share my working flake.nix to get you started with the right dependencies - there's a version of it in a discussion, but it may not be one hundred percent functional. Let me know if that sounds interesting, and I'll find a time to get it cleaned up and shareable.

[Chaphasilor]

Beta builds have been submitted to Play Store & TestFlight for review 👀
Once they pass review, I'll post the release announcement! 😁

[jmshrv]

it's out :D https://github.com/jmshrv/finamp/releases/tag/0.9.2-beta

[mihawk90]

Updating an existing install doesn't seem to work at least with the GitHub release packages (I used the universal):

Not a huge deal to me, but thought I'd let you know.
I assume this is due to whatever changed in signing the APKs that was mentioned somewhere else.

[PauFCB]

I really liked the home menu, but found that the skip function for the currently playing song was missing, and would like to have something like that. (original design by Chaphasilor)

Hi, I'm testing the testflight version and works well, but how can I make the homescreen view to look like this instead of the old tabs (artists, albums, etc) at the top? Thanks.

[Ammoton]

Hello @PauFCB this is not yet possible. This was just a design from Chaphasilor and is not implemented yet.

[mkozjak]

These blue Play and Shuffle buttons are an instant punch in the face for me. Anyone else experiencing the same?

[Chaphasilor]

They are only temporary. Colors will adapt to the album cover on the album screen eventually, just like in the mockups

[AkechiShiro]

Hi is there any issue/tracker for desktop support that was announced to be upcoming in the latest beta release?

[Chaphasilor]

@AkechiShiro no, not really. It'll probably take one or two more releases to finish things up, and the desktop version will not receive the same level of support.
Just stay tuned for more announcements in the release notes!

[kazango]

These blue Play and Shuffle buttons are an instant punch in the face for me. Anyone else experiencing the same?

I agree with this, I learned about the beta this morning trying to find a fix for the latest iOS release bug with the artists tab and this redesign beta fixes it and is honestly incredible compared to the current public release state. In your reply, @Chaphasilor, you only mention the colors will change, but I think the main issue (for me at least) is this top block is fixed in place and doesn’t disappear or shrink when scrolling down the track list.

I’m also seeing the favorite hearts too close to the letter filters on artists & songs views. Curious if I could help at all with a background in CSS but seeing your earlier comment it seems not.

[Chaphasilor]

I'll make the top section fade out again with the next update, until I can properly implement the header shrinking down to take up less space when scrolling.

As for the favorite icons, they will get updated when I'll replacr the track list items with the redesigned version.

Flutter's design approach is different from CSS, but easy enough to pick up, especially if you're used utility CSS like tailwind or boostrap before. If you want to dabble with this, you could always check out the contribution guide and open a draft PR to get some feedback and tips :D

[Diacius]

Just installed the beta and I think it's excellent, but there are a few things I'd like to mention:

• Swiping down from Now Playing should make the panel slide down, not slide to the right, because it feels unnatural. or change the gestures and icons to reflect its "postion" on the right of the track listing. Personally I think it should follow the convention of other apps and come "up" from the bottom, the queue dialog already works like this
• Transcoding works great! My only complaint is that the text in the "ask to transcode" dialog sometimes overflows the buttons, which is annoying when the dialog uses barely any of my screen to display, I think using less margin would be useful, the internal padding is fine, the title should be changed from "add downloads" to "Would you like to transcode" or similar
• Queue is soooo much better now.
• Being able to skip and return to the previous track is great, but I think the fact that doesn't carry over to "now playing" is a little confusing
• In app AirPlay button is excellent!
  In conclusion: This is soo close to perfect now, in my opinion only a few things need to be tweaked! The mockups look excellent!

Also, when playing a single track, please provide a way to turn off the "mix" because it's nowhere near good enough to not ruin the mood, and sometimes you only want to play a single track :)

Device Info:
iPhone 12 mini
iOS 17.2
Finamp from Testflight

[Diacius]

Ok quick update, the latest update adds nice information about the currently plating track but is showing the wrong bitrate for songs downloaded at 256kbit AAC transcoded is showing as AAC but at the FLAC bitrate on Now Playing. The bitrate is correct in downloads, but not on now playing :)

[Chaphasilor]

Yep that's a known bug, will be fixed with the next update!

[Diacius]

Great! Thanks!

…

On May 10, 2024 at 6:25, <Chaphasilor ***@***.***)> wrote: Yep that's a known bug, will be fixed with the next update! — Reply to this email directly, view it on GitHub (#220 (comment)), or unsubscribe (https://github.com/notifications/unsubscribe-auth/ASSIEYCVQD7Q7J7BZ7QJUBLZBT7GZAVCNFSM5TUTXKKKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMJQGQ4TSMZQGM4Q). You are receiving this because you commented.Message ID: ***@***.***>