iPhone Human Interface Guidelines
`
`2007-12-11
`
`Petitioner Samsung Ex-1023, 0001
`
`

`

`Microsystems, Inc. in the U.S. and other
`countries.
`Simultaneously published in the United
`States and Canada.
`Even though Apple has reviewed this document,
`APPLE MAKES NO WARRANTY OR
`REPRESENTATION, EITHER EXPRESS OR
`IMPLIED, WITH RESPECT TO THIS
`DOCUMENT, ITS QUALITY, ACCURACY,
`MERCHANTABILITY, OR FITNESS FOR A
`PARTICULAR PURPOSE. AS A RESULT, THIS
`DOCUMENT IS PROVIDED “AS IS,” AND
`YOU, THE READER, ARE ASSUMING THE
`ENTIRE RISK AS TO ITS QUALITY AND
`ACCURACY.
`IN NO EVENT WILL APPLE BE LIABLE FOR
`DIRECT, INDIRECT, SPECIAL, INCIDENTAL,
`OR CONSEQUENTIAL DAMAGES
`RESULTING FROM ANY DEFECT OR
`INACCURACY IN THIS DOCUMENT, even if
`advised of the possibility of such damages.
`THE WARRANTY AND REMEDIES SET
`FORTH ABOVE ARE EXCLUSIVE AND IN
`LIEU OF ALL OTHERS, ORAL OR WRITTEN,
`EXPRESS OR IMPLIED. No Apple dealer, agent,
`or employee is authorized to make any
`modification, extension, or addition to this
`warranty.
`Some states do not allow the exclusion or
`limitation of implied warranties or liability for
`incidental or consequential damages, so the
`above limitation or exclusion may not apply to
`you. This warranty gives you specific legal
`rights, and you may also have other rights which
`vary from state to state.
`
`Apple Inc.
`© 2007 Apple Inc.
`All rights reserved.
`
`No part of this publication may be
`reproduced, stored in a retrieval system, or
`transmitted, in any form or by any means,
`mechanical, electronic, photocopying,
`recording, or otherwise, without prior
`written permission of Apple Inc., with the
`following exceptions: Any person is hereby
`authorized to store documentation on a
`single computer for personal use only and
`to print copies of documentation for
`personal use provided that the
`documentation contains Apple’s copyright
`notice.
`The Apple logo is a trademark of Apple Inc.
`Use of the “keyboard” Apple logo
`(Option-Shift-K) for commercial purposes
`without the prior written consent of Apple
`may constitute trademark infringement and
`unfair competition in violation of federal
`and state laws.
`No licenses, express or implied, are granted
`with respect to any of the technology
`described in this document. Apple retains
`all intellectual property rights associated
`with the technology described in this
`document. This document is intended to
`assist application developers to develop
`applications only for Apple-labeled or
`Apple-licensed computers.
`Every effort has been made to ensure that
`the information in this document is
`accurate. Apple is not responsible for
`typographical errors.
`Apple Inc.
`1 Infinite Loop
`Cupertino, CA 95014
`408-996-1010
`
`Apple, the Apple logo, Aqua, iPod, Mac,
`and Mac OS are trademarks of Apple Inc.,
`registered in the United States and other
`countries.
`iPhone and Safari are trademarks of Apple
`Inc.
`Helvetica is a registered trademark of
`Heidelberger Druckmaschinen AG,
`available from Linotype Library GmbH.
`Java and all Java-based trademarks are
`trademarks or registered trademarks of Sun
`
`Petitioner Samsung Ex-1023, 0002
`
`

