MusicBrainz Web Home Page Mock Ups

Tags: #<Tag:0x00007fe85885a898> #<Tag:0x00007fe85885a7d0> #<Tag:0x00007fe85885a708> #<Tag:0x00007fe85885a618> #<Tag:0x00007fe85885a4b0> #<Tag:0x00007fe85885a3e8>

On it @PierPiero ! :smiley:

Indeed I imagine that most of the users we have on MusicBrainz are returning users, but I was guessing (like @elomatreb, but only based on my own MB usage) that most of the homepage users, specifically, are new people, I mean not even yet users.

I don’t know if we could see that in the stats (proportion of logged in users on the homepage).

Might just be on my end and something with my mix of browser and adblockers/privacy addons, but the images don’t show/load for me:

Is there a reason you didn’t upload them directly to the forum? Did it not allow you to upload enough images?

1 Like

Hi @Freso ! :smiley:
Actually the image sizes were greater than the upload limit. Hence, I was unable to upload them to the forum and decided to host them through https://postimages.org/

The images are:

  1. https://i.postimg.cc/rwv0Kqy8/1.jpg
  2. https://i.postimg.cc/fycnjjm2/2.jpg
  3. https://i.postimg.cc/fRDMzvPT/3.jpg
  4. https://i.postimg.cc/52bpsHXR/4.jpg
  5. https://i.postimg.cc/zB3SM6YL/5.jpg
  6. https://i.postimg.cc/SsmHMy9B/6.jpg

Huh. I thought Discourse would automatically resize them. I’ve increased the image size limit now (from 4MB to 8MB), but it may also require @zas to up the client_max_body_size.

1 Like

I’ll be the devil’s advocate here. Or maybe just the plain devil.

Musicbrainz is designed for an elite audience - say 5% of the global population? To edit on it enjoyably takes IT db skills that say 0.1% or 0.001% of the global population has.
There is nothing wrong with us elites making projects that suit our very educated and refined tastes. And if some large number of naive low skilled users should wander by and spend an wasted and frustrating 3 hours going nowhere useful then that will serve to demonstrate our superiority. And the friendlier and more pleasant the home page is then the more failing users there will be to attest to our prestigious IT skills.

Back to the nonsupernatural life:
Having a blind elderly parent who is repeatedly excluded from participation in modern life due to the intersection of having low IT skills and the ongoing farce called “Accessibility” I find the normalisation of sites requiring elite level IT skills being presented as “accessible to all” increasingly problematic.
The current homepage is bad enough in this regard. Why make it worse?

1 Like

I’m not sure: MB is included in the reference IDs allowed by WikiData, so many people just reach the site to get information about music and are not interested at all in how to build and maintain a DB.
Anyway, the answer should be in site analytics, to understand who is visiting the site, from what source and looking for what.

3 Likes

Thanks for your thoughts @mmirG! :smiley:

I found MusicBrainz as a teenager and feel there shouldn’t only be an elite audience to us if there is. We are meant to be open to everyone. We need to bridge this gap so that maximum people can use our resources and take the mantle to an even higher level.
What we do is unique, top-notch, and amazing. If anything, we need to make it more accessible and understanding for everyone.

Everyone is skilled if taught/explained the right way. :grinning_face_with_smiling_eyes:

4 Likes

Awesome to see!!

I’ve put my thoughts into a wireframe as well, take what you please from it all @akshaaatt :grin:

