iPhone and the User’s Environment

Apple’s iPhone introduces a revolutionary platform for your web content. With an innovative user interaction model and exceptional interoperability, iPhone offers significant new opportunities and a few unique challenges to web content developers.

The goal of this chapter is to orient you to the iPhone platform and properly set your web-development expectations. To do this, this chapter describes how the environment in which users use iPhone, combined with iPhone features and infrastructure, influences your design decisions.

It’s a Browser-Based World

Obviously, users use and perceive iPhone very differently than they do a desktop or even a laptop computer. This may seem like an unnecessary statement, but it is an observation that is crucial to keep in mind as you create content for iPhone, especially if you’re an experienced application developer. This is because you may have to work to shift your perspective away from a computer-centric world view, even if your expertise lies in web content creation. It’s essential to keep in mind, for example, that instead of the layered windows, desktop, mouse, and file system with which you’re familiar, iPhone has a small, fixed screen size, a browser interface supplied by Safari on iPhone, a touch-based input system, and no accessible file system.

Regardless of these differences in platform, however, your main goal as a web content developer is the same: to capture users’ imagination and earn their loyalty with a solution that is functional, focused, and enjoyable to use.

iPhone users are accepting of, and even anticipating, an experience different from the one they are accustomed to on a desktop computer, a laptop, or even a mobile phone. Although this affords you a certain latitude for experimentation, be aware that iPhone users are likely to be even less tolerant of sluggish performance and a complicated user interface than they are when it comes to software running in a computer. In addition, users quickly become accustomed to the elegant, functional, and streamlined user interface of the built-in applications and features, which sets a standard by which they’re apt to judge other content.

There are, of course, similarities between the computer and iPhone environments, too. The most notable similarity, from the perspective of user experience and the user interface, is that most of the characteristics that define great computer applications also define great iPhone webpages and applications, whether built-in or external. Qualities such as responsiveness, simplicity, ease of use, and consistency are at least as important in iPhone content as they are in computer applications. To learn more about these qualities and how to build them into your web content, see “Principles and Guidelines for Creating Great iPhone Content.”

Other similarities are evident at the content implementation level. Accepted best practices for website design and implementation are wholly applicable to iPhone content design and implementation (for an overview of these guidelines, see “Creating Compatible Web Content”). If you’re in the habit of following web design best practices when you target desktop browsers, you’re well on your way to creating content that displays well on iPhone. Following the user experience and user interface guidelines in the rest of this document will help you build on that expertise so you can create best-in-class iPhone content.

Ultimately, iPhone users may determine additional qualities that characterize the most successful iPhone products. As iPhone content evolves and you discover new ways to provide functionality to users, new best practices will emerge.

iPhone and Its Place in the User’s World

Almost by definition, users use iPhone while they are mobile. Whether they’re in a car or a train, sitting in a cafe or on a park bench, taking a walk, shopping, or waiting for an appointment, users use iPhone in environments that are likely to be filled with distractions. This does not mean that your iPhone solution can’t or shouldn’t perform important tasks that require users to concentrate. But it does mean that you must be prepared for the probability that users will not be giving their undivided attention to your content, at least not for long.

Above all, therefore, your iPhone content must be quick and extremely easy to use. You need to grab the user’s attention immediately and help them access the most valuable parts of your content quickly.

Users not only use iPhone differently, they also feel differently about it. For example, users have a much more personal relationship with iPhone than they have with their computer and this influences which user experience characteristics are most important. One aspect of this bond is the fact that iPhone is a small device that can accompany users wherever they go. This view encourages the development of a broad range of products that provide quick, easy access to things users need and want no matter where they are, such as shopping lists, movie reviews, maps and directions, email, and games.

The user interaction model also informs content design. Because there is no external physical device that comes between the user and iPhone, the user interface of iPhone content must be especially streamlined and inviting.

iPhone as Web Platform

Although iPhone combines camera, phone, iPod, and email functionality, as far as your web content is concerned iPhone is a mobile web platform on which users view your webpage or use your web application. How users access web content, using iPhone network connectivity, browser capabilities, and the view screen, has a significant impact on both the behavior of your web content and users’ perception of it.

The following sections briefly describe these parts of the iPhone web infrastructure, emphasizing how each part influences the design of your web content. For details on how to implement your webpage or web application to work well with this infrastructure, see Safari Web Content Guide.

Network Connectivity

iPhone connects to either an available Wi-Fi network or to a cellular network. As users move about, iPhone automatically switches to the service currently available to provide the fastest possible connection speed.

As you design your web content, you should keep the adaptable connectivity of iPhone in mind. You can’t predict what connection speeds users have at a given moment or know when iPhone switches from one network to another, so your content should be designed to work well at any connection speed. And when you optimize your content to be responsive at the slowest connection speed, users enjoy even better performance at higher connection speeds. See “Creating Compatible Web Content” for some specific optimization techniques you can use to enhance the performance and responsiveness of your iPhone content.

Safari on iPhone

