Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

What is safe area / minimum distance for iPhone 4 canvas?

iPhone safe area / minimum distance

share|improve this question
1  
So you're asking for the touch area Margin, right? –  Ben Brocka May 14 '12 at 21:35
    
Yes, I am asking actually for margins. –  Pavel May 15 '12 at 19:10
add comment

4 Answers 4

up vote 4 down vote accepted

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.

share|improve this answer
    
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. –  Ben Brocka May 15 '12 at 15:39
    
@BenBrocka I believe I covered both in the answer, I apologize if that's not clear. –  GotDibbs May 15 '12 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 –  Ben Brocka May 15 '12 at 15:51
add comment

It's about consistency and using finger-friendly target sizes.

http://uxdesign.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/

Use those conventions to your advantage.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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