Horizontal vs. Vertical button groups

Share on Facebook0Share on Reddit0Tweet about this on TwitterShare on Google+0

Button groups are an important part of user interface design, but choosing their orientation can often be difficult. I’d advocate that horizontal groupings are better in most cases — consider this:

Imagine that each element on the page is assigned a “Danger Zone” — and area where within one unit of margin of error,  an undesirable action will occur. In mobile interfaces, this unit is the width of a finger, or the accuracy of a touch on the device.

Horizontal vs Vertical button groups

The orange area represents the “Danger Zone”

The danger zone in button groups extends along the edge of the button that is touching another item. As represented above in orange, the danger zone for a vertical button group extends across the width of each button — covering nearly 50% of the surface. This reduces the touch-safe portion of the button to a slim area, greatly diminishing the effect of “friendliness” in the minds of the users. Clicks to these buttons must be precise, and the consequence is not just the inconvenience of a missed button, but the danger of a click on the wrong one.

Consider the horizontal button group: the danger zone only extends over a small percent of each button. Users can click or touch imprecisely and without stress. Additionally, horizontal button groups easily convey a “forward” and “backward” action, which lends itself well to buttons like Save or Cancel.

One major offender is jQuery Mobile — arguably the defacto  standard framework for mobile development. By default, button groups in jQuery Mobile are vertically oriented. Although it is simple to switch the grouping to horizontal, some are under the false impression that the default option is the best choice.

jQuery Button Groups

How easy is that to “Fat Finger”?

Share on Facebook0Share on Reddit0Tweet about this on TwitterShare on Google+0
  • Curious

    Was this actually tested against users or theory?

    • mdjasper

      It was tested casually on users.

  • Alberto

    Interesting article, brief and direct to the important. Thanks Michel for sharing!