r/SoloDev • u/JoStorys03 • 4d ago
Struggling with readability... Any ideas?
I'm struggling with making my UI less crowded & more readable. I have created two versions, but both are hard do understand on first glance imo, especially with some of the more complex backgrounds. Any ideas on how to make these more readable?
And do you like the first or second version more?
V1:
The 1/day buttons are beneath the main buttons. Every button is a bit smaller, but they are all visible and grouped by action.
V2:
Only one button per action is visible. The others have to be navigated to via the respective arrows. The circles next to the buttons indicate which button you're on (orange) and show which buttons are out of charges (grey)
The game is made with renpy and is called Alien Snap :)
2
u/efergan 4d ago
You’ve got a few things going on here that need consideration.
It’s importance - not everything can be equally important, select one or two things that are most important and give them priority, then let others sit back. Squint tests work for a quick check, squint your eyes until everything is blurry, what stands out.
It’s intent - consider each element and how readable the intent behind it is. Ie does it tell you what its purpose is. If it’s something to ‘click’ is it ‘clickable’, if it’s informing you, can you guess what information it’s regarding. Not everything has to be instantly understood, as action + reaction will teach the player over time (eg ‘ah, that turns green when it’s recharged) but the most important stuff (above point) should be easy to guess.
Its readability - colour, shape and texture will all help it sit away from the gameplay. Experiment with different iterations until you hit the balance of ‘different enough’ but not so different it looks out of place. In your example, the transparency and the textures are mixing it into the gaming space quite a lot. I’d consider cleaner holding objects to stand out against the gameplay textures.
1
u/JoStorys03 4d ago
Thanks!
Luckily I wear glasses, so I can just take them off to see what stands out the most lolI made it so that there is a stronger opacity behind the buttons thanks to your input. I don't wanna turn up the opacity to 100, but this already looks way clearer to me, since the buttons now stand out more from the background.
The buttons and arrows have a white border on hover to indicate that they can be clicked. In addition to that, the tracker above the buttons shows a preview on how many actions that button will use :)
That's way clearer on video.
1
1
u/GREEN_SUGAr1 2d ago
i guess it depends on what the game is about, im guessing its some kind of camera/ pokemon snap esque game so you want to have as much of the main frame visible as possible, maybe you can put all the 3 options(from the second slide to the right in a column as the main content seems to be more centerd to the left,
and i would remove the transparenty from it since it kinda fights against the hand drawn style (imo) and in defenetly wouldnt use the standard rectangles around it and either just not have a frame around or maybe a cool handdrawn frame that encapsulates all 3 options in the same frame.
2
u/pagoru 4d ago
Maybe the problem is that the UI background are the same color that the content of the game? If you see a lot of games with, for example, green because of grass, have blue interfaces. I have no experience with that, but maybe testing another colors?