ListenBrainz redesign - Beta release!

Kia ora koutou, ListenBrainz users, the redesign is now in beta for you to test!

https://beta.listenbrainz.org/

The beta site uses the live database, so you can use it instead of the regular site on a day-to-day basis, if you’d like. Personally I prefer to use the new layout all the time now, which is a good (if very biased) sign.

There are a few minor items to iron out (some explore pages need some custom fixing). But the primary goals of making the layout more user-friendly, make it ‘make sense’ to a very casual user, and giving everything now and later a logical home, has been ticked off. I think. If you think not, please feedback!

The next step will be for me and @mr_monkey to tidy up some pages in detail (not new functionality, just looking at spacing etc), and putting in a nice landing page for non-logged in visitors.

5 Likes

First off, I like this re-design. Especially on mobile it works pretty well for me. The new layout also fixes some small issues on mobile, like missing padding around the text on the start page.

But I also use my browser often on a widescreen display. Mostly I have my browser use half the screen, but sometimes also in full-screen mode. There the old layout was better usable, as it kept content and navigation together centered on the screen:

Now the navigation is all on the very left while the actual content is centered:

This causes a disconnect between the content and the navigation and requires additional mouse movement.

Not sure how to best solve this. I generally like the idea of centering the content. But I think it does not fit the new navigation, which is built around the idea of being left aligned. So I would suggest to keep the content also left aligned:

3 Likes

Thanks @outsidecontext! Jealous of your screen…

I’m having a little dig around to see what other (very) popular websites do, as this tends to reflect peoples preferences.

Facebook, keeps centered:

TikTok, glued left:

Instagram, glued left:

Spotify, glued left:

Apple Music, glued left:

Wikipedia, has a toggle (button at bottom right):

Based on these I don’t feel too bad about us having the main nav all the way on the left. But I don’t have a wide screen and I am keen to hear about your preferences, and why, @outsidecontext and anyone else who uses wide screens.

p.s. I already know the MeB audience isn’t a fan of some of the example websites - please keep comments focussed on usability, rather than what you think of X website/comapny.

Thanks for the good work! I just tried it out on my phone and have a small bug report and a suggestion.

On especially tall phones (like my Z Fold 4’s outer screen which is 904 × 2316), the bar charts are very short and compacted into illegibility. Probably some layouting/scaling issue.

The daily chart is similar, the world map seems to be strangely zoomed in.

Apart from that, I wonder if there are plans to move away from cards within cards with this redesign - I think just having a list of artists in a large card without the individual cards would look neater here and also recover some vertical and horizontal space.

2 Likes

Thanks for testing and the feedback!

The stats page is something that @mr_monkey is still working on, I believe he’s aware of all those issues. Good to remind him here though!

Hmm, we haven’t been looking at redesigning any page ‘contents’ with this redesign, but we can always make changes. The listen ‘cards’ are useful, imo, when there’s a bunch of extra buttons and options on the card, but in the top 10 lists we don’t have that, and it sure does take up space. Maybe if we’re planning on the option for more info to be added to this cards I would leave it. @mr_monkey, thoughts?

1 Like

I actually kinda like the vertical spacing of the current design, makes it easier to read. an example from MusicBee, as it’s what I have handy

the top example is more easily readable to me, even though it contains the same information in the same font at the same size. it also makes album artwork (which is important for two of the three lists on the stats page, releases and tracks) more visible. perhaps it would also allow for artist pictures?

Right, the spacing shouldn’t be too small. Still, without the nested cards but the same spacing for each element that was previously used within the card, the room necessary should decrease and keep the legibility around the same. I might have to create a mockup to show what I mean.

EDIT: this is what I came up with after some ugly CSS editing:

Definitely not perfect, but I like it better than the stacked cards.

Comments I’ve just made on the IRC, also put here to keep them in one place:

  1. When I’m logged out, there is one “Sign in” on the left side and one “Sign in” on top of the page. How many “Sign in” buttons are meant to be there? (Suggestion: one.)
  2. I also don’t think that the existence of a second navigation bar which is in an entirely different place than the first navigation bar was not misleading, to say the least. The “old” (= still default) site is easier to navigate, in my opinion.
  3. Why is there one single button with no text on the bottom left side (the cog)? Either all text or all icons would make sense - but in this case, it is not even obvious that the cog is also a button.
1 Like

Do you have a screenshot of the page with multiple sign in buttons? I looked around and couldn’t find one.

