0

I tried looking up previous questions but came up empty on this one. I am sure that there are various standards and guidelines out there for this (Android, Apple or Windows), but it also seems like they break their own standards regularly.

Is there are minimum agreed standard for spacing between UI components for touch devices that can be used as a baseline to make adjustments? I assume this would be based on similar principles as those proposed for button sizes.

To clarify the question a little bit further, is the confusion between the spacing also due to the specification of padding space around the UI in addition to gaps added? I haven't seen these differences specified clearly anywhere, but I assume that the padding space should be uniform while the gap can vary depending on how you group the UI elements together on the interface.

4

There is a minimum amount of distance that should be adhered to if your creating tap targets. This is the lifted text from Googles recommendation on appropriately sizing tap targets. These guidelines apply if your making tap targets (two components, like links, that the user can tap on). If they are just normal components (and not links or buttons), there is no minimum "gutter" space that should be adhered to. It should be whatever space looks aesthetically the best.

Overview

Small or tightly packed links or buttons are more difficult for users to accurately press on a touchscreen than with a traditional mouse cursor. To prevent users from being frustrated by accidentally hitting the wrong ones, tap targets should be made sufficiently large and far from other tap targets that a user can press them without their finger pad overlapping any other tap targets. The average adult finger pad size is about 10mm wide (a bit less than half an inch), and the Android UI guidelines recommend a minimum tap target size of roughly 7mm, or 48 CSS pixels on a site with a properly-set mobile viewport.

Recommendations

You should ensure that the most important tap targets on your site—the ones users will be using the most often—are large enough to be easy to press, at least 48 CSS pixels tall/wide (assuming you have configured your viewport properly). Less frequently-used links can be smaller, but should still have spacing between them and other links, so that a 10mm finger pad would not accidentally press both links at once. Users should not have to pinch zoom (or rely on other browser UI features for disambiguating finger taps, such as Chrome's popup magnifying glass) in order to easily and reliably press the desired button or link.

Make important tap targets large enough to be easy to press

This applies to the tap targets your users will use the most, such as buttons for frequently-used actions, search bars and other important form fields, and primary navigational links. These tap targets should be at least 7mm (48 CSS pixels if you have configured your viewport properly), and should have additional spacing around them if they are any smaller than 7mm.

Ensure there is extra spacing between smaller tap targets

It is reasonable for infrequently-used links or buttons to be smaller than the recommended size of 7mm, but there should still be no other tap targets within 5mm (32 CSS pixels), both horizontally and vertically, so that a user's finger pressing on one tap target will not inadvertently touch another tap target.

  • Is this the same as the Google Materials Design specifications? I thought the standard for Apple and Microsoft are somewhat different. – Michael Lai Jul 21 '14 at 3:42
  • @MichaelLai I am unaware of any other specifications for the minimum distance between UI elements. My information comes from the Google Developer center. – Tim Jul 21 '14 at 22:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.