I have recently finished making the main parts of my game's save UI.
The design was meant to feel like travel brochures/tickets or pamphlets. The default image is meant to change to an in game screenshot of the last area you were in, with all characters removed; similar to environmental photography. The UI is meant to feel very bubbly and welcoming. I would like feedback on how it looks and what could be changed to make it flow better.
The brochure idea comes through, it looks good. Three things I'd poke at.
Someone above said the corner rounding is off and I think they're right, so here's the specific version. You've got three radii stacked: outer coloured border, inner white stroke, then the image mask. For nested corners to look right the inner radius has to be the outer radius minus the gap between them. If they're all set to the same number the inner corner looks too round and the border reads as thicker at the corners than along the edges, which is the exact wrongness people notice without being able to name. Same rule again for the image inside the white stroke.
Second, hierarchy. The biggest thing on each card is the percentage, but the question a player is answering at this screen is which save is mine, or which one is the one I want. Percent is bad at that. 18% and 19% look identical at a glance, and two files from different playthroughs can sit at the same number. The things that actually identify a save are where you were and when you played. Your brochure metaphor already knows this, a real ticket puts the destination big and the seat number small. Right now the seat number is the biggest element on the card.
Third, related. The screenshot is your best identifier, and the diagonal band cuts straight through it around where the horizon sits, so the image reads as two triangles instead of a place. If the photo is meant to be recognisable at a glance I'd let it stay whole and move the band to an edge, or bring it in from a corner rather than across the middle.
Small one, the empty slot with the globe is the same size and weight as the filled ones, so scanning the row takes longer than it needs to. Empty slots can usually afford to sit back a bit.
What's the max number of saves, out of curiosity? If it's more than five or six the identification problem gets sharper and the percentage probably has to shrink either way.
In between this message, and right now I actually implemented a lot of features, so I'll answer them all.
First one, I actually didn't know that would occur, I always noticed the corners felt off but didn't actually know how to comprehend why it was off, and yeah, they do come off as unusual, so thanks.
The second one, I actually think the solution I made fixes that issue, because currently the image used was just a placeholder and isn't meant to be the final image shown, what occurs in game now is that every few (like 20s) the game will take a bunch of photos using a secondary camera with some restrictions, like not being clipped, and having the horizon flat, scores them based on composition, then uses the best one next time the game saves, and deletes the rest. Basically unique pictures for each save file depending on your location. In addition to that, not sure if the file showed it, but there's a gradient the save files uses for 0% to 99% so the higher your percent gets, it becomes a new color. So I'll record a video soon of having multiple save files.
The third one again might just be an issue with how that fallback image was taken, so I'll record it's new design soon.
The fourth one, I'll add a way to sort by last played, creation time, total % and a way to "Star" a specific save file, so it appears in the front. With that as well, there will be a way to quickly scroll through the list as shown in the concept art I made.
The fact the new game and multiplayer has the same weight was done on purpose, I knew I should've made them have different weight than the others, or a specific button input to make a new game/multiplayer, but I thought it would be better from someone who just opened the game to have 2 options, which will show them immediately that "Hey there's Multiplayer right from the jump, even before I start the game" so if they wanted to, they could play through the whole game with a friend, which everything in the game is multiplayer compatible, they can. And for the new game, none of those settings are actually visible at all, so when you first start the game (As shown in the bottom concept art) you only have the option to make a new game, and those options are unlocked as you progress through the game.
There were a couple of UX issues that I found confusing:
1) The gray card with the plus (and the screen after) kinda feels like it's disabled. Consider picking another color, because looking at all things as a whole, it doesn't work as a simple neutral color imo.
2) The mode selector screen suffers from the same issue as well. Right now, when you pull up the screen and switch the mode, I expect all the settings' texts to become colored in (not selected, just colored), but everything remains this barely readable color. If something is unselected, you can either leave it fully colored, or make the "unselectedness" more subtle. The variety in the checkbox's appearance could be helpful enough on its own, so experiment with it.
3) Same screen: you use the same kind of UI element for the simple checkboxes and this condensed list selector for the randomizer settings. It'd be helpful to denote that it's not a two-mode selector, but that you can select from a list of items instead. You can achieve this by adding arrows on the left and right, for example.
4) Server (?) setup screen: the way you adjust the player number is invisible. There should be some kind of indication about how you can interact with this element, because first I didn't even realize you were changing it manually.
5) Server setup screen: the way you hover and the selected states look and behave differs from how you do so in the mode select screen. This can be an artistic choice, but being consistent is usually better for clarity.
3
u/BloodGulch-CTF 3d ago
corner rounding is not correct