`

`Contents
`
`Introduction
`
`Introduction 7
`
`Organization of This Document 7
`See Also 8
`
`Chapter 1
`
`iPhone and the User’s Environment 9
`
`It’s a Browser-Based World 9
`iPhone and Its Place in the User’s World 10
`iPhone as Web Platform 10
`Network Connectivity 11
`Safari on iPhone 11
`The iPhone Viewport 12
`The iPhone User Interaction Model 13
`
`Chapter 2
`
`Content on iPhone: Is It a Webpage or an Application? 15
`
`Types of iPhone Content 15
`Decide How to Position Your Content 16
`Design for Your Users 18
`
`Chapter 3
`
`Principles and Guidelines for Creating Great iPhone Content 21
`
`Simplicity and Ease of Use 21
`Make It Obvious 22
`Avoid Clutter 23
`Minimize Required Input 23
`Express Information Succinctly 24
`Provide Fingertip-Sized Targets 24
`Avoid Unnecessary Interactivity 25
`Focus 25
`Communication 27
`Consistency 28
`Responsiveness 29
`Interoperability 30
`Adaptability 31
`
`2007-12-11 | © 2007 Apple Inc. All Rights Reserved.
`
`3
`
`Petitioner Samsung Ex-1023, 0003
`
`

`

`C O N T E N T S
`
`Chapter 4
`
`Metrics, Layout Guidelines, and Tips 33
`
`Use Custom CSS 33
`Lay Out Content for Safari on iPhone 34
`Consider the List Approach 37
`Edge-to-Edge List Metrics 39
`Rounded-Rectangle List Metrics 40
`Accommodate the Built-in Form Interface 41
`Keyboards 42
`The Pop-up Menu 44
`Create Custom Form Controls 44
`Be Aware of Default Control Styles 45
`Provide a Custom Navigation Solution 47
`Pay Attention to Text 48
`
`Glossary 51
`
`Document Revision History 53
`
`4
`
`2007-12-11 | © 2007 Apple Inc. All Rights Reserved.
`
`Petitioner Samsung Ex-1023, 0004
`
`

`

`Figures and Tables
`
`Chapter 1
`
`iPhone and the User’s Environment 9
`
`Figure 1-1
`Table 1-1
`
`Differences between Safari on iPhone and Safari on the desktop 12
`Gestures users make to interact with iPhone 14
`
`Chapter 2
`
`Content on iPhone: Is It a Webpage or an Application? 15
`
`Figure 2-1
`
`Figure 2-2
`
`Safari on iPhone displays the missing plug-in icon when third-party plug-ins
`are present 16
`The built-in Weather application focuses on a single task 17
`
`Chapter 3
`
`Principles and Guidelines for Creating Great iPhone Content 21
`
`Figure 3-1
`Figure 3-2
`Figure 3-3
`Figure 3-4
`Figure 3-5
`Figure 3-6
`
`The most important information should be the most prominent 22
`The built-in Stopwatch function makes its usage obvious 23
`The built-in Calculator application displays fingertip-sized controls 25
`The built-in Calendar application is focused on days and events 26
`An alert in Safari on iPhone 28
`The controls and list of the built-in World Clock function make it consistent
`with other built-in applications 29
`
`Chapter 4
`
`Metrics, Layout Guidelines, and Tips 33
`
`Figure 4-1
`
`Figure 4-2
`
`Figure 4-3
`Figure 4-4
`Figure 4-5
`Figure 4-6
`Figure 4-7
`
`Figure 4-8
`Figure 4-9
`Figure 4-10
`Figure 4-11
`
`Figure 4-12
`
`The additional trailers controls on the Apple movie trailers webpage when
`viewed in Safari on the desktop 33
`The previous trailers control on the Apple movie trailers webpage when
`viewed in Safari on iPhone 34
`Portrait orientation layout metrics in pixels 35
`Landscape orientation layout metrics in pixels 35
`Setting the width property of a narrow webpage 36
`Setting the width property to display an application correctly 37
`An iPhone application that displays a list of names using the edge-to-edge
`layout 38
`Edge-to-edge list design layout 40
`Rounded-rectangle list design layout 41
`Screen metrics when a keyboard is displayed in portrait orientation 43
`Safari on iPhone displays a scrolling list for pop-up menu style selection
`controls 44
`Default control styles rendered by Safari on iPhone 45
`
`2007-12-11 | © 2007 Apple Inc. All Rights Reserved.
`
`5
`
`Petitioner Samsung Ex-1023, 0005
`
`

`

