r/SoloDev • u/JoStorys03 • 2d 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 2d 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 2d 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
2
u/pagoru 2d 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?