Button Miss Clicks on Mobile Action Bar

[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.

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?

[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.

[tchobello]

You may add a timer button to confirm...

[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.

[tchobello]

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.

[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

[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

[Pull the Pin Games]

Oooh yours is better. Thanks for sharing, thoun!