E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: David Ashleydale
Date: Thu, Aug 22 2013 3:45PM
Subject: Clickable/Tappable Area
No previous message | Next message →

Hi,

Do any of you have a good rule of thumb to use when considering the
clickable or tappable area on a web page or app? Too small, and some people
may have difficulty hitting it.

It's not always possible to increase the clickable area of a link or button
-- there might be other actionable items nearby. But when you can, by
adding padding or whatnot, is there ever a point where you would look at a
little tiny button or link on a page and say, "Wow, that is super tiny!
That is going to be difficult to click on. You should ensure that clickable
areas are at least 50 pixels by 50 pixels, if you can."

Do any of you have a rule of thumb like that?

Thanks,
David

From: Paul J. Adam
Date: Thu, Aug 22 2013 3:53PM
Subject: Re: Clickable/Tappable Area
← Previous message | Next message →

I think that's a great recommendation! Apple says you should have a minimum of 44 x 44 points. 50 x 50 sounds better!

https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Characteristics/Characteristics.html
44 x 44 points is the comfortable minimum size of a tappable UI element.

Paul J. Adam
Accessibility Evangelist
www.deque.com

On Aug 22, 2013, at 4:45 PM, David Ashleydale < = EMAIL ADDRESS REMOVED = > wrote:

> Hi,
>
> Do any of you have a good rule of thumb to use when considering the
> clickable or tappable area on a web page or app? Too small, and some people
> may have difficulty hitting it.
>
> It's not always possible to increase the clickable area of a link or button
> -- there might be other actionable items nearby. But when you can, by
> adding padding or whatnot, is there ever a point where you would look at a
> little tiny button or link on a page and say, "Wow, that is super tiny!
> That is going to be difficult to click on. You should ensure that clickable
> areas are at least 50 pixels by 50 pixels, if you can."
>
> Do any of you have a rule of thumb like that?
>
> Thanks,
> David
> > >

From: Dave Merrill
Date: Fri, Aug 23 2013 7:41AM
Subject: Re: Clickable/Tappable Area
← Previous message | Next message →

Must also depend on pixel density and screen size too, yes? Retina display
have abut twice the density of other displays, and 50 px on a phone is
different than 50 px on a 21" desktop display.

Dave Merrill


On Thu, Aug 22, 2013 at 5:53 PM, Paul J. Adam < = EMAIL ADDRESS REMOVED = > wrote:

> I think that's a great recommendation! Apple says you should have a
> minimum of 44 x 44 points. 50 x 50 sounds better!
>
>
> https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Characteristics/Characteristics.html
> 44 x 44 points is the comfortable minimum size of a tappable UI element.
>
> Paul J. Adam
> Accessibility Evangelist
> www.deque.com
>
> On Aug 22, 2013, at 4:45 PM, David Ashleydale < = EMAIL ADDRESS REMOVED = >
> wrote:
>
> > Hi,
> >
> > Do any of you have a good rule of thumb to use when considering the
> > clickable or tappable area on a web page or app? Too small, and some
> people
> > may have difficulty hitting it.
> >
> > It's not always possible to increase the clickable area of a link or
> button
> > -- there might be other actionable items nearby. But when you can, by
> > adding padding or whatnot, is there ever a point where you would look at
> a
> > little tiny button or link on a page and say, "Wow, that is super tiny!
> > That is going to be difficult to click on. You should ensure that
> clickable
> > areas are at least 50 pixels by 50 pixels, if you can."
> >
> > Do any of you have a rule of thumb like that?
> >
> > Thanks,
> > David
> > > > > > >
> > > >



--
Dave Merrill

From: Alastair Campbell
Date: Fri, Aug 23 2013 8:50AM
Subject: Re: Clickable/Tappable Area
← Previous message | No next message

On Fri, Aug 23, 2013 at 2:41 PM, Dave Merrill < = EMAIL ADDRESS REMOVED = >wrote:

> Must also depend on pixel density and screen size too, yes? Retina display
> have abut twice the density of other displays, and 50 px on a phone is
> different than 50 px on a 21" desktop display.


Not if you are talking about websites, devices generally even that out by
using "CSS pixels".

For example, a retina iPad has a device-pixel width of 1536px (in
portrait), but it reports a width of 768px for the purpose of rendering
page layouts.

My spangly new HTC one is a 1080p display (1280px wide in portait), but
reports a width of 360px.

Conversely, the browser on an Xbox reports a width of 1050px, although the
HD TV is 1920px wide.

The (CSS) pixel is actually your best bet for cross-device sizing:
http://alastairc.ac/2013/02/how-to-hold-your-ipad/

-Alastair