`F I G U R E S
`
`A N D
`
`T A B L E S
`
`Figure 4-13
`
`Figure 4-14
`Table 4-1
`
`Checkboxes, radio buttons, and selection controls rendered by Safari on iPhone
`have a translucent background by default 47
`Providing a custom navigational control 48
`Values to specify some default form control types 46
`
`6
`
`2007-12-11 | © 2007 Apple Inc. All Rights Reserved.
`
`Petitioner Samsung Ex-1023, 0006
`
`

`

`I N T R O D U C T I O N
`
`Introduction
`
`Apple’s iPhone presents a revolutionary user interface and interaction model. Users can view webpages,
`use web applications, and use built-in iPhone features, such as the email application, the iPod, and
`the digital camera, wherever they go. Safari on iPhone, a unique implementation of Safari, is the
`application users use to browse the web on both iPhone and iPod touch.
`
`Note: Safari on iPhone behaves the same on iPhone and iPod touch except when users tap links to
`iPhone-only applications. See Using iPhone Application Links in Safari Web Content Guide for iPhone
`for more information about links that behave differently on iPod touch.
`
`This document introduces you to the iPhone environment and how it shapes the user experience of
`iPhone content. Then, it explains how to design a superlative user interface for your web content so
`it displays and works well on iPhone. It does this by first examining different types of iPhone content
`and exploring how you can decide which type to create. It then discusses how to apply user interface
`design principles to iPhone content, and finally provides numerous metrics and guidelines to help
`you handle specific design issues. For the implementation details and guidance you need to write
`the code for your iPhone product, see the “See Also” section below.
`
`Note: Currently, developers create web applications for iPhone, not native applications. Therefore,
`this document focuses solely on the presentation of web applications and other web content on iPhone.
`
`Whether you’re an experienced web content developer or an application developer unfamiliar with
`web content creation, you should read this document to find out what users expect of iPhone content
`and how to design content that exceeds those expectations.
`
`If you have user interface development experience, you might be tempted to skip the sections on
`human interface design principles and desirable application characteristics. Although your prior
`knowledge of these topics is extremely useful, you’re encouraged to read these sections to learn how
`to apply your experience to the design of iPhone content.
`
`Organization of This Document
`
`iPhone Human Interface Guidelines contains the following chapters:
`
`Organization of This Document
`2007-12-11 | © 2007 Apple Inc. All Rights Reserved.
`
`7
`
`Petitioner Samsung Ex-1023, 0007
`
`

`

`I N T R O D U C T I O N
`Introduction
`
` ■
`
` ■
`
` ■
`
` ■
`
`“iPhone and the User’s Environment” (page 9) introduces iPhone and describes how the user’s
`environment influences the design and usage of iPhone content. This chapter also describes
`features of the iPhone user interface that have a bearing on the design of iPhone content.
`“Content on iPhone: Is It a Webpage or an Application?” (page 15) defines the different types of
`iPhone content you can develop and how that influences what you decide to do with your existing
`content. It also discusses how to define your user audience so you can customize your user
`experience and user interface design.
`“Principles and Guidelines for Creating Great iPhone Content” (page 21) covers the principles
`of human interface design as they apply to iPhone content and provides guidelines to help you
`realize these principles in your design.
`“Metrics, Layout Guidelines, and Tips” (page 33) presents layout and user interface metrics and
`tips you should use as you develop an iPhone application or webpage.
`
`At the end of the document is a glossary that defines iPhone and web-application development terms;
`see “Glossary” (page 51).
`
`See Also
`
`To learn how to implement your design in code, begin by reading:
`
` ■ Getting Started with iPhone
`Safari Web Content Guide for iPhone
`
` ■
`
`In addition, Apple provides several other detailed conceptual and reference documents that describe
`how to use web technologies to develop your iPhone content. The two documents listed above contain
`references to these documents.
`
`8
`
`See Also
`2007-12-11 | © 2007 Apple Inc. All Rights Reserved.
`
`Petitioner Samsung Ex-1023, 0008
`
`

`

`C H A P T E R
`
`1
`
`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,
`
`It’s a Browser-Based World
`2007-12-11 | © 2007 Apple Inc. All Rights Reserved.
`
`9
`
`Petitioner Samsung Ex-1023, 0009
`
`

`