I prefer the old top menu, but wouldn’t call the new design misleading, just different.

Do agree with your 3rd point, that is rather confusing. Could easily just be an icon, I got confused by where all the settings went when I first saw the new design. Honestly, I kinda like the current menu, as the newer design means it’s a little more work to sync with last.fm.

Sure:

(I draw very well.)

Thanks for the feedback !

I’m personally not put off by the second sign in button in this specific case, especially since it only appears on this one global stats page.
The subtext we had in mind for that topmost button is “Sign in to see your personal stats” (as opposed to global stats), so perhaps the text could be amended to reflect that more clearly?
Not sure we’re gaining much, but…


Regarding the cog button with no text, I can see how it could appear to not be clickable, and instead look like a sort of header for the links below it. For reference, there will be at least one other icon button there (dark/light mode), which might make it less confusing (ignore the content and order of the links, this is from a previous draft design):

Other option could be have all text links:
image

I insisted on keeping the icon, so here’s my reasoning: IMO it makes it stand out from the other links which users might gloss over when looking for their settings page (a more common action than looking for “about” or “community” pages).
In my personal experience on the internet at large, seeing a cog or spanner icon in a menu always saves me having to read all the links until I find what I’m looking for. It might only be saving me a second, but I do prefer when it is an icon.

That being said I’d love to hear more opinions on this subject.
Would it be better to have text + icon for all the links, for example ?

2 Likes

Thanks for the mockup @Maxr1998 !

I think it does make sense in this particular “top artists” section.
I’ll have to think about it; I think the entire “top XXXXX” section could be improved, but this would come at a later date.
For example, I like the coverflow effect we used for Year in music and would rather have that than the boring stack of card (for albums at least):

The current stacked cards would make more sense if we had access to artist images, but unfortunately we don’t…
For example LastFm’s live page looks nice on that front. Miles better than a list of names !:

2 Likes

My suggestion was to replace the one on the top by “not logged in” (static text). Just to avoid redundancy and visual clutter.

Sure, and a key means “login”, but you still used text. Some consistency would be charming, I think.

Interesting ideas, those are definitely more visually pleasing. But a “boring” list option should still stay available as well because it has a much higher information density and doesn’t require any input/scrolling.

(For reference, with stack of cards I didn’t mean the vertical arrangement earlier, but a “stack” on the z-axis, as in the large “Top Artists” card having the individual artist cards stacked on top. That maybe wasn’t worded that well, and I should just have written nested cards again.)

1 Like

When Windows 8 was published, a heated discussion emerged about 2D tiles/icons and texts which were clickable but it was not intuitive perceived to do so.
Today this is old school and if in doubt the typical user just tries to click. Meanwhile the cog icon is used very regularly to display the entry to the settings.
So I agree 100% with @mr_monkey. (saving life seconds :wink:) From my point of view it’s even irrelevant, if the cog icon is at the top or at the bottom of the menu. After years of Android phones the cog is shouting ‘settings’ at me wherever it is. :grinning:

4 Likes

I don’t personally have much preference either way. cogs and menu hamburgers are clear enough to me, but adding text could make it easier for others…

Cogs can be intuitive, but mixing them with text can be a little confusing as on first glance the cog looks like an icon being used as a header to indicate the text options below are setting options.

2 Likes

@mr_monkey: I think @lazybookwyrm makes a good point - maybe we do the link as text, and then we revisit it as an icon when we have other buttons that would do well as icons?

image

In the earlier mockups where it is an icon, it sits next to the dark mode button, which works for me - interestingly, dark/light mode is such a ‘modern’ function that I would always expect it to be a icon/toggle, rather than text.

I want to address another piece of feedback from @lazybookwyrm, ‘more work to sync with last.fm’. I assume this means because on the old design it’s less clicks to get to the import page?

This is something we were going to address in a second pass, but maybe we can address it sooner @mr_monkey. Needing more clicks to get somewhere is never good.

This seems like a straight forward solution, that we’ve already discussed (turn the add listens button into a drop-down):

Without getting too off-topic, that example makes it clear to me that we should rename the ‘add listens’ section in settings, it’s not very explanatory (‘Connect application’?)

Technically the same amount of clicks, which is why I worded it that way. You do have to load an additional page and move your cursor more though.

1 Like

Cool, a drop down on the same page would help though? Is there anything else that breaks your workflow?