vfsfitvnm / ViMusic

An Android application for streaming music from YouTube Music.
GNU General Public License v3.0
9.16k stars 915 forks source link

⚠️ New UI concept #496

Open vfsfitvnm opened 2 years ago

vfsfitvnm commented 2 years ago

As you all know, the version 0.5 brought a massive UI change. Some people are concerned about the ease of navigation, and I can't blame them (full discussion: #390). I honestly love how every screen looks like, but perhaps it's more good looking than functional. An aspect I don't like is the difficulty to tell where you actually are: every screen resembles literally any other screen of the whole application.

The vertical navigation bar, also known as navigation rail, improved the UI, but harmed the usability (i.e. your finger has to move too much to change the content on the screen). I took some spare time to address the issues, but as soon as I removed the vertical bar (the root of evil) the screens looked arid - as they were just a pile of stuff glued together.

I'm not sure how these things matter in a music player app, however I always try to push things further so I started thinking about another design.

All music players have the same layout: bottom navigation bar (or navigation rail + horizontal tabs) + bottom player (that can be expanded). That's it. Thanks, material design.

I already do not use a top/bottom navigation component and now I'd like to see if I can get rid of the bottom player, too.

The concept I had in mind is having an immersive player screen as the main screen of the application. With a lot of gestures.

Here it is:

https://user-images.githubusercontent.com/46219656/197348666-c436b3e0-3bd2-4de5-9a9b-75d571ff0fe7.mp4

I'd like to know to hear what you think before investing a lot of time in this concept. It was fun to do :yum:

brnwlshubh commented 2 years ago

It really looks great

sidsharths1245 commented 2 years ago

It looks excellent and it seems pretty easy and straightforward to use. In my personal opinion the player screen looks a bit empty, but i think once you implement the full screen lyrics it should look great.

One suggestion i have is that when you add the library option you can have two separate tabs. One called "Explore" as in the current quick picks and the other named "personal" or whatever for our added songs and playlists etc and all the elements (artists, playlists, songs) can be added inside these two sections.

Another one i realised while typing is something that you can experiment with to see if it looks better or worse. Like you can have the album art as a square in the middle of the screen instead of being stretched over the entire screen.

Edit: I absolutely love this concept. I just realised how unique it looks. Great idea man. It takes great effort to go back to the drawing board once you're at such stage in development with the current design. Keep up the great work.

sidsharths1245 commented 2 years ago

It looks excellent and it seems pretty easy and straightforward to use. In my personal opinion the player screen looks a bit empty, but i think once you implement the full screen lyrics it should look great.

One suggestion i have is that when you add the library option you can have two separate tabs. One called "Explore" as in the current quick picks and the other named "personal" or whatever for our added songs and playlists etc and all the elements (artists, playlists, songs) can be added inside these two sections.

Another one i realised while typing is something that you can experiment with to see if it looks better or worse. Like you can have the album art as a square in the middle of the screen instead of being stretched over the entire screen.

Edit: I absolutely love this concept. I just realised how unique it looks. Great idea man. It takes great effort to go back to the drawing board once you're at such stage in development with the current design. Keep up the great work.

One last thing i would suggest is that you could have other important buttons like, loop, add to playlist, start radio etc as marked in the picture below. It would make the screen not look so empty. Or maybe not, i just realised it might end up making it look like tik tok or something.

vfsfitvnm commented 2 years ago

Thanks! And yes, I think I will add two more buttons (or gestures) at least to set the loop mode and show the menu/lyrics/stats for nerds!

My current idea is:

Unfortunately the thumbnail must be at full screen, the screen looks empty otherwise and the gestures becomes innatural

PassionateG1t commented 2 years ago

I don't remember if I said it, but I used to be very skeptical about the 0.5 redesign. After being implemented it quickly grew on me. Granted, It needs minor polishing and that's something I can get behind with. The backlash regarding the redesign is something natural; people are attached to what they are used to. I think you need to give people some time to simmer the latest redesign and I'm sure more people will start to like it (especially if you make disabling tabs an option 😝)

Now, regarding the following concept I now understand what you mean with experimenting with a popular layout: basically tiktok. Honestly, and that's a personal bias, I dislike this layout. This new layout that more entertainment-centered apps are swerving towards is just toxic and aims for attaching people to the service like a fatal addiction. It's unbelievable how changes in UI and the general appearance of the app can make such a huge difference. Youtube shorts, IG reels, tiktoks; they're all terrible and manipulative. I actively avoid apps that provide this exact layout because of their malicious intentions and the unhealthy lifestyle they produce. Exploring new music is already addictive enough for me, why make it even more addictive. I just want a music streaming app, not another tiktok app 😔 (Sorry for the rant)