`1
`C H A P T E R
`iPhone and the User’s Environment
`
`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” (page 21).
`
`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” in Safari Web Content Guide
`for iPhone). 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.
`
`10
`
`iPhone and Its Place in the User’s World
`2007-12-11 | © 2007 Apple Inc. All Rights Reserved.
`
`Petitioner Samsung Ex-1023, 0010
`
`

`

`1
`C H A P T E R
`iPhone and the User’s Environment
`
`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 for
`iPhone.
`
`Network Connectivity
`
`iPhone connects to either an available Wi-Fi network, which can be very fast, or the EDGE network,
`which is slower. 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
`in Safari Web Content Guide for iPhone 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 all 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 in Safari Web Content Guide for iPhone.
`
`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
`
`iPhone as Web Platform
`2007-12-11 | © 2007 Apple Inc. All Rights Reserved.
`
`11
`
`Petitioner Samsung Ex-1023, 0011
`
`

`

`1
`C H A P T E R
`iPhone and the User’s Environment
`
`in your content (“The iPhone User Interaction Model” (page 13) describes the touch-based interface
`of iPhone). For more information on the events Safari on iPhone generates, see Handling Events
`in Safari Web Content Guide for iPhone.
`
`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 in Safari
`Web Content Guide for iPhone.
`
`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.
`
`Figure 1-1
`
`Differences between Safari on iPhone and Safari on the desktop
`
`12
`
`iPhone as Web Platform
`2007-12-11 | © 2007 Apple Inc. All Rights Reserved.
`
`Petitioner Samsung Ex-1023, 0012
`
`

`

`1
`C H A P T E R
`iPhone and the User’s Environment
`
`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” (page 34) provides an introduction to configuring the viewport; Configuring
`the Viewport in Safari Web Content Guide for iPhone 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 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
`applications are defined, see “Content on iPhone: Is It a Webpage or an Application?” (page 15).
`
`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” (page
`33).
`
`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
`
`The iPhone User Interaction Model
`2007-12-11 | © 2007 Apple Inc. All Rights Reserved.
`
`13
`
`Petitioner Samsung Ex-1023, 0013
`
`

`

`1
`C H A P T E R
`iPhone and the User’s Environment
`
`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 in Safari Web Content
`Guide for iPhone.
`
`Table 1-1
`
`Gestures users make to interact with iPhone
`
`Gesture
`
`Action
`
`Tap
`
`Double tap
`
`To press or select a control or link (analogous to a single mouse click).
`You receive the onclick event for this gesture.
`
`To zoom in and center a block of content or an image.
`To zoom out (if already zoomed in).
`
`Flick
`
`Drag
`
`To scroll or pan quickly.
`
`To move the viewport or pan.
`
`Pinch open
`
`To zoom in.
`
`Pinch close
`
`To zoom out.
`
`Touch and hold
`
`To display an information bubble, magnify content under the finger, or perform
`specific actions in built-in iPhone applications and features.
`
`Two-finger scroll
`
`To scroll up or down within a text area, an inline frame, or an element with
`overflow capability, depending on the direction of the movement.
`You can receive a mousewheel event for this gesture.
`
`14
`
`The iPhone User Interaction Model
`2007-12-11 | © 2007 Apple Inc. All Rights Reserved.
`
`Petitioner Samsung Ex-1023, 0014
`
`

