13

Say my button is square shaped, in a website, and I don't want to cause inconvenience for users with big fingers (and also older people and those who forgot their glasses and aren't precise at hitting the spot).

My guess is 40 x 40 pixels is a good click area, but won't it be too small on those new full HD phone screens? I have an older phone myself so I can't try it out :X

Perhaps someone has a good rule of "fat thumb" they use for these kind of issues?

8

The 'fat finger' error is states a minimum of 44px x 44px (around 11mm x 11mm) is advisable for the contact patch of your finger/thumb. The 'centroid' is the first part of your finger that has contact with the screen. See below for visuals.

enter image description here

enter image description here

If you're using something like Sketch to prototype this, look at Mirr.io to see how this would look on a mobile device if you have access to test devices then you can resize accordingly.

For further reading into it see here

| improve this answer | |
2

According to WCAG 2.0 documentation

2.2 Touch Target Size and Spacing

The high screen resolution of mobile devices means that many interactive elements can be shown together on a small screen. But these elements must be big enough and have enough distance from each other so that users can safely target them by touch.

Best practices for touch target size include the following:

Ensuring that touch targets are at least 9 mm high by 9 mm wide, independent of the screen size, device or resolution. Ensuring that touch targets close to the minimum size are surrounded by a small amount of inactive space. Note: Screen magnification should not need to be used to obtain this size, because magnifying the screen often introduces the need to pan horizontally as well as vertically, which can decrease usability.

In another place, it is described as no smaller than 45px wide and 45px tall as the minimum size.

Reference Page 1

Reference Page 2

| improve this answer | |
1

Google Fundamentals: A minimum recommended touch target size is around 48 device independent pixels on a site with a properly set mobile viewport. For example, while an icon may only have a width and height of 24px, you can use additional padding to bring the tap target size up to 48px. The 48x48 pixel area corresponds to around 9mm, which is about the size of a person's finger pad area.

| improve this answer | |
0

7 Basic Rules for Button Design https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4

  1. Make buttons look like buttons
  2. Put buttons where users expect to find them
  3. Label buttons with what they do
  4. Properly size your buttons
  5. Mind the order
  6. Avoid using too many buttons
  7. Provide visual or audio feedback on interaction

Furthermore:

Don’t assume that something in your UI is obvious for your users

| improve this answer | |
  • 2
    Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. – Glorfindel Jul 10 '18 at 12:39
  • please copy and paste the relevant info. – Mayo Jul 10 '18 at 12:45

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.