The All New ListenBrainz

Tags: #<Tag:0x00007fa5cabcfcb0>

Hi everyone. Hope you are doing well.

I am ecstatic to share with you all that I will be working this summer with the ListenBrainz team on the project “Add ‘love/hate a recording’ and ‘delete a listen’ support to ListenBrainz”.

Our goal is to make ListenBrainz more user-friendly. I aim to do the following tasks as a step towards this goal:

  • Add feedback (aka love/hate) feature for the recordings so we can learn more about your music tastes and then use that data in upcoming recommendation tools

  • Add a delete listen feature so that you can get rid of the duplicates or remove listens you’re embarrassed about from your history.

  • An all-new ListenBrainz with revamped UI & UX.

The new Dashboard

I have prepared mockups for what I aim to build in the project. The My Listens section will be transformed into a dashboard which will look as below:

Stats and Music Recommendations

With the team working actively on “Stats and Music Recommendations”, we will soon have awesome playlists and interesting stats in place. The playlist section will look similar to the new My Listens page. The mockup is attached below:

I would like to get the community’s feedback on the revamped UI about what you like, what would you want more in place, what doesn’t look so good and so on.

If you are interested to explore the UI and UX you can have in-depth experience at the following Figma here. I have always created a YouTube playlist to walk you through the mockups. You can have a look here.

Kindly let me know your feedback so that I can contribute towards this project better and effectively we make ListenBrainz awesome. Thanks for the read :slight_smile: .

22 Likes

This is awesome. I might consider hiding the actions until you hover over the row to make it less busy. I’m sure I would have more feedback once I got to play with it.

3 Likes

A user might have many duplicate listens that they want to remove all at once. Looking at the Youtube demo it looks like removing multiple listens would be quite slow. I’d like to see you try a mockup with tick boxes to the left of each song name, no delete button on the right, and a single “Remove duplicates” button at the top of the Recent listens list. I think this would make the process of de-duplicating more efficient.

1 Like

We’ve talked about this on other channels, but I took another pass and have some more feedback.

Generally, I think this is looking very promising. It’s modern, makes the website a lot more user-centric (which is currently missing), and the design is of good quality.

I will first echo what has been said before about the trash icon being too close to the love/hate icons and the possibility for error there.

I also agree that tick boxes on each row + batch actions would be a plus.

The placement of the previous/next buttons seems a little bit off. What does it look like with the previous button left-aligned with the listens table and next button right-aligned? Currently the margin to the right of the next button makes it look misaligned.

I like the minimalist player on the bottom left ! With our grand plans of integrating the LB player on other MeB websites, I think something like that will be a lot easier to integrate compared to the current LB player. Eventually, I’d also love to see another version with an even smaller footprint by having the image be a background of sorts.

I’m not a big fan of the purple pills at the top of pages (“Recent listens”, “Chat the world loved”). I think they have a bit too much presence in the page, and look like a call to action—like a button (when the real button is in the navbar on the left)— rather than a page title.

Speaking of the navbar to the left: I like the light grey background. It’s subtle. I think the highlight on the nav elements isn’t right though. That white is a bit too close to the grey and isn’t very visible. It would (at least) need to be couple with some other indicator like a • in front of the nav item, or an underline, or white text on a darker background, or…
If it’s visible enough, I wonder if there will be a need for the page title above the listens table.

You have two different styles of small cards on the right side that could do with having a more uniform look. The rounded-corners-and-a-shadow ones could do with a bit more work; I’d say the shadow is a bit strong if the background is white like that.
On the other hand the “You might also like” column ones are a bit plain like that.
I’m sure there’s a good solution to find somewhere in between that will fit both scenarios.

When you get further in the project, let’s also put our heads together to see if we could find a good way to add some info to each listen that has an MBID (and consequently we can fetch metadata for it).
An initial thought I wanted to implement on the current listens pages was to make listens expandable (accordion style) to display more info underneath.
This could be metadata for the track, number of times you listened to that track/artist, maybe a button to show/copy the listen json, etc.

Maybe depending on screen size we should present the rows a bit differently, mainly to make them more compact on smaller screens. On your mockups there’s 8 listens per page, which isn’t a lot. There might be a need for a condensed version of the listens without the artist name and thumbnail.

Overall great work, it’s really nice to see some well designed components and some care for user experience !
I look forward to seeing the continuation.
And as always, don’t hesitate to come to me for any UI/UX questions !

3 Likes

P.S: The silent likes on your post are also valuable feedback :slight_smile:

2 Likes

Just happened to see the tweet on the ListenBrainz sidebar and came to comment.

Can I just say that I love the minimalist style of the interface too.

I wonder if the trash icon could be hidden behind a mini-menu that also has an option to edit scrobbles or other options? This would make it harder for people to accidentally delete them.

I second the idea to pull metadata from MusicBrainz and make that available on current listens.

To be honest, my number one wish is have an option to order my charts by listen time rather than scrobbles. It would really help to balance artists who perform longer pieces.

1 Like

Looks nice.

I do agree with other feedback:

  • hide the icons when the mouse isn’t over a track
    • but do show a love or hate icon (if perhaps slightly faded) for tracks already marked
  • similarly, add checkboxes but hide them unless mouse-over, or at least one track is checked
    • once a track is checked, show a “N item(s) selected” line, which then also has love/hate/delete
  • the previous/next do indeed need realigning (and could perhaps just be arrows rather than text?)
    • depending on how many items you can show in the list at once, it may make sense to have them on top too
  • is the “What the world loved” a global playlist of the most popular tracks in a particular interval?
    • if so, that’s fine (and would work well with an inline dropdown - “What the world loved yesterday/this week/whis month”)
    • if it’s a user-specific playlist of “popular songs you might like”, then the name feels off; same if it’s “popular songs you listened to”

But I’m not sure how useful the playlist will really be. I’m certainly not terribly inclined to use LB as music playback site. And I don’t see how you could export the playlist to anything other than Spotify (and maybe at some point other streaming sites if they get scrobblers that register the appropriate locations in metadata).

1 Like

Hi everyone.
Thanks for the valuable feedback. We have been working on incorporating your feedback and have come up with some improved mockup:

Here is the mobile view of the same:

image

  • We have removed the trash icon for the “delete a listen” feature and will go forward with building mass selection and deletion feature in the future.

  • To implement “Click to view metadata” and “Checkbox selection” features we thought of using card views for the listens list.

  • The alignment of “Previous” and “Next” buttons has been fixed.

  • An orange highlight line has been added to highlight the active section in the sidebar.

Kindly have a look and if you have more feedback kindly post it here.
Wish you a good day!

4 Likes

I like this very much, very promising mockups. Right approach to make this more user centric. In this regard I also like the short statistics over the last time on the right. The mockup does not clearly show the listening trends graph, but I would strongly recommend it should show the same timeframe as the “You listened to”. I think 30 days is a nice value. What I would love to see is kind of my favorite listens over the same period, e.g. the top 5 or so.

And yes, deleting listens should be added. I think not having this in the first version of the revised UI is totally fine, but I just hope it does get implemented soon after :smiley:

2 Likes

I like the mobile view, the only small change I’d suggest is moving the username from below the tabs (Listens/Stats/Playlists) to above them.
Regarding the player functionality, it’s not obvious how the user selects a track to play, maybe a play button or something similar is needed.

1 Like