`

`C H A P T E R
`
`2
`
`Content on iPhone: Is It a Webpage or an
`Application?
`
`As you prepare your web content to display successfully on iPhone, you face a decision. Should you
`modify your webpage (if necessary) so that it looks great on iPhone or create an iPhone application?
`Before you make this decision, you need to understand what distinguishes a webpage and an iPhone
`application. This chapter defines three types of third-party content that users can access on iPhone
`and outlines some of the steps you take to develop them.
`
`You should read this chapter if you’re considering how to display your web content on iPhone. After
`you decide what type of iPhone content you want to deliver, be sure to read “Design for Your
`Users” (page 18) to gain insight into this first important step in the user experience and user interface
`design process.
`
`Types of iPhone Content
`
`When is a webpage an iPhone application? It may be that the best answer is “when the user thinks it
`is.“ But when it comes to design and development and the choice of appropriate metrics, guidelines,
`and techniques, that answer isn’t very helpful. In a document that provides material help to developers,
`such as this one, definitions are required for clarity and disambiguation, even if they might seem a
`bit arbitrary.
`
`As described in “Safari on iPhone” (page 11), Safari on iPhone provides the interface for all web
`content on iPhone. Not surprisingly, therefore, the way a webpage works in Safari on iPhone
`determines how the page is defined.
`
`This document distinguishes three types of webpage. The first type is a W3C (World Wide Web
`Consortium)–compliant webpage in which all elements display and operate as designed, with the
`exception of any elements that rely on unsupported technologies, in particular, plug-ins, Flash, or
`Java. This type of webpage is referred to in this document as compatible with Safari on iPhone.
`Webpages that are compatible with Safari on iPhone display successfully on iPhone, even if some
`content is missing or the missing plug-in icon is displayed (Figure 2-1 shows this icon). However, the
`user interface of a webpage that is compatible with Safari on iPhone does not necessarily take into
`account the iPhone user interaction model (described in “The iPhone User Interaction Model” (page
`13)) and may require users to pan and zoom extensively.
`
`Types of iPhone Content
`2007-12-11 | © 2007 Apple Inc. All Rights Reserved.
`
`15
`
`Petitioner Samsung Ex-1023, 0015
`
`

`

`2
`C H A P T E R
`Content on iPhone: Is It a Webpage or an Application?
`
`Figure 2-1
`
`Safari on iPhone displays the missing plug-in icon when third-party plug-ins are present
`
`The second type of webpage is a W3C compliant–webpage that displays and operates as designed,
`correctly scales content for the iPhone screen, and has no elements that rely on unsupported
`technologies, in particular, plug-ins, Flash, or Java. Often, this type of webpage is designed to detect
`when it is being viewed on iPhone and adjusts the content it provides accordingly. This document
`refers to this type of webpage as optimized for Safari on iPhone. Webpages that are optimized for
`Safari on iPhone may integrate with built-in iPhone features and services, such as email and phone,
`where appropriate.
`
`In addition to meeting the requirements for a webpage that is optimized for Safari on iPhone, the
`third type of webpage provides discrete functionality to users and is often implemented using modern
`web technologies, such as AJAX. This type of webpage is referred to in this document as an iPhone
`application. An iPhone application emulates built-in iPhone applications by providing a focused
`solution to users, integrating with iPhone features and services where appropriate, and minimizing
`the user’s awareness of the browser experience.
`
`Even though, at the implementation level, all three types of iPhone content are webpages, it’s helpful
`to be able to discuss an iPhone application as something different from a webpage that is compatible
`with, or optimized for, Safari on iPhone. This is because users have expectations of an application
`that are different from those they have of a webpage, which means that some user experience and
`user interface design guidelines are better suited to an application than they are to a webpage.
`
`Decide How to Position Your Content
`
`If you followed standard website design and implementation best practices when you developed
`your web content, it’s likely that your content is at least compatible with Safari on iPhone. Now, you
`need to decide if you want to optimize your webpages for Safari on iPhone or use your content to
`create an iPhone application. To help you make this decision, this section elaborates on the main
`attributes of an iPhone application, as defined in “Types of iPhone Content” (page 15).
`
`Most importantly, an iPhone application provides a focused solution to a well-defined problem: Users
`prefer an application that performs one task perfectly to an application that tries to perform many
`tasks but excels at none of them. This is especially true for iPhone applications, because users expect
`to accomplish things quickly on iPhone and they don’t want to waste time either figuring out what
`an application does or wading through unnecessary functionality. For example, the built-in Weather
`application (shown in Figure 2-2) displays a focused, easy-to-understand answer to the question
`“What's the weather forecast for my chosen location?“.
`
`16
`
`Decide How to Position Your Content
`2007-12-11 | © 2007 Apple Inc. All Rights Reserved.
`
`Petitioner Samsung Ex-1023, 0016
`
`

`

`2
`C H A P T E R
`Content on iPhone: Is It a Webpage or an Application?
`
`Figure 2-2
`
`The built-in Weather application focuses on a single task
`
`If you can easily identify the primary task your webpage performs, you shou