Thank you @yindesu for your thoughts on this! I think most of the things have been fixed. Have a look at the latest work and let me know your thoughts!
Thank you @InvisibleMan78 !
We have decided to move the FAQs to a separate section and would display them there soon. I think the questions you have mentioned are reasonable and really good to have! Thanks
Now that I canât use the Home page as Home, can I suggest posting new blog news into the forum? Especially the server updates as we get the Picard news (thanks @outsidecontext ). Linking to the blog pages involves lots of scrolling to check if multiple news items.
Am disappointed that âcommunityâ has been demoted to an after thought now. Loosing simple access to the blog and hiding the forum seems a backward step for the community who are here already.
Pretty About page for new people though. Donât take my comments as negative as I realise this page is not for editors. A good visual improvement
Yes, what I find a bit confusing is that on the top navigation there is a âBlogâ link, and on the right there is a box with the latest blog entries and below that it links to âCommunityâ. Maybe switch that around?
For me having the âCommunityâ more prominent in the header would make sense, it is IMHO the most important place here (despite the musicbrainz.org website and database itself), and the most lively one. I mean thatâs where we, the community, actually meet.
Iâd also try to link the headline in the blog box to the blog directly. Currently it reads âBlogs & Updatesâ, maybe rename that to âNews & Updatesâ and have it linked to https://blog.metabrainz.org/
Another though: Dark mode toggle (I love the look and feel actually) and language selection currently both are very prominent and take up a lot of space in the header. But:
- Both are something that can initially be set by browser preference.
- And which a user, once set, probably doesnât toggle that often. If they feel the need to change it at all.
Maybe put both in kind of a settings menu, maybe with an icon? Or make it part of the user menu? It should still be easily accessible, I just donât think it should be that prominent and take up as much space as it currently does
Woo!
Going back to the current user behaviour stats given by @Bitmap here, itâs looking pretty good (in order of traffic/clicks from the homepage):
search > user profile* > âwhat is MBâ doc > release > login > user open edits* > register > mp3tag (?) > user collections* > user edits*
What seems to be missing is:
login + register buttons (register is really important imo)
easy access to some of those editor links (the ones with an asterisk*)
text such as âtag your filesâ - I think a lot of people will be searching for something like âtag my mp3âsâ or âtag my FLACâsâ, based on how many people click âmp3tagâ from the current homepage
Design feedback yay!
Top section
Is it possible to give everything some more breathing space? âDownload our app and softwareâ at the bottom is really clean in comparison to the top.
Remove one of the titles if you have to, or make that subtitle less strong, as in the mockup, so it doesnât compete with the headline. Details like greying out and italicizing search text are important as it needs to be clear that itâs not regular text.
Having the search options relegated to one row, you can have it concertina out when you press âmoreâŚâ, would really help. We can put the less-used ones at the end. See @Yindesuâs post on which search buttons might be more useful than others.
Mockup:
Cocertina after clicking âmoreâ:
Styles
Can we make the âRead Moreâ button the same style as the âSearchâ buttons? If youâre using this page as the basis for all other mb pages (and metabrainz projects eventually ) there needs to be a consistent UI âlanguageâ that the user can understand. E.g. if itâs orange, I can click it. It will make designing the other pages easier too.
Same for stuff like the purple/orange âNews & Updatesâ and âAbout MusicBrainzâ titles. Theyâre kinda cool, but a user should be able to scan the page and be able to spot and read all the headers without too much trouble.
On that note, where is the blue background, dark blue headers, and yellow highlights from? I think with the gradient, grey and white bgâs, and the purple and orange elements, thereâs no need to add something new thatâs not part of the MB style/colours.
This is a lot:
vs vs
btw, an easy way to make things to look modern is to not use true black. Try swapping the black text across the board to #1e1e1e or something. Full black on a white background is too high contrast anyway, it is hard on the eyes and makes it hard for people with dyslexia to read it.
I preferred the smaller and lighter text in the older header btw. If you got asked to change it maybe thereâs a middle ground, itâs really bold and big at the moment.
Latest releases
Sorry but I really donât at all like how this part is presented
Album art is a huge part of music for me, and this cropped three cover (on desktop) format really makes everything look ugly. Theyâre (usually) meant to be square! Weâre all here for music, so letâs present it well <3
Also, why so narrow? The more the better. Iâm not very likely to see anything interesting if I see a little bit of just three covers. Itâs got nothing to do with the search or the blog updates so squishing it in with them in a âtrioâ layout is kinda confusing.
Mockup (ripped more or less from Discogs):
Or take the look thatâs on the MB website at the moment.
About MB
I like this, very pretty, except for the music notes stock picture. (obvious) stock photos are a turn off for me when it comes to websites. But itâs easy to change later so Iâm not fussed.
The stats section still takes up way too much space on mobile. Can we please make this a carousel on mobile view?
âCarousel-ingâ things is a really easy way to make things work on mobile and will be useful all the time, so I think it should be in MBâs bag of go-tos (e.g. the explore section could use this too).
Other Metabrainz projects
Everything is so pretty and then this is just somehuge logos with text alternating down the page. Taking up a absolutely massive two full-page scrolls on my desktop.
Iâd have stopped reading before I get to âexplore mbâ or âdownload our appâ which isnât good, especially if Iâm not interested in the other projects.
Not a fan sorry!
Mockup:
Explore
Nice, I think the text can be made better, maybe stuff thatâs optimised for search engines. But it looks good.
Carousel on mobile?
Supporters
Too big and a bit meh looking on mobile - carousel?
Download and useâŚ
Beautiful. Wording could use work. âDownload and useâ - If Iâm downloading it then Iâll probably use it.
Confusing to have the âPicardâ button next to Android? Users donât know what Picard is. Should probably say âPC & Macâ instead?
New section? Editor dashboard
I know, I know, new section⌠but this might make it easier for you to address some of the editor-centric feedback without having to mess with your existing layout.
Youâre already using JS so it should be really easy to make the regular editors happy by giving them a toggleable dashboard, that remembers if youâve expanded it or not. This section could have bit more of a âfunctionalâ look so it might not take long/hold up the design much.
Subtle toggle mockup:
Toggled mockup:
Anyway great work @akshaaatt, youâve been working wonders
@aerozol +1 especially for the wonderful Mockup for âOther Metabrainz projectsâ!
Looks great.
Thank you for the amazing design as always @aerozol!
-
The homepage looks perfect imo right now. The cover arts being showcased in the same section as the main is to make sure the layout doesnât cut out and is presented as a whole.
-
The icon next to the search is supposed to open up the webcam/camera present on the device and allow them to scan a barcode and search for a release.
-
Regarding the Brainz projects, I think we can reduce the size but we should have a description for each project as well. A carousel would be fine but for smaller devices, it would hide the fact about showcasing all the projects at one go. The vertical scroll is more prominent for a user to go through so if we are prioritizing advertising the projects, we do need to keep them separate. If it doesnât bother too much, I do think we can stick with how it is rn. Do let me know!
-
The FAQs section has been omited from the homepage and would be housed separately.
-
Supporters are definitely bigger for a vertical scroll on mobile, maybe for this we can have the carousel!
Thank you for picking how the homepage would look like!
Thank you @selflessself for the comment!
Will surely take care of this.
Why have a webcam button when you donât have the option to type a barcode?
Select âReleaseâ and enter the barcode. I agree that itâs not very intuitive, but it works.
When did that start working? I notice all Release searches do that now I test the normal search. Really is not very clear. Too hidden but good to finally see.
Donât ask me to test things I break 'em. It breaks if you have spaces in the barcode. Also is very confusing that it opens in a second tab. When I returned for a follow-up test nothing was happening because the tab was already open and browser would not swap to it.
They still look badly blurred and do not open on a click. The people coming to this site are music people - please give them the full artwork, not something badly cropped and blurred. It just looks weirdâŚ
Wow. I never knew it could do that either. Iâm always going to the search page to the barcode lookup. That must be fairly new.
Letâs not forget, this page is a work in progress. Iâd think itâs to be expected that features may appear on the page first, and functionality will be added later.
More text/a longer scroll isnât prioritizing, it makes it less likely for people to read any of it
Is there a reason for a blue background and title style? Is this part of a MetaBrainz web style youâll be using on other pages?
That and the cover art carousel (not sure what you mean by making sure the layout doesnât cut out?) are downgrades from the current page imo. Those sections stand out as being untidy (this is your fault for making the other sections too nice and clean ):
The rest can all use tightening, but looks good
Do you think youâll be coming back to this @akshaaatt?
MB projects have been known to languish for years (decades!) so Iâm trying to get in âwhile the iron is hotâ
One of my first thoughts was that âThe Music Databaseâ seemed kinda odd as the h1, since itâs not the name of the project â or maybe âTheâ is supposed to be in italics to stress that weâre the only music database worth giving a damn about?
If you removed it and just left âWorldâs Biggest Open Source Music Databaseâ as the title, I actually think that would be fine.
Agreed. In several examples on the demo, the title or artist name on the cover is cut off.
This is something I commented about on IRC too (it looks cheesy). Maybe you can move the stats boxes right below this section to be where the image currently is?
aerozolâs mockup here looks nice. I like that weâre linking to the other projects more prominently, but Iâm not sure having an essay on each project is going to keep peopleâs attention. A short description that can be understood in less than a second is more likely to pique someoneâs interest.
I mentioned this in the initial thread introducing this effort. I see youâve come up with a different statistic to indicate the size of your database (âSearch 41,054,421 entitiesâ), but I still have to ask â are you sure yours is the âWorldâs biggest open source database?â
I havenât found a number at Discogs that equates to your vague âentities,â but the more specific numbers quoted in that original thread seem to indicate that Discogsâ db may be larger than MBâs.
If itâs demonstrably true, then fine, but I have little patience for unsubstantiated claims. Itâs a major pet peeve.
I thought the key words there were âopen source.â Discogs publishes their core data as CC0, but the actual product around it is closed source. But I didnât write this, and perhaps it sounds like weasel words to people?
I guess I just donât like the tone of âWeâre the biggestâ claims. Iâd rather highlight the goals aspect, as stated in the âAboutâ section (âMusicBrainz aims to beâŚâ). It feels more cooperative and positive, rather than competitive or adversarial.
Besides, with bots designed to import data from the other databases that youâre bragging about being larger than, taking a competitive tone feels a little hypocritical.