Safari on iPhone provides the interface for browsing web content on iPhone. Although Safari on iPhone is similar in many ways to Safari on the computer desktop, it is not the same. You need to work within the feature set Safari on iPhone makes available and provide workarounds if you typically use Safari features available on the desktop that are unavailable on iPhone. For information on all the differences between Safari on iPhone and Safari on the desktop and how to accommodate them, see “Creating Compatible Web Content”.

Most Safari on iPhone features influence the implementation of your web content, but some have an impact on the design of your user interface. The following list describes those features you should keep in mind as you design the user experience and user interface of your web content.

• Safari on iPhone supports cookies.

  This means that you can use cookies to save the user’s context, preferences, and previously entered data, which can streamline the user’s interaction with your content by minimizing the amount of information users must supply.

• Safari on iPhone does not support Flash or Java (including Java applets) in iPhone content.

  In particular, be sure you avoid recommending that users download the latest Flash to their iPhone because neither Flash nor file downloads are supported by Safari on iPhone. Because of this constraint, the user interface of your web content should not rely on Flash animation to communicate with users.

• Safari on iPhone interprets most of the user‚Äôs finger movements as targeting the way iPhone displays your content, not the content itself.

  The main exception to this is the tap, which is analogous to a single mouse click, and which can cause Safari on iPhone to send the onclick event to your webpage. As you design your user interface, keep in mind that the users should be able to use a tap to access and drive all functionality in your content (‚ÄúThe iPhone User Interaction Model‚Äù describes the touch-based interface of iPhone). For more information on the events Safari on iPhone generates, see ‚ÄúHandling Events‚Äù.

Currently, Safari on iPhone does not support third party plug-ins. For a complete list of web technologies that Safari on iPhone does not support, see “Creating Compatible Web Content”.

The iPhone Viewport

For Safari on iPhone, the viewport is a rectangular area that determines how content is laid out and where text wraps on a webpage. On the desktop, the viewport is defined by the size of the browser window. Users resize the viewport on the desktop by resizing the window and they scroll to see more of the webpage, if necessary. But Safari on iPhone does not have resizable windows, so there are no scroll bars or resize controls. Figure 1-1 shows how the viewport differs between Safari on iPhone and Safari on the desktop.

As you design the user experience and user interface of your webpage, it’s important to remember that iPhone users can change the scale of the viewport by zooming in and out, but not the size. The only exception to this is that when users change iPhone from portrait to landscape orientation, the viewport size changes. Under certain circumstances, Safari on iPhone may adjust the viewport width and change the webpage layout. Note that you can set the viewport size and other properties to improve the presentation of your webpage the first time it is rendered on iPhone. “Lay Out Content for Safari on iPhone” provides an introduction to configuring the viewport; “Configuring the Viewport” provides implementation details.

When iPhone users pan or scroll to see more of a webpage, a gray bar appears at the right side or bottom of the iPhone screen to give a visual indication of how much more of the webpage there is to see. Although this is similar to the way the size of a scroller on the desktop indicates how much of the content is hidden, the gray bars Safari on iPhone displays are indicators only; they cannot be dragged.

For webpages, there’s nothing wrong with expecting users to zoom in to read text, but there are things you can do to make the zoom effective, such as presenting your text in relatively narrow columns of small, easily digestible blocks. This allows users to avoid panning back and forth to read long lines of text. For example, most online newspaper websites are designed to mimic the easy-to-read column layout used on paper, and this translates very well to iPhone.

For a webpage that is intended to behave as an iPhone web application, however, you should avoid requiring users to zoom in at all, because it impedes access to your content and weakens the perception of the webpage as a standalone application. To learn about how webpages on iPhone and iPhone web applications are defined, see “Content on iPhone: Is It a Webpage or an Application?.”

The iPhone User Interaction Model

Users use their fingers to operate the iPhone user interface, tapping, flicking, and pinching to select, navigate, and read web content and use built-in applications. There are real advantages to using fingers to operate a device: They are always available, they are capable of many different movements, and they give users a sense of immediacy and connection to the device that’s impossible to achieve with an external input device, such as a mouse.

However, fingers have one major disadvantage: They are much bigger than a mouse pointer, regardless of their size, their shape, or the dexterity of their owner. In the context of a display screen, fingers can never be as precise as a mouse pointer. Additionally, there are some actions users can take with the combination of a mouse and keyboard that are difficult to replicate using fingers alone, such as text selection, drag-and-drop operations, and cut, copy, and paste actions.

Fortunately, you can meet the challenges of a finger-based input system by good user interface design. For the most part, this means making sure your layout accommodates the average size of a fingertip and finding alternatives to drag-and-drop and cut, copy, and paste. For specific guidelines on how to lay out your user interface to make it easy to use, see “Metrics, Layout Guidelines, and Tips.”

iPhone users perform specific movements, called gestures, to get particular results. Table 1-1 lists the gestures users can perform. It’s vital to realize, however, that you do not receive an event for most of these gestures. Instead, the majority of these gestures are interpreted by Safari on iPhone and applied to the way iPhone displays content, instead of being passed directly to your content. For more information on how to handle events created on iPhone, see “Handling Events”.

---