For me, the player already looks great as it is: the soft, dynamic colors; the smooth edges of the buttons. While your proposed layout gives better visibility for lyrics, the current box for the lyrics is already enough. The issue here is not with the available space but the size of the lyrics themselves. Spotify has a lyrics box with similar size but the difference is that their lyrics are bigger and in bold.

Some things in life just look great as they are, we shouldn't worry about making them better. Stagnation (I prefer using "stability") is sometimes better than change :)

matchboxbananasynergy commented 2 years ago

Thank you so much for always trying to innovate and listening to user feedback! With this design, I'm a little bit conflicted.

On one hand, I believe that this dramatically improves usability, as the gesture based navigation UI doesn't require people to stretch their thumb to the other side of the screen. I also believe it provides a lot more clarity, as with the navigation rail, it often felt like I was a bit lost and I had to pay attention to figure out what options are there and how to go back to a screen that's relevant to what I want to do in the app. That's not a good sign of intuitive UX.

This design looks very nice as well, but it feels much more at home for an app where visuals are front and center (yes, like TikTok). Here, for the most part you'll just be seeing the album cover, which doesn't really add much information relative to the space it's taking up. This is not a major issue, though, provided that everything that I need to do within the app is easily accessible to me via gestures.

It is clear to me that this app will never adopt a "normal" Material Design UI, and I've come to terms with that, despite how much I like it. I'm using ViMusic instead of other apps that are very similar and feature a more standard Material Design layout because I appreciate the fact that this app is opinionated and exciting.

Keep us in the look. I'm excited to see the UI finished. :)

vfsfitvnm commented 2 years ago

@PassionateG1t I get your point about this type of layout. Not sure if I was a little mischievous when I thought of this, but the only thing being shared here is the vertical scroll only. There's nothing addicting because there's no reason to "keep scrolling" (but the apps you mentioned do). Would you scroll to the next song to stare at a still image for 15 seconds, hear like a twentieth of the song and then proceed to scroll again? Also, what forbids you to do the exact same thing with the current layout? Not all evil comes to harm!

PassionateG1t commented 2 years ago

Yeah again as I said, it's a personal bias. I don't think you have bad intentions, but the layout itself (from past experience) is something I wish to avoid. The current player has intricate nuance in contrast with this prototype, and I don't recall any complaint about the former mainly because it's perfect the way it is, it's just how a music player is supposed to look like 🤷‍♂️

I herewith voiced my opinion as you asked, and I'm aware that it depends on what the general consensus is. Thank you for still taking care of maintaining the app.

Toiletmason commented 2 years ago

I think this a step in the wrong direction. The player page already looked great. Players look like they do for a reason. Ease of use and functionality. You're sacrificing both for imo a worse layout. If you're doing this for the lyrics then I guess I don't understand. The way you have implemented lyrics has been satisfactory for awhile now.

The current layout just needs some tweaks honestly and has grown on me.

matchboxbananasynergy commented 2 years ago

How does one pause/play with this new UI, by the way? I assume it's just a tap anywhere on the screen, or will buttons be added?

ARBoyGo commented 2 years ago

Easy, Love the design. Waiting for finalized result.

ARBoyGo commented 2 years ago

Before finial release, We need to have our hands on it experience

NeeRaj-2401 commented 2 years ago

@vfsfitvnm I appreciate ur efforts to make it better day by day and try something unique. But honestly this tiktok inspired new layout doesn't suits with a music streaming app. Agreeing with @PassionateG1t

