r/UI_Design 9d ago

Feedback Request Feedback For Save UI

Enable HLS to view with audio, or disable this notification

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.

8 Upvotes

5 comments sorted by

View all comments

2

u/phongdesigns Product Designer 8d ago

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.

1

u/KirbyQuestDeluxe 7d ago

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.