Engaging the Mobile Market with iPhone Web Apps

by Bryan Fox on January 21, 2009

In a previous article on designing web apps for the iPhone, we offered some tips for implementing web applications on an iPhone. Now that these have become a bit more commonplace, let’s back up to the brainstorming & conceptualization stages of an iPhone web app.

Why might you consider developing an iPhone web app?

The iPhone has one of the fastest growing user bases, and mobile Safari provides one of the best mobile browsing experiences around.1 Developing content or functionality targeted at iPhone (and iPod Touch) users in addition to more typical web channels is a relatively straightforward way to broaden your audience.

the iPhone

photo: John Larsson, Creative Commons license.

Today, companies we talk to often want to take an existing part of their site to the iPhone, or to develop an iPhone-targeted app in conjunction with a new widget or landing page offering. There are a few benefits to doing so:

  • Provide a quick, focused interface to functionality you provide elsewhere
  • Allow your existing users to access your content when they’re not near a desktop
  • Reach out to an entirely new audience

Some of our own data shows that average times spent viewing an iPhone web app (versus, say, a similarly focused widget targeted for desktop browsers) is noticeably lower. This isn’t surprising; in fact, it reinforces one of the things we know about mobile users: they’re less likely to be generous with their time. What’s interesting is that the number of actions a user takes per visit is actually slightly higher on an iPhone app, despite the shorter visit times.

In short, the growing popularity of mobile browsers gives you another opportunity to engage your users.

How should you think about what to build?

A good starting point is to read through the iPhone HIG [Human Interface Guidelines].2 This document is intended as a reference for developers of native iPhone applications, and is a great resource for designers. But there’s plenty to be taken away when conceptualizing your web app as well.

I’d argue that it’s as important to read through the HIG when considering what you’re going to build as it is when designing the specifics of the user experience and interface.

Keep it focused

One great takeaway from the iPhone HIG is to keep your application focused. This is one of those principles that is too often dismissed as obvious, but is of paramount importance when building a mobile app — or, indeed, any web-based widget. It’s also one of the hardest things to keep in mind, especially if you’re trying to adapt an existing web application or site to an iPhone: keep your content and functionality focused. From the HIG:

Before you begin designing your application, it’s essential to define precisely what your application does. …It’s especially important to eliminate those elements that don’t support the product definition statement, because iPhone applications have no room to spare for functionality that isn’t focused on the main task. …Or, to think of it in more concrete terms, Is this information or functionality the user needs while shopping in a store or while walking between meetings?

Facebook on the iPhone

One of the reasons the iPhone-friendly version of Facebook was so immediately popular is that it focused on quick access the core functionality of the site: access to your feeds, status updates, and messages.

Leverage frameworks when it makes sense

Without delving into development strategies, know that a framework like iUI provides a familiar interface to your users and can shorten development times. There are certain cases where this interface is perfect for the task at hand. Our Toys “R” Us iPhone Deals Page is one example — it provides quick, hierarchical access to special deals sourced from a dozen different RSS feeds and a custom CMS.

Keep in mind that customizing iUI for your needs can be as simple as writing a stylesheet to match your design, and creating a custom icon so users can readily identify your web app when bookmarked. (See “Create a Web Clip Bookmark Icon” at Apple’s Designing Content).

In every case, it’ll be worth spending time up front thinking about what your app should do, before you ever consider a single UI questions. Answer the question “What does my application do?” in a short sentence, figure out the audience for that, and then start designing.

[1] Much of what we’re saying about the iPhone here will likely apply to Google’s Android and Palm’s upcoming Mojo as the popularity of phones supporting those frameworks grow.

[2]You’ll have to register for a free account, but even (or especially) if you’re in the conceptualization stages of a mobile app — then the iPhone HIG is worth a read.

{ 0 comments… add one now }

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>