General UI Improvements #267
Description
The current interface is more than functional but there are a number of aspects of it that are a little jank, often in ways that somewhat harm usability. This issue will run through all the problems I've noticed (as well as a number of things that aren't exactly usability problems in their current state but that I still feel could be improved).
Important
I have experience with Tauri / web dev stuff, so I'm not really asking anyone else to implement all this stuff - I'm planning to start making PRs about these myself as soon as I have enough time away from uni stuff to work on it.
I'm mainly making this issue to get other people's opinions on these problems and their potential solutions first so I don't end up devoting time to implenting something that won't be accepted or has some major flaw I've overlooked.
(That said, if anyone feels like they wanna take up and work on some subset of this do feel free - it'll take me a while to get through given I'll be ticking away at it in what little time I have between work on my dissertation.)
Table of Contents
Mod Tabs
By this I mean the 'installed mods', 'search', 'all mods' and category tabs, since they all appear to use the same layout logic.
(I was originally calling them pages until I wrote the pagination section and it started getting confusing, so I'm sticking to calling them tabs).
As a minor aesthetic note before we get into the issues, the red background of these pages should probably be just a touch more transparent so you can see more of the cool animated background. It feels like you could go quite a lot further before it would end up being distracting.
Though idk maybe it should just be a setting or something.
Tab Names
This is far more minor than the rest of these, but it's a little odd that the 'Installed Mods' and 'All Mods' tabs have 'Mods' in the name when all the others don't, especially given you're already in the 'Mods' tab.
The order is also a little odd - why is miscellaneous number two? It feels like it would make most sense as the last one before 'API'.
Starting Tab
It's in my opinion slightly strange that the 'All Mods' tab is what's opened on first launch rather than the 'Installed Mods' tab. Especially so when you already have mods installed, since the thing you're most often going to be opening the mod manager to do is change which of your installed mods you have enabled.
It would make much more sense to initially open into 'Installed Mods', and maybe put a button leading you to the 'All Mods' there if you have nothing installed.
Header
The contents of the floating header display over the top row of mod cards even when scrolled all the way to the top, meaning part of the icon of those mods is just impossible to see. It also just generally looks a little odd.
This could be pretty easily fixed by just adding padding to the top of the page content.
Pagination
The pagination of these tabs is a bit strange. Each page has a fixed number of items, which doesnt change according to the card size or anything; at the default 100% card size, this means that (in a maximised window) on a 1080p monitor the content is just a little too short to all fit on the page without scrolling, while on a 1440p monitor it's so much shorter than the available space that there's a full unused row at the bottom.
Where it ends up looking much weirder is when the card size is at a value other than 100%, since you end up with uneven rows almost all of the time, making it kind of look like you've come to the end of the category.
In my opinion the ideal solution to this would be to implement some form of infinite scrolling and do away with the pages entirely. Failing that, we should at least be adjusting the number of entries per page according to card size and available space (though this has the side effect of changing the number of pages when the window size changes, hence infinite scrolling probably being more intuitive).
Installed Mods Tab
The pagination here is deeply confusing with the all the different sections it currently has (especially the local mods, which display at the top of every page such that you can't actually see the page content until you scroll down), but if we were to get rid of those sections as I describe later on, this situation would be pretty much the same as the other pages.
Sidebar
These buttons are slightly off centre within the area in a way that bugs me more than it probably should. They're also a little overly padded in my opinion, taking screen space away from the area where the mods are actually displayed.
The white text is also a little hard to read against that yellow/orange background at that size, at least to my eyes. Possibly it's to do with it being at a size where it's getting a little antialiased, making it just slightly blurry? It's hard to tell. A drop shadow would probably help in any case.
It could also make sense if this was actually a sidebar that you could open and close, possibly having it retract down to a version with just the icons when closed (especially if we improve the icons as described below).
Icons
The icons are a little confusing; why are jokers represented by a flame, and technical mods by a spade? Why do content mods and resource packs use the same icon? I feel like it's possible to do better even with the limitations of icon libraries. They could probably also do to be a little bigger.
Here's a set I threw together with a combination of Material Design and Material Symbols, for example:
(The star is still a little vague for QoL but I couldn't think of anything more fitting. It is a hard concept to represent.)
Obviously it would be even better if the joker icon was a jimbo in the style of the rest of the icons (in which case the hand of playing cards could be used to represent content mods), but we'd need to make that ourselves (since for some strange and mysterious reason none of these icon sets designed for software development seem to include a court jester).
Search
Rather than having search be its own tab, it would be better to be able to search within any of the tabs. The current behaviour would be achieved by searching within 'All Mods', but you could also then search within 'Resource Packs', or even 'Installed Mods', which would be pretty useful. It could also be good to have a shortcut for this, like Ctrl+F.
If we replaced the pages with an infinite scroll as described earlier, that would also open up the header space for the search bar on all those pages.
This would also work well with a tag system, like what Mod tags #214 would introduce.
Installed Mods
It might make more sense to have separate tabs at the 'Mods' / 'Settings' / 'About' level for installed mods vs the mod database, so we wouldn't have to use up screen real estate on the category sidebar when it isn't strictly necessary (especially if you wanted to implement something like Mod profiles #260, which might need to take up screen / sidebar real estate in the installed mods section).
It's not like there's a problem with the current way it's done though.
Enabled / Disabled
Currently, enabled and disabled mods are displayed in separated sections. While this does kind of make sense, it means mods jump around and cause everything to reorder every time they're enabled or disabled. Especially if you're trying to enable or disable multiple mods at once, this leads to a bit of confusion as you toggle one, then go to toggle the next and have to find it again because everything's moved.
It would make a lot more sense if everything was interleaved into one list, and disabled mods just had their background and name change to be gray, and maybe had their thumbnail dim a little bit.
Local Mods
The local mods currently display before the database mods, pushing them down so that you have to scroll down to reach them. Now that this many mods are in the database, all my important mods tend to be database ones, with the local ones just being things like resource packs (many resource packs are still only accessible as download links in the discord).
They should at the very least be the other way round, but preferably they should be interleaved and there should just be a little badge on local ones to tell you that they're local (which could also turn into the 'download database version' button when necessary).
Categories
It would massively help organisation in the 'Installed Mods' page if there was an option to split them up by category. Since we've factored out all the existing headings in our changes to local mods and disabled mods, we could use the same kind of headers for category sections. To improve on these headers, we could also have them be able to fold up to hide everything in that section when clicked (since thats the intuitive behaviour of a header that looks like that).
Mod Development
It would make a lot of sense for local mods to utilise a description.md, meta.json and thumbnail.jpg if they're present in the folder (or perhaps in some fixed sub-folder like .bmm or something so it was easier to gitignore, idk), since it would make it easier for mod developers to see what their mods will look like once they're in the database.
As an aside, it may even be sensible to have a way to accept a new
description.mdandthumbnail.jpgfrom the repo folder when a new release is detected, the same way it works with the updating version number, so that mod authors could change descriptions etc to reflect new updates without having to make a pull request on the index every time, but that's far outside the scope of this issue (and repo, for that matter).
On that note, there should be an easier way to reload the local mods since unless I'm missing something the only way to get it to recognise changes in the mod folder is to restart the manager. There should just be a reload button next to the 'open mod folder' button in the top left.
Mod Cards
There are a few small issues with the layout of the descriptions of mod cards that I already went over in Local mod descriptions display incorrectly at smaller card sizes #266, so I won't rehash them here.
Thumbnails
Thumbnails display at different aspect ratios in the mod card vs in the click-through mod page, meaning text and other elements are often cut off in the mod page version. This is a fairly simple fix.
Further Reworks
I have further ideas vis a vis reworking the mod cards (taking inspiration from Balatro's UI), but in the interest of submitting this issue sometime today (and because I've ended up having to make a whole mockup to demonstrate them), I'll leave this here for now and add them as a comment or a new issue or something at some point.
(God it's weird that GitHub doesn't have a way to save draft versions of issues I'd never noticed that before.)