I’m developing my very first browser game and I’d like some tips on how to improve the user interface.
I’ll give a few details on the game (to understand what the necessary UI components are) and then a video showing what it looks like.
This is a playing cards based game. It’s called Dubito (literally, I doubt) in my native language.
The first player announces a card out loud to the other players, and proceeds to put one or more cards on the table, face down. The next player has to put down one or more cards, and so on. Players are supposed to keep putting down the same card that was claimed by the first player, but anyone can lie and place down any card(s).
At any time, a player can “doubt” of the last player who put cards down, that is uncover the cards that player put down and, if they lied, have them take back all of the cards that were on the table. If the player who doubted was wrong, then they take all the cards on the table back in their hand. The first player to run out of cards wins the game.
I have already finished the development of the game, and it’s working as intended. However, I’m realizing the user interface on mobile doesn’t look that great. The main issue I’m running into is having to fit a lot of elements in not so much space, while keeping everything at the right size and visible.
First of all, this is how the game looks on desktop
To give a brief clue of what the various elements are: the two gray-background lines of text “è il mio turno” and “carta attuale: 2” indicate the name of the player whose current turn is, and the card that is “actively” being put down. Then there are emojis to communicate with other players.
The red card in the middle represents the pile of cards on the table, and there are animations of cards sliding on top of it (when cards are put down) and flipping and being put to the side face-up (when someone doubts). You’ll see what I’m talking about in the video below.
Then the two buttons on the right are used to doubt of a player or put cards down.
Notice the top-right gray box with “Annuncerai: A”.
That appears after a user has chosen the card they are going to announce at the beginning of their turn. Initially, they see this pop-up:
That pop-up is giving me tons of headaches. It’s only seen during a small portion of the game (you only see it as the player who beings a round, and only on the first turn) but also takes up a lot of space. I need to have it and I can’t just make it disappear once the user makes a choice, because they could change their mind before the end of the turn (so I need that gray box in the first screenshot with a button that, when pressed, re-opens the pop-up).
The real problem is the interface on mobile.
Here’s a video of some gameplay on an iPhone 8. It shows some things that need to be addressed yet (like some aligning issues on a few elements), but it also gives an overall look of what the UI is like: click.
As you can see, that pop-up gets in the way, and the gray box on top-right with the button to re-open it looks very bad as it potentially covers one player.
I have been trying to figure out a better way to no avail so far.
Here you can also see a mockup page of the game UI (it’s not functional, but you can play around with your developer tools to simulate a phone screen and see how it looks): click
I’d like some input from you guys on how I could make it a little cleaner and better looking, while keeping functionality.
Seeing as this is my first attempt at a cross-platform UI (or game UI in general), I also highly appreciate any advice on how to make better looking interfaces.
Thank you to everyone who will respond.