MusicBrainz Web Homepage 2021

Thank you @joiletjake for the suggestions! I’ve fixed this andnow the first page looks good I think :smiley::raised_hands:

We’ve been having a discussion regarding this on the irc channels and decided to be more active on twitter, I will be taking the lead to make sure we timely post. Plus there are more benefits to displaying twitter once we make sure we don’t add in any cookies! :smiley:

Fixed the search UX problem I guess. Looks amazing now :smiley::raised_hands:

The Twitter control itself is a tracking tool for Twitter. It is not just “cookies”. I doubt I am the only one who suppresses the whole Twitter feed control. I have the EFF’s Privacy Badger addon in operation on most of my browsers. Please keep the blog headlines visible somewhere.

I understand your need for the Twitter adverts, but this is a different type of communication to the Blog updates about server changes and new Picard versions. Demoting the blog to behind a click now removes any summary of happenings as it just goes to the latest blog post and hard to find previous posts.

Search changes are friendly looking - but still missing the Advanced options. Searching for Barcodes and Catalogue numbers is common for an outsider. Especially as that outsider will not yet know what Works, Release Groups or CD Stubs are. @briaguya mentions the need for an “all in one” search box like Discogs, an idea solution, but this is lost in a Ticket somewhere.

I can see this web page is for sucking in new people, not us old hands. Search needs to work for them in their language.

In the “other projects” section the “checkout” word is confusing as it implies online shops to me. Why not make the logo clickable for each project? Or make the name clickable at the start of the paragraph?

I will be honest and say this current design will mean I will setup separate bookmarks to enter MB by the back door in future. Today I come to the front page to click on Forum, check Blog headlines, and login to my profile to go and check my edits or add something new. All of that I can reach on the single page without scrolling. This new page is great to look for new people, but will mean I need something different for me.

Looking good though - don’t take my straight talking in a negative way. It is just the way I talk :crazy_face:

7 Likes

Actually, I don’t see Twitter on this mockup, maybe it’s blocked on my side.
But it is sure missing this simple blog titles widget:

image

6 Likes

Some quick opinions:

  1. I don’t know how I feel about the first thing people see being a photograph of a team. I can’t think of any other community-driven websites that do this on their home page. It seems like something that belongs on a “Team” page. (Most editors aren’t pictured or represented in that photo.)
  2. Similarly, I feel like the “Join Us” section and its links should be higher up, rather than at the very bottom left. I don’t know how to accomplish that, but some of the content on the home page may not be important enough to be on the home page, but rather linked from the home page.
  3. For the search buttons shown in the top center of the page, I would show a subset of the items available in the top-right search dropdown menu. Many of these are either things that people won’t be searching for, things that will not lend themselves to someone following a relationship to relevant data, or things that normal users have no permission to edit.
    First, I would at least place “Release” and “Release Group” next to each other, or maybe even drop “Release” entirely, since Release Group search is supposed to account for the names of each Release inside. Then, I would consider deleting the buttons for,
    • Area
    • Annotation
    • CD Stud (should be CD Stub)
    • Editor
    • Instrument

Some bugs/observations:

  1. After I use the Light/Dark mode toggle, the links at the bottom of the page are rendered in white text for Light mode.
7 Likes

1.) How can I contribute? Why should I contribute?
2.) How much does MusicBrainz cost?
3.) Can I do whatever I want to the information in the database?Are the collected/contributed data free to use for everyone?
4.) How do I delete my account?
5.) How long will my edit(s) take to be approved / applied?
→ Why are my changes/edits not applied immediately?
→ Answer: I would add the word “Peer Review” to the existing voting process description.

Homepage in general:
What about adding some informations about Birthdays from artists? Upcoming events? “Artist of the day” - “Release/Cover Art of the day” similar as on the wikipedia start page?

4 Likes

