8

According to iOS Human Interface Guidelines

The comfortable minimum size of tappable UI elements is 44 x 44 points.

Should we follow this rule for Every link on Mobile Website for better usability?

See this screenshot of http://m.yahoo.com the links in footer are not 44X44.

my question is should we always make every Link/Button make at-least 44X44?

enter image description here

It's not about 44X44 only it's about making tappable area bigger so user can easily tap with finger. So should we also make every tappable area big enough?

It's even a best practice for Desktop website which uses Mouse

enter image description here

Improve this question
1

6 Answers 6

Reset to default
3

I think it's a good rule to follow if the links are part of the content/interface. but the links on the yahoo website like privacy/help/legal aren't going to be used that much, the user can always zoom in if they really want to click that....

Improve this answer
3
  • My thoughts exactly, I know its good practice, but other than maybe help how many users look at the legal / privacy stuff anyway?
    – Adam Fellowes
    Sep 15, 2011 at 15:02
  • True, webpages are slightly different because of the zoom factor. But, that Yahoo page is the mobile version, so zooming is disabled.
    – Stuart
    Sep 15, 2011 at 15:04
  • Correct me if I'm wrong but isn't the 44x44 recommendation for "items in a tool bar" in mobile apps and not websites?
    – Viraj
    Sep 16, 2011 at 1:47
3

I found a Good answer here Make sure your finger can hit the target and text is legible.

enter image description here

Improve this answer
2

As iOS HIG stated

The comfortable minimum size of tappable UI elements is 44 x 44 points.

There can be times when you don't want/need tappable UI elements. Just base this decision on your business objectives and user needs. For example: I'd care more about making the page short than making "Legal" easy to tap

EDIT: Ok. Not just the page length, but also things like reducing visual clutter and creating hierarchy for good information design (e.i. not giving too much focus on what's not too important for the business/user)

Improve this answer
7
  • But you can increase the tappable area of Legal without making the page longer. there are enough margin available.
    – Jitendra Vyas
    Sep 15, 2011 at 13:29
  • didn't understood your edit. I just added more padding to increase tappable area here i.imgur.com/d68Dn.jpg and It's not adding any visual clutter. I could be wrong though
    – Jitendra Vyas
    Sep 15, 2011 at 13:44
  • 3
    I'm not a fan of the 'keep it short' model. Our UX lead does the same thing. I find it's a symptom of designing everything on paper with their little iPhone box mockups. It's INCREDIBLY easy to scroll on a touch device and having bigger targets at the expense of a longer page is MUCH better than having small targets even though everything is on one screen, IMHO.
    – DA01
    Sep 15, 2011 at 13:53
  • 1
    @DA01 - I think same
    – Jitendra Vyas
    Sep 15, 2011 at 14:39
  • 1
    But if they are not important then they should not on the page. I think every tappable thing on the page should have bigger target so user can tap precisely. 44X44 is for finger
    – Jitendra Vyas
    Sep 15, 2011 at 14:47
2

You should ALWAYS follow the rules of good graphic design and user experience. Except in situations where it makes sense to break the rules.

Improve this answer
2
  • 1
    You should ALWAYS follow the rules except in situations when you SHOULDN'T. I'm sorry, does this make any sense?
    – mojuba
    Oct 8, 2013 at 9:53
  • 1
    @mojuba yes, it makes sense.
    – DA01
    Oct 8, 2013 at 14:15
1

Even though some of those links aren't critical, they're important enough to be there and deserve a good treatment for mobile. Since there's at least one feature that speaks to a personalized list (add to favourites), the Sign In link seems to be an important part of the experience and at minimum should have a touch-friendly size.

Though not critical, I'd recommend going the distance and using the already built elements to make those secondary links touch-friendly, and maybe explore putting them into an expanding list to tidy up the screen space.

Improve this answer
0

If you need to highlight the main buttons on the UI, you should use 44px according Apple's guide.

However, all links that you do not consider important on the footer or the ones that have been chosen by hierarchy, might be smaller than 44px. You just need to be careful about the tap area.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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