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.
This section of the Guidelines deals with porting your existing product, whether software or a website) to an app. On that comparison, the article begins with the following :
- It’s a different user experience, therefore rarely a straightforward port.
- People use iOS based devices while they’re on the go in environs filled with distractions. Create a compelling, responsive experience that gets them to the content quickly and easily.
- The 80-20% rule. Most users use a very limited number of features in an app, while only a few use all the features. iOS apps seldom need to provide all the features that only power users need.
From Desktop Mail to iPhone Mail
Here Apple talks about how wonderful their Mail app is, but the message is that unlike your bloated software or website, the app would be best off providing core functionality only. The key points are as follows.
Distinct, highly focussed screens
For iPhone Mail, each screen displays one aspect of the Mail experience. Within a screen, people scroll to see its entire contents.
This is interesting, because it can be interpreted to mean pagination has no place on the iPhone. No complaints: on websites pagination is a pain in the arse. It’s never been sufficiently seamless enough to make sense, and simply represents a moment where I wait for another page to load.
Easy, predictable navigation
We can go a step further and say linear navigation. To quote the guidelines:
“people drill down from the general (the list of accounts) to the specific (a message). Each screen displays a title that shows people where they are, and a back button that makes it easy for them to retrace their steps.”
This is interesting because linear navigation becomes quite cumbersome if you’re required to drill down more that twice. I have the Japanese (dictionary) app on my iPhone, and I get frustrated when I’m forced to click ‘Back’ up to five times to return to the app’s home menu. In linear navigation’s defence it’s another reason to keep your app as simple as possible.
Different types of feedback for different tasks
Provide feedback, however subtle, when a user performs an action. In Mail, when you delete a message the trash icon animates, when a mail is sent a sound indicates the send was successful.
From iPhone Mail to iPad Mail
iPhone Mail is designed to help mobile users handle their email while they’re standing in line or walking to a meeting. iPad Mail is efficient enough for people to use on the go, but its rich experience also encourages more in-depth use.
‘Rich experience’ is a bit much for a mail application, but what they’re saying goes beyond one app – people use their mobile device while they’re on the run and your app has to react accordingly. Tablet users generally have more time to engage in an app’s experience. iPhone and iPad apps should be distinguished as such and designed accordingly.
From Desktop to Mobile Safari
The guidelines state that websites work best on mobile Safari when:
- The viewport is set appropriately for the device
- Avoid CSS fixed positioning. Content will move offscreen when users zoom or pan the page
- Enable a touch-based UI that doesn’t rely on pointer-based interactions
Forms
When designing forms for the iPhone keep in mind your viewport shrinks to 140px.
The Guidelines refers to what we’d traditionally call a drop-down menu or a HTML select form element as a ‘pop-up menu‘. The pop-up menu in its activated state is called the ‘picker‘.
Mobile form design is a world unto itself. See Better Mobile Form Design and Forms on Mobile Devices: Modern Solutions by Luke Wroblewski to dig deeper.
iPad Forms
On the iPad the pop-up menu displays in a popover.
Using lists to display data in iPhone web apps
It’s suggested that using lists in your web app is a great way to make your app appear native. Lists appear edge to edge or inside rounded rectangles. While it’s not stated, the rounded rectangle list would be the preferable method when grouping lists on a single page.
And that’s it for Part 3. Next up is User Experience Guidelines.
