I’ve finally been motivated to make a mockup with my thoughts for how release pages could be improved. Motivated because @akshaaatt has been doing lots of redesigns and I want to be able to worm some of my ideas into his productive brain as early as possible
Please don’t take this as a complete mockup. My time is limited unfortunately!
Hierarchy: What is most important to display? Are we sorting the most important elements into the most prominent places?
Hierarchy 2: Are we grouping relevant information so people can pick out sections they want to find at a glance, and then sort within that at a second glance?
Keep it simple: Rethink the display, but keep the basic existing layout. It’s not really fundamentally ‘broken’.
Make it easy to apply the same style/design to other entity/page types (e.g. header, tabs, sidebar, main panel)
Encourage contributors and link to other MetaBrainz projects: Big ‘edit’ and ‘signup’ buttons. LB listen #'s woo!!
Little things: Are we duplicating any links unnecessarily? Can we replace hyperlink text with toggles where appropriate?
I’m not sure about the big [album] [2018 (original date 2017)] … blocks at the top, but have left it in as an example.
that is real nice! I like that you used the ListenBrainz and CritiqueBrainz colors for their respective sections on the sidebar! a nice touch~
I like the idea of the [album] blocks, I might have those above the tabs tho? I dunno… it’s fine either way~
my main question is how we’d make this responsive. I’ve been doing a lot of editing on mobile recently, and this is at the top of my redesign wishlist
edit: I do like the idea of separating out link relationships from credit relationships more. especially if we start linking each recording to Spotify, YouTube Music, Deezer, and others… that could end up being a lot of links. might even be useful to have those only show in either the main tracklist or a secondary tracklist in the “External links” section
I absolutely love your work and the contributions you make. I am loving the effort you have put into this. Definitely will finalize this work soon and make progress at getting this implemented on the website.
I definitely like the idea of including cross-Brainz data prominently, although I think your first version would do this nicely already if the block of metadata (album type, release status, etc. below the cover art) were moved entirely to the main content column. This also would help reduce the vast empty space below the tracklist.
Here is a mobile mockup - one with minimal re-work, it’s just the existing mockup put into a single column. There’s rooms for oodles of mobile-specific improvement on this - sideways scrolling through some related panels instead of it all being vertical, for instance. A nicer ‘info’ panel? The tracklist here is just a boring table, etc.
NOTE: I’m not saying this is what it should necessarily look like/suggesting this, this is more a test of how it looks within a single column
The big things that immediately got highlighted for me making these is that the cover art is going to create difficulty, and that the collapsible ‘annotations’, ‘credits’ etc feature I’ve included is probably a must-have for mobile.
Edit: I also realised that we’ll want to be consistent across page types. This means that the grey ‘info’ text might have to go at the top on everything.
I actually tried this! There are a few issues that I came across:
It is actually quite hard to make use of horizontal space when you basically are just displaying a list of attributes
a few mediums and relationships can make that ‘main’ block suddenly get way longer
You could do something fancy design-wise to get it to work, but MB is actually really consistent with its display across entities. The top right always has the key information (e.g. artist page, label page, work page, etc), so the fancy-design would have to work for any attributes/lists and they can change. Basically, hard and not sure if worth it so I left it
There are heaps of great quality of life elements that could be included (a lot are already in userscripts) so I’ve just focussed on how to display what’s there, trying not to get off the rails by included other improvements
Having this data hidden off to the right, when I need to read it to check that I’m on the correct page, is in my view the major layout flaw of the Release layout. (This layout is used for other enities as aerazol points out. It has the same problem there too. Though maybe it is the best available layout unless we move to transparent overlays. )
Given the recent interest in digital releases with huge country lists, it might be a good idea to consider how those would look like in a redesign.
A neat visual idea might be to show a colorized world map like you get in the ListenBrainz report page to indicate where a release is or is not available. That nicely allows a quick reference at a glance, since a tiny island nation that is excluded for some arbitrary legal reason is less impactful visually than e.g. a specific region like North America being excluded.