Avoiding Web Habits in Your iPhone Apps

If you’ve been lucky enough to work on an iOS app for the iPhone, you’ve probably had two experiences:

  1. Sweet freedom! There is no cross-browser compatibility to concern yourself with and a nearly limitless array of possible experiences you can build into your app.
  2. Paralyzing freedom! Just like picking the right box in the cereal aisle, too many choices can leave you frustrated and resorting to whatever you’re most familiar with.

It is not difficult to create elegant, yet complex interactions on a website. Take web forms, for example; many fields and directions on one page can be smoothly navigated with design cues, easily scanned layout, and responsive controls. This is not the case in iOS, where a series of interactions on separate screens must work together to create one seamless experience.

As I’ve worked in the iOS platform, I’ve noticed how my web biases inform my iOS wireframes and task flows. Here are some ways I’ve learned to be aware of these biases and avoid them:

  • Reset expectations about typing. Typing is so commonplace these days, we barely think about it. But no matter how speedy someone is on a mobile keyboard, it is always easier to select text on a touch device than it is to type it. Before you add a text field ask yourself: is this absolutely necessary? 

If it makes sense for your application, dynamically populate a list of possible answers below an input field once the user starts typing a letter or two (Google and Path are two of the many apps with this type of auto-complete functionality). Shave seconds off of interactions wherever you can because those seconds add up!
  • Condense labels for forms and tables. Brevity is always advisable on the web, but it’s non-negotiable in iOS. Any time label text for table elements is wrapped or truncated, it interrupts the visual flow. Keep labels as short as possible without sacrificing meaning.
  • Rethink forms. Instead of a consecutive list of questions and input fields on one long screen, think about forms on iOS as several quick interactions strung together. It’s helpful to maintain consistency with iOS standard controls by keeping cancel/back and submit/next buttons in the navigation bar at the top. The best forms are not drudgery to the user but just steps that must be taken to get something useful done.
  • Take advantage of gestures, but… Gestures are tricky because they’re easy to both under and overuse.  There are three ways that I find gestures most appropriate:
    1. Offer them in the same way you might offer a keyboard shortcut in a desktop application — it’s there for improved experience and efficiency, but it’s not necessary to make the app function.
    2. Use them if you have created realistic controls that mimic real-world interactions.
    3. Present them in your app when you need to require deliberate intention (like answering your phone or deleting an account).
  • Think in taps, not clicks. A finger tip is infinitely bigger than the tip of a mouse pointer, and that significantly affects your interface. Once you have a wireframe or mockup put together for a screen of your app, step back and look at it. Does it look like Honey I Shrunk the Web Page with lots of touchable areas crunched together? Is someone with thick fingertips going to be tempted to throw their phone across the room out of frustration? This seems obvious, but it is can be a daunting challenge to stop thinking in clicks.
  • Don’t go overboard. It’s easy to swing too far in the other direction and use an array of different native elements because they’re there. The switch is an example of an element that has been widely overused because of its novelty. Well-placed interface elements put the people using your app in control, but superfluous interactions can make them feel like your marionette. A critical eye and some honest colleagues will help prevent interface bloat.

Instead of strictly following these guidelines, which will change as the platform changes, it’s best to focus on thinking critically about the medium and the people your product reaches. The advent of hundreds of millions of mobile touch devices is revolutionizing the way we think about the web and even desktop applications. Stay ahead of the curve by challenging your paradigms now!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Chris

    “A finger tip is infinitely bigger than the tip of a mouse pointer…”

    Um, hyperbole much?

  • kaf

    Very useful article!
    I’ve definitely felt the paralyzing freedom ;-)

  • http://htmlblox.com samanime

    Great tips. These could translate into the realm of Android apps as well.

    And Chris, since a point technically has no dimensions, your finger is infinitely larger. ;)

  • Kevin Dees

    Great Article Emily. You wrapped things up well. Taking into account the platform is super important. Letting “iPhone” trump that can be easy, or mobile in general.

    Keep in mind the environment people use these new devices is a good idea too. Walking a dog, on the train, riding a unicycle… the list goes on.

  • Emily Smith

    Thanks for the responses, all!

    @Samanime – I totally agree. I have less experience with Android, so I didn’t want to extrapolate too far, but the same principles would apply for sure.

    @Kevin – Thanks for stopping by! Your comment made me think about how the Shazam app changed their main action from a tiny button in the nav bar to a gigantic button that takes up the whole screen. I’d guess that was a change to accommodate the environment that people were “Shazaming” in — somewhere like a car where it needs to be fast and easy to perform that task.

  • jana

    On my Birth day i got a Iphone in gift.Which I have unlocked after updating the base band to 6.15 but cannot
    get the cellular data network to work now? If some one know how to do it –
    its a 3g, and everything else works great, just no cellular data