Another option(https://github.com/vfsfitvnm/ViMusic/issues/390#issuecomment-1284139296) implement by urself Is much better than the current one

scottiefalkon commented 2 years ago

I can also say that I love the current UI.

On Sun, Oct 23, 2022, 7:02 AM NRJ YDV @.***> wrote:

@vfsfitvnm https://github.com/vfsfitvnm I appreciate ur efforts to make it better day by day and try something unique. But honestly this tiktok inspired new layout doesn't suits with a music streaming app. Agreeing with @PassionateG1t https://github.com/PassionateG1t

— Reply to this email directly, view it on GitHub https://github.com/vfsfitvnm/ViMusic/issues/496#issuecomment-1288086873, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATAIRMXEPLSTOGUCNYM4YA3WEULNJANCNFSM6AAAAAARL42NI4 . You are receiving this because you are subscribed to this thread.Message ID: @.***>

vfsfitvnm commented 2 years ago

Needless to say this view can be just incorporated to the current UI (this is how it would look like when you expand the player). In such case:

ARBoyGo commented 2 years ago

swipe down twice to get search. Maybe.

matchboxbananasynergy commented 2 years ago

Needless to say this view can be just incorporated to the current UI (this is how it would look like when you expand the player). In such case:

* swipe left/right to go to previous/next song

* swipe down to collapse

* swipe up to show the queue
  etc

I think a lot of the value is lost if it doesn't replace the navigation rail on the left.

I don't think anyone has an issue with the current player UI. In fact, I'd wager a guess that most people think it's just right.

The only reason it would make sense to replace that is as part of an attempt to change the whole UI in a way that gets rid of the left sidebar.

NeeRaj-2401 commented 2 years ago

Needless to say this view can be just incorporated to the current UI (this is how it would look like when you expand the player).

current player layout is amazing. i think there is no need to change it. the major concern is to replace left navigation rail.. and that is pretty much solved here https://github.com/vfsfitvnm/ViMusic/issues/390#issuecomment-1284139296 in my opinion

  • swipe left/right to go to previous/next song

also to implement this u can use existing player ui thumbnail....

scottiefalkon commented 2 years ago

Actually. Looking again. If you're going to ditch the sidebar, x the full screen swipe UI concept is really clean. I like I more than just adding section after section to one screen. Too busy. Too much scrolling.

On Sun, Oct 23, 2022, 7:31 AM NRJ YDV @.***> wrote:

Needless to say this view can be just incorporated to the current UI (this is how it would look like when you expand the player).

current player layout is amazing. i think there is no need to change it. the major concern is to replace left navigation rail.. and that is pretty much solved here #390 (comment) https://github.com/vfsfitvnm/ViMusic/issues/390#issuecomment-1284139296 in my opinion

— Reply to this email directly, view it on GitHub https://github.com/vfsfitvnm/ViMusic/issues/496#issuecomment-1288091283, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATAIRMSXRW3IXZFAIIGZJLLWEUOYNANCNFSM6AAAAAARL42NI4 . You are receiving this because you commented.Message ID: @.***>

NeeRaj-2401 commented 2 years ago

@vfsfitvnm this is some variant suggested by me to get rid of left navigation rail (ignore icons inside and my bad drawing)

and u can use current player thumbnail for few swipe gestures such as swipe left/right to go to previous/next song

scottiefalkon commented 2 years ago

I like the full screen better. Blur the full screen album art and place squared (shape optional) album cover over top of it. Use swipe gestures as suggested.

I see no reason to make another music app that looks like every other app.

On Sun, Oct 23, 2022, 7:58 AM NRJ YDV @.***> wrote:

@vfsfitvnm https://github.com/vfsfitvnm this is some variant suggested by me to get rid of left navigation rail

[image: image] https://user-images.githubusercontent.com/88180887/197390736-834f08a8-70fd-4de6-a7c1-ef7e3e697371.png

and u can use current player thumbnail for few swipe gestures such as swipe left/right to go to previous/next song

— Reply to this email directly, view it on GitHub https://github.com/vfsfitvnm/ViMusic/issues/496#issuecomment-1288095774, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATAIRMWKQXJY7HA4OW3ZPOTWEUR5TANCNFSM6AAAAAARL42NI4 . You are receiving this because you commented.Message ID: @.***>

sidsharths1245 commented 2 years ago

@vfsfitvnm this is some variant suggested by me to get rid of left navigation rail (ignore icons inside and my bad drawing)

and u can use current player thumbnail for few swipe gestures such as swipe left/right to go to previous/next song

I actually love this idea, this seems quite practical. This way you can merge the functionality (gestures) of the new design with the old one by ditching the side bar and making this one single univarsal page for everything.

On the side note, if you want to make those buttons "songs" "favorites" "playlists" etc. Always available while saving space and keeping the screen clutter free, you can hide them in the search button, wherein if you single click on the search button the search will open up but if you long press it, other buttons like settings, songs, favourites, playlists etc will pop up.

Another "more" practical version of this can be replacing the search icon with a burger menu icon and moving the search button inside, this way everything in the app can be controlled through this one single floating menu button.

NeeRaj-2401 commented 2 years ago

Another "more" practical version of this can be replacing the search icon with a burger menu icon and moving the search button inside, this way everything in the app can be controlled through this one single floating menu button.

this will lead too many clicks just to search song... and making user experience bad

sidsharths1245 commented 2 years ago

Another "more" practical version of this can be replacing the search icon with a burger menu icon and moving the search button inside, this way everything in the app can be controlled through this one single floating menu button.

this will lead too many clicks just to search song... and making user experience bad

I think the trade offs are way better for just one extra click. The buttons will always be available whenever you need them without scrolling all the way to top or going back. It eliminates the need of a navigation bar/pane. It is small and doesn't clutter the UI. All the buttons/options are just one click away and you don't have to use two hands or stretch your thumb too much even if you have a big phone since the button is gonna be floating in the bottom right corner, it will be easily accessible for left handed folks as well. All in all this seems like a way better implementation.

SecularSteve commented 2 years ago

In my opinion there's only 1 change, and 1 addition I'd make to the current UI

1. Having the buttons within a finger's reach.

Basically, move the settings button, and the rest of them to the bottom of the screen for convenience on bigger phone screens. This way, I don't have to reach up with my second finger if I don't have to (maybe even the search bar text to the bottom, but that one should be discussed):

2. Option to mirror the positions of the buttons. A "Mirror Mode" toggle.

To make it more convenient if you're either left or right handed.

But that's just my opinion, and my suggestions. The current new idea is still fantastic, and something unique.

Sameky commented 2 years ago

Just give us a top bar that disappears when scrolling down. And about the lyrics, I really loved the first implementations of it, when it used to be a card, instead of showing on the album cover.

Other than that, the design of the app is already great. The side rail could be shown while the device is on landscape mode, and the top bar, when in portrait mode.

ghost commented 2 years ago
  1. You can make it so that the songs queue comes by swiping up instead of swiping left as it is more in line with all of the other music players people are used to.
  2. This idea of album art full screen is a really good idea but its better for just the player screen and not the whole app background and making kind of an album art blur the background of the normal home, library stuff with a nav bar at the bottom.

This gestures idea is really cool tho having shortcuts instead of pressing the particular buttons.

Will the full screen lyrics be there all the time or toggled by the user ?

ghost commented 2 years ago

I don't know if you have used or not ... If you haven't you can use Tidal. It's got kind of a minimal UI if you want kind of like an inspiration for some parts of the UI

vfsfitvnm commented 2 years ago

You can make it so that the songs queue comes by swiping up instead of swiping left as it is more in line with all of the other music players people are used to.

This is a perfectly fine alternative, but that would mean you need to swipe down to access the library. Not sure what's better

Jak2k commented 2 years ago

You can make it so that the songs queue comes by swiping up instead of swiping left as it is more in line with all of the other music players people are used to.

This is a perfectly fine alternative, but that would mean you need to swipe down to access the library. Not sure what's better

Tap for play/pause

Swipe left/right for next previous song Hold and swipe left/right seeking in currenct song

Up for the queue (Currenctly it's the same so nothing changes Down for the library (Currently also the same)

Long-Tap for Lyrics Double-Tap for Like Tripple-Tap for Nerd-Stats

NeeRaj-2401 commented 2 years ago

Also adding a gestures info in settings or somewhere would be good idea :) atleast for new users Cause some of them will unnecessarily open new issues like #489 and #495

matchboxbananasynergy commented 2 years ago

Also add a gestures info in settings would be good idea :) atleast for new users

