Page 1 of 1

Button Miss Clicks on Mobile Action Bar

Posted: 20 July 2022, 01:47
by Pull the Pin Games
In Good Cop Bad Cop, you have to choose where you will aim your gun from a list of players around the table. There is simply a button in the action bar for each player. Image

This works perfectly on the web. However, on mobile, sometimes you will press one button and it will think you pressed a different one. This makes you aim at the wrong person, which is a pretty big deal.

Has anyone else had that kind of issue? Should I just make the action buttons bigger or add some left and right margin to them in CSS? Or do you think I have to do something more drastic like remove the buttons and ask them to click on the player in the player board or on their name next to their cards on the table?

Re: Button Miss Clicks on Mobile Action Bar

Posted: 20 July 2022, 15:59
by GTSchemer
As a player, I prefer to have the buttons bigger, and/or have margin between each one. It may not look as nice, but it is much more user friendly.

Depending on the game, you may also have a way to add a clickable rectangle around each player, only enabled when that effect is active.

Re: Button Miss Clicks on Mobile Action Bar

Posted: 20 July 2022, 22:19
by tchobello
You may add a timer button to confirm...

Re: Button Miss Clicks on Mobile Action Bar

Posted: 20 July 2022, 22:33
by RicardoRix
No, never add a 'timer confirm' button. There is never any need for it.

If there is a problem with the action buttons, then fix the thing that's broken.

Re: Button Miss Clicks on Mobile Action Bar

Posted: 21 July 2022, 07:29
by tchobello
RicardoRix wrote: 20 July 2022, 22:33 No, never add a 'timer confirm' button. There is never any need for it.
just calm down please.

whatever he does, he's gonna be asked for an Undo feature.

Re: Button Miss Clicks on Mobile Action Bar

Posted: 21 July 2022, 15:45
by Pull the Pin Games
Thanks for the thoughts, everyone. I added more margin to the left, right, top, and bottom of the buttons in CSS for now and I haven't had any issues since, but I haven't tested enough to fully declare victory quite yet.

Code: Select all

.action-button
{
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
Brian Henk
Pull the Pin Games

Re: Button Miss Clicks on Mobile Action Bar

Posted: 21 July 2022, 17:00
by thoun
I add this piece of code on every game I do for this same purpose :

Code: Select all

/* make space between buttons on touch devices */
@media (hover: none) {
  #page-title .action-button.bgabutton, #page-title .bgabutton {
    margin-bottom: 8px;
    margin-top: 8px;
  }
}
Let's hope someday they'll include it by default

Re: Button Miss Clicks on Mobile Action Bar

Posted: 22 July 2022, 13:38
by Pull the Pin Games
Oooh yours is better. Thanks for sharing, thoun!