finamp
finamp copied to clipboard
jmshrv
[Feature Request] Plans for a better UI? (Redesign Discussion)
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?
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 🙃
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?
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.
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).
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.
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):
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.
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?
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
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
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 :)
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.
Center-aligned text will be available as an option, and may end up being the default. We'll see :)
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
@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:
- Would you prefer if the menu would not cover the whole screen?
- Is reachability (e.g. one-handed) usually an issue for you (or anyone else)?
- Do you have any frustrating experiences with menus in other apps?
Here's the mockup:
Keep the ideas, requests, criticism and drawings coming! 😁
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.
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.
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 :)
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.
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 :)
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 :)
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 ^^
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!
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.
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.
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.
@MrPotatoBobx sorry I didn't see your message. thanks for all the answers!
- I'll see what I can do with regards to the download button, because there are actually three states (on server, downloading, on device) that need to be conveyed.
- I've decreased the height of the menu and designed a nice little transition. to close it, you can tap the
x, tap outside the menu or swipe down. - For now I've made the icons clickable, if there is not enough space for the text I can decrease the size further. I'd like to offer the possibility to like a song from the song list, but maybe this can be done by double-tapping instead of using an icon...
- Regarding the album header, your approach would be how it's done in Spotify, correct? I'm not sure I'm a fan of this, maybe I can put the year, track count and runtime as small badges, similar to how I did it above the progress bar on the Now Playing screen. This way there is no need to swipe to a second page, but the information doesn't take up too much space either. I'll play around with it.
- You are right that the shuffle and repeat functionality in the menu is redundant, but this is by design. The menu will try to offer all possible options, and the Now Playing screen only a subset of those :) This makes it easier to add or hide certain controls if the need arises at some point (e.g. through user customization, allowing to create a very minimal player screen)
I want to add that animations make the app. As long as they're not too slow, or over the top. Light and responsive.
I'll try my best, but I don't have any experience with designing animations. Basic transitions are fine, but anything beyond that are, as of now, out of my league. If there's somebody here who has experience with this I'd love to collaborate, and if not I'll try my best to give it a shot myself once everything else is designed.
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.
While that is a great suggestion and I'll try to fit it somewhere, implementing this probably won't be trivial. So I can't tell if it will ever see the light of day.
Also the replaygain info, and decibel info is really nice to be able to see.
These can be shown along with the sampling rate and streaming bitrate, no problem. That is, if finamp actually has that information. That's out of my control.
- add a pure black theme
- add the option to change the accent color
- make opening and closing the player more responsive (like Gelli's)
I'll see if an AMOLED theme looks good, this probably shouldn't be too hard to add. It probably won't apply to the Now Playing screen though. Depending on how the redesign will handle the accent color, manually picking one shouldn't be a problem. Better gestures and transitions will be part of the redesign.
Please don't take the advice of those suggesting [...] 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, [...] 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.
Going with a Material You / Material Design 3 theme is not the goal, sorry. I discussed this with @jmshrv and even created a draft design in a similar style, but we decided against it. While I agree that it looks good, it actually would make it look like a clone of another app. Finamp should have a unique and well thought-out design.
However, you should take a look at "Symfonium" on Google Play, it is a paid app that does everything you want. :)