There could be an intro screen on the first launch that takes you through the gestures. You can make it skippable.

NeeRaj-2401 commented 2 years ago

Also add a gestures info in settings would be good idea :) atleast for new users

There could be an intro screen on the first launch that takes you through the gestures. You can make it skippable.

That will unnecessarily need lots of efforts and time of developer... Instead a normals gestures info somewhere within settings would be easier cause it will be similar to info/about section

vfsfitvnm commented 2 years ago

That will unnecessarily need lots of efforts and time of developer...

True, but it's necessary (so I can also avoid issues like #481 and many others). So there will be a welcome screen.

I can also let the user decide whether to have the vertical setup (the original one I proposed) or the horizontal one (proposed by @AloneWOLFx4)

Kreavita commented 2 years ago

Hey, first of all thank you for making this thread and not just implementing a controversial design change without talking to the users, not everybody does that.

I like the app for its clean and modern look and its familiar feeling, therefore i prefer the player controls the way they are implemented right now (there is a reason most audio players practically look the same ^^), but users could have it both ways if you added a ui style selection in the settings.

I think the player background looks a bit empty right now, so maybe adding a very low opacity and blurred full screen cover to the background would help, but keep the regular cover the way it is and enabling lyrics could replace that center cover and use the whole space. Also i would prefer the triple dots button in the top right corner and imo the player queue button would look better if you replaced it with a gradient and changed its icon to small arrow up, but those are just minor complaints.

In terms of gestures, i like the ideas of @Jak2k, but i would like to still have all functionality available as buttons - lyrics and nerd stats could be hidden in the dots menu.

