Skip to main content

Toggle buttons bar for mobile? [Resolved]

I am designing filter interface that is located at the bottom of the screen of a smartphone.

I do not know if it's better to leave some space between the buttons (see the top of the attached image - preflop action), or leave the buttons without spacing/border (see bottom of the attached image - preflop position)

Is one button being selected enough indication of where a user is supposed to click to change the option, or is additional spacing needed?

Some additional info:

  • One of the options is always selected
  • Only one of the options can be selected
  • Hover to show button borders does not work since this is targeting smart phones and tablets

Both toggle buttons options

Question Credit: Miha Šušteršič
Question Reference
Asked September 10, 2019
Posted Under: UI UX
2 Answers

Button border helps user to centre touch points on a button. Though, text label does the same thing, but a border makes it explicit specially to avoid confusion if there are two words in a button (you don't have that in your example). Better test with users.

credit: Omkar Chogale
Answered September 10, 2019

You can try an intermediate design between both options using thin strokes.

enter image description here

credit: Danielillo
Answered September 10, 2019
Your Answer