I’ve been away on a bit of a holiday, this is awesome to see! Great feedback too.
I have some feedback as always :stuck_out_tongue:
Off the top of my head:

  • What is the font used for ‘open source database’? Best to keep it simple and stick to the MetaBrainz family font-wise (does MetaBrainz have a styleguide?)
  • Twitter is the most prominent thing on the screen upon visiting (even more so than search, because of its large box). Does user data back up this decision?
  • Maybe I’m out of touch or something but what’s that search icon? I expected a magnifying glass :older_man:
  • I like the ‘What is’ and the stat boxes. Nice look! They are a bit of a long scroll on mobile though. I think you can drop the picture, unless there’s something specific you want to show there (a custom graphic?)
    Edit: maybe a ‘quick links’ set of buttons could go where the picture is, containing the most common buttons used by regular editors/users? They don’t have to stand out, just be handy.
  • I quite like the ‘Explore’ sections actually - but ‘read more’ is not a appealing call to action for a user. More content on the homepage should go straight to doing something rather than reading about something.
  • ‘Brainz projects’ is massive on desktop and mobile… I was imagining something more like how you have the MB stats at the top. Maybe a little arrow to expand the descriptions. An appealing button with a call to action (‘tag your music’) is probably all people need though if I think about it? They’re bright enough to figure out whether they’re interested based on that.
  • Supporters is nice, but needs to be smaller on mobile. I find it annoying that they move when I mouse over them, but can’t click them or anything. I would just leave them static.
  • I like the FAQs section! But I find the current FAQ’s there pretty lacklustre (edit: probably placeholders?) Might be an opportunity to look at some top music tagging/database questions that people ask on google/search engines?
  • The download and footer sections are beautiful imo :smiling_face_with_three_hearts:
  • I am missing links to the forum and the blog (+1 for blog headlines somewhere)
  • edit: Definitely needs a big ‘signup’ button somewhere prominent (maybe next to search?)

It’s already looking so much better than the current homepage <3

I’ve done a mockup re. making the home page a bit cleaner, as always take or leave at your leisure!

6 Likes

Two trifling concerns

  • There should probably be a minimum native resolution for the cover reel. That way, those checking out the website for the first time do not see artifact covered JPEG upscales
  • There was a thread a few months ago about improving page metadata for search engines. I do not know if it is too early to implement this or not, or if this was already doen
1 Like

I like the general design, but I think that the current mock-up has way too much information on that first page, which makes it too big and overwhelming.

For example, the first section says: “The Music Database: The worlds biggest open source music encyclopedia”. That’s already very expressive, so what does the the section What Is MusicBrainz? offer new users that they need, and especially, want to know? Similarly, I doubt more than a handful of first-time visitors to the website are interested in the project’s history. Does that really have to be on the front page? FAQ’s would be more suited for a separate page, with a link to it in the MusicBrainz header, etc.

If you look at the Discogs homepage, it’s almost completely dedicated to the music in the database, rather than going on about the database or the community itself. And I think that for new users, the draw of MusicBrainz is in the first place information about music, and only when they have used that information for a time, they’ll want to engage with the database (to edit) and the community (for discussions about editing).

I would extend the first section of the homepage with more exploring of the data itself, like the last added releases carousel, and maybe if the CAA starts supporting artist images and event posters, carousels for those. To save space, the page could load a random carousel on every page load (new releases now, next time events, or random releases etc.). After that section, I would add the bit about the apps, then other projects (but a bit more condensed than now) and finally the footer.

4 Likes

Some quick thoughts. Nice. But:

  • major: Search - MusicBrainz is entirely lost. Until the whole search gets updated we need at least catalog, barcode, advanced and direct search accessible both to newcomers and veterans; why is basically the same search on the header and on the top of the home page at all?
  • please put back the blog news feed instead of the twitter (a link to it somewhere is fine);
  • too much is simply too much. Who loves scrolling a la facebook?

All in all what I would really like for logged in users is kind of a dashboard where you could choose what to show or hide.

5 Likes

Hi @akshaaatt!