Regarding the rails / navbar problem: imo the solutions by @NeeRaj-2401 and @Sameky are more useable than the rails, also you could implement horizontal swiping to switch from albums to artists etc. - the rails look sleek but they feel weird to use for me.

Also i would love to have those little popup hints for each button when you long press it, this is implemented in most apps because sometimes the user cannot guess the function of each button just by its icon.

And thank you again for making this poll, and of course also for making this app - it is my go-to music player since i discovered it.

Kreavita commented 2 years ago

perhaps it would also improve the rails if all icons are shown the whole time, and the active rail would be in the accent color and maybe bold

EshwarKallur commented 2 years ago

I'm just suggesting u sir please once see the pulse music from playstore home screen design if possible make it as that app home screen design

emkay5771 commented 2 years ago

Looks really interesting... How would it affect the rest of the app UI? As well, where would the shuffle button go? I noticed that in the current implementation, shuffle is hidden under 2 layers of interaction. Thanks for all of your work in this awesome project!

ghost commented 2 years ago

What can be done here is to swipe down on this music players screen to show up the library. Swiping up may show the queue.

This is an idea for lyrics page. So instead of these being full screen they can be like a separate box under the player controls similiar to spotify or like it's in the current app as an overlay on the album art so it would appeal to people who like to see the visual elements of the song art and works.

This screen shot is from Google podcasts. The way the player is a pop up in front of the background the lyrics page could be a similar kind over the music player

vfsfitvnm commented 2 years ago

Guys, please put screenshots or large images urls inside this html block to make the post easier to read: <img src="URL_HERE" width="20%"/>

infinite-007 commented 2 years ago

New layout is revolutionary in the Android apps world. Patent it else others may steal the idea. I really like it. This is much more functional. I felt the the player screen should have also followed the main app design. I don't know if it would be more functional or not.

NeeRaj-2401 commented 2 years ago

Also @vfsfitvnm if u r thinking to implement swipe left/right on thumbnails for next/previous songs then these skip buttons will be almost of no use

Then i think u should replace these skip buttons with 10s forward/backward to current playing song #70 & #131

Khenxy commented 2 years ago

The intended new UI concept looks really clean and visually pleasing I think it'll work well for the app. I've always thought the lyrics screen and text were tiny and now with more room I think the lyrics experience will get better. If you could also implement scrolling through the synchronised lyrics to seek the player to that timestamp on the song it would be awesome. Apart from that I think the whole gesture operated UI would be great. There should also be a three dot icon somewhere on the screen that you can click to expand a menu where you'd find more options like add to Playlist, more from artist, go to album etc... Also if this is implemented a welcome screen would be necessary and maybe a pop up that would appear the first few times you open the player screen giving hints on gestures and what they do (There should be a don't show again checkbox with this). Also thanks for all the effort you've put into making this app, maintaining it and listening to user feedback.

PassionateG1t commented 2 years ago

The discussion here has been bugging me, I need some clarification if possible.

1) Has there been any complaint about the current player? It's already fully functional (if not better than other apps) as far as I'm concerned.

2) How will changing the player fix the limitations of the main page?

Thank you!

vfsfitvnm commented 2 years ago

Good points. They are not strictly correlated, however such redesign involves a change of the rest of the app as well - other doors may open. Also, bringing something new to the table fuels my motivation!

Jak2k commented 2 years ago

Maybe show one row with the most listened songs, one with the most listened albums/playlists and one with the most listened artists in "Home".

Each row could also have a see more button and options to choose other sorting methods (A-Z, Time since added, ...) or filtering methods (Only liked songs, Only Offline-available songs, ...)

PassionateG1t commented 2 years ago

such redesign involves a change of the rest of the app as well

If so can we still have the classic UI as a deprecated option 😄👉👈 I feel like it just now arrived and didn't get the time to really enjoy it, plus many popular apps- Standard Notes and element- have a classic and an alternative layouts to appease different preferences.

And I'm glad you're feeling motivated :)

EshwarKallur commented 2 years ago

Add download feature bro 🙏🙏🙏

ARBoyGo commented 2 years ago

Add download feature bro

The Dev is not interested in Download option, Because this is a Music Player not a mp3 downloader, Sorry for that. But you don't really need this because once you listen to a song, it's available in your cache, You can listen to it anytime ..

Whatever if you need mp3 for your PC etc.. Use downloader or there are other apps which has download option like Innertune, Blackhole, And Musify.

ThatTakashi commented 2 years ago

I prefer the current design of the app but I love the new concept of the full screen player with tiktok style song navigation