I’ve worked with pretty much all of your elements and just made some display changes and some order changes so I hope it’s helpful.

  1. Top bar, nice to keep it uniform across the site, not getting into the nitty gritty with this.
  2. I would enlarge the search function. It can allow the page some space to breathe (like in BookBrainz, though I imagine it wouldn’t be quite as big), and I think this is the MB’s #1 asset - the data.
    I was thinking instead of having something like your (#3) statistics you could have some dynamic text under the search, e.g. ‘search 1,123,124 recordings’. And have it loop through different entity types. Particularly something like ‘with x added today’ could be a good way to leverage MB’s amazingly accessible data. I think the stats can be subtle but still show off effectively.
    It’s common practice these days to focus on the signup button so why not. Big. Login button at the top right or smaller for regular users, doesn’t need to be signposted.
  3. I would avoid using blurbs on the home page. The current text heavy homepage is something to avoid imo. But some descriptive text like ‘the open source music database’ is still important for the people who end up at MB and are scratching their heads about it. An additional link like “why open source?” or “why use musicbrainz” would be great though (maybe it could concertina out an introduction instead of taking you off page). I would love for this link to highlight the story of MusicBrainz, rather than get technical. That all the contributors to CDDB got ripped off and then Rob created this site is a great story, and captures the spirit of MB!! If I didn’t read that somehow I might be on Discogs…
    Plus all the most important links, the ones that people use the most, as you already have there in your wireframe. Ideally above the scroll for a desktop browser! So we can have that pretty search bar and background info etc but people can click straight to where they have to go without any scrolling.
  4. The recently added pics are cool, and great to keep. I think there is some potential for ‘play’ on the home page though. Could we have a user type in a tag here and have it cycle through the most recent releases related to that tag? I love watching the Bandcamp ‘selling right now’ ticker (especially when Bandcamp waives fees and it goes crazy :P) but MB’s ticker doesn’t have the same grip on me as it doesn’t dynamically update. Probably out of scope to change though.
    NB: I have relegated the blog updates to the bottom because I think the current blog is boring for your avg user, even though the technical updates are great for us long time users. With some work it could be a top level feature, like Bandcamp or Discogs (they put a lot of work into their blogs to be entertaining to the general audience), but not now imo.
  5. The pathways to dig deeper into MB, contribute with code, tutorials on getting started etc. Quite important I think, but okay to scroll to.
  6. A bar with the other MetaBrainz projects, maybe a 3 word description under them.
  7. Latest blog posts and github tickets and stuff like that. Not too sure how big this would be.
  8. Supporter bar
  9. Chuck the rest in a big footer

My dream would be to have an element on the homepage that is more playful, as alluded to with #4. Something where people can put in an artist and see how it relates to something else/all its connections, or have a interlinked data web you can click through or something like that… MB is MADE for that kind of thing and it would be so cool to let people interact with the data in a more ‘real’ way right on the home page. Just a little dream :grin:

Maybe the hierarchy would be helpful to look at as well.

(How I read) your mockup:

  1. Recent additions + blog
  2. Search + login
  3. What MB is + important links
  4. Sponsors
  5. What MB is/stats
  6. Other MB projects
  7. Contribute/join pathways
  8. The rest

(How I imagined) my mockup:

  1. Search + signup
  2. What MB is + important links
  3. Recent additions
  4. Contribute/join pathways
  5. Other MB projects
  6. Blog and stuff (maybe)
  7. Sponsors
  8. The rest

Let’s see if we can get some stats on current user behaviour to see if that influences how the hierarchy should be! If @Bitmap has any luck digging something out :smiling_face_with_three_hearts:

p.s. is it hard to put extra blocks in for people who are logged in? Some extra links and info for editors would be very nice, esp. for newbies. Another thing that might be out of scope…

6 Likes

Although you’re right about editing being tricky, I’m not sure editors are the target audience. There might be heaps of people browsing MB without editing it at all?
Just like the Wikipedia target audience isn’t necessarily a Wikipedia editor (though ofc they are very important).

4 Likes

+1 on this: search is a fundamental feature, but nothing on how to browse information, type categories of genres and so on?

2 Likes

I know @akshaaatt is already looking at options to improve search, asking the other devs on irc :ok_hand:

Since search is going to be on the layout no matter what I’m sure we’re going to dig into the details eventually. I know I have some thoughts but it was already getting lengthy…

I do wonder if it will take a lot of dev effort to make it as good as we can dream it to be, which I’m not sure is on the table with a home page ‘redesign’. Fingers crossed!!

3 Likes

You are right, also because there is a lot of job to do also on the data to complete them with all the useful information to be browsed by genre, country, year and so on.
Maybe, in the homepage could be published projects to improve the dataset like “categorize the music you like” …

2 Likes

I checked our nginx logs (excluding the beta site) from Aug. 26 through Sep. 1 (don’t think we have any older data), and extracted URLs that had our homepage as the referrer, with a little bit of cleanup (mainly stripping query parameters, replacing usernames with <name>, and release mbids with <mbid> – the latter would be clicks on recent cover art additions).

Edit: We don’t host the blog but I checked the stats panel on WordPress. 98 clicks to the blog came from musicbrainz.org in the past week (so probably somewhere between /doc/How_to_Contribute and /release/add).

17231 - /search
10176 - /user/<name>
4538 - /
2487 - /doc/MusicBrainz_Database
2061 - /release/<mbid>
887 - /login
524 - /user/<name>/edits/open
510 - /register
217 - /doc/Mp3tag
185 - /user/<name>/collections
178 - /user/<name>/edits
164 - /doc/Beginners_Guide
153 - /doc/AudioRanger
113 - /set-language
106 - /doc/How_to_Contribute
94 - /release/add
84 - /doc/Yate_Music_Tagger
81 - /artist/create
77 - /doc/Frequently_Asked_Questions
73 - /edit/notes-received
68 - /doc/Developer_Resources
66 - /tags
63 - /doc/About
55 - /user/<name>/subscriptions/artist
51 - /doc/About/Data_License
50 - /doc/MusicBrainz_Identifier
47 - /account/applications
44 - /doc/MusicBrainz_API
42 - /doc/Style
41 - /doc/MusicBrainz_Server
38 - /edit/subscribed
37 - /logout
34 - /vote
32 - /doc/How_to_Add_an_Artist
28 - /doc/MusicBrainz_for_Android
27 - /cdstub/browse
27 - /release/<mbid>/cover-art
25 - /doc/How_To
23 - /doc/How_to_Add_a_Release
23 - /doc/MusicBrainz_Documentation
21 - /oauth2/authorize
18 - /doc/Development
16 - /statistics
16 - /set-beta-preference
15 - /doc/Communication/IRC
13 - /doc/How_Editing_Works
13 - /instruments
12 - /edit/subscribed_editors
12 - /genres
11 - /relationships
10 - /label/create
10 - /doc/Live_Data_Feed
10 - /statistics/timeline
4 Likes

I have a suggestion for the tooltip that appears on the recently added albums. Instead of just the album and artist, also call out the editor:

“Greatest Hits by The Generic Band, added 10 minutes ago by EditorDude”

3 Likes

I quite like that mockup, aerozol!

My only comment is it seems odd to have two search bars right at the top of the page… I’ve seen on some other website were you scroll down and stuff moves into the top bar, maybe we could do something like that, idk… Not that big a deal…

I second the idea of having more “data toys” like these on (or prominently linked from) the homepage, like your Bandcamp example or last.fm’s homepage (if you’re not signed in). I think it could really show people what you can actually do with the data we’ve got, besides just tagging your music with Picard… :grin:

3 Likes

Thanks a lot, @aerozol for this. Love it and really appreciate the efforts put into this! :smiling_face_with_three_hearts:

  1. The uniform search bar is completely valid, however, we would need to provide two boxes, one for the query and the other for selecting the entity type as of now which covers a good portion of the navbar making it look untidy. I am still trying to overcome that and yeah the uniformity would be great, however.

  2. Since we are proposing two search bars on the same page, we could reduce it by keeping the search bar with the entity somewhere around the end of the page where it fits comfortably and in the background, we add the recent additions to keep the page lively. Otherwise, we would have to settle for a static background which would grow boring with time.

  3. I love the third point and we should surely include the history of MusicBrainz.

  4. This sounds cool and we could look to implement that but as said, these are the only great visuals we have which is why I would love to house them at the top. But let’s explore more I guess.

  5. Makes sense. I really like that.

  6. Cool.

7,8,9) Right.

