Screen Layout: Emulating Apple Design in iPhone Safari Web Pages

Screen Layout: Emulating Apple Design

By the time you have studied and evaluated the UI design of the built-in applications, you can begin to determine what parallels may exist with the type of application in which you are building.

For applications that need to use a navigation list design, download one of the frameworks that I discussed back in Chapter 3, “Building with Web App Frameworks” [of the book "Safari and WebKit Development for iPhone OS 3.0" by Richard Wagner (ISBN: 978-0-470-54966-7, Wrox, 2009, Copyright John Wiley & Sons, Inc.] Each of these enables you to easily implement edge-to-edge navigation list–based applications.

• iWebKit
• iUI
• UiUIKIT

The four components of a typical iPhone application are a title bar, a navigation list, a destination page, and a button bar.

The Title Bar

Most iPhone Web applications will want to include a title bar to emulate the look of the standard title bar available in nearly all native iPhone applications. When the URL bar is hidden, the custom title bar appears just below the status bar at the top of the viewport (see Figure 4-10).

The title bar includes the following elements:

• Back button: A Back button should be placed on the left side of the toolbar to allow the user to return to the previous page. The name of the button should be the same as the title of the previous screen. This “bread crumbs” technique lets users know how they got to the page and how to get back. If the page is at the top level of the application, remove the Back button completely.

• Screen title: Each screen should have a title displayed in the center of the toolbar. The title of the page should be one word and appropriately describe the content of the current screen. You will not want to include the application name in each screen title of the application, as you will for a standard Web application.

• Command button: For some screens, you will want to employ a common command, such as Cancel, Edit, Search, or Done. If you need this functionality, place a command button at the top right of the title bar.

Figure 4-10: Title bar

Edge-to-Edge Navigation Lists

If your application aggregates or organizes lists of information, you will typically want your UI to emulate iPhone’s edge-to-edge navigation list design, as shown in Figure 4-11. Each of the cells, or subsections, is extra large to allow for easy touch input. In addition, to ensure that users never lose context and get lost, the title shows the current page, while a Back button indicates the screen to which users can return if they choose. And, when a list item expands to a destination page or another list, an arrow is placed on the right side indicating a next page is available to the right.

Figure 4-11: Emulating Apple’s edge-to-edge navigation design

When a list item is selected, the navigation list should emulate Apple’s slide-in animation, appearing as if the new page is coming in from the right side of the screen, replacing the old.

Table 4-4 lists each of the specific metrics to emulate the same look and feel of the Apple design in edge-to-edge navigation lists. Note that iUI defines navigation lists based on these specifications and implements the slide-in animation effect.

Table 4-4: Metrics for Apple’s Edge-to-Edge Design

Rounded Rectangle Design Destination Pages

In a navigation list UI design, users will ultimately wind up at a destination page that provides a full listing of the specific piece of information in which they were looking. Apple implements a rounded rectangle design, as shown in Figure 4-12. Labels are displayed on a blue background, while items are grouped logically and surrounded by a rounded rectangle box. Table 4-5 describes the specifications you should follow to implement this Apple design.

Figure 4-12: Implement rounded rectangle design for destination pages

Table 4-5: Metrics for Apple’s Rounded Rectangle Design

This article is excerpted from chapter 4 "Designing a Usable and Navigable UI" of the book "Safari and WebKit Development for iPhone OS 3.0" by Richard Wagner (ISBN: 978-0-470-54966-7, Wrox, 2009, Copyright Wiley Publishing Inc.)