Thanks for the mock-up – its nice to see things be more modern! I’ve read a lot of comments that have already been said (thanks all, good stuff!). A few comments from me:

  • I think images are being over-used right now – the UNDERSTAND MUSICBRAINZ section in particular has two images that don’t really add much to the content of the page. I think we could do with fewer images.
  • The supporters section conflates supporters and sponsors – I think we should only focus on supporters on the home page, but we should consider using grey versions of some of the supporter logos in order to not have too much clashing color on the page.
  • Would like to see the logos of other projects higher up – the MusicBrainz home page is the most visible page we have currently and very few people know about our other projects. The logos are all designed to be visually catchy and to convey the sense of belonging to a family. If we could add even a small section that makes the other logos visible, I think it would help a lot to promote the other projects.
  • I really like the What is MusicBrainz section!
  • I want to add support to the “too much” comment – yes there is too much. I think we can lose a few sections and replace them with links – in fact the Useful Links and Explore Us sections may be sufficient and we can nuke some of the other sections.

I’m looking forward to the next iteration of this!

8 Likes

The scrolling covers: Two questions. Why are the images out of focus? And they don’t seem to be clickable any more? I often click on the cover images here and at Discogs as part of discovery of something new.

4 Likes

Also, but I know this is just a prototype, their alt attribute should be the release and artist names rather than Alt text. :wink:

2 Likes

Am I the only one finding that “Explore Us” sounds a little weird ? “Our other projects” would sound better or something along those lines…

6 Likes

For some reason the first time I was checking the page I didn’t even notice that you can also scroll the page, oops! :rofl: I guess I got spoiled by the current layout as it contains everything I need from the usability standpoint.

As other commenters have pointed out, I agree that most of the stuff that you scroll into is more suited for an “About Us” page instead of being on the main page.

In addition to my previous post, now I can see that the link to “Style Guidelines” is also present on the main page, however now it’s located in the footer. I can’t imagine myself scrolling to the bottom of the page every time I want to check it out (instead of having it alongside other useful menu entries at the top like it is currently). It also opens a new tab now, which I don’t think it should be doing. I’d like to have the control to decide which page should be opened in a new tab instead of being forced into this behavior by the site.

I am aware that this redesign is aimed mainly to attract new users (and I am totally on board with this as I also think the current design is very dated), however also I want to ensure that functionality-wise there will be nothing lost in the process.

Lastly, I like the cover arts present on the main page as it gives the page a “live” look, but the fact that it automatically shuffles around makes it really distracting.

Edit: Strikethrough. I just realized that “Style Guidelines” link is also currently present on the live page on the right side in the section “Quick Start” so that’s probably why it was placed in the footer in the new layout. This means it’s a separate instance of this link and in fact not related to the one in the dropdown menu.

5 Likes

I assume this menu is for front page only. You have picked one of many reasons why it would not work as a menu once logged in. Too many editing features are missing - but this makes sense when not logged in. This page is an advert for new users, it is not for us editors to use.

1 Like

Yeah, I agree that makes sense and some stuff definitely should appear only after the user has been logged in. This is also the case for the current layout on the live site.

For comparison, in the current layout on the live site, the 2 links above the line are Log In and Create Account and they will transfer into “Username” and “My Data” dropdowns once the users logs in. For the dropdowns underneath the line, there are “About Us”, “Products”, “Search” and “Documentation” dropdowns and once the user logs in, the dropdown “Editing” will appear and slide into the 4th slot.

I have also edited my previous post to reflect the fact that the “Style Guidelines” link is also present in another instance currently on the live page, in the “Quick Start” section on the right. Funny enough I have never noticed it being there before :slight_smile:

However, in the new mockups (both the image and the new site) it looks like the user has already been logged in. I also don’t see a way to fit the missing menu entries into the single row that is there so that’s why I mentioned the missing dropdowns.

1 Like

Good point. Just noticed that. But everything up there is useless for editing, so this mock-up is surely only the front page. No conversation has been had about changing the editing pages. That menu would destroy workflow as it misses everything an editor needs. There is zero in those menus for editing and lots of space is wasted up there.

This is just the new advert home page “bring in the new people” magnet. This is redecorating the reception area to make it more welcoming.

2 Likes

:+1:

But we have to make sure that editors can get to where they need to with minimal scrolling and minimal clicks as well. I think there’s room for it to be welcoming and also have the few links that editors need.

3 Likes