What is safe area / minimum distance for iPhone 4 canvas?
-
1So you're asking for the touch area Margin, right?– ZeldaCommented May 14, 2012 at 21:35
-
Yes, I am asking actually for margins.– Pavel BinarCommented May 15, 2012 at 19:10
Add a comment
|
4 Answers
I believe your "safe zone", or the margin/padding (referred to as "insetting/outsetting" I believe in iOS land) between your content and the edge of the screen, has not been specified by Apple in their Human Interface Guidelines. Apple loosely uses the term in their guidelines to refer to the area in which you need not be concerned about them eating into your icon's design space (more on that below).
I would tend to think that depending on the type of app you create, you should be able to be fairly comfortable using the whole screen for your application as far as content placement and touch targets go. Any padding/margin you place around your content is up to your discretion. However, I think the padding I've seen on most apps is about at least 10px on each side -- although I haven't yet found a best practice or reference on this.
Definitely keep in mind however that the minimum size for a touch target as defined in Apple's Human Interface Guidelines is 44 x 44 points (not pixels). Ensuring a large enough target is the probably the most important sizing guideline to follow. More on touch targets .
As a side note, there is a "safe zone" defined by Apple for the app icons in the Human Interface Guide, see the section on Document Icon Specifications for iPad.
-
Technically that safe zone isn't for this purpose; it's so things aren't improperly cropped/scaled and so icons don't bump into eachother. It's not really about touch area.– ZeldaCommented May 15, 2012 at 15:39
-
@BenBrocka I believe I covered both in the answer, I apologize if that's not clear.– GotDibbsCommented May 15, 2012 at 15:40
-
Oh, you answered the question, I just wanted to clarify the two "safe zone" concepts aren't referring to the same thing– ZeldaCommented May 15, 2012 at 15:51
In an iPhone,
If a finger can reach and tap effectively then its in the safe area, I would recommend you to utilize the full screen and follow the principles of iPhone UI
The "safe zone" or minimum touch distance from the edge of the screen in iOS is effectively the entire screen area of the device. The whole device is meant to be tapable, hence the Tab Bar appearing at the exact bottom of the screen, not floating a bit above it.
However, note the iOS Human Interface Guideline about touch target size:
The comfortable minimum size of tappable UI elements is 44 x 44 points.
That's points, not pixels; for any control in the safe zone, the size should be at least 44 x 44 like other controls. Even if it's at the edge of the screen it will remain easy to touch.
Note certain gestures use smaller areas, intentionally using the edge of the screen; tapping the very top of the screen (which seems a bit smaller than 44 points tall) scrolls back to top, and some apps have a "slide from the edge of the screen" gesture like Dolphin. The edge of screen gestures work better on iPad because of the wide physical margins on the device, they're a bit more clumsier on phones (especially if your users use those god-awful cases).
Note on Android the same isn't quite true; the bottom of the screen is a riskier touch target (the sides and top are still okay) because of the "soft buttons" most devices have (especially Ice Cream Sandwich devices).
On Android, staying too close to the bottom means you might hit the Home or Back key, which could be disastrous or at least annoying. On iOS you don't have this problem; the Home key must be physically pressed in, and it's convex, probably exactly so it doesn't have this problem. This is probably why Tab Bars are at the bottom on iOS (no buttons to hit) whereas they're often at the top (or pan gestures) on Android.
It's about consistency and using finger-friendly target sizes.
Use those conventions to your advantage.
