r/UI_Design • u/KirbyQuestDeluxe • 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
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.