There’s a lot of repetition in the iOS Human Interface Guidelines and it isn’t particularly pleasant to read. I’ve set out to remove the noise and assemble the information of value into this multipart series. This in no way supersedes Apple’s guidelines, think of it as an accompaniment.

I’d tap that
The comfortable minimum size of tappable UI elements is 44 x 44 points.

Dimensions
iPhone 4: 640 x 960 pixels
iPad: 768 x 1024 pixels
Older iPhones and iTouch: 320 x 480 pixels

Pixels versus Points
Pixel is the appropriate term when using image editing applications. Point is the term for describing an area drawn on the device’s screen.

What’s expected of you
The iPhone’s home screen is vertically orientated, so people expect apps to initially launch that way. The iPad’s home screen displays in either orientation – people expect apps to launch in either.

List of acceptable iOS gestures

Tap To press or select a control or item (analogous to a single mouse click).
Drag To scroll or pan (that is, move side to side).
Flick To scroll or pan quickly.
Swipe In a table-view row, to reveal the Delete button.
Double tap To zoom in and center a block of content or an image.
To zoom out (if already zoomed in).
Pinch open To zoom in.
Pinch close To zoom out.
Touch and hold In editable text, to display a magnified view for cursor positioning.
Shake To initiate an undo or redo action.

Distinguishing between an iOS app and web content
An iOS app is an application you develop using the iOS SDK to run natively on iOS-based devices. iOS apps resemble the built-in applications on iOS-based devices. They take advantage of features of the iOS environment.

Grey area
An iOS app might combine native UI elements with access to web content within a web content–viewing area. Such an app can look and behave like a native iOS app, without drawing attention to the fact that it depends on web sources.

Web content is hosted by a website that people visit with their iOS-based devices. Web content that appears on iOS-based devices can be divided into three categories:

1. Web apps. Webpages that conform to certain display guidelines are known as web apps because they behave similarly to iOS apps. A web app often hides the UI of Safari on iOS so that it looks more like a native app. Using the web clip feature, a web app can also supply an icon for people to put on the Home screen.

2. Optimized webpages. Webpages that are optimized for Safari on iOS display. An optimized webpage correctly scales content for the device screen and is often designed to detect when it is being viewed on iOS-based devices, so that it can adjust the content it provides accordingly.

3. Compatible webpages. Webpages that are compatible with Safari on iOS display and operate as designed (with the exception of any elements that rely on unsupported technologies, such as plug-ins, Flash, and Java). A compatible webpage does not tend to take extra steps to optimize the viewing experience on iOS-based devices, but the device usually displays the page successfully.

No Flash, duh
Safari on iOS does not support Flash, Java (including Java applets), or third-party plug-ins within web content. Instead, Safari on iOS supports the HTML5 <audio> and <video> tags to provide audio and video streaming, and JavaScript and CSS3 transforms, transitions, and animations to display animated content.

Safari on iOS interprets most gestures as targeting the way the device displays content, not the content itself. The tap, which is analogous to a single mouse click, can cause Safari on iOS to send the onclick event to a webpage. There are no analogs for other mouse-based gestures, such as hover. Um, link hover doesn't work.

Next up is Part 2: Human Interface Principles and App Design Strategies

About these ads