For a revised mockup:

  1. Search + Recent Additions + Blog (Slip screen with a 70 30 ratio for RA and Blogs with a vertical section for the search bar somewhere at the bottom in the blogs bar, maybe, on mobile it could be stacked like recent additions with search covering the homepage and the next page for blogs).

  2. What MB is + important links

  3. Contribute/join pathways

  4. Other MB projects

  5. Sponsors

  6. The rest

Great, we could work with that!

1 Like

Awesome, can’t wait to see how it develops!

I would look to arrange everything in order of most use > least use and then focus on how to make those elements dynamic or look nice after. Function then form. Particularly for MB tbh.

According to Bitmaps list:
search > user profile* > ‘what is MB’ doc > release > login > user open edits* > register > mp3tag (?) > user collections* > user edits*

I would do another wireframe now that we have those stats (though you might be past that stage and keen to get going).

Search is by far the main use, and then the ‘what is MB’ doc. Then I assume ‘release’ is clicks on the ‘recent additions’ pics, which is cool. Maybe because that is the most direct pathway to see what is actually in MB if you’re not looking for something specific? I wonder what would happen if you put a ‘random release’ button on the home page! Then login and register (great), then mp3tag… maybe someone can shed more light on that but I’m guessing a substantial amount of users end up at MB looking to tag their files, get overwhelmed, and just click on the bit that they recognise (something with ‘mp3’ in it). I hope Picard gets more hits but we don’t have the stats because it isn’t a musicbrainz.org/ address.

*There are a bunch of clicks to users and user sub-pages which is interesting, I guess this is logged in users going through the ‘my data’ dropdown in the header? So we can separate that out into a specific ‘type’ of user.

There’s a bunch of interesting stuff further down the list that’s worth looking at too, very interesting.

p.s. I just saw that RYM has a little ‘x releases…’ text part on their home page. But I always go straight to search there so it never registered, but for new users it could motivate them to use rym. It’s not that pretty though tbh.

1 Like

Thanks for sharing this data @Bitmap, it is really helpful! :smiley: