Touch screen device, method and graphic user interface for determining commands by applying heuristics - Patents.com

Abstract

To provide a hyperopia device and a method for determining commands by applying heuristics to user gestures detected on a touch screen display.SOLUTION: A method comprises the steps of: detecting one or more finger contacts with a touch screen display; applying one or more heuristics to the one or more finger contacts to determine a command for a device; and processing the command. The one or more heuristics include: a heuristic for determining that the one or more finger contacts correspond to a one-dimensional vertical screen scrolling command; a heuristic for determining that the one or more finger contacts correspond to a two-dimensional screen translation command; and a heuristic for determining that the one or more finger contacts correspond to a command to transition from displaying a respective item in a set of items to displaying a next item in the set of items.SELECTED DRAWING: Figure 1A

Description

[Technical Field]

[0001] The disclosed embodiments relate generally to electronic devices with touchscreen displays, and more particularly to electronic devices that apply heuristics to user gestures detected on a touchscreen display to determine commands. [Background technology]

[0002] As portable electronic devices become more compact and the number of functions performed on a given device increases, designing user interfaces that allow users to easily interact with multifunction devices presents a significant challenge. This challenge is especially significant for handheld portable devices, which have much smaller screens than desktop and laptop computers. This situation is disadvantageous because the user interface is the gateway through which the user not only receives content but also receives responses to the user's actions or behaviors, including the user's attempts to access the device's features, tools, and functions. Some portable communication devices (e.g., mobile telephones, sometimes referred to as mobile phones, cell phones, cellular telephones, etc.) rely on adding more pushbuttons, increasing pushbutton density, overloading pushbutton functions, or using complex menu systems to allow users to access, store, and manipulate data. These conventional user interfaces often result in complex key sequences and menu hierarchies that users must memorize.

[0003] Many conventional user interfaces, such as those that include physical push buttons, are also inflexible, which can prevent the user interface from being configured and / or adapted by the user or the applications running on the portable device. When combined with the time-consuming requirement to memorize numerous key sequences and menu hierarchies and the difficulty of operating the desired push button, this inflexibility can be frustrating for most users.

[0004] To avoid the problems associated with push buttons and complex menu systems, portable electronic devices can use touchscreen displays that detect a user's gestures on the touchscreen and translate the detected gestures into commands to be performed. However, a user's gestures can be imprecise, and a particular gesture may only approximately correspond to a desired command. Other devices with touchscreen displays, such as desktop computers with touchscreen displays, also have difficulty translating imprecise gestures into desired commands. Summary of the Invention [Problem to be solved by the invention]

[0005] Therefore, there is a need for touchscreen display electronic devices with a more transparent and intuitive user interface for translating imprecise user gestures into precise intended commands that are easy to use, configure, and / or adapt. Such an interface would increase the effectiveness, efficiency, and user satisfaction with portable multifunction devices. [Means for solving the problem]

[0006] The above-mentioned drawbacks and other problems associated with user interfaces for portable and touchscreen devices are reduced or eliminated by the multifunction device disclosed herein. In some embodiments, the device is portable. In some embodiments, the device has a touch-sensitive display (also known as a "touchscreen") with a graphical user interface (GUI), one or more processors, memory, and one or more modules, programs, or instruction sets stored in the memory for performing a number of functions. In some embodiments, a user interacts with the GUI primarily through finger contacts and gestures on the touch-sensitive display. In some embodiments, the functions may include phone calls, video conferencing, email, instant messaging, blogging, digital photography, digital video, web browsing, digital music playback, and / or digital video playback. Instructions for performing these functions may be contained on a computer-readable storage medium or other computer program product configured to execute on one or more processors.

[0007] In one aspect of the invention, a computer-implemented method for use in connection with a computing device with a touchscreen display includes detecting one or more finger contacts with the touchscreen display, applying one or more heuristics to the one or more finger contacts to determine a command for the device, and processing the command, the one or more heuristics including a heuristic for determining that the one or more finger contacts correspond to a one-dimensional vertical screen scrolling command, a heuristic for determining that the one or more finger contacts correspond to a two-dimensional screen translation command, and a heuristic for determining that the one or more finger contacts correspond to a command to transition from displaying a first item in a set of items to displaying a next item in the set of items.

[0008] In another aspect of the invention, a computer-implemented method is performed on a computing device with a touchscreen display. While displaying a web browser application, one or more first finger contacts with the touchscreen display are detected, a first set of heuristics for the web browser application are applied to the one or more first finger contacts to determine a first command for the device, and the first command is processed. The first set of heuristics includes a heuristic for determining that the one or more first finger contacts correspond to a one-dimensional vertical screen scrolling command, a heuristic for determining that the one or more first finger contacts correspond to a two-dimensional screen translation command, and a heuristic for determining that the one or more first finger contacts correspond to a one-dimensional horizontal screen scrolling command. While displaying a photo album application, one or more second finger contacts with the touchscreen display are detected, and a second set of heuristics for the photo album application are applied to the one or more second finger contacts to determine a second command for the device, and the second command is processed. The second set of heuristics includes a heuristic for determining that one or more second finger contacts correspond to a command to transition from displaying a first image in the set of images to displaying a next image in the set of images, and a heuristic for determining that one or more second finger contacts correspond to a command to transition from displaying a first image in the set of images to displaying an earlier image in the set of images.

[0009] In another aspect of the invention, a computing device includes a touchscreen display, one or more processors, a memory, and a program stored in the memory and configured to be executed by the one or more processors. The program includes instructions for detecting one or more finger contacts with the touchscreen display, instructions for applying one or more heuristics to the one or more finger contacts to determine a command for the device, and instructions for processing the command. The one or more heuristics include a heuristic for determining that the one or more finger contacts correspond to a one-dimensional vertical screen scrolling command, a heuristic for determining that the one or more finger contacts correspond to a two-dimensional screen translation command, and a heuristic for determining that the one or more finger contacts correspond to a command to transition from displaying a first item in an item set to displaying a next item in the item set.

[0010] In another aspect of the invention, a computing device includes a touchscreen display, one or more processors, a memory, and one or more programs stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for detecting one or more first finger contacts with the touchscreen display while displaying a web browser application, instructions for applying a first set of heuristics for the web browser application to the one or more first finger contacts to determine a first command for the device, instructions for processing the first command, instructions for detecting one or more second finger contacts with the touchscreen display while displaying a photo album application, instructions for applying a second set of heuristics for the photo album application to the one or more second finger contacts to determine a second command for the device, and instructions for processing the second command. The first set of heuristics includes a heuristic for determining that the one or more first finger contacts correspond to a one-dimensional vertical screen scrolling command, a heuristic for determining that the one or more first finger contacts correspond to a two-dimensional screen translation command, and a heuristic for determining that the one or more first finger contacts correspond to a one-dimensional horizontal screen scrolling command. The second set of heuristics includes a heuristic for determining that the one or more second finger contacts correspond to a command to transition from displaying a first image in the set of images to displaying a next image in the set of images, and a heuristic for determining that the one or more second finger contacts correspond to a command to transition from displaying a first image in the set of images to displaying a previous image in the set of images.

[0011] In another aspect of the invention, a computer program product includes a computer-readable storage medium and a computer program mechanism (e.g., one or more computer programs) embodied therein. The computer program mechanism includes instructions that, when executed by a computing device with a touchscreen display, cause the device to detect one or more finger contacts with the touchscreen display and apply one or more heuristics to the one or more finger contacts to determine a command for the device and process the command. The one or more heuristics include a heuristic for determining that the one or more finger contacts correspond to a one-dimensional vertical screen scrolling command, a heuristic for determining that the one or more finger contacts correspond to a two-dimensional screen translation command, and a heuristic for determining that the one or more finger contacts correspond to a command to transition from displaying a first item in a set of items to displaying a next item in the set of items.

[0012] In another aspect of the invention, a computer program product includes a computer-readable storage medium and a computer program mechanism (e.g., one or more computer programs) embedded therein. The computer program mechanism includes instructions that, when executed by a computing device with a touchscreen display, cause the device to: detect one or more first finger contacts with the touchscreen display while displaying a web browser application, apply a first set of heuristics for the web browser application to the one or more first finger contacts to determine a first command for the device and process the first command, and detect one or more second finger contacts with the touchscreen display while displaying a photo album application, apply a second set of heuristics for the photo album application to the one or more second finger contacts to determine a second command for the device and process the second command. The first set of heuristics includes a heuristic for determining that the one or more first finger contacts correspond to a one-dimensional vertical screen scrolling command, a heuristic for determining that the one or more first finger contacts correspond to a two-dimensional screen translation command, and a heuristic for determining that the one or more first finger contacts correspond to a one-dimensional horizontal screen scrolling command. The second set of heuristics includes a heuristic for determining that one or more second finger contacts correspond to a command to transition from displaying a first image in the set of images to displaying a next image in the set of images, and a heuristic for determining that one or more second finger contacts correspond to a command to transition from displaying a first image in the set of images to displaying an earlier image in the set of images.

[0013] In another aspect of the invention, a computing device with a touchscreen display includes means for detecting one or more finger contacts with the touchscreen display, means for applying one or more heuristics to the one or more finger contacts to determine a command for the device, and means for processing the command, the one or more heuristics including a heuristic for determining that the one or more finger contacts correspond to a one-dimensional vertical screen scrolling command, a heuristic for determining that the one or more finger contacts correspond to a two-dimensional screen translation command, and a heuristic for determining that the one or more finger contacts correspond to a command to transition from displaying a first item in a set of items to displaying a next item in the set of items.

[0014] In another aspect of the invention, a computing device with a touchscreen display includes means for detecting one or more first finger contacts with the touchscreen display while displaying a web browser application, means for applying a first set of heuristics for the web browser application to the one or more first finger contacts to determine a first command for the device, and means for processing the first command, means for detecting one or more second finger contacts with the touchscreen display while displaying a photo album application, means for applying a second set of heuristics for the photo album application to the one or more second finger contacts to determine a second command for the device, and means for processing the second command, wherein the first set of heuristics includes a heuristic for determining that the one or more first finger contacts correspond to a one-dimensional vertical screen scrolling command, a heuristic for determining that the one or more first finger contacts correspond to a two-dimensional screen translation command, and a heuristic for determining that the one or more first finger contacts correspond to a one-dimensional horizontal screen scrolling command. The second set of heuristics includes a heuristic for determining that one or more second finger contacts correspond to a command to transition from displaying a first image in the set of images to displaying a next image in the set of images, and a heuristic for determining that one or more second finger contacts correspond to a command to transition from displaying a first image in the set of images to displaying an earlier image in the set of images.

[0015] The heuristics disclosed herein allow electronic devices with touchscreen displays to behave in the manner desired by a user despite inaccurate input by the user.

[0016] For a better understanding of the above-described and additional embodiments of the present invention, embodiments will now be described in detail with reference to the accompanying drawings, in which like reference numerals designate corresponding parts throughout the drawings. [Brief explanation of the drawings]

[0017] [Figure 1A] FIG. 1 is a block diagram illustrating a portable multifunction device with a touch-sensitive display in accordance with some embodiments. [Figure 1B] FIG. 1 is a block diagram illustrating a portable multifunction device with a touch-sensitive display in accordance with some embodiments. [Figure 2] FIG. 1 illustrates a portable multifunction device with a touch screen according to some embodiments. [Figure 3A] FIG. 10 illustrates an example user interface for unlocking a portable electronic device in accordance with some embodiments. [Figure 3B] FIG. 10 illustrates an example user interface for unlocking a portable electronic device in accordance with some embodiments. [Figure 3C] FIG. 10 illustrates an example user interface for unlocking a portable electronic device in accordance with some embodiments. [Figure 4A] 10A-10C illustrate example user interfaces for a menu of applications on a portable multifunction device in accordance with some embodiments. [Figure 4B] 10A-10C illustrate example user interfaces for a menu of applications on a portable multifunction device in accordance with some embodiments. [Figure 5] 10A-10C illustrate example user interfaces for listing instant message conversations on a portable multifunction device in accordance with some embodiments. [Figure 6A] FIG. 2 illustrates an example user interface for entering text for an instant message according to one embodiment. [Figure 6B] FIG. 2 illustrates an example user interface for entering text for an instant message according to one embodiment. [Figure 6C]FIG. 2 illustrates an example user interface for entering text for an instant message according to one embodiment. [Figure 6D] FIG. 2 illustrates an example user interface for entering text for an instant message according to one embodiment. [Figure 6E] FIG. 2 illustrates an example user interface for entering text for an instant message according to one embodiment. [Figure 6F] FIG. 2 illustrates an example user interface for entering text for an instant message according to one embodiment. [Figure 6G] FIG. 2 illustrates an example user interface for entering text for an instant message according to one embodiment. [Figure 6H] FIG. 2 illustrates an example user interface for entering text for an instant message according to one embodiment. [Figure 6I] FIG. 2 illustrates an example user interface for entering text for an instant message according to one embodiment. [Figure 6J] FIG. 2 illustrates an example user interface for entering text for an instant message according to one embodiment. [Figure 6K] FIG. 2 illustrates an example user interface for entering text for an instant message according to one embodiment. [Figure 7] FIG. 10 illustrates an example user interface for deleting an instant message conversation according to an embodiment. [Figure 8A] FIG. 10 illustrates an example user interface for a contact list according to an embodiment. [Figure 8B] FIG. 10 illustrates an example user interface for a contact list according to an embodiment. [Figure 9]FIG. 10 illustrates an example user interface for entering an instant messaging phone number according to an embodiment. [Figure 10] FIG. 1 illustrates an example user interface for a camera according to an embodiment. [Figure 11] FIG. 10 illustrates an example user interface for a camera roll according to an embodiment. [Figure 12A] FIG. 1 illustrates an example user interface for viewing and manipulating captured video in accordance with some embodiments. [Figure 12B] FIG. 1 illustrates an example user interface for viewing and manipulating captured video in accordance with some embodiments. [Figure 12C] FIG. 1 illustrates an example user interface for viewing and manipulating captured video in accordance with some embodiments. [Figure 13A] FIG. 10 illustrates an example user interface for viewing an album according to some embodiments. [Figure 13B] FIG. 10 illustrates an example user interface for viewing an album according to some embodiments. [Figure 14] FIG. 10 illustrates an example user interface for setting user preferences according to an embodiment. [Figure 15] FIG. 10 illustrates an example user interface for viewing an album according to some embodiments. [Figure 16A] FIG. 10 illustrates an example user interface for viewing images in an album according to some embodiments. [Figure 16B] FIG. 10 illustrates an example user interface for viewing images in an album according to some embodiments. [Figure 17] 10A-10C illustrate an example user interface for selecting how to use images in an album according to one embodiment. [Figure 18A] FIG. 10 illustrates an example user interface for incorporating video into an email in accordance with one embodiment. [Figure 18B]FIG. 10 illustrates an example user interface for incorporating video into an email according to one embodiment. [Figure 18C] FIG. 10 illustrates an example user interface for incorporating video into an email according to one embodiment. [Figure 18D] FIG. 10 illustrates an example user interface for incorporating video into an email according to one embodiment. [Figure 18E] FIG. 10 illustrates an example user interface for incorporating video into an email according to one embodiment. [Figure 18F] FIG. 10 illustrates an example user interface for incorporating video into an email according to one embodiment. [Figure 18G] FIG. 10 illustrates an example user interface for incorporating video into an email according to one embodiment. [Figure 18H] FIG. 10 illustrates an example user interface for incorporating video into an email according to one embodiment. [Figure 18I] FIG. 10 illustrates an example user interface for incorporating video into an email according to one embodiment. [Figure 18J] FIG. 10 illustrates an example user interface for incorporating video into an email according to one embodiment. [Figure 19A] FIG. 10 illustrates an example user interface for assigning a picture to a contact in a user's contact list according to some embodiments. [Figure 19B] FIG. 10 illustrates an example user interface for assigning a picture to a contact in a user's contact list according to some embodiments. [Figure 20] FIG. 10 illustrates an example user interface for incorporating video into a user's wallpaper according to one embodiment. [Figure 21A] FIG. 1 illustrates an example user interface for organizing and managing videos according to one embodiment. [Figure 21B]FIG. 1 illustrates an example user interface for organizing and managing videos according to one embodiment. [Figure 21C] FIG. 1 illustrates an example user interface for organizing and managing videos according to one embodiment. [Figure 22A] FIG. 10 illustrates an example user interface for setting user preferences for a video player according to an embodiment. [Figure 22B] FIG. 10 illustrates an example user interface for setting user preferences for a video player according to an embodiment. [Figure 23A] FIG. 1 illustrates an example user interface for a video player according to an embodiment. [Figure 23B] FIG. 1 illustrates an example user interface for a video player according to an embodiment. [Figure 23C] FIG. 1 illustrates an example user interface for a video player according to an embodiment. [Figure 23D] FIG. 1 illustrates an example user interface for a video player according to an embodiment. [Figure 24A] FIG. 10 illustrates an example user interface for displaying and managing weather widgets according to some embodiments. [Figure 24B] FIG. 10 illustrates an example user interface for displaying and managing weather widgets according to some embodiments. [Figure 24C] FIG. 10 illustrates an example user interface for displaying and managing weather widgets according to some embodiments. [Figure 24D] FIG. 10 illustrates an example user interface for displaying and managing weather widgets according to some embodiments. [Figure 24E] FIG. 10 illustrates an example user interface for displaying and managing weather widgets according to some embodiments. [Figure 25A]10A-10C illustrate example user interfaces for displaying and managing stock widgets according to some embodiments. [Figure 25B] 10A-10C illustrate example user interfaces for displaying and managing stock widgets according to some embodiments. [Figure 25C] 10A-10C illustrate example user interfaces for displaying and managing stock widgets according to some embodiments. [Figure 25D] 10A-10C illustrate example user interfaces for displaying and managing stock widgets according to some embodiments. [Figure 25E] 10A-10C illustrate example user interfaces for displaying and managing stock widgets according to some embodiments. [Figure 26A] FIG. 1 illustrates an example user interface for viewing and managing contacts according to an embodiment. [Figure 26B] FIG. 1 illustrates an example user interface for viewing and managing contacts according to an embodiment. [Figure 26C] FIG. 1 illustrates an example user interface for viewing and managing contacts according to an embodiment. [Figure 26D] FIG. 1 illustrates an example user interface for viewing and managing contacts according to an embodiment. [Figure 26E] FIG. 1 illustrates an example user interface for viewing and managing contacts according to an embodiment. [Figure 26F] FIG. 1 illustrates an example user interface for viewing and managing contacts according to an embodiment. [Figure 26G] FIG. 1 illustrates an example user interface for viewing and managing contacts according to an embodiment. [Figure 26H] FIG. 1 illustrates an example user interface for viewing and managing contacts according to an embodiment. [Figure 26I] FIG. 1 illustrates an example user interface for viewing and managing contacts according to an embodiment. [Figure 26J] FIG. 1 illustrates an example user interface for viewing and managing contacts according to an embodiment. [Figure 26K] FIG. 1 illustrates an example user interface for viewing and managing contacts according to an embodiment. [Figure 26L] FIG. 1 illustrates an example user interface for viewing and managing contacts according to an embodiment. [Figure 26M] FIG. 1 illustrates an example user interface for viewing and managing contacts according to an embodiment. [Figure 26N] FIG. 1 illustrates an example user interface for viewing and managing contacts according to an embodiment. [Figure 26O] FIG. 1 illustrates an example user interface for viewing and managing contacts according to an embodiment. [Figure 26P] FIG. 1 illustrates an example user interface for viewing and managing contacts according to an embodiment. [Figure 27A] FIG. 10 illustrates an example user interface for viewing and managing favorite contacts according to one embodiment. [Figure 27B] FIG. 10 illustrates an example user interface for viewing and managing favorite contacts according to one embodiment. [Figure 27C] FIG. 10 illustrates an example user interface for viewing and managing favorite contacts according to one embodiment. [Figure 27D] FIG. 10 illustrates an example user interface for viewing and managing favorite contacts according to one embodiment. [Figure 27E] FIG. 10 illustrates an example user interface for viewing and managing favorite contacts according to one embodiment. [Figure 27F] FIG. 10 illustrates an example user interface for viewing and managing favorite contacts according to one embodiment. [Figure 28A]FIG. 10 illustrates an example user interface for viewing and managing recent calls according to an embodiment. [Figure 28B] FIG. 10 illustrates an example user interface for viewing and managing recent calls according to an embodiment. [Figure 28C] FIG. 10 illustrates an example user interface for viewing and managing recent calls according to an embodiment. [Figure 28D] FIG. 10 illustrates an example user interface for viewing and managing recent calls according to an embodiment. [Figure 29] FIG. 1 illustrates an example dial pad interface for making calls in accordance with an embodiment. [Figure 30A] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30B] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30C] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30D] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30E] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30F] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30G] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30H] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30I] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30J]FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30K] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30L] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30M] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30N] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30O] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30P] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30Q] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 30R] FIG. 10 illustrates an example user interface displayed during a call according to one embodiment. [Figure 31A] FIG. 10 illustrates an example user interface displayed during an incoming call according to one embodiment. [Figure 31B] FIG. 10 illustrates an example user interface displayed during an incoming call according to one embodiment. [Figure 32A] FIG. 1 illustrates an example user interface for voicemail according to an embodiment. [Figure 32B] FIG. 1 illustrates an example user interface for voicemail according to an embodiment. [Figure 32C] FIG. 1 illustrates an example user interface for voicemail according to an embodiment. [Figure 32D] FIG. 1 illustrates an example user interface for voicemail according to an embodiment. [Figure 32E] FIG. 1 illustrates an example user interface for voicemail according to an embodiment. [Figure 32F] FIG. 1 illustrates an example user interface for voicemail according to an embodiment. [Figure 32G] FIG. 1 illustrates an example user interface for voicemail according to an embodiment. [Figure 32H] FIG. 1 illustrates an example user interface for voicemail according to an embodiment. [Figure 33] FIG. 1 illustrates an example user interface for organizing and managing emails according to one embodiment. [Figure 34A] FIG. 10 illustrates an example user interface for creating an email in accordance with one embodiment. [Figure 34B] FIG. 10 illustrates an example user interface for creating an email in accordance with one embodiment. [Figure 34C] FIG. 10 illustrates an example user interface for creating an email in accordance with one embodiment. [Figure 35A] FIG. 10 illustrates an example user interface for viewing and managing an inbox according to one embodiment. [Figure 35B] FIG. 10 illustrates an example user interface for viewing and managing an inbox according to one embodiment. [Figure 35C] FIG. 10 illustrates an example user interface for viewing and managing an inbox according to one embodiment. [Figure 35D] FIG. 10 illustrates an example user interface for viewing and managing an inbox according to one embodiment. [Figure 35E] FIG. 10 illustrates an example user interface for viewing and managing an inbox according to one embodiment. [Figure 35F] FIG. 10 illustrates an example user interface for viewing and managing an inbox according to one embodiment. [Figure 35G] FIG. 10 illustrates an example user interface for viewing and managing an inbox according to one embodiment. [Figure 35H] FIG. 10 illustrates an example user interface for viewing and managing an inbox according to one embodiment. [Figure 35I] FIG. 10 illustrates an example user interface for viewing and managing an inbox according to one embodiment. [Figure 35J] FIG. 10 illustrates an example user interface for viewing and managing an inbox according to one embodiment. [Figure 35K] FIG. 10 illustrates an example user interface for viewing and managing an inbox according to one embodiment. [Figure 35L] FIG. 10 illustrates an example user interface for viewing and managing an inbox according to one embodiment. [Figure 35M] FIG. 10 illustrates an example user interface for viewing and managing an inbox according to one embodiment. [Figure 35N] FIG. 10 illustrates an example user interface for viewing and managing an inbox according to one embodiment. [Figure 35O] FIG. 10 illustrates an example user interface for viewing and managing an inbox according to one embodiment. [Figure 36] FIG. 10 illustrates an example user interface for setting email user preferences according to one embodiment. [Figure 37A] FIG. 10 illustrates an example user interface for creating and managing email rules according to one embodiment. [Figure 37B] FIG. 10 illustrates an example user interface for creating and managing email rules according to one embodiment. [Figure 38A] FIG. 10 illustrates an example user interface for moving email messages according to one embodiment. [Figure 38B]FIG. 10 illustrates an example user interface for moving email messages according to one embodiment. [Figure 39A] FIG. 1 illustrates an example user interface for a browser according to an embodiment. [Figure 39B] FIG. 1 illustrates an example user interface for a browser according to an embodiment. [Figure 39C] FIG. 1 illustrates an example user interface for a browser according to an embodiment. [Figure 39D] FIG. 1 illustrates an example user interface for a browser according to an embodiment. [Figure 39E] FIG. 1 illustrates an example user interface for a browser according to an embodiment. [Figure 39F] FIG. 1 illustrates an example user interface for a browser according to an embodiment. [Figure 39G] FIG. 1 illustrates an example user interface for a browser according to an embodiment. [Figure 39H] FIG. 1 illustrates an example user interface for a browser according to an embodiment. [Figure 39I] FIG. 1 illustrates an example user interface for a browser according to an embodiment. [Figure 39J] FIG. 1 illustrates an example user interface for a browser according to an embodiment. [Figure 39K] FIG. 1 illustrates an example user interface for a browser according to an embodiment. [Figure 39L] FIG. 1 illustrates an example user interface for a browser according to an embodiment. [Figure 39M] FIG. 1 illustrates an example user interface for a browser according to an embodiment. [Figure 40A] 1 is a diagram illustrating an example user interface for playing an item of inline multimedia content according to one embodiment. [Figure 40B] 1 is a diagram illustrating an example user interface for playing an item of inline multimedia content according to one embodiment. [Figure 40C] 1 is a diagram illustrating an example user interface for playing an item of inline multimedia content according to one embodiment. [Figure 40D] 1 is a diagram illustrating an example user interface for playing an item of inline multimedia content according to one embodiment. [Figure 40E] 1 is a diagram illustrating an example user interface for playing an item of inline multimedia content according to one embodiment. [Figure 40F] 1 is a diagram illustrating an example user interface for playing an item of inline multimedia content according to one embodiment. [Figure 41A] FIG. 10 illustrates an example user interface for interacting with user input elements in displayed content according to some embodiments. [Figure 41B] FIG. 10 illustrates an example user interface for interacting with user input elements in displayed content according to some embodiments. [Figure 41C] FIG. 10 illustrates an example user interface for interacting with user input elements in displayed content according to some embodiments. [Figure 41D] FIG. 10 illustrates an example user interface for interacting with user input elements in displayed content according to some embodiments. [Figure 41E] FIG. 10 illustrates an example user interface for interacting with user input elements in displayed content according to some embodiments. [Figure 41F] 10A-10C illustrate example user interfaces for interacting with hyperlinks in displayed content according to some embodiments. [Figure 42A]10A-10C illustrate example user interfaces for converting page content or only frame content within page content according to some embodiments. [Figure 42B] 10A-10C illustrate example user interfaces for converting page content or only frame content within page content according to some embodiments. [Figure 42C] 10A-10C illustrate example user interfaces for converting page content or only frame content within page content according to some embodiments. [Figure 43A] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43B] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43C] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43D] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43E] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43F] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43G] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43H] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43I] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43J] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43K] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43L] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43M] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43N] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43O] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43P] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43Q] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43R] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43S] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43T] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43U] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43V] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43W] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43X]FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43Y] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43Z] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43AA] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43BB] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43CC] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 43DD] FIG. 1 illustrates an example user interface for a music and video player according to an embodiment. [Figure 44A] FIG. 1 illustrates a portrait-landscape rotation heuristic according to one embodiment. [Figure 44B] FIG. 1 illustrates a portrait-landscape rotation heuristic according to one embodiment. [Figure 44C] FIG. 1 illustrates a portrait-landscape rotation heuristic according to one embodiment. [Figure 44D] FIG. 1 illustrates a portrait-landscape rotation heuristic according to one embodiment. [Figure 44E] FIG. 1 illustrates a portrait-landscape rotation heuristic according to one embodiment. [Figure 44F] FIG. 1 illustrates a portrait-landscape rotation heuristic according to one embodiment. [Figure 44G] FIG. 1 illustrates a portrait-landscape rotation heuristic according to one embodiment. [Figure 44H]FIG. 1 illustrates a portrait-landscape rotation heuristic according to one embodiment. [Figure 44I] FIG. 1 illustrates a portrait-landscape rotation heuristic according to one embodiment. [Figure 44J] FIG. 1 illustrates a portrait-landscape rotation heuristic according to one embodiment. [Figure 45A] 1 is a graphic user interface illustrating an adaptive solution for presenting information on a touch screen display according to one embodiment. [Figure 45B] 1 is a graphic user interface illustrating an adaptive solution for presenting information on a touch screen display according to one embodiment. [Figure 45C] 1 is a graphic user interface illustrating an adaptive solution for presenting information on a touch screen display according to one embodiment. [Figure 45D] 1 is a graphic user interface illustrating an adaptive solution for presenting information on a touch screen display according to one embodiment. [Figure 45E] 1 is a graphic user interface illustrating an adaptive solution for presenting information on a touch screen display according to one embodiment. [Figure 45F] 1 is a graphic user interface illustrating an adaptive solution for presenting information on a touch screen display according to one embodiment. [Figure 45G] 1 is a graphic user interface illustrating an adaptive solution for presenting information on a touch screen display according to one embodiment. [Figure 46A] FIG. 1 illustrates a digital artwork generated for a content file based on metadata associated with the content file in accordance with one embodiment. [Figure 46B] FIG. 1 illustrates a digital artwork generated for a content file based on metadata associated with the content file in accordance with one embodiment. [Figure 46C] FIG. 1 illustrates a digital artwork generated for a content file based on metadata associated with the content file in accordance with one embodiment. [Figure 47A] 10A-10C illustrate a method for moving a slider icon according to an embodiment. [Figure 47B] 10A-10C illustrate a method for moving a slider icon according to an embodiment. [Figure 47C] 10A-10C illustrate a method for moving a slider icon according to an embodiment. [Figure 47D] 10A-10C illustrate a method for moving a slider icon according to an embodiment. [Figure 47E] 10A-10C illustrate a method for moving a slider icon according to an embodiment. [Figure 48A] 1A-1C illustrate exemplary user interfaces for managing, viewing, and creating notes according to one embodiment. [Figure 48B] 1A-1C illustrate exemplary user interfaces for managing, viewing, and creating notes according to one embodiment. [Figure 48C] 1A-1C illustrate exemplary user interfaces for managing, viewing, and creating notes according to one embodiment. [Figure 49A] FIG. 1 illustrates an example user interface for a calendar in accordance with some embodiments. [Figure 49B] FIG. 1 illustrates an example user interface for a calendar in accordance with some embodiments. [Figure 49C] FIG. 1 illustrates an example user interface for a calendar in accordance with some embodiments. [Figure 49D] FIG. 1 illustrates an example user interface for a calendar in accordance with some embodiments. [Figure 49E] FIG. 1 illustrates an example user interface for a calendar in accordance with some embodiments. [Figure 49F]FIG. 1 illustrates an example user interface for a calendar in accordance with some embodiments. [Figure 49G] FIG. 1 illustrates an example user interface for a calendar in accordance with some embodiments. [Figure 49H] FIG. 1 illustrates an example user interface for a calendar in accordance with some embodiments. [Figure 49I] FIG. 1 illustrates an example user interface for a calendar in accordance with some embodiments. [Figure 49J] FIG. 1 illustrates an example user interface for a calendar in accordance with some embodiments. [Figure 49K] FIG. 1 illustrates an example user interface for a calendar in accordance with some embodiments. [Figure 49L] FIG. 1 illustrates an example user interface for a calendar in accordance with some embodiments. [Figure 49M] FIG. 1 illustrates an example user interface for a calendar in accordance with some embodiments. [Figure 49N] FIG. 1 illustrates an example user interface for a calendar in accordance with some embodiments. [Figure 50A] FIG. 10 illustrates an example user interface for a clock according to an embodiment. [Figure 50B] FIG. 10 illustrates an example user interface for a clock according to an embodiment. [Figure 50C] FIG. 10 illustrates an example user interface for a clock according to an embodiment. [Figure 50D] FIG. 10 illustrates an example user interface for a clock according to an embodiment. [Figure 50E] FIG. 10 illustrates an example user interface for a clock according to an embodiment. [Figure 50F] FIG. 10 illustrates an example user interface for a clock according to an embodiment. [Figure 50G]FIG. 10 illustrates an example user interface for a clock according to an embodiment. [Figure 50H] FIG. 10 illustrates an example user interface for a clock according to an embodiment. [Figure 50I] FIG. 10 illustrates an example user interface for a clock according to an embodiment. [Figure 51A] FIG. 10 illustrates an example user interface for creating a widget in accordance with an embodiment. [Figure 51B] FIG. 10 illustrates an example user interface for creating a widget in accordance with an embodiment. [Figure 52A] FIG. 1 illustrates an example user interface for a map application in accordance with an embodiment. [Figure 52B] FIG. 1 illustrates an example user interface for a map application in accordance with an embodiment. [Figure 52C] FIG. 1 illustrates an example user interface for a map application in accordance with an embodiment. [Figure 52D] FIG. 1 illustrates an example user interface for a map application in accordance with an embodiment. [Figure 52E] FIG. 1 illustrates an example user interface for a map application in accordance with an embodiment. [Figure 52F] FIG. 1 illustrates an example user interface for a map application in accordance with an embodiment. [Figure 52G] FIG. 1 illustrates an example user interface for a map application in accordance with an embodiment. [Figure 52H] FIG. 1 illustrates an example user interface for a map application in accordance with an embodiment. [Figure 53A] 10A-10C illustrate example user interfaces for displaying notification information for erroneous communications according to some embodiments. [Figure 53B]10A-10C illustrate example user interfaces for displaying notification information for erroneous communications according to some embodiments. [Figure 53C] 10A-10C illustrate example user interfaces for displaying notification information for erroneous communications according to some embodiments. [Figure 53D] 10A-10C illustrate example user interfaces for displaying notification information for erroneous communications according to some embodiments. [Figure 54] FIG. 1 illustrates a method for silencing a portable device according to an embodiment. [Figure 55A] FIG. 1 illustrates a method for turning off a portable device according to an embodiment. [Figure 55B] FIG. 1 illustrates a method for turning off a portable device according to an embodiment. [Figure 55C] FIG. 1 illustrates a method for turning off a portable device according to an embodiment. [Figure 55D] FIG. 1 illustrates a method for turning off a portable device according to an embodiment. [Figure 56A] FIG. 1 illustrates a method for determining a cursor position on a touch screen display according to an embodiment. [Figure 56B] FIG. 1 illustrates a method for determining a cursor position on a touch screen display according to an embodiment. [Figure 56C] FIG. 1 illustrates a method for determining a cursor position on a touch screen display according to an embodiment. [Figure 56D] FIG. 1 illustrates a method for determining a cursor position on a touch screen display according to an embodiment. [Figure 56E] FIG. 1 illustrates a method for determining a cursor position on a touch screen display according to an embodiment. [Figure 56F] FIG. 1 illustrates a method for determining a cursor position on a touch screen display according to an embodiment. [Figure 56G] FIG. 1 illustrates a method for determining a cursor position on a touch screen display according to an embodiment. [Figure 56H] FIG. 1 illustrates a method for determining a cursor position on a touch screen display according to an embodiment. [Figure 56I] FIG. 1 illustrates a method for determining a cursor position on a touch screen display according to an embodiment. [Figure 56J] FIG. 1 illustrates a method for determining a cursor position on a touch screen display according to an embodiment. [Figure 56K] FIG. 1 illustrates a method for determining a cursor position on a touch screen display according to an embodiment. [Figure 56L] FIG. 1 illustrates a method for determining a cursor position on a touch screen display according to an embodiment. [Figure 56M] 10A-10C illustrate a method for dynamically adjusting numbers associated with soft keyboard keys as words are typed with the soft keyboard keys according to one embodiment. [Figure 56N] 10A-10C illustrate a method for dynamically adjusting numbers associated with soft keyboard keys as words are typed with the soft keyboard keys according to one embodiment. [Figure 56O] 10A-10C illustrate a method for dynamically adjusting numbers associated with soft keyboard keys as words are typed with the soft keyboard keys according to one embodiment. [Figure 57A] 10A-10C illustrate an example of a screen rotation gesture according to an embodiment. [Figure 57B] 10A-10C illustrate an example of a screen rotation gesture according to an embodiment. [Figure 57C] 10A-10C illustrate an example of a screen rotation gesture according to an embodiment. [Figure 58A]FIG. 10 illustrates a solution for identifying a user's desired user interface object when a finger touch's corresponding cursor position enters an overlap hit region according to one embodiment. [Figure 58B] FIG. 10 illustrates a solution for identifying a user's desired user interface object when a finger touch's corresponding cursor position enters an overlap hit region according to one embodiment. [Figure 58C] FIG. 10 illustrates a solution for identifying a user's desired user interface object when a finger touch's corresponding cursor position enters an overlap hit region according to one embodiment. [Figure 58D] FIG. 10 illustrates a solution for identifying a user's desired user interface object when a finger touch's corresponding cursor position enters an overlap hit region according to one embodiment. [Figure 59A] FIG. 10 illustrates how a finger tap gesture activates a softkey icon on a touchscreen display according to one embodiment. [Figure 59B] FIG. 10 illustrates how a finger tap gesture activates a softkey icon on a touchscreen display according to one embodiment. [Figure 59C] FIG. 10 illustrates how a finger tap gesture activates a softkey icon on a touchscreen display according to one embodiment. [Figure 59D] FIG. 10 illustrates how a finger tap gesture activates a softkey icon on a touchscreen display according to one embodiment. [Figure 59E] FIG. 10 illustrates how a finger tap gesture activates a softkey icon on a touchscreen display according to one embodiment. [Figure 59F] FIG. 10 illustrates how a finger swipe gesture controls a slide control icon on a touchscreen display according to one embodiment. [Figure 59G]FIG. 10 illustrates how a finger swipe gesture controls a slide control icon on a touchscreen display according to one embodiment. [Figure 59H] FIG. 10 illustrates how a finger swipe gesture controls a slide control icon on a touchscreen display according to one embodiment. [Figure 60A] FIG. 1 illustrates an example soft keyboard according to an embodiment. [Figure 60B] FIG. 1 illustrates an example soft keyboard according to an embodiment. [Figure 60C] FIG. 1 illustrates an example soft keyboard according to an embodiment. [Figure 60D] FIG. 1 illustrates an example soft keyboard according to an embodiment. [Figure 60E] FIG. 1 illustrates an example soft keyboard according to an embodiment. [Figure 60F] FIG. 1 illustrates an example soft keyboard according to an embodiment. [Figure 60G] FIG. 1 illustrates an example soft keyboard according to an embodiment. [Figure 60H] FIG. 1 illustrates an example soft keyboard according to an embodiment. [Figure 60I] FIG. 1 illustrates an example soft keyboard according to an embodiment. [Figure 60J] FIG. 1 illustrates an example soft keyboard according to an embodiment. [Figure 60K] FIG. 1 illustrates an example soft keyboard according to an embodiment. [Figure 60L] FIG. 1 illustrates an example soft keyboard according to an embodiment. [Figure 60M] FIG. 1 illustrates an example soft keyboard according to an embodiment. [Figure 61] FIG. 1 illustrates finger contact with a soft keyboard according to an embodiment. [Figure 62A] FIG. 10 illustrates an example user interface for viewing and adjusting settings according to one embodiment. [Figure 62B] FIG. 10 illustrates an example user interface for viewing and adjusting settings according to one embodiment. [Figure 62C] FIG. 10 illustrates an example user interface for viewing and adjusting settings according to one embodiment. [Figure 62D] FIG. 10 illustrates an example user interface for viewing and adjusting settings according to one embodiment. [Figure 62E] FIG. 10 illustrates an example user interface for viewing and adjusting settings according to one embodiment. [Figure 62F] FIG. 10 illustrates an example user interface for viewing and adjusting settings according to one embodiment. [Figure 62G] FIG. 10 illustrates an example user interface for viewing and adjusting settings according to one embodiment. [Figure 63A] FIG. 10 illustrates a method for adjusting a dim timer according to an embodiment. [Figure 63B] FIG. 10 illustrates a method for adjusting a dim timer according to an embodiment. [Figure 63C] FIG. 10 illustrates a method for adjusting a dim timer according to an embodiment. [Figure 63D] FIG. 10 illustrates a method for adjusting a dim timer according to an embodiment. [Figure 63E] FIG. 10 illustrates a method for adjusting a dim timer according to an embodiment. [Figure 63F] FIG. 10 illustrates a method for adjusting a dim timer according to an embodiment. [Figure 63G] FIG. 10 illustrates a method for adjusting a dim timer according to an embodiment. [Figure 63H] FIG. 10 illustrates a method for adjusting a dim timer according to an embodiment. [Figure 63I] FIG. 10 illustrates a method for adjusting a dim timer according to an embodiment. [Figure 63J] FIG. 10 illustrates a method for adjusting a dim timer according to an embodiment. [Figure 64A] 1 is a flowchart illustrating a method for applying heuristics in accordance with one embodiment. [Figure 64B] 1 is a flowchart illustrating a method for applying heuristics in accordance with one embodiment. DETAILED DESCRIPTION OF THE INVENTION

[0018] DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS The following detailed description of the preferred embodiments is provided with reference to the accompanying drawings. In the following detailed description, numerous specific details are set forth in order to provide a thorough understanding of the present invention. However, it will be apparent to those skilled in the art that the present invention may be practiced without these specific details. In other instances, well-known methods, procedures, components, circuits, and networks have not been described in detail so as not to unnecessarily obscure aspects of these embodiments.

[0019] It should also be understood that while terms such as "first," "second," etc. are used herein to describe various elements, these elements should not be limited by these terms. These terms are used only to distinguish one element from another. For example, a first gesture could be referred to as a second gesture, and a second gesture could be referred to as a first gesture, without departing from the scope of the present invention.

[0020] The terminology used in the description of the present invention is for the purpose of describing particular embodiments only and is not intended to be limiting of the present invention. As used in the description of the present invention and in the claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly dictates otherwise. It should also be understood that the term "and / or," as used herein, refers to and encompasses any and all possible combinations of one or more of the associated listed items. It should also be understood that the words "comprises" and / or "comprising," when used herein, specify the presence of stated features, integers, steps, operations, elements, and / or components, but do not exclude the presence of one or more other features, integers, steps, operations, elements, components, and / or groups thereof.

[0021] The word "if," as used herein, may be interpreted, based on the context, to mean "when" or "upon" or "in response to determining" or "in response to detecting." Similarly, "if it is determined" or "if [a stated condition or event] is detected" may be interpreted, based on the context, to mean "upon determining" or "in response to determining" or "upon detecting [the stated condition or event]" or "in response to detecting [the stated condition or event]."

[0022] Embodiments of portable multifunction devices, user interfaces for such devices, and associated processes for using such devices are described. In one embodiment, the device is a portable communications device such as a mobile phone that also includes other functions, such as a PDA and / or music player function.

[0023] The user interface may include a physical click wheel in addition to a touch screen or a virtual click wheel displayed on the touch screen. A click wheel is a user interface device that can provide navigation commands based on the angular displacement of the wheel or the point of contact of a device user with the wheel. A click wheel can also be used to provide a user command corresponding to the selection of one or more items, for example, when a device user depresses at least a portion of the wheel or the center of the wheel. Alternatively, breaking contact with a click wheel image on the touch screen surface can indicate a user command corresponding to the selection. For simplicity, a portable multifunction device including a touch screen will be used as an embodiment in the following description. However, it should be understood that the user interface and some of the associated processes may also be applied to other devices, such as personal computers and laptop computers, that include one or more other physical user interface devices, such as a physical click wheel, a physical keyboard, a mouse, and / or a joystick.

[0024] The device supports a variety of applications, such as one or more of the following: a telephony application, a video conferencing application, an email application, an instant messaging application, a blog application, a photo management application, a digital camera application, a digital video camera application, a web browsing application, a digital music player application, and / or a digital video player application.

[0025] Various applications that can be executed on a device can use at least one common physical user interface device, such as a touchscreen. One or more functions of the touchscreen and the corresponding information displayed on the device can be tailored and / or changed for each application and / or within each application. In this way, the device's common physical architecture (such as a touchscreen) can support various applications with intuitive and transparent user interfaces.

[0026] The user interface may include one or more soft keyboard embodiments. Soft keyboard embodiments may include standard (QWERTY) and / or non-standard configurations of symbols on the displayed icons of the keyboard, as described in U.S. patent application Ser. No. 11 / 459,606, entitled "Keyboards For Portable Electronic Devices," filed July 24, 2006, and U.S. patent application Ser. No. 11 / 459,615, entitled "Touch Screen Keyboards For Portable Electronic Devices," filed July 24, 2006, the contents of which are incorporated herein by reference. Keyboard embodiments may include a reduced number of icons (or soft keys) relative to the number of keys on an existing physical keyboard, such as on a typewriter. This allows a user to easily select one or more icons on the keyboard, and thus one or more corresponding symbols. Keyboard embodiments may be adaptive. For example, the displayed icons may change based on a user action, such as selecting one or more icons and / or one or more corresponding symbols. One or more applications on a portable device may use common and / or different keyboard embodiments. Thus, the keyboard embodiment used can be tailored to at least some applications. In some embodiments, one or more keyboard embodiments can be tailored to each user. For example, one or more keyboard embodiments can be tailored to each user based on their word usage history (lexicon, slang, individual usage). Some of the keyboard embodiments can be adjusted to reduce the probability of user error when selecting one or more icons, and therefore one or more symbols when using a soft keyboard embodiment.

[0027] Attention now turns to device embodiments. Figures 1A and 1B are block diagrams illustrating a portable multifunction device 100 with a touch-sensitive display 112 according to one embodiment. Touch-sensitive display 112 is conveniently referred to as a "touch screen" and may also be known or referred to as a touch-sensitive display system. Device 100 may include memory 102 (including one or more computer-readable storage media), a memory controller 122, one or more processing units (CPUs) 120, a peripherals interface 118, RF circuitry 108, audio circuitry 110, a speaker 111, a microphone 113, an input / output (I / O) subsystem 106, other input or control devices 116, and an external port 124. Additionally, device 100 may include one or more optical sensors 154. These components may communicate over one or more communication buses or signal lines 103.

[0028] Device 100 is only one example of a portable multifunction device 100, and device 100 may have more or fewer components than shown, may combine two or more components, or may have components in a different configuration or arrangement. The various components shown in Figures 1A and 1B may be implemented in hardware, software, or a combination of both, including one or more signal processing and / or application specific integrated circuits.

[0029] Memory 102 includes high-speed random-access memory and may also include non-volatile memory, such as one or more magnetic disk storage devices, flash memory devices, or other non-volatile solid-state memory devices. Access to memory 102 by other components of device 100, such as CPU 120 and peripheral interface 118, may be controlled by memory controller 122.

[0030] A peripheral interface 118 couples the device's input and output peripherals to the CPU 120 and memory 102. The one or more processors 120 run or execute various software programs and / or instruction sets stored in the memory 102 to perform various functions of the device 100 and to process data.

[0031] In some embodiments, peripheral interface 118, CPU 120, and memory controller 122 may be implemented on a single chip, such as chip 104. In some other embodiments, they may be implemented on separate chips.

[0032] RF (radio frequency) circuitry 108 receives and transmits RF signals, also referred to as electromagnetic signals. RF circuitry 108 converts between electrical and electromagnetic signals and communicates with communication networks and other communication devices via the electromagnetic signals. RF circuitry 108 can include well-known circuits for performing these functions, including, but not limited to, an antenna system, an RF transceiver, one or more amplifiers, a tuner, one or more oscillators, a digital signal processor, a CODEC chipset, a subscriber identity module (SIM) card, memory, etc. RF circuitry 108 can communicate wirelessly with networks, such as the Internet, also referred to as the World Wide Web (WWW), intranets, and / or wireless networks, such as cellular telephone networks, wireless local area networks (LANs), and / or metropolitan area networks (MANs), and other devices.Wireless communications may use any of a number of communication standards, protocols, and technologies, including Global System for Mobile Communications (GSM), Enhanced Data GSM Environment (EDGE), High Speed ​​Downlink Packet Access (HSDPA), Wideband Code Division Multiple Access (W-CDMA), Code Division Multiple Access (CDMA), Time Division Multiple Access (TDMA), Bluetooth, Wireless Fidelity (Wi-Fi) (e.g., IEEE 802.11a, IEEE 802.11b, IEEE 802.11g, and / or IEEE 802.11n), Voice over Internet Protocol (VoIP), and WLAN. This includes, but is not limited to, i-MAX, protocols for email (e.g., Internet Message Access Protocol (IMAP) and / or Post Office Protocol (POP)), instant messaging (e.g., Extensible Messaging and Presence Protocol (XMPP), Session Initiation Protocol for Instant Messaging and Presence Leverage Extension (SIMPLE), and / or Instant Messaging and Presence Service (IMPS)), and / or Short Message Service (SMS)), or other suitable communications protocols, including communications protocols not yet developed as of the filing date of this application.

[0033] The audio circuit 110, speaker 111, and microphone 113 form an audio interface between a user and device 100. The audio circuit 110 receives audio data from the peripheral interface 118, converts the audio data into electrical signals, and sends the electrical signals to the speaker 111. The speaker 111 converts the electrical signals into sound waves that humans can hear. The audio circuit 110 also receives electrical signals converted from sound waves by the microphone 113. The audio circuit 110 converts the electrical signals into audio data and sends the audio data to the peripheral device 118 for processing. The audio data may be retrieved from and / or sent to the memory 102 and / or the RF circuit 108 by the peripheral interface 118. In some embodiments, the audio circuit 110 also includes a headset jack (e.g., 212 in FIG. 2 ). The headset jack provides an interface between audio circuitry 110 and a detachable audio input / output peripheral, such as output-only headphones or a headset with both an output (e.g., mono or binaural headphones) and an input (e.g., a microphone).

[0034] The I / O subsystem 106 couples input / output peripherals of the device 100, such as the touchscreen 112 and other input / output devices 116, to a peripheral interface 118. The I / O subsystem 106 may include a display controller 156 and one or more input controllers 160 for other input or control devices. The one or more input controllers 160 send / receive electrical signals to / from the other input or control devices 116. The other input / control devices 116 may include physical buttons (e.g., push buttons, rocker buttons, etc.), dials, slider switches, joysticks, click wheels, etc. In some alternative embodiments, the input controller(s) 160 may be connected to none or any of the following: a keyboard, an infrared port, a USB port, and a pointer device such as a mouse. One or more buttons (e.g., 208 in FIG. 2) may include up / down buttons for volume control of the speaker 111 and / or microphone 113. The one or more buttons may include a push button (e.g., 206 in FIG. 2). A quick press of the push button can unlock the touch screen 112 or can initiate the process of unlocking the device using gestures on the touch screen, as described in U.S. patent application Ser. No. 11 / 322,549, filed Dec. 23, 2005, entitled "Unlocking a Device by Performing Gestures on an Unlock Image," which is incorporated herein by reference. A long press of a push button (e.g., 206) can turn power to the device 100 on or off. A user can also customize the function of one or more buttons. The touch screen 112 can be used to implement virtual or soft buttons and one or more soft keyboards.

[0035] Touch-sensitive touchscreen 112 provides an input and output interface between the device and a user. Display controller 156 sends and / or receives electrical signals to touchscreen 112. Touchscreen 112 displays visual output to the user. This visual output may include graphics, text, icons, video, and combinations thereof (collectively referred to as "graphics"). In some embodiments, some or all of the visual output may correspond to user interface objects, which are described in further detail below.

[0036] Touchscreen 112 has a touch-sensitive surface, sensor, or set of sensors that accepts input from a user based on tactile and / or haptic contact. Touchscreen 112 and display controller 156 (along with associated modules and / or instruction sets in memory 102) detects contact (and movement or breaking of contact) on touchscreen 112 and translates the detected contact into a user interface object (e.g., one or more softkeys, icons, web pages, or images) that is displayed on the touchscreen. In the illustrated embodiment, the point of contact between touchscreen 112 and the user corresponds to the user's finger.

[0037] Touchscreen 112 may use LCD (liquid crystal display) or LPD (light emitting polymer display) technology, although other display technologies may be used in other embodiments. Touchscreen 112 and display controller 156 may detect contact and its movement or disruption using any of a number of now known or later developed touch sensing technologies, including, but not limited to, capacitive, resistive, infrared, and surface acoustic wave technologies, as well as other proximity sensor arrays or other elements for determining one or more points of contact with touchscreen 112.

[0038] The touch-sensitive display in some embodiments of touchscreen 112 may be similar to the multi-touch-sensitive tablets described in U.S. Patent Nos. 6,323,846 (Westerman et al.), 6,570,557 (Westerman et al.), and / or 6,677,932 (Westerman), and / or U.S. Patent Publication No. 2002 / 0015024A1, each of which is incorporated herein by reference. However, while touchscreen 112 displays visual output from portable device 100, the touch-sensitive tablets do not provide visual output.

[0039] Touch-sensitive displays in certain embodiments of touchscreen 112 are described in the following patent applications: (1) U.S. patent application Ser. No. 11 / 381,313, entitled "Multipoint Touch Surface Controller," filed May 2, 2006; (2) U.S. patent application Ser. No. 10 / 840,862, entitled "Multipoint Touchscreen," filed May 6, 2004; (3) U.S. patent application Ser. No. 10 / 903,964, entitled "Gestures For Touch Sensitive Input Devices," filed July 30, 2004; (4) U.S. patent application Ser. No. 11 / 048,264, entitled "Gestures For Touch Sensitive Input Devices," filed January 31, 2005; and (5) U.S. patent application Ser. No. 11 / 048,264, entitled "Gestures For Touch Sensitive Input Devices," filed January 18, 2005. (6) U.S. patent application Ser. No. 11 / 038,590 entitled "Virtual Input Device Placement On A Touch Screen User Interface," filed on September 16, 2005; (7) U.S. patent application Ser. No. 11 / 228,758 entitled "Virtual Input Device Placement On A Touch Screen User Interface," filed on September 16, 2005; (8) U.S. patent application Ser. No. 11 / 228,737 entitled "Activating Virtual Keys Of A Touch-Screen Virtual Keyboard," filed on September 16, 2005; and (9) U.S. patent application Ser. No. 11 / 367,749 entitled "Multi-Functional Hand-Held Device," filed on March 3, 2006, all of which applications are incorporated herein by reference.

[0040] The touchscreen 112 can have a resolution greater than 100 dpi. In the illustrated embodiment, the touchscreen has a resolution of approximately 160 dpi. A user can contact the touchscreen 112 using a suitable object or appendage, such as a stylus, finger, or the like. In one embodiment, the user interface is designed to work primarily with finger-based touch and gestures, which are less precise than stylus-based input due to the larger contact area of ​​a finger on a touchscreen. In one embodiment, the device converts rough finger-based input into precise pointer / cursor position or commands to perform the user's desired action.

[0041] In some embodiments, in addition to the touchscreen, device 100 may include a touchpad (not shown) for activating or deactivating certain functions. In some embodiments, the touchpad is a touch-sensitive area of ​​the device that, unlike the touchscreen, does not display visual output. The touchpad may be a separate touch-sensitive surface from touchscreen 112 or may be an extension of the touch-sensitive surface formed by the touchscreen.

[0042] In some embodiments, device 100 may include a physical or virtual click wheel as input control device 116. A user can navigate among and interact with one or more graphical objects (hereinafter referred to as icons) displayed on touchscreen 112 by rotating the click wheel or by moving a contact point with the click wheel (e.g., where movement of the contact point is measured by its angular displacement relative to the center point of the click wheel). The click wheel may also be used to select one or more of the displayed icons. For example, a user may depress at least a portion of the click wheel or a button associated therewith. User and navigation commands provided by a user via the click wheel may be processed by input controller 160 and one or more modules and / or instruction sets in memory 120. In the case of a virtual click wheel, the click wheel and click wheel controller may be a portion of touchscreen 112 and display controller 156, respectively. In the case of a virtual click wheel, the click wheel may be an opaque or translucent object that appears and disappears on the touchscreen display in response to user interaction with the device. In some embodiments, the virtual click wheel is displayed on the touchscreen of the portable multifunction device and is activated by user contact with the touchscreen.

[0043] Device 100 also includes a power system 162 for powering the various components. This power system 162 may include a power management system, one or more power sources (e.g., battery, alternating current (AC)), a recharging system, power failure detection circuitry, power converters or inverters, power status indicators (e.g., light emitting diodes (LEDs)), and other components associated with the generation, management, and distribution of power in the portable device.

[0044] Device 100 may also include one or more optical sensors 164. FIGS. 1A and 1B show an optical sensor coupled to optical sensor controller 158 in I / O subsystem 106. Optical sensor 164 may include a charge-coupled device (CCD) or a complementary metal-oxide semiconductor (CMOS) phototransistor. Optical sensor 164 receives light projected from the surroundings through one or more lenses and converts the light into data representing an image. In conjunction with imaging module 143 (also referred to as a camera module), optical sensor 164 may also capture still images or video. In one embodiment, an optical sensor is located on the back of device 100 opposite touchscreen display 112 on the front of the device, allowing the touchscreen display to be used as a viewfinder for still and / or video image capture. In one embodiment, an optical sensor is located on the front of the device to obtain a user's image for a video conference, while the user can view other video conference participants on the touchscreen display. In one embodiment, the position of the optical sensor 164 can be switched by the user (e.g., by rotating the lens and sensor within the device housing) so that a single optical sensor 164 can be used for both video conferencing and still and / or video image capture, along with a touchscreen display.

[0045] Device 100 may also include one or more proximity sensors 166. Figures 1A and 1B show proximity sensor 166 coupled to peripheral interface 118. Alternatively, proximity sensor 166 may be coupled to input controller 160 of I / O subsystem 106. Proximity sensor 166 may operate as described in the following U.S. patent applications, which are incorporated herein by reference: No. 11 / 241,839 entitled "Proximity Detector In Handheld Devices," U.S. patent application Ser. No. 11 / 240,788 entitled "Proximity Detector In Handheld Devices," U.S. patent application Ser. No. 11 / 620,702 entitled "Using Ambient Light Sensor To Augment Proximity Sensor Output," U.S. patent application Ser. No. 11 / 586,862 entitled "Automated Response To And Sensing Of User Activity In Portable Devices," and U.S. patent application Ser. No. 11 / 638,251 entitled "Methods And Systems For Automatic Configuration Of Peripherals." In one embodiment, the proximity sensor turns off and disables touchscreen 112 when the multifunction device is placed near the user's ear (e.g., when the user makes a phone call). In some embodiments, to prevent unnecessary battery drain when the device is in a locked state, a proximity sensor keeps the screen off when the device is placed in a user's pocket, purse, or other dark area.

[0046] 1A and 1B show accelerometer 168 coupled to peripherals interface 118. Alternatively, accelerometer 168 may be coupled to input controller 160 of I / O subsystem 106. Accelerometer 168 may operate as described in U.S. Patent Publication No. 20050190059, entitled "Acceleration-Based Theft Detection System for Portable Electronic Devices," and U.S. Patent Publication No. 20060017692, entitled "Methods And Apparatus For Operating A Portable Device Based On An Accelerometer," both of which are incorporated herein by reference. In one embodiment, information is displayed on the touchscreen display in portrait or landscape view based on an analysis of data received from one or more accelerometers.

[0047] In one embodiment, the software components stored in memory 102 may include an operating system 126, a communications module (or set of instructions) 128, a contact / motion module (or set of instructions) 130, a graphics module (or set of instructions) 132, a text input module (or set of instructions) 134, a global positioning system (GPS) module (or set of instructions) 135, and an application (or set of instructions) 136.

[0048] An operating system 126 (e.g., Darwin, RTXC, LINUX, UNIX, OS X, WINDOWS, or an embedded operating system such as VxWorks) comprises various software components and / or drivers for controlling and managing general system tasks (e.g., memory management, storage control, power management, etc.) and facilitating communication between various hardware and software components.

[0049] Communications module 128 facilitates communication with other devices via one or more external ports 124 and also includes various software components for handling data received by RF circuitry 108 and / or external port 124. External port 124 (e.g., Universal Serial Bus (USB), FIREWIRE, etc.) is adapted to couple directly to other devices or indirectly via a network (e.g., the Internet, a wireless LAN, etc.). In one embodiment, the external port is a multi-pin (e.g., 30-pin) connector that is the same as, similar to, and / or compatible with the 30-pin connector used on iPod (trademark of Apple Computer, Inc.) devices.

[0050] The contact / motion module 130 can detect contact with the touchscreen 112 (associated with the display controller 156) and other touch-sensitive devices (e.g., a touchpad or physical click wheel). The contact / motion module 130 includes various software components for performing various operations related to contact detection, such as determining whether contact occurs, determining whether there is contact movement and tracking the movement across the touchscreen 112, and determining whether the contact has been broken (i.e., whether the contact has ceased). Determining contact movement includes determining the speed (magnitude), velocity (magnitude and direction), and / or acceleration (change in magnitude and / or direction) of the contact. These operations can apply to a single contact (e.g., a single finger contact) or multiple simultaneous contacts (e.g., "multi-touch" / multiple finger contacts). In some embodiments, the contact / motion module 130 and display controller 156 also detect contact on a touchpad. In some embodiments, the contact / motion module 130 and controller 160 detect contact on a click wheel.

[0051] Graphics module 132 comprises various known software components for rendering and displaying graphics on touchscreen 112, including components for varying the intensity of the displayed graphics. As used herein, the term "graphics" includes any object that can be displayed to a user, including, without limitation, text, web pages, icons (such as user interface objects including soft keys), digital images, video, animation, etc.

[0052] Text input module 134, which may be a component of graphics module 132, provides a soft keyboard for entering text into various applications (e.g., contacts 137, email 140, IM 141, blog 142, browser 147, and other applications requiring text input).

[0053] The GPS module 135 determines the location of the device and provides this information for use in various applications (e.g., to the phone 138 for use in location-based dialing, to the camera 143 and / or blogger 142 as picture / video metadata, and to applications that provide location-based services such as weather widgets, local yellow pages widgets, and map / navigation widgets).

[0054] The application 136 may include the following modules (or sets of instructions), or a subset or superset thereof: • a contacts module 137 (sometimes also referred to as an address book or contact list); ●Telephone module 138, ●Video conferencing module 139, ●Email client module, ● Instant messaging (IM) module 141; ●Blog module 142, a camera module 143 for still and / or video images, ●Video management module 144, ●Video player module 145, ●Music player module 146, ● Browser module 147, ●Calendar module 148, A widget module 149 that can include a weather widget 149-1, a stock widget 149-2, a calculator widget 149-3, an alarm clock widget 149-4, a dictionary widget 149-5, and other widgets provided by the user, as well as user-created widgets 149-6; a widget creator module 150 for creating user-generated widgets 149-6; ● Search module 151, a video and music player module 152 that merges the video player module 145 and the music player module 146; Notes module 153, and / or Map module 154, and / or ●Online video module 155.

[0055] Other applications 136 that may be stored in memory 102 include, for example, other word processing applications, JAVA-enabled applications, encryption, digital rights management, voice recognition, and voice duplication.

[0056] In conjunction with touchscreen 112, display controller 156, contact module 130, graphics module 132, and text input module 134, contact module 137 can be used to manage an address book or contact list, including adding name(s) to the address book, removing name(s) from the address book, associating phone number(s), email address(es), physical address(es) or other information with names, associating pictures with names, categorizing and classifying names, providing phone numbers or email addresses to initiate and / or facilitate communication by phone 138, video conference 139, email 140, or IM 141, etc. Embodiments of user interfaces and related processes using contact module 137 are described in detail below.

[0057] In conjunction with RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, touchscreen 112, display controller 156, contacts module 130, graphics module 132, and text input module 134, telephone module 138 can be used to enter a sequence of characters corresponding to a telephone number, access one or more telephone numbers in address book 137, modify an entered telephone number, dial telephone numbers, conduct a conversation, and disconnect or hang up when the conversation is completed. As noted above, wireless communications can use any of a number of communication standards, protocols, and technologies. Embodiments of user interfaces and related processes using telephone module 138 are described in detail below.

[0058] In conjunction with RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, touch screen 112, display controller 156, optical sensor 164, optical sensor controller 158, contact module 130, graphics module 132, text input module 134, contact list 137, and telephone module 138, video conferencing module 139 can be used to initiate, conduct, and terminate video conferences between a user and one or more other participants. Embodiments of user interfaces and related processes using video conferencing module 139 are described in detail below.

[0059] In conjunction with RF circuitry 108, touch screen 112, display controller 156, contacts module 130, graphics module 132, and text input module 134, email client module 140 can be used to create, send, receive, and manage emails. In conjunction with video management module 144, email module 140 greatly facilitates creating and sending emails along with still or video images captured by camera module 143. Embodiments of user interfaces and related processes using email module 140 are described in detail below.

[0060] In conjunction with RF circuitry 108, touchscreen 112, display controller 156, contact module 130, graphics module 132, and text input module 134, instant messaging module 141 can be used to enter sequences of characters corresponding to instant messages, modify previously entered characters, send instant messages (e.g., using Short Message Service (SMS) or Multimedia Message Service (MMS) protocols for telephone-based instant messages, or XMPP, SIMPLE, or IMPS for Internet-based instant messages), receive instant messages, and view received instant messages. In some embodiments, sent and / or received instant messages can include graphics, photos, audio files, video files, and / or other attachments supported by MMS and / or Enhanced Messaging Service (EMS). As used herein, the term "instant messaging" refers to both telephone-based messages (e.g., messages sent using SMS or MMS) and Internet-based messages (e.g., messages sent using XMPP, SIMPLE, or IMPS). An embodiment of a user interface and associated processes using instant messaging module 141 is described in detail below.

[0061] In conjunction with RF circuitry 108, touch screen 112, display controller 156, contact module 130, graphics module 132, text input module 134, image management module 144, and browsing module 147, blog module 142 can be used to submit text, still images, video, and / or other graphics to a blog (e.g., a user blog). Embodiments of user interfaces and related processes that use blog module 142 are described in detail below.

[0062] In conjunction with touchscreen 112, display controller 156, optical sensor(s) 164, optical sensor controller 158, contact module 130, graphics module 132, and video management module 144, camera module 143 can be used to capture still images or video (including video streams) and store them in memory 102, change the characteristics of the still images or video, or delete the still images or video from memory 102. Embodiments of user interfaces and related processes that use camera module 143 are described in detail below.

[0063] In conjunction with touchscreen 112, display controller 156, contacts module 130, graphics module 132, text input module 134, and camera module 143, image management module 144 can be used to arrange, modify, otherwise manipulate, label, delete, present (e.g., in a digital slide show or album), and store still and / or video images. Embodiments of user interfaces and related processes that use image management module 144 are described in detail below.

[0064] In conjunction with touchscreen 112, display controller 156, contact module 130, graphics module 132, audio circuitry 110, and speaker 111, video player module 145 can be used to display, present, or otherwise play video (e.g., on the touchscreen or on an external display connected via external port 124). Embodiments of user interfaces and related processes that use video player module 145 are described in detail below.

[0065] In conjunction with touchscreen 112, display system controller 156, contact module 130, graphics module 132, audio circuitry 110, speaker 111, RF circuitry 108, and browser module 147, music player module 146 allows a user to download and play recorded music and other sound files stored in one or more file formats, such as MP3 or AAC files. In one embodiment, device 100 may include the functionality of an MP3 player, such as an iPod (trademark of Apple Computer, Inc.). Embodiments of user interfaces and related processes using music player module 146 are described in detail below.

[0066] In conjunction with RF circuitry 108, touch screen 112, display system controller 156, contacts module 130, graphics module 132, and text input module 134, browser module 147 can be used to browse the Internet, including searching for, linking to, receiving, and displaying web pages or portions thereof, as well as attachments and other files linked to web pages. Embodiments of user interfaces and related processes using browser module 147 are described in detail below.

[0067] In conjunction with RF circuitry 108, touch screen 112, display system controller 156, contacts module 130, graphics module 132, text input module 134, email module 140, and browser module 147, calendar module 148 can be used to create, display, modify, and store calendars and calendar-related data (e.g., calendar entries, to-do lists, etc.). Embodiments of user interfaces and related processes that use calendar module 148 are described in detail below.

[0068] In conjunction with the RF circuitry 108, touchscreen 112, display system controller 156, contacts module 130, graphics module 132, text input module 134, and browser module 147, widget modules 149 are mini-applications that can be downloaded and used by a user (e.g., weather widget 149-1, stocks widget 149-2, calculator widget 149-3, alarm clock widget 149-4, and dictionary widget 149-5), or mini-applications created by a user (e.g., user-created widget 149-6). In one embodiment, a widget includes an HTML (HyperText Markup Language) file, a CSS (Cascading Style Sheets) file, and a JavaScript file. In one embodiment, a widget includes an XML (Extensible Markup Language) file and a JavaScript file (e.g., Yahoo! Widget). Embodiments of user interfaces and related processes that use widget modules 149 are described in detail below.

[0069] In conjunction with the RF circuitry 108, touch screen 112, display system controller 156, contacts module 130, graphics module 132, text input module 134, and browser module 147, widget creator module 150 can be used by a user to create a widget (e.g., direct a user-specified portion of a web page to the widget). Embodiments of user interfaces and related processes using widget creator module 150 are described in detail below.

[0070] In conjunction with touchscreen 112, display system controller 156, contacts module 130, graphics module 132, and text input module 134, search module 151 can be used to search memory 102 for text, music, sound, images, video, and / or other files that match one or more search criteria (e.g., one or more user-specified search terms). Embodiments of user interfaces and related processes that use search module 151 are described in detail below.

[0071] In conjunction with touch screen 112, display system controller 156, contacts module 130, graphics module 132, and text input module 134, notes module 153 can be used to create and manage notes, to-do lists, etc. Embodiments of user interfaces and related processes that use notes module 153 are described in detail below.

[0072] In conjunction with RF circuitry 108, touchscreen 112, display system controller 156, contacts module 130, graphics module 132, text input module 134, GPS module 135, and browser module 147, map module 154 can be used to receive, display, modify, and store maps and map-related data (e.g., driving directions, data regarding businesses and other intersections at or near a particular location, and other location-based data). Embodiments of user interfaces and related processes that use map module 154 are described in detail below.

[0073] In conjunction with touchscreen 112, display system controller 156, contacts module 130, graphics module 132, audio circuitry 110, speaker 111, RF circuitry 108, text input module 134, email client module 140, and browser module 147, online video module 155 enables a user to access, browse, receive (e.g., by streaming and / or downloading), play (e.g., on the touchscreen or on an external display connected via external port 124), send emails with links to particular online videos, and otherwise manage online videos in one or more file formats, such as H.264. In one embodiment, instant messaging module 141 is used to send links to particular online videos rather than email client module 140. Further description of online video applications can be found in U.S. Provisional Patent Application No. 60 / 936,562, filed June 20, 2007, entitled "Portable Multifunction Device, Method, and Graphical User Interface for Playing Online Videos," which is incorporated herein by reference.

[0074] Each of the above-described modules and applications corresponds to a set of instructions for performing one or more of the functions described above. These modules (i.e., sets of instructions) need not be implemented as separate software programs, procedures, or modules; thus, various subsets of these modules may be combined or otherwise rearranged in various embodiments. For example, video player module 145 may be combined with music player module 146 into a single module (e.g., video and music player module 152, FIG. 1B ). In some embodiments, memory 102 may store a subset of the above-described modules and data structures. Additionally, memory 102 may store additional modules and data structures not described above.

[0075] In one embodiment, device 100 is a device in which operation of a defined set of functions on the device is performed exclusively through touchscreen 112 and / or touchpad. By using the touchscreen and / or touchpad as the primary input / control devices for operating device 100, the number of physical input / control devices (pushbuttons, dials, etc.) on device 100 can be reduced.

[0076] A defined set of functions that can be performed exclusively through the touchscreen and / or touchpad includes navigation through a user interface. In some embodiments, the touchpad, when touched by a user, navigates device 100 to a main, home, or root menu from a user interface that can be displayed on device 100. In such embodiments, the touchpad can be referred to as a "menu button." In other embodiments, the menu button can be a physical push button or other physical input / control device instead of a touchpad.

[0077] FIG. 2 illustrates a portable multifunction device 100 with a touchscreen 112 according to one embodiment. The touchscreen can display one or more graphics within a user interface (UI) 200. In this embodiment, and other embodiments described below, a user can select one or more graphics by, for example, contacting or touching the graphics with one or more fingers 202 (not drawn to scale). In some embodiments, selection of one or more graphics occurs when a user breaks contact with one or more graphics. In some embodiments, contact can include gestures such as one or more taps, one or more swipes (left to right, right to left, up and / or down), and / or rolling a finger in contact with device 100 (left to right, right to left, up and / or down). In some embodiments, accidental contact with a graphic does not result in selection of the graphic. For example, a swipe gesture wiping over an application icon may not select the corresponding application when the gesture corresponding to selection is a tap.

[0078] The device 100 may also include one or more physical buttons, such as a "home" or menu button 204. As mentioned above, the menu button 204 can be used to navigate to any application 136 in the set of applications that can run on the device 100. Alternatively, in some embodiments, the menu button is implemented as a soft key in the GUI of the touch screen 112.

[0079] In one embodiment, device 100 includes a touchscreen 112, a menu button 204, a push button 206 for powering the device on / off and locking the device, volume control button(s) 208, a subscriber identity module (SIM) card slot 210, a headset jack 212, and a docking / charging external port 124. Push button 206 can be used to power the device on / off by pressing and holding the button in a pressed state for a specified time interval, lock the device by pressing and releasing the button before the specified time interval, and / or unlock the device or initiate the unlock process. In another embodiment, device 100 can also accept verbal input to activate or deactivate certain functions through microphone 113.

[0080] Embodiments of user interfaces (UIs) and associated processes that may be implemented on portable multifunction device 100 are described below.

[0081] 3A-3C are diagrams illustrating example user interfaces for unlocking a portable electronic device according to one embodiment. In one embodiment, user interface 300A includes the following elements, or a subset or superset thereof: ● An unlock image 302 that is moved with a finger gesture to unlock the device; ● An arrow 304 that provides a visual cue for the unlock gesture; Channel 306 provides an additional cue for the unlock gesture; ●Time 308, ●Day 310, ● Date 312, and ●Wallpaper video 314.

[0082] In some embodiments, in addition to or instead of wallpaper video 314, the unlock user interface may include a device charging status icon 316 and a headset charging status icon 318 (e.g., UI 300B, FIG. 3B). Device charging status icon 316 indicates the battery status while device 100 is being recharged (e.g., in a dock). Similarly, headset charging status icon 318 indicates the battery status of a headset (e.g., a Bluetooth headset) associated with device 100 while the headset is being recharged (e.g., in another part of the dock).

[0083] In one embodiment, the device detects contact with the touch-sensitive display (e.g., a user's finger touching or near the unlocked image 302) while it is in the user interface locked state. The device moves the unlocked image 302 based on this contact. The device transitions to the user interface unlocked state if the detected contact corresponds to a predefined gesture, such as moving the unlocked image across the channel 306. Conversely, if the detected contact does not correspond to a predefined gesture, the device remains in the user interface locked state. This process conserves battery power by ensuring that the device is not accidentally woken up. This process is easy for the user to accomplish, in part because the visual cue(s) are provided on the touchscreen.

[0084] In one embodiment, after detecting an unlock gesture, the device displays a passcode (or password) interface (e.g., UI 300C, FIG. 3C) for entering a passcode to complete the unlock process. Adding a passcode protects the device against unauthorized use. In one embodiment, the passcode interface includes an emergency call icon that allows emergency calls (e.g., to 911) without entering a passcode. In one embodiment, using a passcode is a user-selectable option (e.g., part of settings 412).

[0085] As mentioned above, the process of unlocking a device using gestures on a touchscreen is described in U.S. patent application Ser. No. 11 / 322,549, filed Dec. 23, 2005, entitled "Unlocking A Device By Performing Gestures On An Unlock Image," and Ser. No. 11 / 322,550, filed Dec. 23, 2005, entitled "Indication Of Progress Towards Satisfaction Of A User Input Condition," both of which are incorporated herein by reference.

[0086] 4A and 4B are diagrams illustrating a user interface for a menu of applications on a portable multifunction device according to one embodiment. In one embodiment, user interface 400A includes the following elements, or a subset or superset thereof: signal strength indicator(s) 402 for wireless communication(s), such as cellular and Wi-Fi signals; ●Time 404, ● Bluetooth indicator 405, ● Battery status indicator 406, A tray 408 with icons of frequently used applications, such as: ○ A phone 138 that may include an indicator 414 of the number of missed calls or voicemail messages; An email client 140 that may include an indicator 410 of the number of unread emails; ○ Browser 147, ○Music player 146, and Icons of other applications, such as: ○IM141, ○Video management 144, ○ Camera 143, ○Video player 145, ○Weather 149-1, ○Stock 149-2, ○Blog 142, ○Calendar 148, ○Calculator 149-3, ○Alarm clock 149-4, Dictionary 149-5, and ○User-generated widget 149-6.

[0087] In one embodiment, user interface 400B includes the following elements, or a subset or superset thereof: - 402, 404, 406, 141, 148, 144, 143, 149-3, 149-2, 149-1, 149-4, 410, 414, 138, 140, and 147, as mentioned above; ●Map 154, ●Note 153, Settings 412, which provide access to the settings of the device 100 and its various applications 136, as described in more detail below; a video and music player module 152, also referred to as an iPod (trademark of Apple Computer, Inc.) module 152; and • Online video module, also known as YouTube (trademark of Google Inc.) module 155 .

[0088] In some embodiments, UI 400A or 400B displays all available applications 136 on a single screen, eliminating the need to scroll through the list of applications (e.g., with a scroll bar). In some embodiments, as the number of applications increases, the size of the icons corresponding to the applications is reduced so that all applications can be displayed on a single screen without scrolling. In some embodiments, having all applications on a single screen and a menu button allows a user to access a desired application with at most two inputs: activating menu button 204 (e.g., by tapping on the icon corresponding to the application or by other finger gesture) and then activating the desired application. In some embodiments, a defined gesture on menu button 204 (e.g., tapping twice or double-clicking) serves as a shortcut to initiate the display of a particular user interface in a particular application. In some embodiments, this shortcut is a user-selectable option (e.g., part of settings 412). For example, if a user frequently calls individuals listed in a favorites UI (e.g., UI 2700A, FIG. 27A) on phone 138, the user may select to have the favorites UI displayed in response to double-clicking the menu button. As another example, the user may select to have a UI with information about currently playing music (e.g., UI 4300S, FIG. 43S) displayed in response to double-clicking the menu button.

[0089] In some embodiments, UI 400A or 400B provides unified access to both widget-based and non-widget-based applications. In some embodiments, all widgets, whether user-created or not, are displayed in UI 400A or 400B. In other embodiments, activating an icon for a user-created widget 149-6 can lead to another UI that includes the user-created widget or an icon corresponding to the user-created widget.

[0090] In one embodiment, a user can rearrange icons in UI 400A or 400B using the process described in U.S. patent application Ser. No. 11 / 459,602, entitled "Portable Electronic Device With Interface Reconfiguration Mode," filed July 24, 2006, which is incorporated herein by reference. For example, a user can use finger gestures to move application icons to and from tray 408.

[0091] In one embodiment, UI 400A or 400B includes a gauge (not shown) that displays updated account usage metrics for an account (e.g., a cellular phone account) associated with use of the device, as described in U.S. patent application Ser. No. 11 / 322,552, entitled "Account Information Display For Portable Communication Device," filed Dec. 23, 2005, which is incorporated herein by reference.

[0092] In one embodiment, when a device switches from using a WiFi network to using a cellular network for data transmission (e.g., because the WiFi signal is weak or unavailable), the signal strength indicator 402 for the WiFi network (FIG. 4B) is replaced with a symbol for the cellular network (e.g., the letter “E” for the EDGE network, FIG. 4A).

[0093] 5 is a diagram illustrating an example user interface for listing instant message conversations on a portable multifunction device in accordance with one embodiment. In one embodiment, user interface 500 includes the following elements, or a subset or superset thereof: - 402, 404 and 406 mentioned above; "Instant Message" or other similar label 502; the person's name 504 (e.g., Jane Doe 504-1) who is the user with whom the instant message conversation took place, or a phone number if the person's name is unavailable (e.g., 408-123-4567 504-3); ● The text of the last message in the conversation 506, the date 508 and / or time of the last message in the conversation; a selection icon 510 that, when activated (e.g., by tapping the icon with a finger), initiates a transition to the UI for the corresponding conversation (e.g., FIG. 6A for Jane Doe 504-1); an edit icon 512 that, when activated (e.g., by tapping the icon with a finger), initiates a transition to a UI for deleting a conversation (e.g., FIG. 7); a message creation icon 514 that, when activated (e.g., by tapping the icon with a finger), initiates a transition to the user's contact list (e.g., FIG. 8A); and • A vertical bar 516 that helps the user understand which part of the list of instant message conversations is being displayed.

[0094] In one embodiment, the name 504 used in the instant message conversation is determined by finding an entry in the user's contact list 137 that contains the phone number to be used in the instant message conversation. If no such entry is found, only the phone number is displayed (e.g., 504-3). In one embodiment, if the other party sends a message from two or more different phone numbers, the messages may appear as a single conversation under a single name if all phone numbers used are found in the same entry (i.e., the entry for the other party) in the user's contact list 137.

[0095] Automatic grouping of instant messages into "conversations" (instant message exchanges with the same user or the same phone number) makes it easy for users to conduct and track instant message exchanges with multiple parties.

[0096] In one embodiment, vertical bar 516 is temporarily displayed after an object is detected on or near the touchscreen display (e.g., a finger touch is detected anywhere on the list of instant message conversations). In one embodiment, vertical bar 516 has a vertical position on the displayed portion of the list that corresponds to the vertical position of the displayed portion of the list within the list. In one embodiment, vertical bar 516 has a vertical length that corresponds to the portion of the list that is displayed. In one embodiment, if the entire list of IM conversations can be displayed simultaneously on touchscreen 112, vertical bar 516 is not displayed. In one embodiment, if the entire list of IM conversations can be displayed simultaneously on touchscreen 112, vertical bar 516 is displayed with a length that corresponds to the length of the list display area (e.g., as shown in FIG. 5).

[0097] 6A-6K are diagrams illustrating example user interfaces for entering instant message text according to one embodiment.

[0098] In one embodiment, user interface 600A includes the following elements, or a subset or superset thereof: - 402, 404 and 406 mentioned above; • A name 504 corresponding to the telephone number used in the instant message conversation (or the telephone number itself if the name is not available); an instant message icon 602 that, when activated (e.g., by tapping the icon with a finger), initiates a transition to a UI (e.g., UI 500) that lists instant message conversations; Instant messages 604 from other parties, typically listed neatly along one side of the UI 600A; • Instant messages 606 from other parties, typically listed neatly along the opposite side of the UI 600A to show the back-and-forth interaction of messages in the conversation; • timestamps 608 for at least some of the instant messages; ●Text entry box 612, • a send icon 614 that, when activated (e.g., by tapping the icon with a finger), initiates sending of the message in the text box 612 to another party (e.g., Jane Doe 504-1); ● a character keyboard 616 for entering text into the box 612; another keyboard selector icon 618 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a different keyboard (e.g., 624, FIG. 6C); • a send icon 620 that, when activated (e.g., by tapping the icon with a finger), initiates sending of the message in the text box 612 to another party (e.g., Jane Doe 504-1); a shift key 628 that, when activated (e.g., by tapping a finger on an icon), capitalizes the next character selected on the character keyboard 616; and • A vertical bar 630 that helps the user understand which part of the list of instant messages in an IM conversation is displayed.

[0099] In one embodiment, a user can scroll through a message conversation (consisting of messages 604 and 606) by applying a vertical swipe gesture 610 to the area displaying the conversation. In one embodiment, a vertical downward gesture scrolls down the conversation, revealing older messages in the conversation. In one embodiment, a vertical upward gesture scrolls up the conversation, revealing newer, more recent messages in the conversation. In one embodiment, as described above, the last message in the conversation (e.g., 606-2) is displayed in the list of instant messages 500 (e.g., 506-1).

[0100] In one embodiment, the keys on keyboards 616 (FIGS. 6A, 6B, 6E-6K), 624 (FIG. 6C), and / or 639 (FIG. 6D) briefly change shade and / or color when touched / activated by the user to assist the user in learning to activate the desired keys.

[0101] In some embodiments, vertical bar 630 is temporarily displayed after an object is detected on or near the touchscreen display (e.g., a finger touch is detected anywhere in the list of instant messages). In some embodiments, vertical bar 630 has a vertical position on the displayed portion of the list that corresponds to the vertical position of the displayed portion of the list within the list. In some embodiments, vertical bar 630 has a vertical length that corresponds to the portion of the list that is displayed. For example, in FIG. 6A , the vertical position of vertical bar 630 indicates that the bottom of the list of messages (corresponding to the most recent message) is displayed, and the vertical length of vertical bar 630 indicates that approximately half of the messages in the conversation are displayed.

[0102] In one embodiment, the user interface 600B includes the following elements, or a subset or superset thereof: - 402, 404, 406, 504, 602, 604, 606, 608, 612, 614, 616, 618, 620, 630 mentioned above, and • A word suggestion area 622 that provides a list of possible words to complete the word fragment being typed by the user in box 612 .

[0103] In some embodiments, the word suggestion area does not appear in UI 600B until after a specified time delay (e.g., 2-3 seconds) in the text has been entered by the user. In some embodiments, the word suggestion area is not used or can be turned off by the user.

[0104] In one embodiment, user interface 600C includes the following elements, or a subset or superset thereof: - 402, 404, 406, 602, 604, 606, 608, 612, 614, 620, and 622 mentioned above; Another keyboard 624, primarily composed of numbers and punctuation marks, with frequently used punctuation keys (e.g., period key 631, comma key 633, question mark key 635, and exclamation mark key 637) made larger than the other keys; a character keyboard selector icon 626 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a character keyboard (e.g., 616, FIG. 6A); and • A shift key 628 that, when activated (eg, by tapping a finger on an icon), initiates the display of yet another keyboard (eg, 639, FIG. 6D).

[0105] In one embodiment, holding the period key 631 near the keyboard selector icon 626 reduces the distance a user's finger must travel to enter frequently used periods.

[0106] In one embodiment, the user interface 600D includes the following elements, or a subset or superset thereof: - 402, 404, 406, 504, 602, 604, 606, 608, 612, 614, 620, 622, 626, 628, and - Yet another keyboard 639, which is primarily made up of symbols and punctuation marks, with frequently used punctuation keys (e.g., period key 631, comma key 633, question mark key 635, and exclamation mark key 637) made larger than the other keys.

[0107] In one embodiment, the user interface 600E includes the following elements, or a subset or superset thereof: - 402, 404, 406, 504, 602, 604, 606, 608, 612, 614, 616, 618, 620 mentioned above, and - New instant message 606-3 sent to the other party.

[0108] In one embodiment, when the user activates a second key (e.g., 614 or 620), the text in text box 612 "pops" or otherwise emerges from the box and becomes part of the string in the user's message 606 to the other party. The black arrow in Figure 6E illustrates the animated formation of quote bubble 606-3. In one embodiment, the size of the quote bubble increases or decreases with the size of the message. In one embodiment, a sound, such as the sound of water dripping, is also made to notify the user when the message is sent.

[0109] In one embodiment, the user interface 600F includes the following elements, or a subset or superset thereof: - 402, 404, 406, 612, 614, 616, 618, 620, and 628 mentioned above; a recipient input field 632 that, when activated (e.g., by tapping the field with a finger), receives and displays the phone number of the recipient of the instant message (or the recipient's name, if the recipient is already in the user's contact list); an add recipient icon 634 that, when activated (e.g., by tapping the icon with a finger), initiates a scrollable contact list (e.g., 638, FIG. 6G); and • A cancel icon 636 that, when activated (eg, by tapping the icon with a finger), cancels the new instant message.

[0110] In one embodiment, user interface 600G includes the following elements, or a subset or superset thereof: - 402, 404, 406, 612, 614, 616, 618, 620, 628, 632, 634, and 636 mentioned above; a scrollable list 638 of contacts that match the entry in the recipient entry field 632; and • A vertical bar 640 that helps the user understand how many items in the contact list are displayed that match the entry in the recipient entry field 632 .

[0111] In one embodiment, list 638 includes contacts that match the entry in recipient entry field 632. For example, if the letter "v" is entered, contacts whose first or last name begins with "v" are shown. If the letter "va" is entered in field 632, the list of contacts is narrowed to contacts whose first or last name begins with "va," and so on, until one of the displayed contacts is selected (e.g., by tapping the contact in list 638).

[0112] In some embodiments, a user can scroll through list 638 by applying a vertical swipe gesture 642 to an area displaying list 638. In some embodiments, a vertical downward gesture scrolls down the list, and a vertical upward gesture scrolls up the list.

[0113] In one embodiment, vertical bar 640 is temporarily displayed after an object is detected on or near the touchscreen display (e.g., a finger touch is detected anywhere on list 638). In one embodiment, vertical bar 640 has a vertical position on the displayed portion of the list that corresponds to the vertical position of the displayed portion of the list within the list. In one embodiment, vertical bar 640 has a vertical length that corresponds to the portion of the list that is displayed.

[0114] In one embodiment, user interfaces 600H and 600I include the following elements, or a subset or superset thereof: - 402, 404, 406, 612, 614, 616, 618, 620, 628, 632, 634, and 636 mentioned above; • Suggested words 644 adjacent to the word being entered; the suggested word on the space bar of the keyboard 616, and / or • An insertion marker 656 (eg, a cursor, insertion bar, insertion point, or pointer).

[0115] In some embodiments, activating suggested word 644 (e.g., by tapping a finger on the suggested word) replaces the typed word with suggested word 644. In some embodiments, activating suggested word 646 (e.g., by tapping a finger on the space bar) replaces the typed word with suggested word 646. In some embodiments, a user can configure whether suggested words 644 and / or 646 are shown (e.g., by setting a user preference).

[0116] In one embodiment, to provide feedback to the user, a letter is briefly enlarged when it is selected (e.g., in Figure 6H, after typing "din", the "N" is briefly enlarged).

[0117] In one embodiment, user interfaces 600J and 600K include the following elements, or a subset or superset thereof: - 402, 404, 406, 612, 614, 616, 618, 620, 628, 632, 634, 636, and 656 mentioned above; A graphical extension 650 that helps the user adjust the position of an extension insertion marker 657 (sometimes called an "insertion point extender"); and ●Extended insert marker 657.

[0118] In some embodiments, finger contact 648-1 at or near insertion marker 656 initiates the display of insertion point magnifier 650 and expanded insertion marker 657-1. In some embodiments, as the finger contact is moved on the touchscreen (e.g., to position 648-2), the expanded insertion marker correspondingly moves (e.g., to 657-2) and the insertion point magnifier 650 correspondingly moves. Thus, insertion point magnifier 650 provides an efficient way to position a cursor or other insertion marker using finger input on the touchscreen. In some embodiments, magnifier 650 remains visible and can be repositioned (e.g., from 648-1 to 648-2 to 648-3) as long as continuous contact with the touchscreen is maintained.

[0119] In some embodiments, the portable electronic device displays a graphic and also displays an insertion marker (e.g., marker 656, FIG. 6I) at a first location in the graphic on the touchscreen display (e.g., FIG. 6I). In some embodiments, the insertion marker 656 is a cursor, insertion bar, insertion point, or pointer. In some embodiments, the graphic includes text (e.g., text in box 612, FIG. 6I).

[0120] A finger contact (e.g., contact 648-1, FIG. 6I) is detected on the touchscreen display. In some embodiments, the location of the finger contact is close to the location of the insertion marker. In some embodiments, the location of the finger contact is somewhere within the text entry area (e.g., box 612, FIG. 6I).

[0121] In response to the detected finger contact, an insert marker is expanded on the touchscreen display from a first size (e.g., marker 656, FIG. 6I) to a second size (e.g., marker 657-1, FIG. 6J), and a portion of a graphic on the touchscreen display (e.g., portion 650-1, FIG. 6J) is expanded from its original size to the expanded size.

[0122] In some embodiments, the portion of the graphic that is expanded includes the insertion marker and the adjacent graphic. In some embodiments, after the insertion point and the portion of the graphic are expanded, a graphic is displayed that includes the insertion marker and the adjacent graphic in its original size and expanded size.

[0123] Movement of the finger contact (eg, from 648-1 to 648-2, FIG. 6J) is detected on the touchscreen display.

[0124] The extended insertion marker is moved based on the detected movement of the finger contact from a first position (eg, 657-1, FIG. 6J) to a second position (eg, 657-2, FIG. 6J) on the graphic.

[0125] In some embodiments, the portion of the expanded graphic changes as the insertion marker moves from a first position to a second position (e.g., from 650-1 to 650-2, FIG. 6J). In some embodiments, the portion of the expanded graphic is displayed as a predetermined shape. In some embodiments, the portion of the expanded graphic (e.g., 650, FIG. 6J) is displayed as a circle. In some embodiments, the expanded insertion marker is within a circle.

[0126] In some embodiments, the detected movement of the finger contact has a horizontal component on the touchscreen display and a vertical component on the touchscreen display. In some embodiments, moving the expanded insertion marker 657 based on the detected movement of the finger contact includes moving the expanded insertion marker and the expanded portion of the graphic based on the horizontal component of the movement of the finger contact if the finger contact moves outside of the text entry area without breaking contact. For example, in FIG. 6I , if the finger contact moves from 648-2 (inside the text entry area 612) to 648-3 (inside the keyboard area), the expanded insertion marker 657 and the expanded portion of the graphic 650 may move horizontally along the bottom of the text entry area based on the horizontal component of the movement (not shown) from 648-2 to 648-3.

[0127] In one embodiment, moving the extended insertion marker based on the detected movement of the finger contact includes moving the extended insertion marker in a first area of ​​the touch screen that includes characters entered using a soft keyboard (e.g., text box 612, FIG. 6J), where the soft keyboard is located in a second area of ​​the touch screen away from the first area (e.g., keyboard 616, FIG. 6I).

[0128] In one embodiment, the expanded insertion marker shrinks from a second size to a first size (e.g., insertion marker 656, FIG. 6K) when finger contact with the touchscreen display is broken. In one embodiment, the shrinking includes an animation of expanded insertion marker 657 shrinking to insertion marker 656 in the second position. As used herein, animation refers to the display of a video sequence that gives the appearance of movement and notifies the user of an action that has been performed (e.g., moving the insertion point). Each animation that confirms an action by the device user typically takes a defined, limited amount of time, such as 0.2 to 0.5 seconds, 0.2 to 1.0 seconds, or 0.5 to 2.0 seconds, depending on the situation.

[0129] In one embodiment, the extended portion 650 of the graphic is contracted when finger contact with the touchscreen display is no longer detected for a predetermined period of time.

[0130] A graphical user interface of a portable electronic device with a touchscreen display includes an insertion marker and a graphic. In response to detecting a finger contact 648 with the touchscreen display, the insertion marker expands from a first size 656 to a second size 657, and a portion of the graphic is expanded. In response to detecting movement of the finger contact on the touchscreen display, the expanded insertion marker is moved based on the detected movement of the finger contact from a first location 657-1 on the graphic to a second location 657-2 on the graphic.

[0131] Further description of insertion marker positioning can be found in U.S. patent application Ser. No. 11 / 553,436, filed Oct. 26, 2006, entitled "Method, System, And Graphical User Interface For Positioning An Insertion Marker In A Touch Screen Display," and U.S. Provisional Patent Application Ser. No. 60 / 947,382, filed Jun. 29, 2007, entitled "Portable Multifunction Device, Method, and Graphical User Interface for Adjusting an Insertion Point Marker," the contents of which are incorporated herein by reference.

[0132] Further description of instant messaging on portable electronic devices can be found in U.S. Provisional Patent Application No. 60 / 883,819, filed January 7, 2007, entitled "Portable Electronic Device For Instant Messaging," and U.S. Provisional Patent Application No. 60 / 946,969, filed June 28, 2007, entitled "Portable Electronic Device For Instant Messaging," the contents of which are incorporated herein by reference.

[0133] 7 is a diagram illustrating an example user interface for deleting an instant message conversation according to one embodiment. In one embodiment, user interface 700 includes the following elements, or a subset or superset thereof: - 402, 404, 406, 502, 504, 506, 508, 510 mentioned above, ● Delete icon 702, ● Delete confirmation icon 704, and ●Exit icon 706.

[0134] In one embodiment, when a user activates edit icon 512 (FIG. 5), a delete icon 702 appears next to each instant message conversation. When a user activates the delete icon (e.g., by tapping it with a finger), the icon rotates 90 degrees (e.g., 702-4) or otherwise changes its appearance, and / or a second icon appears (e.g., delete confirmation icon 704). When a user activates the second icon, the corresponding instant message conversation is deleted.

[0135] This deletion process, which requires multiple gestures by the user on different portions of the touchscreen (e.g., the delete icon 702-4 and the delete confirmation icon 704 are on opposite sides of the touchscreen), significantly reduces the chances that a user will accidentally delete a conversation or other similar item.

[0136] When the user is finished deleting the IM conversation, they activate the end icon 706 (eg, by tapping it with their finger) and the device returns to the UI 500.

[0137] If there is a long conversation list (not shown) that fills more than the screen area, the user can scroll through the list using vertical up and / or vertical down gestures 708 on the touchscreen.

[0138] Further description of deletion gestures on portable electronic devices can be found in U.S. Provisional Patent Application No. 60 / 883,814, filed January 7, 2007, entitled "Deletion Gestures On A Portable Multifunction Device," and U.S. Provisional Patent Application No. 60 / 936,755, filed June 22, 2007, entitled "Deletion Gestures On A Portable Multifunction Device," the contents of which are incorporated herein by reference.

[0139] 8A and 8B are diagrams illustrating example user interfaces for a contact list according to one embodiment.

[0140] In one embodiment, user interfaces 800A and 800B include the following elements, or a subset or superset thereof: - 402, 404, 406 mentioned above, • a group icon 802 that, when activated (e.g., by tapping the icon with a finger), begins displaying a group of contacts; a name icon 804 (FIG. 8B) that, when activated (e.g., by tapping the icon with a finger), initiates an alphabetical display of the user's contacts by first name; a last name icon 804 (FIG. 8A) that, when activated (e.g., by tapping the icon with a finger), initiates an alphabetical display of the user's contacts by last name; • an alphabet list icon 808 that the user can touch to quickly reach a particular first letter in the displayed contact list; a cancel icon 810 that, when activated (e.g., by tapping the icon with a finger), transitions back to the previous UI (e.g., UI 500); and • Other number icon 812 that, when activated (e.g., by tapping the icon with a finger), initiates a transition to a UI (e.g., UI 900, Figure 9) for entering a phone number for instant messaging, e.g., a phone number not in the user's contact list.

[0141] In one embodiment, the functions of the first name icon 804 and last name icon 806 are incorporated into the settings 412 (FIG. 4B, e.g., as user conference settings) rather than being displayed in the contact list UI (e.g., 800A and 800B).

[0142] As described in U.S. patent application Ser. No. 11 / 322,547, entitled "Scrolling List With Floating Adjacent Index Symbols," filed Dec. 23, 2005; Ser. No. 11 / 322,551, entitled "Continuous Scrolling List With Acceleration," filed Dec. 23, 2005; and Ser. No. 11 / 322,553, entitled "List Scrolling In Response To Moving Contact Over List Of Index Symbols," filed Dec. 23, 2005, which are incorporated herein by reference, a user can scroll through vertical information and / or vertical downward gestures 814 on the touch screen.

[0143] 9 is a diagram illustrating an example user interface for entering an instant messaging phone number according to one embodiment. In one embodiment, user interface 900 includes the following elements, or a subset or superset thereof: - 402, 404, 406, 504, 602, and 624 mentioned above; a cancel icon 902 that, when activated (e.g., by tapping the icon with a finger), transitions back to the previous UI (e.g., UI 800A or UI 800B); a save icon 904 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a UI (e.g., UI 600A) for saving the entered phone number to an instant message conversation list (e.g., UI 500) and composing an instant message to be sent to the entered phone number; and • A numeric entry box 906 for entering a telephone number using the keyboard 624 .

[0144] Note that the keyboard that is displayed may depend on the context of the application. For example, the UI displays a keyboard with numbers (e.g., 624) when numeric input is required or expected. The UI displays a soft keyboard with letters (e.g., 616) when letter input is required or expected.

[0145] In one embodiment, rather than using UI 900, a phone number for an instant message can be entered in UI 600F (FIG. 6F) by using numeric keypad 624 to enter numbers in “To:” field 632.

[0146] Camera Figure 10 is a diagram illustrating a user interface for a camera according to one embodiment. In one embodiment, the user interface 1000 includes the following elements, or a subset or superset thereof: ●Viewfinder 1002, ● Camera roll 1004 for managing images and / or videos taken by a camera; ●Shutter 1006 for taking still images, • a record button 1008 for starting and stopping video recording; a timer 1010 for capturing video after a specified time delay; and • Video 1012 that appears as added to the camera roll 1004 when acquired (eg, by animation as shown diagrammatically in Figure 10).

[0147] In one embodiment, the camera orientation in shutter icon 1006 rotates as device 100 is rotated between portrait and landscape orientations.

[0148] 11 is a diagram illustrating an example user interface for a camera roll according to one embodiment. In one embodiment, the user interface 1100 includes the following elements, or a subset or superset thereof: 402, 404, and 406 mentioned above; - thumbnail images 1102 of images and / or videos obtained by the camera 143; a camera icon 1104 or an exit icon 1110 that, when activated (e.g., by tapping the icon with a finger), initiates a transition to the camera UI (e.g., UI 1000); and • A vertical bar 1112 that helps the user understand which part of the camera roll is being displayed.

[0149] In some embodiments, a user can use a vertical up and / or vertical down gesture 1106 on a touchscreen to scroll through thumbnails 1102. In some embodiments, a pause gesture on a particular thumbnail (e.g., a tap gesture 1108 on thumbnail 1102-11) initiates a transition to a larger view of the corresponding image (e.g., UI 1200A).

[0150] In some embodiments, vertical bar 1112 is temporarily displayed after an object is detected on or near the touchscreen display (e.g., a finger touch is detected anywhere on thumbnail 1102). In some embodiments, vertical bar 1112 has a vertical position on the displayed portion of the camera roll that corresponds to the vertical position of the displayed portion of the camera roll within the camera roll. In some embodiments, vertical bar 1112 has a vertical length that corresponds to the portion of the camera roll that is displayed. For example, in FIG. 11 , the vertical position of vertical bar 1112 indicates that the middle of the camera roll is being displayed, and the vertical length of vertical bar 1112 indicates that approximately half of the images in the camera roll are being displayed.

[0151] 12A-12C are diagrams illustrating example user interfaces for viewing and manipulating captured video in accordance with one embodiment.

[0152] In one embodiment, user interface 1200A includes the following elements, or a subset or superset thereof: - 402, 404, 406, 1104, and 1110 mentioned above; a camera roll icon 1202 that, when activated (e.g., by tapping the icon with a finger), initiates a transition to the camera roll UI (e.g., UI 1100); ●Video 1204, an additional options icon 1206 that, when activated (e.g., by tapping the icon with a finger), initiates a transition to a UI (e.g., UI 1700, FIG. 17) with additional options for using the video 1204; a foreground video icon 1208 that, when activated (e.g., by tapping the icon with a finger), begins displaying the foreground video (e.g., 1102-10) in the camera roll; a play icon 1210 that, when activated (e.g., by tapping the icon with a finger), starts a slideshow of the videos in the camera roll; a next video icon 1212 that, when activated (e.g., by tapping the icon with a finger), begins displaying the next video (e.g., 1202-12) in the camera roll; a delete sign icon 1214 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a UI (e.g., UI 1200B, FIG. 12B) for the user to confirm that they want to delete the video 1204; a vertical bar 1222 that helps the user understand what portion of the image 1204 is being displayed; and • A horizontal bar 1224 that helps the user understand what portion of the image 1204 is being displayed.

[0153] In some embodiments, the user can also begin viewing the foreground image by performing a tap gesture 1216 on the left side of the image, or in some embodiments, the user can also begin viewing the foreground image by performing a left-to-right swipe gesture 1220 on the image.

[0154] In some embodiments, the user can also begin viewing the next video by performing a tap gesture 1218 on the right side of the video, and in some embodiments, the user can also begin viewing the next video by performing a right-to-left swipe gesture 1220 on the video.

[0155] By providing multiple ways to accomplish the same task (e.g., tap icon 1212, tap 1218, or swipe right to left 1220 to view the next video), the user can choose which way they prefer, making the UI easier and more intuitive for the user.

[0156] In one embodiment, image 1204 moves off-screen to the left as the next image moves onto the screen from the right, and in one embodiment, image 1204 moves off-screen to the right as the previous image moves onto the screen from the left.

[0157] In some embodiments, a tap gesture such as 1216 or 1218 does not initiate viewing of another image, but rather enlarges image 1204 by a predetermined amount so that only a portion of image 1204 is displayed. In some embodiments, when the image is already enlarged, repeating the tap gesture causes the image to shrink (e.g., so that the entire image is displayed).

[0158] In one embodiment, when only a portion of image 1204 is displayed, vertical bar 1222 is temporarily displayed after an object is detected on or near the touchscreen display (e.g., a finger touch is detected anywhere on image 1204). In one embodiment, vertical bar 1222 has a vertical position on the displayed portion of the image that corresponds to the vertical position within the image of the displayed portion of the image. In one embodiment, vertical bar 1222 has a vertical length that corresponds to the portion of the image that is displayed. For example, in FIG. 12A , the vertical position of vertical bar 1222 indicates that the top of the image is displayed, and the vertical length of vertical bar 1222 indicates that a portion from the top half of the image is displayed.

[0159] In one embodiment, when only a portion of image 1204 is displayed, horizontal bar 1224 is briefly displayed after an object is detected on or near the touchscreen display (e.g., a finger touch is detected anywhere on image 1204). In one embodiment, horizontal bar 1224 has a horizontal position of the top of the displayed portion of the image that corresponds to the horizontal position of the displayed portion of the image within the image. In one embodiment, horizontal bar 1224 has a horizontal length that corresponds to the portion of the image that is displayed. For example, in FIG. 12A , the horizontal position of horizontal bar 1224 indicates that a portion of the right side of the image is being displayed, and the horizontal length of horizontal bar 1224 indicates that a portion from the right half of the image is being displayed. Taken together, vertical bar 1222 and horizontal bar 1224 indicate that the northeast quadrant of image 1204 is being displayed.

[0160] In one embodiment, user interface 1200B includes the following elements, or a subset or superset thereof: - 402, 404, 406, 1104, 1110, 1202, and 1204 mentioned above; a delete icon 1216 that, when activated (e.g., by tapping the icon with a finger), deletes the video 1204; and • A cancel icon 1218 that, when activated (eg, by tapping the icon with a finger), returns the device to the previous user interface (eg, UI 1200A).

[0161] In one embodiment, the video may progress through a deletion animation to indicate to the user that the video will be deleted, as shown in Figure 12C.

[0162] This deletion process, which requires gestures by the user in two different user interfaces (eg, 1200A and 1200B), significantly reduces the chances that the user will accidentally delete a video or other similar item.

[0163] 13A and 13B are diagrams illustrating an example user interface for viewing albums according to one embodiment. In one embodiment, user interface 1300A includes the following elements, or a subset or superset thereof: 402, 404, and 406 mentioned above; A graphic 1304, e.g., a thumbnail image of the first picture or a user-selected picture in the corresponding album; ●Album name 1306, • a selection icon 1308 that, when activated (e.g., by tapping the icon with a finger), initiates a display of the corresponding album (e.g., UI 1500, FIG. 15); a settings icon 1310 that brings up a settings menu (e.g., FIG. 14) when activated by a user gesture (e.g., a tap gesture); and • A vertical bar 1314 that helps the user understand what portion of the list of albums is being displayed.

[0164] In one embodiment, as shown in FIG. 13B, one of the photo albums (e.g., 1306-7) corresponds to the user's photo library, another album (e.g., 1306-8) corresponds to the camera roll (FIG. 11), another album (e.g., 1306-9) corresponds to images added to the photo library over the last 12 months, and other albums (e.g., 1306-10 through 1306-13) correspond to albums created and organized by the user.

[0165] Albums can be downloaded to the device from a wide range of sources, such as the user's desktop or laptop computer, the Internet, etc.

[0166] If there is a long list of albums that fills more than the screen area, the user can scroll through the list using vertical up and / or vertical down gestures 1312 on the touchscreen.

[0167] In some embodiments, a user can tap anywhere in the row for a particular album (e.g., by tapping the graphic 1304, the album name 1306, or the selection icon 1308) to begin displaying the corresponding album (e.g., UI 1500, FIG. 15).

[0168] In one embodiment, vertical bar 1314 is temporarily displayed after an object is detected on or near the touchscreen display (e.g., a finger touch is detected anywhere on the list of albums). In one embodiment, vertical bar 1314 has a vertical position on the displayed portion of the list that corresponds to the vertical position of the displayed portion of the list within the list. In one embodiment, vertical bar 1314 has a vertical length that corresponds to the portion of the list that is displayed. For example, in Figure 13B, the vertical position of vertical bar 1314 indicates that the top of the list of albums is displayed, and the vertical length of vertical bar 1314 indicates that approximately half of the albums in the list are displayed.

[0169] 14 is a diagram illustrating an example user interface for setting user preferences according to one embodiment. In one embodiment, user interface 1400 includes the following elements, or a subset or superset thereof: 402, 404, and 406 mentioned above; Music settings 1402 for selecting music during the slideshow (e.g., Now Playing, 90s Music, Recently Added, or Off); • A Repeat setting 1404 (e.g., On or Off) for selecting whether the slideshow should repeat; • A Shuffle setting 1406 (e.g., On or Off) for selecting whether the slideshow images are placed in random order; ● Time per slide setting 1408 (e.g., 2, 3, 5, 10, 20 seconds or manual); Transition settings 1410 (e.g., random, wipe across, wipe down, or off); TV out setting 1412 for external displays (e.g., on, off, or ask); TV signal setting 1414 (e.g., NTSC or PAL), ● Auto Rotate setting 1416 (e.g., On or Off), a Done icon 1418 that, when activated (e.g., by tapping the icon with a finger), returns the device to the previous UI (e.g., UI 1300); and • A selection icon 1420 that, when activated (eg, by tapping the icon with a finger), indicates a selection for the corresponding setting.

[0170] In some embodiments, the user can tap anywhere on the row for a particular setting to initiate a display of the corresponding setting selections.

[0171] In one embodiment, the settings in FIG. 14 are incorporated into settings 412 (FIG. 4B), and settings icon 1310 need not be displayed in video management application 144 (eg, FIG. 13B).

[0172] 15 is a diagram illustrating an example user interface for viewing an album according to one embodiment. In one embodiment, user interface 1500 includes the following elements, or a subset or superset thereof: 402, 404, and 406 mentioned above; ● a photo album icon 1502 that, when activated (e.g., by tapping the icon with a finger), initiates a transition to a photo album UI (e.g., UI 1300B); ● 1506 thumbnail images of the corresponding album images, a play icon 1508 that, when activated (e.g., by tapping the icon with a finger), starts a slideshow of the album's videos; and • A vertical bar 1514 that helps the user understand which portion of the list of album thumbnail images 1506 is being displayed.

[0173] In some embodiments, a user can use vertical up and / or vertical down gestures 1510 on a touchscreen to scroll through the thumbnails 1506. In some embodiments, a pause gesture on a particular thumbnail (e.g., a tap gesture 1512 on thumbnail 1506-11) initiates a transition to a larger view of the corresponding video (e.g., UI 1600).

[0174] In one embodiment, vertical bar 1514 is temporarily displayed after an object is detected on or near the touchscreen display (e.g., a finger touch is detected anywhere on the list of thumbnails). In one embodiment, vertical bar 1514 has a vertical position on the displayed portion of the list that corresponds to the vertical position of the displayed portion of the list within the list. In one embodiment, vertical bar 1514 has a vertical length that corresponds to the portion of the list that is being displayed. For example, in FIG. 15, the vertical position of vertical bar 1514 indicates that the middle of the list of thumbnails is being displayed, and the vertical length of vertical bar 1514 indicates that approximately half of the thumbnails in the album are being displayed.

[0175] 16A and 16B are diagrams illustrating example user interfaces for viewing images in an album according to one embodiment. In one embodiment, user interfaces 1600A and 1600B include the following elements, or a subset or superset thereof: 402, 404, and 406 mentioned above; an album name icon 1602 that, when activated (e.g., by tapping the icon with a finger), initiates a transition to the corresponding album UI (e.g., UI 1500); ●Video 1606, an additional options icon 1608 that, when activated (e.g., by tapping the icon with a finger), initiates a transition to a UI (e.g., UI 1700, FIG. 17) with additional options for using the video 1606; a front image icon 1610 that, when activated (e.g., by tapping the icon with a finger), begins displaying the front image (e.g., 1506-10) in the album; a play icon 1612 that, when activated (e.g., by tapping the icon with a finger), starts a slideshow of the album's videos; and - Next Video icon 1614, which when activated (eg, by tapping the icon with a finger) begins displaying the next video in the album (eg, 1506-12).

[0176] In one embodiment, icons 1608, 1610, 1612, and 1614 are displayed in response to detecting a gesture on the touchscreen (e.g., a single finger tap on image 1606), and then cease display if no interaction with the touchscreen is detected after a predetermined time (e.g., 3 to 5 seconds), thereby providing a "heads-up display" effect for the icons.

[0177] In some embodiments, the user can also begin viewing the foreground image by performing a tap gesture 1618 on the left side of the image, or in some embodiments, the user can also begin viewing the foreground image by performing a left-to-right swipe gesture 1616 on the image.

[0178] In some embodiments, the user can also begin viewing the next video by performing a tap gesture 1620 on the right side of the video, and in some embodiments, the user can also begin viewing the next video by performing a right-to-left swipe gesture 1616 on the video.

[0179] By providing multiple ways to accomplish the same task (e.g., tap icon 1614, tap 1620, or swipe right to left 1616 to see the next video), the user can choose which way they prefer, making the UI easier and more intuitive for the user.

[0180] In one embodiment, image 1606 moves off-screen to the left as the next image moves onto the screen from the right, and in one embodiment, image 1606 moves off-screen to the right as the previous image moves onto the screen from the left.

[0181] In some embodiments, a double-tap gesture such as 1618 or 1620 does not initiate viewing of another image, but instead magnifies image 1606 by a predetermined amount so that only a portion of image 1606 is displayed. In some embodiments, when the image is already magnified, repeating the double-tap gesture causes the image to shrink (e.g., so that the entire image is displayed or the previous view of the image is restored).

[0182] In one embodiment, a multi-finger de-pinching gesture enlarges image 1606 by a variable amount based on the location of the multi-finger de-pinching gesture and the amount of finger movement in the multi-finger de-pinching gesture, and in one embodiment, a multi-finger pinching gesture shrinks image 1606 by a variable amount based on the location of the multi-finger pinching gesture and the amount of finger movement in the multi-finger pinching gesture.

[0183] In one embodiment, when only a portion of image 1606 is displayed, vertical bar 1622 is temporarily displayed after an object is detected on or near the touchscreen display (e.g., a finger touch is detected anywhere on image 1606). In one embodiment, vertical bar 1622 has a vertical position on the displayed portion of the image that corresponds to the vertical position within the image of the displayed portion of the image. In one embodiment, vertical bar 1622 has a vertical length that corresponds to the portion of the image that is displayed. For example, in FIG. 16A , the vertical position of vertical bar 1622 indicates that the bottom of the image is displayed, and the vertical length of vertical bar 1622 indicates that a portion from the bottom half of the image is displayed.

[0184] In one embodiment, when only a portion of image 1606 is displayed, horizontal bar 1624 is briefly displayed after an object is detected on or near the touchscreen display (e.g., a finger touch is detected somewhere on image 1606). In one embodiment, horizontal bar 1624 has a horizontal position on the displayed portion of the image that corresponds to the vertical position within the image of the displayed portion of the image. In one embodiment, horizontal bar 1624 has a horizontal length that corresponds to the portion of the image that is displayed. For example, in FIG. 16A , the horizontal position of horizontal bar 1624 indicates that a portion of the left side of the image is being displayed, and the horizontal length of horizontal bar 1624 indicates that a portion from the left half of the image is being displayed. Taken together, vertical bar 1622 and horizontal bar 1624 indicate that the southwest quadrant of image 1606 is being displayed.

[0185] In one embodiment, in response to detecting a change in the orientation of device 100 from portrait to landscape orientation (e.g., using accelerometer 168), UI 1600A (including image 1606) is rotated 90 degrees to UI 1600B ( FIG. 16B ). In one embodiment, when only a portion of image 1606 is displayed in landscape orientation (UI 1600B, FIG. 16B ), vertical bar 1628 and horizontal bar 1630 are displayed and function similarly to vertical bar 1622 and horizontal bar 1624 (UI 1600A, FIG. 16A ) described above. In one embodiment, in response to detecting a change in the orientation of device 100 from landscape to portrait orientation (e.g., using accelerometer 168), UI 1600B is rotated 90 degrees to UI 1600A ( FIG. 16A ).

[0186] In one embodiment, if only a portion of the image 1606 is displayed, then in response to detecting a finger drag or swipe gesture (e.g., 1626), the displayed portion of the image is translated based on the direction of the drag or swipe gesture (e.g., vertical, horizontal, or diagonal translation).

[0187] 17 is a diagram illustrating an example user interface for selecting usage for video according to one embodiment. In one embodiment, user interface 1700 includes the following elements, or a subset or superset thereof: - 402, 404, 406, 1602, and 1606 mentioned above; • an email photo icon 1708 that, when activated (e.g., by tapping the icon with a finger), initiates the process of incorporating the image 1606 into an email (e.g., as shown in Figures 18A-18J); • a contact assignment icon 1710 that, when activated (e.g., by tapping the icon with a finger), initiates the process of associating the video 1606 with a contact in the user's contact list (e.g., as shown in Figures 19A-19B); a Use as Wallpaper icon 1712 that, when activated (e.g., by tapping the icon with a finger), begins the process of incorporating the video 1606 into the user's wallpaper (e.g., as shown in FIG. 20); and • A cancel icon 1714 that, when activated (eg, by tapping the icon with a finger), initiates a transition back to the previous UI (eg, UI 1600A).

[0188] 18A-18J are diagrams illustrating example user interfaces for incorporating video 1606 into an email according to one embodiment.

[0189] In response to a user activating email picture icon 1708, the device displays an animation to indicate that the picture has been placed into an email message, ready for text entry, addressing, and sending. In one embodiment, this animation involves first shrinking the picture (FIG. 18A), sliding the email message template behind or otherwise forming it in picture 1606 (FIG. 18B), and then expanding the picture (FIG. 18C).

[0190] In one embodiment, if the user taps or performs another defined gesture in the subject line 1804 or body of the email 1806 (FIG. 18D), the character keyboard 616 appears, allowing the user to enter subject and / or body text (FIG. 18E).

[0191] In one embodiment, to enter an email address, the user taps or makes another gesture on the To: line 1802 of the email, the user's contact list appears ( FIG. 18J ), the user taps or makes another gesture on the desired recipient / contact (e.g., taps Bob Adams 1816 in FIG. 18J ), and the device populates the email message with the corresponding email address ( FIG. 18G ). If others want a copy of the email, the user taps or makes another gesture on the CC: line 1818 of the email, the user's contact list appears ( FIG. 18J ), the user taps or makes another gesture on the desired recipient / contact (e.g., taps Darin Adler 1820 in FIG. 18J ), and the device populates the email message with the corresponding email address ( FIG. 18G ).

[0192] In one embodiment, to enter an email address, the user taps or performs another prescribed gesture on the email's To: line 1802 (FIG. 18E). An add recipient icon 1822 appears, which, when activated (e.g., by a finger tap on icon 1822), begins displaying a scrollable list (e.g., 1826, FIG. 18F) of contacts (if any) that match the entry in the To: field. For example, if the letter "B" is entered, contacts whose first or last name begin with "B" are shown. If the letter "Bo" is entered in the To: field, the list of contacts is narrowed to contacts whose first or last name begin with "Bo," and so on, until one of the displayed contacts is selected (e.g., by tapping the contact in list 1826, FIG. 18F). If someone else wants a copy of the email, the user taps or makes another prescribed gesture on the CC: line 1818 of the email and follows a similar procedure to that used to enter an address in the To: field.

[0193] In one embodiment, a user can scroll through list 1826 by applying a vertical swipe gesture 1828 to the area displaying list 1826 (FIG. 18F). In one embodiment, a vertically downward gesture scrolls down the list, and a vertically upward gesture scrolls up the list.

[0194] In one embodiment, vertical bar 1830 (FIG. 18F) is temporarily displayed after an object is detected on or near the touchscreen display (e.g., a finger touch is detected anywhere on list 1826). In one embodiment, vertical bar 1830 has a vertical position on the displayed portion of the list that corresponds to the vertical position of the displayed portion of the list within the list. In one embodiment, vertical bar 1830 has a vertical length that corresponds to the portion of the list that is displayed.

[0195] In some embodiments, the user may also enter an email address using one or more keyboards (eg, 616 and 624, not shown).

[0196] In one embodiment, as a user types an email message, suggested words 1832 appear near the word being typed and / or on the space bar 1834 (FIG. 18G). Activating suggested words 1832 (e.g., by tapping a finger on the suggested word) replaces the typed word with suggested word 1832 (FIG. 18H). Activating suggested words 1834 (e.g., by tapping a finger on the space bar) replaces the typed word with suggested word 1834 (FIG. 18H). In one embodiment, a user can configure whether suggested words 1832 and / or 1834 are shown (e.g., by setting a user preference). Further description of word suggestions can be found in U.S. patent application Ser. No. 11 / 620,641, filed Jan. 5, 2007, entitled "Method, System, And Graphical User Interface For Providing Word Recommendations for Text Input," and U.S. patent application Ser. No. 11 / 620,642, filed Jan. 5, 2007, entitled "Method, System, And Graphical User Interface For Providing Word Recommendations," both of which are incorporated herein by reference.

[0197] In one embodiment, a vertical bar 1836 (FIG. 18H), similar to the vertical bars described above, is displayed above the body of the email to help the user understand which portion of the email is being displayed.

[0198] The device sends the email message in response to the user activating send icon 1814 (FIG. 18I) (e.g., by tapping the icon with a finger). Alternatively, if the user activates cancel icon 1808, the device may display save draft icon 1810, don't save (or delete message) icon 1812, and edit message icon 1890. The device saves the draft, for example, to the drafts folder of email client 140 (FIG. 33) if the user activates save draft icon 1810. The device deletes the draft if the user activates don't save icon 1812. The device returns to editing the draft if the user activates edit message icon 1890.

[0199] 19A and 19B are diagrams illustrating an example user interface for assigning a picture 1606 to a contact in a user's contact list according to one embodiment.

[0200] In one embodiment, in response to a user activating contact assignment icon 1710, the device displays the user's contact list ( FIG. 19A ). In response to a user selecting a contact in the contact list (e.g., selecting Bob Adams with tap 1901 in UI 1900A, FIG. 19A ), the device displays a user interface (e.g., UI 1900B, FIG. 19A ) that allows the user to crop, scale, and otherwise adjust the image for the selected contact. In one embodiment, the user can move the image with a single-finger gesture 1908, enlarge the image with a de-pinching gesture using multiple contacts 1910 and 1912, zoom in with a pinching gesture using multiple contacts 1910 and 1912, and / or rotate the image with a twist gesture using multiple contacts 1910 and 1912. In one embodiment, in response to a user activating set photo icon 1906, the device assigns the adjusted image to the selected contact. Alternatively, the device stops the designation process in response to the user activating the cancel icon 1904. In some embodiments, the interface 1900B can include information 1902 to help guide the user.

[0201] FIG. 20 is a diagram illustrating an example user interface for incorporating video 1606 into a user's wallpaper in accordance with one embodiment.

[0202] In one embodiment, in response to a user activating the use as wallpaper icon 1712, the device displays a user interface (e.g., UI 2000, FIG. 20) that allows the user to crop, scale, and otherwise adjust the image. In one embodiment, the user can move the image with a single finger gesture 2008, enlarge the image with a spread gesture using multiple contacts 2010 and 2012, shrink the image with a narrow gesture using multiple contacts 2010 and 2012, and / or rotate the image with a twist gesture using multiple contacts 2010 and 2012. In one embodiment, in response to a user activating the set wallpaper icon 2006, the device designates the adjusted image as wallpaper. Alternatively, in response to a user activating the cancel icon 2004, the device stops the designation process. In one embodiment, the interface 2000 can include information 2002 to help guide the user.

[0203] Further description of image management can be found in U.S. Provisional Patent Application No. 60 / 883,785, entitled "Portable Electronic Device For Photo Management," filed January 6, 2007, and U.S. Provisional Patent Application No. 60 / 947,118, entitled "Portable Electronic Device For Photo Management," filed June 29, 2007, both of which are incorporated herein by reference.

[0204] Video Player 21A-21C are diagrams illustrating example user interfaces for organizing and managing videos according to one embodiment.

[0205] In one embodiment, in response to a series of gestures by the user (e.g., finger taps), the device displays a series of video categories and subcategories. For example, if the user activates selection icon 2101 (e.g., by tapping the icon with a finger) or, in one embodiment, taps anywhere in the "Playlists" row 2108, the UI switches from displaying the video categories (UI 2100A, FIG. 21A) to displaying the "Playlists" subcategory (UI 2100B, FIG. 21B). If the user then activates the "My Movies" selection icon (e.g., by tapping the icon with a finger) or, in one embodiment, taps anywhere in the "My Movies" row 2110, the UI switches from displaying the "Playlists" subcategory (UI 2100B, FIG. 21B) to displaying the "My Movies" subcategory (UI 2100C, FIG. 21C), and so on.

[0206] In one embodiment, in response to a series of gestures by the user (e.g., finger taps), the device navigates back up through the hierarchy of video categories and subcategories. For example, if the user activates the “Playlist” icon 2106 (e.g., by tapping the icon with a finger), the UI switches from displaying the “My Movies” subcategory (UI 2100C, FIG. 21C) to displaying the “Playlist” subcategory (UI 2100B, FIG. 21B). Then, if the user activates the Videos icon 2104 (e.g., by tapping the icon with a finger), the UI switches from displaying the “Playlist” subcategory (UI 2100B, FIG. 21B) to displaying the Videos category (UI 2100A, FIG. 21A). In another example, if the device detects a horizontal swipe gesture (e.g., a left-to-right swipe gesture), the device can navigate one level up in the hierarchy of video categories and subcategories. More generally, in response to detecting a horizontal swipe gesture (e.g., a left-to-right swipe gesture), the device can navigate one level up in the hierarchy of content categories, subcategories, and content (e.g., from UI4300S (Figure 43S) for individual songs to UI4300R (Figure 43R) for albums, from UI4300R (Figure 43R) for albums to UI4300Q for a list of albums, etc.).

[0207] In one embodiment, in response to a user selection of a particular video (e.g., by tapping or other specified gesture on a graphic, title, or anywhere in the row of the particular video 2112 (FIG. 21C)), the device displays the selected video (e.g., King Kong) in a video player UI (e.g., UI 2300A, FIG. 23A).

[0208] In one embodiment, in response to a user selection of the settings icon 2102 (eg, by tapping the icon with a finger), the device displays a settings UI for the video player (UI 2200A, FIG. 22A).

[0209] 22A and 22B are diagrams illustrating example user interfaces for setting user preferences for a video player according to one embodiment.

[0210] In one embodiment, the user can tap or perform another defined gesture anywhere in the row for a particular setting to initiate the display of the corresponding setting selection. For example, in response to a tap 2202 on the "Scale to fit" setting (UI 2200A, FIG. 22A), the device displays the setting selection for "Scale to fit" (UI 2200B, FIG. 22B).

[0211] In one embodiment, the user interface 2200B includes the following elements, or a subset or superset thereof: 402, 404, and 406 mentioned above; • A Settings icon 2204 that, when activated (e.g., by tapping the icon with a finger), returns the device to the Settings UI (e.g., UI 2200A); a "Scale to fit" icon 2206 that, when activated (e.g., by tapping the icon with a finger), sets the video player to scale the video to fit the touchscreen 112 ("widescreen mode"), resulting in two horizontal black bands at the top and bottom of the display for widescreen movies; • A "Scale to full" icon 2208 that, when activated (e.g., by tapping the icon with a finger), sets the video player to fill the touchscreen 112 with video ("full screen mode"); a Cancel icon 2210 that, when activated (e.g., by tapping the icon with a finger), returns the device to the previous UI (e.g., UI 2200A) without saving any changes selected by the user; and • Done icon 2212, which when activated (eg, by tapping the icon with a finger) saves the settings selected by the user and returns the device to the previous UI (eg, UI 2200A).

[0212] In some embodiments, the settings in Figure 22A are incorporated into settings 412 (Figure 4B) and settings icon 2102 need not be displayed in video application 145 (e.g., Figures 21A-21C). In some embodiments, the settings in Figure 22A are incorporated into the video player UI (e.g., as widescreen selector icon 2326 in Figure 23C and fullscreen selector icon 2328 in Figure 23D).

[0213] In some embodiments, vertical bars similar to those described above are displayed above the video category list (e.g., FIG. 21A), the subcategory list (e.g., FIG. 21B), and / or the video list (e.g., FIG. 21C) to help the user understand which portion of each list is being displayed. In some embodiments, if all lists can be displayed simultaneously on touch screen 112, the vertical bars are not displayed.

[0214] 23A-23D are diagrams illustrating example user interfaces for a video player according to one embodiment. In one embodiment, user interfaces 2300A-2300D include the following elements, or a subset or superset thereof: 402, 404, and 406 mentioned above; ●Video 2302, • A play icon 2304 that, when activated (e.g., by tapping the icon with a finger), begins playing the video 2302 from the beginning or from where the video was paused; • a pause icon 2306 that, when activated (e.g., by tapping the icon with a finger), initiates pausing of the video 2302; ● Elapsed time 2308, which indicates how much of the video has been played in hours; • A progress bar 2310 that can be used to indicate which fragment of the video has been played and to assist in scrolling the video in response to user gestures; • Time Remaining 2312, which indicates in units of time how much video remains to be played; an exit icon 2314 that, when activated (e.g., by tapping the icon with a finger), initiates an exit from the video player UI (e.g., UI 2300A) and a return to another UI (e.g., UI 2100C, FIG. 2100C); an enlarged elapsed time 2318 that appears in response to a user gesture 2316 with a progress bar 2310; • a fast rewind / skip backward icon 2320 that, when activated (e.g., by tapping the icon with a finger), begins rewinding or skipping backward through the video 2302; • a fast forward / skip forward icon 2322 that, when activated (e.g., by tapping the icon with a finger), begins skipping forward or forward through the video 2302; a volume adjustment slider icon 2324 that, when activated (e.g., by tapping the icon with a finger), begins adjusting the volume of the video 2302; • a widescreen selector icon 2326 that, when activated (e.g., by tapping the icon with a finger), begins displaying the video in widescreen mode and toggles to icon 2328; and • A full screen selector icon 2328 that when activated (eg, by tapping the icon with a finger) begins displaying the video in full screen mode and toggles to icon 2326 .

[0215] In one embodiment, in response to a user selection of a particular video (e.g., by tapping or other specified gesture on a graphic, title, or anywhere 2112 (FIG. 21C) in the row of a particular video in UI 2100C), the device displays the selected video (e.g., King Kong) in a video player UI (e.g., UI 2300A). In one embodiment, the device automatically displays the video in landscape mode rather than portrait mode on the touchscreen, increasing the size of the image on the touchscreen.

[0216] In some embodiments, graphics other than video 2302 (e.g., graphics 2304, 2306, 2308, 2310, 2312, 2314, 2320, 2322, 2326, and / or 2328) may fade out if there is no contact with touchscreen 112 for a specified period of time. In some embodiments, these graphics reappear if contact is made with the touchscreen, creating a "heads-up display" effect for the graphics. In some embodiments, for widescreen movies displayed in "fit-to-screen" mode, the graphics may be displayed with black horizontal bands above and below video 2302 to avoid obscuring the video.

[0217] In some embodiments, the elapsed time of the video may change in response to a user gesture. For example, in response to a user's finger touching or near the edge of the progress bar (2316) and then sliding along the progress bar, the elapsed time may change to correspond to the position of the user's finger along the progress bar. In some embodiments, an enlarged elapsed time 2318 is displayed during this user gesture to indicate where the video will resume playing when the gesture ends (FIG. 23B). In some embodiments, one or more still images from the video 2302 corresponding to where the video will resume playing are displayed as the user's finger is moved along the progress bar. This user gesture on the progress bar allows the user to easily select a particular scene of the video for viewing.

[0218] Further description of video players and managers can be found in U.S. Provisional Patent Application No. 60 / 883,784, entitled "Video Manager For Portable Multifunction Device," filed January 6, 2007, and U.S. Provisional Patent Application No. 60 / 946,973, entitled "Video Manager For Portable Multifunction Device," filed June 28, 2007, both of which are incorporated herein by reference.

[0219] weather 24A-24E are diagrams illustrating example user interfaces for displaying and managing weather widgets according to some embodiments.

[0220] In some embodiments, weather widget 149-1 displays the weather for a particular location (e.g., Santa Cruz, California in UI 2400A of FIG. 24A or Cupertino, California in UI 2400E of FIG. 24E). In response to a user activating settings icon 2402 (e.g., by tapping the icon with a finger), a settings UI for the weather widget is displayed (e.g., UI 2400B, FIG. 24B). In some embodiments, a user can select a particular location for display with a gesture (e.g., by touching a particular location in list of locations 2412 and highlighting the selected location). In some embodiments, the settings in FIG. 24B are merged into settings 412 (FIG. 4B), and settings icon 2402 may not be displayed in the weather widget (e.g., FIG. 24A).

[0221] In one embodiment, in response to a user's finger contacting the text entry box 2404 (FIG. 24B), a keyboard (e.g., 616) is displayed (UI 2400C, FIG. 24C). In one embodiment, a word suggestion area 622 is also displayed. In response to a user entering a new location and activating the add location icon 2406, the new location is added to the list of locations.

[0222] In one embodiment, the highlighted location is removed from the location list when the user activates the remove icon 2408 (e.g., by tapping the icon with a finger). In one embodiment, in response to the user activating the exit icon 2410, the device displays the weather for the selected location (e.g., UI 2400A, FIG. 24A).

[0223] In one embodiment, for each location in the location list, a corresponding icon 2414 is added to a UI (e.g., UI 2400A) that displays the weather for that particular location. For example, if there are four locations in the settings UI 2400B, four icons are displayed in the UI 2400A of FIG. 24A. In one embodiment, the icon 2414 corresponding to the location for which the weather is displayed can be highlighted to distinguish it from the other icons. For example, Santa Cruz, the third of the four locations set by the user, is highlighted in UI 2400B, and the weather for Santa Cruz is displayed in UI 2400A. Thus, the third of the four icons 2414 (i.e., 2414-3) is highlighted in UI 2400A. The icons 2414 allow the user to see at a glance how many locations are listed in the settings menu 2400B and which locations in the list are being displayed.

[0224] In one embodiment, a user can begin viewing the previous location in the list (e.g., Cupertino, California) by making a left-to-right swipe gesture 2416 on the touchscreen. In one embodiment, a user can begin viewing the next location in the list (e.g., New York, New York) by making a right-to-left swipe gesture 2416 on the touchscreen. In this example, when the weather for Cupertino, California is displayed, icon 2414-2 is highlighted (FIG. 24E). Similarly, when the weather for New York, New York is displayed, icon 2414-4 is highlighted.

[0225] Weather widget 149-1 is an example of a widget with a single shared settings / configuration page that provides settings for multiple widgets to display.

[0226] In one embodiment, the portable multifunction device displays a widget (e.g., Santa Cruz Weather Widget, FIG. 24A) on the touchscreen display. The displayed widget is one in a set of widgets that share a common configuration interface (e.g., FIG. 24B). In one embodiment, widgets in a widget set are displayed one at a time (e.g., FIGS. 24A and 24E).

[0227] One or more widget set indicia icons (e.g., icon 2414, FIG. 24A) are displayed that provide information about the number of widgets in the widget set and the position of the displayed widget within the widget set. In some embodiments, one or more widget set indicia icons are displayed simultaneously with the displayed widgets (e.g., FIG. 24A).

[0228] A finger gesture is detected on the touchscreen display. In one embodiment, the finger gesture is a swipe gesture (e.g., swipe 2416, FIG. 24A).

[0229] In response to the finger gesture, the displayed widget (e.g., the Santa Cruz weather widget, FIG. 24A) is replaced with another widget in the widget set (e.g., the Cupertino weather widget, FIG. 24E), and the information provided by the widget set icon is updated to reflect that the displayed widget has been replaced with another widget in the widget set. In one embodiment, the widget sets form a sequence, and the displayed widget is replaced with an adjacent widget in the sequence of widgets.

[0230] A graphic user interface on a portable communication device with a touchscreen display includes a set of widgets that share a common configuration interface and one or more widget set indicia icons (e.g., 2414). At most one widget in a widget set (e.g., the Santa Cruz weather widget, FIG. 24A) is shown on the touchscreen at a time. The widget set indicia icons provide information about the number of widgets in the widget set and the position of the displayed widget within the widget set. In response to detecting a finger gesture (e.g., 2416) on the touchscreen display, the displayed widget is replaced with another widget in the widget set, and the information provided by the widget set indicia icons is updated to reflect that the displayed widget has been replaced with another widget in the widget set.

[0231] In one embodiment, a portable multifunction device (eg, device 100) displays a first widget (eg, the Santa Cruz weather widget, FIG. 24A) on a touchscreen display.

[0232] A first gesture is detected on a settings icon (e.g., 2402, FIG. 24A) of a first widget on a touchscreen. In one embodiment, the first gesture is a tap gesture with a user's finger.

[0233] In response to the first gesture, user-adjustable settings for the plurality of widgets are displayed, including settings for the first widget (e.g., FIG. 24B). In one embodiment, in response to the first gesture, an animated transition from the first widget to settings for the plurality of widgets is displayed. In one embodiment, the plurality of widgets provide weather information for corresponding locations.

[0234] One or more additional gestures for toggling one or more settings for one or more widgets in the plurality of widgets are detected.

[0235] In response to the one or more additional gestures, one or more settings for one or more widgets in the plurality of widgets are toggled, including toggling one or more settings for each widget in the plurality of widgets other than the first widget.

[0236] A widget selection gesture and a completion gesture are detected on the touchscreen display. In some embodiments, the completion gesture is a tap gesture on a completion icon (e.g., icon 2410, FIG. 24B). In some embodiments, the completion icon is a "done" icon, an "okay" icon, or a "save" icon. In some embodiments, the widget selection gesture and the completion gesture are a single combined gesture. In some embodiments, the single combined gesture is a double tap gesture.

[0237] In response to the widget selection gesture and the completion gesture, a second widget among the plurality of widgets other than the first widget is displayed (eg, a weather widget for Cupertino, FIG. 24E).

[0238] A graphical user interface for a portable multifunction device with a touchscreen display includes a plurality of widgets, with at most one widget shown on the touchscreen at a time, and settings for the plurality of widgets. In response to a first gesture on a settings icon in a first widget among the plurality of widgets, user-adjustable settings for the plurality of widgets are displayed, including the settings for the first widget. In response to one or more additional gestures, one or more settings for one or more widgets among the plurality of widgets are toggled, including one or more settings for each widget among the plurality of widgets other than the first widget. In response to a widget selection gesture and a completion gesture, the toggled settings are saved, and a second widget among the plurality of widgets other than the first widget is displayed.

[0239] In some embodiments, for weather and other applications with location-based elements, the device can automatically provide current location information (e.g., as determined by GPS module 135) to the application. Thus, in some embodiments, a weather widget can provide weather information for the device's current location without the user having to explicitly enter the name or zip code of the current location. Similarly, current location information can also be automatically provided to widgets and other applications for finding and / or interacting with stores, restaurants, maps, etc. near the device's current location.

[0240] Further discussion of configuring and displaying widgets can be found in U.S. Provisional Patent Application No. 60 / 946,975, filed June 28, 2007, entitled "Portable Multifunction Device, Method, and Graphical User Interface for Configuring and Displaying Widgets," which is incorporated herein by reference.

[0241] KK 25A-25E are diagrams illustrating example user interfaces for displaying and managing stock widgets according to some embodiments.

[0242] In some embodiments, stock widget 149-2 displays information about multiple user-selected stocks (e.g., UI 2500A, FIG. 25A). In some embodiments, the displayed information is switched in response to a user gesture. For example, in response to a user touching (2504) the absolute gain and loss column (UI 2500A, FIG. 25A), percentage gains and losses may be displayed instead (UI 2500B, FIG. 25B). For example, in response to a user touching "1w," a one-week chart (INDU) for the highlighted stock may be displayed instead of a six-month chart ("6m").

[0243] In one embodiment, in response to a user activating settings icon 2502 (eg, by tapping the icon with a finger), a settings UI (eg, UI 2500C, FIG. 25C) for the stocks widget is displayed.

[0244] In one embodiment, in response to a user's finger contacting the text entry box (2506), a keyboard (e.g., 616) is displayed (UI 2500D, FIG. 25D). In one embodiment, a word suggestion area 622 is also displayed. In response to a user entering a new stock symbol or name and activating an add stock icon 2508, a new stock is added to the list of stocks.

[0245] In one embodiment, if the user activates the remove icon 2512 (e.g., by tapping the icon with a finger), the highlighted strain is removed from the strain list 2510. In one embodiment, in response to the user activating the exit icon 2514, the device displays strain information for the selected strain (e.g., UI 2500A, FIG. 25A).

[0246] phone 26A-26P are diagrams illustrating example user interfaces for viewing and managing contacts according to some embodiments.

[0247] In one embodiment, in response to a user activating the phone icon 138 in UI 400 (FIG. 4) (e.g., by tapping the icon with a finger), the user's contact list is displayed (e.g., UI 2600A, FIG. 26A).

[0248] As described in U.S. patent application Ser. No. 11 / 322,547, filed Dec. 23, 2005, entitled "Scrolling List With Floating Adjacent Index Symbols," which is incorporated herein by reference, a user can scroll through the contact list using vertical up and / or vertical down gestures 2602 on the touchscreen.

[0249] In one embodiment, in response to a user activating the add new contact icon 2604 (e.g., by tapping the icon with a finger), the touch screen displays a user interface for editing the contact name (e.g., UI 2600B, FIG. 26B).

[0250] In one embodiment, in response to a user entering a contact name (e.g., entering "Ron Smith" via keyboard 616 in UI 2600C of FIG. 26C) and activating save icon 2606 (e.g., by tapping the icon with a finger), the contacts module generates and displays a new entry for the contact (e.g., UI 2600D, FIG. 26D).

[0251] In one embodiment, in response to a user activating add photo icon 2607 (e.g., by tapping the icon with a finger), the touchscreen displays a user interface (e.g., UI 2600E, FIG. 26E) for adding a photo or other image to a contact. In response to a user activating add photo icon 2670 (e.g., by tapping the icon with a finger), camera 143 is activated, and a photo is taken and associated with the contact (e.g., using a process similar to that described above with reference to FIG. 19B). In response to a user activating select existing photo icon 2672 (e.g., by tapping the icon with a finger), photo management application 144 is activated, and a photo is selected, adjusted, and associated with the contact. In response to a user activating cancel icon 2674 (e.g., by tapping the icon with a finger), the process of associating the photo or other image with the contact is stopped.

[0252] In one embodiment, in response to a user activating add new photo icon 2608 (e.g., by tapping the icon or the line containing the icon with a finger), the touch screen displays a user interface (e.g., UI 2600F, FIG. 26F) for editing the contact's phone number(s). In one embodiment, a keypad selection key (e.g., the "+*#" key in FIG. 26F) is used to toggle the UI to UI 2600P (FIG. 26P), allowing the user to include other symbols or pauses in the phone number. In one embodiment, a second keypad selection key (e.g., the "123" key in FIG. 26P) is used to toggle UI 2600P back to the numeric keypad in the previous UI (e.g., UI 2600F, FIG. 26F).

[0253] In one embodiment, in response to a user entering a phone number (e.g., via keyboard 2676 in UI 2600F of FIG. 26F), specifying the phone number format (e.g., by a tap gesture or other defined gesture on home icon 2620 or select icon 2624), and activating save icon 2626 (e.g., by tapping the icon with a finger), the contacts module generates a phone number for the corresponding contact.

[0254] In some embodiments, a user may select an additional phone number format. For example, in response to a user activating selection icon 2624 (e.g., by tapping the icon with a finger), the touchscreen display displays a phone label UI (e.g., UI 2600G, FIG. 26G). In some embodiments, in response to a user activating a label in UI 2600G, the selected label is displayed in place of home icon 2620 in UI 2600F. In some embodiments, the selected label is also highlighted in UI 2600F, indicating to the user that the phone number being entered will be given the selected label.

[0255] In one embodiment, a user can add a customer phone label to the UI 2600F by activating the add label icon 2628 and entering a via label via a soft keyboard (e.g., 616, not shown).

[0256] In some embodiments, a user can delete one or more labels in UI 2600G. In some embodiments, only the user's customer labels can be deleted. For example, in response to a user activating edit icon 2630 (e.g., by tapping the icon with a finger), the touchscreen displays delete icon 2632 next to the labels that can be deleted (e.g., UI 2600H, FIG. 26H). When a user activates the delete icon (e.g., by tapping it with a finger), the icon may rotate 90 degrees (e.g., 2634, FIG. 26I) or otherwise change its appearance, and / or a second icon may appear (e.g., remove / delete confirmation icon 2636, FIG. 26I). If the user activates the second icon, the contacts module deletes the corresponding label. This deletion process is similar to the process described above with reference to FIG. 7. As mentioned above, the deletion process requiring multiple gestures by the user on different portions of the touchscreen (e.g., delete icon 2634 and remove / delete confirm icon 2636 are on opposite sides of the touchscreen in UI 2600I) significantly reduces the chances that the user will accidentally delete a label or other similar item. When the user is finished deleting the label, they activate done icon 2638 (e.g., by tapping it with their finger), and the device returns to UI 2600G.

[0257] In one embodiment, in response to a user activating add new email icon 2610 in UI 2600D of FIG. 26D (e.g., by tapping the icon or the line containing the icon with a finger), the touch screen displays a user interface (e.g., UI 2600J, FIG. 26J) for editing the contact's email address(es). In one embodiment, keyboard 2601 (FIG. 26J) for entering email addresses does not have a space bar (because email addresses do not contain spaces). Rather, the area of ​​the keyboard that normally contains the space bar includes an "@" key 2601, a period key 2603, and a ".com" key 2605. Because all email addresses contain an "@" and a ".", and because many email addresses contain a ".com," including these keys on keyboard 2601 makes entering email addresses quick and easy.

[0258] In one embodiment, in response to a user entering an email address (e.g., via keyboard 616 in UI 2600J of FIG. 26J), specifying the email address format (e.g., by tapping or other specified gesture on home icon 2640 or select icon 2646), and activating save icon 2648 (e.g., by tapping the icon with a finger), the contacts module generates an email address for the corresponding contact.

[0259] In one embodiment, the user can select additional email address formats, i.e., add customer email address format and / or delete email address format, by activating selection icon 2646 using a process and UI similar to that described for phone number formats (Figures 26G-26I).

[0260] In one embodiment, in response to a user activating add new URL icon 2611 in UI 2600D of FIG. 26D (e.g., by tapping the icon or the line containing the icon with a finger), the touch screen displays a user interface (e.g., UI 2600K, FIG. 26K) for editing the contact's URL.

[0261] In one embodiment, in response to a user entering a URL (e.g., via keyboard 616 in UI 2600K of FIG. 26K), specifying the format of the URL (e.g., by tapping or other specified gesture on homepage icon 2678 or select icon 2680), and activating save icon 2648 (e.g., by tapping the icon with a finger), the contacts module generates a URL for the corresponding contact.

[0262] In one embodiment, the user can select additional URL formats, i.e., add customer URL format and / or delete URL format, by activating selection icon 2680 using a process and UI similar to that described for phone number formats (Figures 26G-26I).

[0263] In one embodiment, in response to a user activating add new address icon 2612 in UI 2600D of FIG. 26D (e.g., by tapping the icon or the line containing the icon with a finger), the touch screen displays a user interface (e.g., UI 2600L, FIG. 26L) for editing the contact's physical address.

[0264] In one embodiment, in response to a user entering an address (e.g., via keyboard 616 in UI 2600L of FIG. 26L), specifying the format of the address (e.g., by tapping or other specified gesture on work icon 2652 or select icon 2656), and activating save icon 2658 (e.g., by tapping the icon with a finger), the contacts module generates an address for the corresponding contact. In one embodiment, in response to detecting a gesture in zip code field 2654, a display of keyboard 616 is generated, and numeric keyboard 624 (FIG. 6C) is displayed so that the user can provide numeric input in zip code field 2654.

[0265] In one embodiment, the user can select additional address formats, i.e., add customer address format and / or delete address format, by activating selection icon 2656 using a process and UI similar to that described for phone number formats (Figures 26G-26I).

[0266] Figure 26M is a diagram illustrating a user interface for an existing contact list entry, according to one embodiment. In response to a user selecting edit icon 2664 (e.g., by tapping the icon with a finger), the touchscreen display displays a user interface for editing the contact (e.g., UI 2600O, Figure 26O). In response to the user's selection, the contact list module can delete one or more items of existing contact information, add a new phone number, add a new email address, add a new physical address, and / or add a new URL, using the processes and UIs described above (e.g., Figures 26E-26L).

[0267] 26M (e.g., by tapping the icon with a finger), the touchscreen displays a user interface (e.g., UI 2600N, FIG. 26N) for selecting a phone number associated with a text message or other instant message contact, such as the contact's work number 2686 or home number 2688. In response to the user selecting one of the contact phone numbers, the touchscreen displays a UI (e.g., UI 600A of FIG. 6A) for composing a message and sending it to the selected phone number.

[0268] In response to a user selecting the add to favorites icon 2684 in FIG. 26M (e.g., by tapping the icon with a finger), the contact is added to the list of favorites (e.g., UI 2700A, FIG. 27A).

[0269] 27A-27F are diagrams illustrating example user interfaces for displaying and managing favorite contacts according to one embodiment. UI 2700A displays a list of favorites. In one embodiment, each row in the list corresponding to a favorite includes the favorite's name 2702, the format of the favorite's phone number to be called 2704, and an additional information icon 2706. In one embodiment, in response to a user activating an icon 2706 specifically for a favorite (e.g., by tapping the icon with a finger), the touchscreen displays the corresponding contact list entry for that favorite (e.g., UI 2600M, FIG. 26M). In one embodiment, in response to a user tap or other predetermined gesture made anywhere on the row corresponding to a particular favorite (i.e., a tap or gesture other than on icon 2702), the phone module dials the corresponding phone number 2704 for that particular favorite.

[0270] In one embodiment, in response to a user activating the add favorite icon 2708 (e.g., by tapping the icon with a finger), the device displays the user's contact list, from which the user selects a contact list entry for the new favorite and a phone number in the entry for the new favorite.

[0271] In one embodiment, in response to a user activating edit icon 2710 (e.g., by tapping the icon with a finger), the touch screen displays a delete icon 2712 and / or a moving-affordance icon 2720 next to the favorite (e.g., UI 2700B, FIG. 27B).

[0272] When the user activates the delete icon (e.g., by tapping it with a finger), the icon may rotate 90 degrees (e.g., 2714, FIG. 27C) or otherwise change its appearance, and / or a second icon may appear (e.g., remove / delete confirmation icon 2716, FIG. 27C). If the user activates the second icon, the corresponding favorite is deleted. This deletion process is similar to the process described above with reference to FIGS. 7, 26H, and 26I. As noted above, a deletion process requiring multiple gestures by the user on different portions of the touchscreen (e.g., delete icon 2714 and remove / delete confirmation icon 2716 are on opposite sides of the touchscreen in UI 2700C) significantly reduces the chance that the user will accidentally delete a favorite or other similar item. When the user is finished deleting the favorite, they activate the done icon 2718 (e.g., by tapping it with a finger), and the device returns to UI 2700A.

[0273] If the user activates a move grant icon 2720 (e.g., by touching it with a finger 2722), the corresponding favorite can be rearranged in the list of favorites, as shown in Figures 27D-27F. When the user is done reordering the favorites, they activate the done icon 2718 (e.g., by touching it with a finger), and the device returns to UI 2700A.

[0274] Further discussion of user-configurable list reordering can be found in U.S. Provisional Patent Application No. 60 / 883,808, filed January 7, 2007, entitled "System And Method For Managing Lists," and U.S. Patent Application No. 11 / 770,725, filed June 28, 2007, entitled "," which are incorporated herein by reference.

[0275] 28A-28D are diagrams illustrating example user interfaces for viewing and managing recent calls according to one embodiment.

[0276] In one embodiment, in response to a user activating the "All" icon 2810, the touchscreen displays a list of all recent calls (e.g., UI 2800A, FIG. 28A). In one embodiment, in response to a user activating the "Missed" icon 2812, the touchscreen displays a list of recent missed calls (e.g., UI 2800B, FIG. 28B).

[0277] In one embodiment, each row in the list corresponds to a call or consecutive sequence of calls involving the same individual or number (without intervening calls involving different individuals or different phone numbers). In one embodiment, each row includes the other party's name 2802 (if available via the contacts module) or phone number (if the other party's name is not available), the number of consecutive calls 2804, the date and / or time of the last call 2806, and an additional information icon 2808. In one embodiment, in response to a user activating the icon 2808 for a particular row (e.g., by tapping the icon with a finger), the touchscreen displays the corresponding contact list entry for the other party (e.g., UI 2800C, FIG. 28C or UI 2800D, FIG. 28D) if the phone number cannot be associated with an entry in the user's contact list. In one embodiment, in response to a user tap or other defined gesture anywhere in a given row, the phone module dials the corresponding phone number for that row.

[0278] In some embodiments, some rows may include an icon that indicates whether the last call associated with that row was missed or answered.

[0279] If the list of recent calls fills more than the screen area, the user can scroll through the list using vertical up and / or vertical down gestures 2814 on the touchscreen.

[0280] In one embodiment, UI 2800C highlights (e.g., with color, shading, and / or bold) a phone number associated with a recent call (e.g., the two most recent incoming calls from Bruce Walker in UI 2800A came from Bruce Walker's work number 2816). In one embodiment, in response to a user tap or other defined gesture on the highlighted number 2816, the phone module dials the highlighted number (e.g., 2816). In one embodiment, in response to a user tap or other defined gesture on another number in the contact list entry (e.g., home number 2818), the phone module dials the corresponding number. In one embodiment, in response to a user tap or other defined gesture on an email address in the contact list entry (e.g., either work email 2820 or home email), the email module prepares an email message at the selected email address, ready for text entry by the user. Thus, by selecting icon 2808 (FIG. 28A), a user can easily answer a caller using the same number included in the previous call (e.g., 2816), another number associated with the same caller (e.g., 2818), or another mode of communication in addition to the telephone (e.g., the caller's work email address 2820 or home email address 2822).

[0281] In some embodiments, UI 2800D includes one or more options for a user to use a phone number from a recent call that is not associated with an entry in the user's contact list. In some embodiments, in response to a tap or other defined user gesture, the device can call the phone number (e.g., if the gesture is applied to icon 2824), initiate a text message or other instant message to the phone number (e.g., if the gesture is applied to icon 2825), create a new contact with the phone number (e.g., if the gesture is applied to icon 2826), or add the phone number to an existing contact (e.g., if the gesture is applied to icon 2828).

[0282] In one embodiment, in response to detecting a gesture at the clear icon 2832 (e.g., a single finger tap at the icon 2832), one or more recent calls selected by the user are removed from the list of recent calls.

[0283] Further discussion of missed call management can be found in U.S. Provisional Patent Application No. 60 / 883,782, filed January 6, 2007, entitled "Telephone Call Management For A Portable Multifunction Device," and U.S. Patent Application No. 11 / 769,694, filed June 27, 2007, entitled "Missed Telephone Call Management for a Portable Multifunction Device," both of which are incorporated herein by reference.

[0284] 29 is a diagram illustrating a dial pad interface for making calls according to one embodiment. In response to a user activating the number keys of the dial pad 2902 (e.g., by tapping a number icon with a finger), the touchpad displays a selected number 2904. In one embodiment, the phone module automatically adds parentheses and dashes to the selected digits to make them easier to read. In response to a user activating a call icon 2906, the phone module dials or transmits the selected digits. In response to a user activating a create contact icon 2908, the number entered on the touchpad can be used for a new contact or added to an existing contact.

[0285] In some embodiments, the device performs location-based dialing, which simplifies dialing when the user is outside their home country and / or attempts to dial a destination number outside their home country.

[0286] Further description of location-based dialing can be found in U.S. Provisional Patent Application No. 60 / 883,800, filed January 7, 2007, entitled "Method, Device, And Graphical User Interface For Location-Based Dialing," and U.S. Patent Application No. 11 / 769,692, filed June 27, 2007, entitled "Method, Device, And Graphical User Interface For Location-Based Dialing," both of which are incorporated herein by reference.

[0287] 30A-30R are diagrams illustrating user interfaces displayed during a call according to one embodiment. In one embodiment, the UI indicates that a call has been attempted (3002) (UI 3000A, FIG. 30A) and then indicates the connection time 3004 after the connection has been made (UI 3000B, FIG. 30B).

[0288] In some embodiments, in response to a tap or other defined user gesture, the device can mute a call (e.g., if the gesture is applied to icon 3006), put a call on hold (e.g., if the gesture is applied to icon 3008), swap between two calls, put one call on hold and continue another call (e.g., if the gesture is applied to icon 3009), put a call on speaker (e.g., if the gesture is applied to icon 3010), add a call (e.g., if the gesture is applied to icon 3018), display a numeric keypad for number entry (e.g., if the gesture is applied to icon 3016 and UI 3000N of FIG. 30N is displayed), display the user's contact list (e.g., if the gesture is applied to icon 3020), or end a call (e.g., if the gesture is applied to icon 3014).

[0289] In one embodiment, if the device receives an incoming call while the user is on another call (e.g., in FIG. 30B with someone at (650) 132-2234), an incoming call UI is displayed, such as UI 3000C (FIG. 30C) for a known caller (e.g., Arlene Brown 3024, an entry in the user's contact list) or UI 3000K (FIG. 30K) for an unknown caller. In one embodiment, the incoming call UI includes icons that, when activated by a user tap or other gesture, allow the device to (1) end the incoming call or send the caller to voicemail (e.g., ignore icon 3026), (2) place the current call on hold and answer the incoming call (e.g., hold+answer icon 3028), and / or (3) end the current call and answer the incoming call (e.g., end+answer icon 3030).

[0290] In this example, in response to activating the end+answer icon 3030 (e.g., by a finger tap on the icon), the call to (650) 132-2234 is ended, the call from Arlene Bascom is answered, and the phone call UI 3000D (FIG. 30D) is displayed, which includes information 3031 identifying the caller (Arlene Bascom).

[0291] In this example, in response to activation of hold+answer icon 3028 (e.g., by a finger tap on the icon), the call to (650) 132-2234 is placed on hold, the call from Arlene Bascom is answered, and phone call UI 3000E (FIG. 30E) is displayed, which includes information 3034 identifying the caller (Arlene Bascom) and information indicating that the other call is on hold 3032. In some embodiments, in response to a user gesture (e.g., a finger tap 3036) on information indicating that the other call is on hold 3032, or in response to a user gesture on swap icon 3009, the active call is placed on hold, the held call is activated, and phone call UI 3000F is displayed, which includes information 3033 and 3035 indicating the status of the two calls.

[0292] In one embodiment, when the merge icon 3038 (FIGS. 30E or 30F) is activated (e.g., by a finger tap 3040 on the icon), the active and held calls are merged into a conference call and a conference call UI is displayed (e.g., UI 3000G, FIG. 30G). The conference call UI includes information about the conference call 3042 and conference call management icons 3044.

[0293] In one embodiment, in response to activation of the conference call management icon 3044 (e.g., by a finger tap 3046 on the icon), a conference call management UI is displayed (e.g., UI 3000H, FIG. 30H), which includes an end call icon 3050 and a private call icon 3056 for each entry in the management UI. In one embodiment, in response to activation of the call end icon 3050 (e.g., by a finger tap 3052 on the icon), a confirmation icon is displayed (e.g., end call icon 3062, FIG. 30I) to prevent accidental removal of a party to the conference call.

[0294] In one embodiment, in response to activation of the private call icon 3056 (e.g., by a finger tap 3058 on the icon), the conference call is placed on hold and a phone call UI is displayed (e.g., UI 3000J, FIG. 30J) that includes information about the private call 3033 and information about the held conference call 3035. In this example, because only one other party in the conference call (in this example, Arlene Bascom) is on hold, the information about the held conference call 3035 is only information about the one party on hold. In one embodiment, if more than one party in the conference call is on hold, the information about the held conference call 3035 is less specific, such as "Conference on hold" (e.g., information 3068 in UI 3000M of FIG. 30M).

[0295] If the incoming call is not from a caller known to the user (e.g., the phone number is not in the user's contact list), an incoming call UI such as UI 3000K (FIG. 30K) is displayed instead of an incoming call UI such as UI 3000C (FIG. 30C) with the caller's name 3024 and / or associated video 3022.

[0296] In one embodiment, in response to activation of the add call icon 3018 (e.g., by tapping a finger on the icon in FIG. 30B, 30D, or 30G), the user's contact list is displayed (UI 3000O, FIG. 30O), which typically includes multiple entries corresponding to multiple third parties. In one embodiment, in response to activation of a third party's entry in the contact list (e.g., by tapping a finger on the icon), an outgoing call to the third party is initiated if there is only one phone number associated with the entry. If there is more than one phone number associated with the entry, those numbers are displayed (e.g., UI 3000P in FIG. 30P displays two phone numbers associated with a single entry for Bruce Walker). In response to the user selecting one of these numbers (e.g., by tapping a finger on the desired number for the third party), an outgoing call is initiated. In one embodiment, in response to activation of a third party's entry in the contact list (e.g., by tapping the entry with a finger), the information for the corresponding entry is displayed, regardless of the number of phone numbers associated with the entry, and in response to a user selection of a phone number in the entry, an outgoing phone call is initiated to the third party.

[0297] In one embodiment, in response to activation of keypad icon 3016 (e.g., by a finger tap on the icon), a keypad UI (e.g., UI 3000N, FIG. 30N) for entering digits during a call is displayed, which includes dial pad 2902, hide keypad icon 3074, and make call icon 3071. In one embodiment, in response to activation of icon 3074 (e.g., by a finger tap on the icon or other gesture), the UI that was displayed immediately prior to displaying the keypad UI is redisplayed.

[0298] Creating a conference call from two existing calls In an embodiment, device 100 displays a telephone call user interface (e.g., UI 3000E, FIG. 30E) on the touchscreen display. The telephone call user interface includes a first item of information associated with an active telephone call between a user of the device and a first party (e.g., 3034), a second item of information associated with a held telephone call between the user and a second party (e.g., 3032), and a call join icon (e.g., 3038).

[0299] Upon detecting a user selection of the call merge icon, (1) the active and held telephone calls are merged into a conference call between the user, the first party, and the second party, and (2) the telephone call user interface is replaced with a conference call user interface (e.g., UI 3000G, FIG. 30G) that includes a third information item (e.g., 3042) related to the conference call that replaces the first and second information items, and a conference call management icon (e.g., 3044).

[0300] Managing Conference Calls In one embodiment, upon detecting a user selection (e.g., gesture 3046) of the conference call management icon 3044, the conference call user interface (e.g., UI 3000G) is replaced with a conference call management user interface (e.g., UI 3000H, FIG. 30H). The conference call management user interface includes a first management entry (e.g., 3060) corresponding to the first party and a second management entry (e.g., 3054) corresponding to the second party, each management entry including an ended call icon (e.g., 3050), a private call icon (e.g., 3056), and a back (or foreground) icon (e.g., 3048). If additional parties are also joining the conference call (e.g., by a user adding caller(s) and then merging the additional caller(s)), management entries for these additional parties also appear in the conference call management user interface (e.g., UI 3000H, FIG. 30H).

[0301] In one embodiment, upon detecting a user selection of the end call icon (e.g., gesture 3052) in the first management entry, a confirmation icon (e.g., 3062, FIG. 3000I) is displayed on the touchscreen display. Upon detecting a user selection of the confirmation icon, the first party is removed from the conference call and the first management entry is removed from the touchscreen display.

[0302] In one embodiment, upon detecting a user selection (e.g., gesture 3058) of the private call icon in the second management entry, the conference call is placed on hold and the conference call management user interface is replaced with a telephone call user interface (e.g., UI 3000, FIG. 30J). The telephone call user interface includes a fourth information item related to the held telephone call between the user and the first party (e.g., 3035), a fifth information item related to the active telephone call between the user and the second party (e.g., 3033), and a call join icon (e.g., 3038).

[0303] In one embodiment, upon detecting a second user selection of the call join icon, the conference call is resumed and the telephone call user interface (e.g., UI3000J, FIG. 30J) including the fourth and fifth information items is replaced with a conference call user interface (e.g., UI3000G, FIG. 30G).

[0304] Receiving an Incoming Call While on a Conference Call In one embodiment, upon detecting an incoming call from a third party, the conference call user interface or conference call management user interface (i.e., whichever interface is displayed when the incoming call is detected) is replaced with an incoming call user interface (e.g., UI 3000C, FIG. 30C for a known caller, or UI 3000K, FIG. 30K for an unknown caller). The incoming call user interface includes an ignore incoming call icon (e.g., 3026), a hold current phone call and answer incoming call icon (e.g., 3028), and an end current phone call and answer incoming call icon (e.g., 3030).

[0305] In one embodiment, upon detecting a user selection of the incoming call ignore icon (e.g., 3026), the incoming call from the third party is terminated or sent to voicemail, the conference call with the first and second parties continues, and the incoming call user interface is replaced with a conference call user interface or a conference call management user interface (i.e., whichever interface was displayed when the incoming call was detected).

[0306] In one embodiment, upon detecting a user selection of the end current phone call and answer incoming phone call icon (e.g., 3030), the conference call with the first and second parties is ended, a phone call between the user and a third party is activated, and the incoming phone call user interface is replaced with a phone call user interface (e.g., UI 3000L, FIG. 30L). The phone call user interface includes a sixth item of information related to the phone call between the user and a third party (e.g., 3066).

[0307] In one embodiment, upon detecting a user selection of the current phone call hold and incoming phone call answer icon (e.g., 3028), the conference call with the first and second parties is placed on hold, a phone call between the user and a third party is activated, and the incoming call user interface is replaced with a phone call user interface (e.g., UI 3000M, FIG. 30M). The phone call user interface includes a sixth item of information related to the phone call between the user and a third party (e.g., 3066), seventh information related to the held conference call between the user and the first and second parties (e.g., 3068), and a call join icon (e.g., 3038).

[0308] In one embodiment, upon detecting a user selection of the current phone call hold and incoming phone call answer icon, a phone call between the user and a third party is activated and the incoming phone call user interface is replaced with a phone call user interface (e.g., UI 3000M, FIG. 30M). The phone call user interface includes a sixth item of information related to the phone call between the user and a third party (e.g., 3066), seventh information related to the held conference call between the user and the first and second parties (e.g., 3068), and a call join icon (e.g., 3038).

[0309] Adding a Caller During a Conference Call In one embodiment, the conference call user interface includes an add caller icon (e.g., 3018, FIG. 30G). Upon detecting a user selection of the add caller icon, the conference call with the first and second parties is placed on hold and a contact list is displayed (e.g., UI 3000O, FIG. 30O).

[0310] An outgoing call is initiated to a third party using a phone number from an entry in a contact list or entered by the user (eg, using dial pad 2902 of FIG. 29).

[0311] Upon detecting acceptance of the outgoing telephone call, a telephone call user interface (e.g., UI3000M, FIG. 30M, where (987) 654-3210 corresponds to an outbound call, not an inbound call) is displayed, which includes an eighth information item related to the held conference call (e.g., 3068), a ninth information item related to the outgoing telephone call between the user and a third party (e.g., 3066), and a call join icon (e.g., 3038).

[0312] Upon detecting user selection of the call merge icon, (1) the outgoing telephone call between the user and the third party and the held conference call are merged into a conference call between the user, the first party, the second party, and the third party, and (2) the telephone call user interface is replaced with a conference call user interface (e.g., UI3000G, FIG. 30G).

[0313] Further discussion of conference calling can be found in U.S. Provisional Patent Application No. 60 / 947,133, filed June 29, 2007, entitled "Portable Multifunction Device, Method, and Graphical User Interface for Conference Calling," which is incorporated herein by reference.

[0314] In some embodiments, multifunction device 100 allows a user to make a phone call while simultaneously intuitively using other features of the device. In some embodiments, in response to a user activating a menu icon or button (e.g., home 204, FIG. 4A) while making a phone call, a menu of application icons is displayed on the touchscreen. In some embodiments, the phone application icon (e.g., 3076, FIG. 30Q) is highlighted (or otherwise changed in appearance compared to when the phone application is not in use) to indicate that the phone application is in use. In response to activation of an application icon in the menu rather than the phone application icon (e.g., by a finger tap or other gesture on the application icon), the corresponding application is displayed along with a switch application icon (e.g., “press here to return to call” icon 3078, FIG. 30R). The user can operate other non-phone applications essentially the same as when the phone application is not simultaneously in use. However, in response to activating the switch application icon (eg, by tapping a finger on icon 3078 in FIG. 30R), the device displays the phone application.

[0315] Further discussion of application switching can be found in U.S. Provisional Patent Application No. 60 / 883,809, filed January 7, 2007, entitled "Portable Electronic Device Supporting Application Switching," which is incorporated herein by reference.

[0316] 31A and 31B are diagrams illustrating example user interfaces displayed during an incoming call according to one embodiment.

[0317] In one embodiment, when there is an incoming call from a phone number associated with an individual or other entry in the user's contact list, the touchscreen may display the name of the individual or entry 3102, a graphic associated with the individual or entry 3104, a reject icon 3106 that, when activated (e.g., by tapping a finger on the icon), causes the phone module to reject the call and / or initiate a voicemail for the call, and an answer icon 3108 that, when activated (e.g., by tapping a finger on the icon), causes the phone module to answer the call (e.g., UI 3100A, FIG. 31A).

[0318] In one embodiment, if there is an incoming call from a phone number not associated with a person or other entry in the user's contact list, the touchscreen may display the phone number of the other party 3110, a reject icon 3106 that, when activated (e.g., by tapping a finger on the icon), causes the phone module to reject the call and / or initiate a voicemail for the call, and an answer icon 3108 that, when activated (e.g., by tapping a finger on the icon), causes the phone module to answer the call (e.g., UI 300B, FIG. 31B).

[0319] In some embodiments, the device pauses some other applications (e.g., music player 146, video player, and / or slideshow) when there is an incoming call, displays UI 3100A or UI 3100B before answering the call, displays a user interface such as UI 3000B (FIG. 30B) during the call, and ends the pausing of the other applications when the incoming call is rejected or the call is ended. In some embodiments, a smooth transition occurs into and out of the pause (e.g., the volume of the music player smoothly decreases and increases).

[0320] Further description of user interfaces for handling incoming calls can be found in U.S. Provisional Patent Application No. 60 / 883,783, filed January 6, 2007, entitled "Incomming Telephone Call Management For A Portable Multifunction Device," and U.S. Patent Application No. 11 / 769,695, filed June 27, 2007, entitled "Incomming Telephone Call Management For A Portable Multifunction Device," both of which are incorporated herein by reference.

[0321] 32A-32H are diagrams illustrating example user interfaces for voicemail according to one embodiment. In one embodiment, user interfaces 3200A-3200D include the following elements, or a subset or superset thereof: 402, 404, and 406 mentioned above; • A backup icon 3202 that, when activated (e.g., by tapping the icon with a finger), initiates a process to back up and play the last few seconds of a voicemail message; • A progress bar 3204 that can be used to indicate which snippet of the voicemail message has been played and to aid in scrolling through the message in response to a user gesture 3206; a speed up icon 3208 that, when activated (e.g., by tapping the icon with a finger), speeds up the playback of the voicemail message and can also adjust the audio frequency or pitch of the speeded playback so that words are spoken quickly but still easy to understand; The name 3210 of the person who left the voicemail message (associated with the incoming phone number via the user's contact list) (e.g., Aaron Jones 3210-1), or the phone number if the individual's name is not available (e.g., 408-246-8101 3210-2); ● The date and / or time of the voicemail; an additional information icon 3214 that, when activated (e.g., by tapping the icon with a finger), initiates a transition to the corresponding contact list entry (e.g., UI 2800C, FIG. 28C) or UI for an unknown phone number (e.g., UI 2800D, FIG. 28D); • A speaker icon 3216 that, when activated (e.g., by tapping the icon with a finger), begins playing the voicemail through the speaker; ● an options icon 3218 that, when activated (e.g., by tapping the icon with a finger), initiates a display of a menu of additional voicemail options; • A pause icon 3220 that, when activated (e.g., by tapping the icon with a finger), initiates a pause of the voicemail, which can be displayed separately from individual messages (Fig. 32A) or adjacent to a selected message (Fig. 32C); a delete sign icon 3222 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a UI (e.g., UI 3200B, FIG. 32B, or UI 3200D, FIG. 32D) for the user to confirm that they want to delete the corresponding voicemail; ● A cancel icon 3226 that, when activated (e.g., by tapping the icon with a finger), switches the display from UI 3200B to UI 3200A (or from UI 3200D to UI 3200C) without deleting the corresponding voicemail; a delete confirmation icon 3228 that, when activated (e.g., by tapping the icon with a finger), deletes the corresponding voicemail and switches the display from UI 3200B to UI 3200A (or from UI 3200D to UI 3200C); a play icon 3230 that, when activated (e.g., by tapping the icon with a finger), begins or continues playing the voicemail, which can be displayed separately from individual messages (FIG. 32B) or adjacent to a selected message (FIG. 32C); ● Do not hear icon 3232, which indicates that the corresponding voicemail was not heard; a download icon 3234 indicating that the corresponding voicemail is to be downloaded to the device 100; and • A call icon 3240 that, when activated (eg, by tapping the icon with a finger), initiates a call to the phone number associated with the selected voicemail.

[0322] If the list of voicemail messages fills more than the screen area, the user can scroll through the list using vertical up and / or vertical down gestures 3224 on the touchscreen.

[0323] In one embodiment, a vertical bar 3260 (FIG. 32C), similar to the vertical bar described above, is displayed above the list of voicemails to help the user understand which portion of the list is being displayed.

[0324] In one embodiment, in response to a user tap or other defined gesture on a row corresponding to a particular voicemail (other than a tap or gesture on icon 3214), the phone module begins playing the corresponding voicemail, thus providing random access to voicemails and allowing voicemails to be listened to in any order.

[0325] In some embodiments, the playback position in a voicemail can be changed in response to a user gesture. For example, in response to a user's finger touching or near the edge of the progress bar (3206) and then sliding along the progress bar, the playback position can be changed to correspond to the user's finger's position along the progress bar. This user gesture on the progress bar (which is similar to gesture 2316 in UI 2300B for a video player, which also generates an interactive progress bar) facilitates the user's ability to skip to and / or play back that portion of the voicemail message.

[0326] In one embodiment, the user interfaces 3200E-3200H for configuring voicemail include the following elements, or a subset or superset thereof: - 402, 404, 406, and 2902 mentioned above; • Instructions 3242 to assist the user in the setup process; ● A start icon 3244 that, when activated (e.g., by tapping the icon with a finger), begins the setup process; a set password icon 3246 that, when activated (e.g., by tapping the icon with a finger), displays a keypad 2902 for entering a voicemail password in an input field 3249; a greeting setting icon 3248 that, when activated (e.g., by tapping the icon with a finger), displays icons (e.g., 3250, 3252, 3254, and 3256) for generating voicemail greetings; • a record icon 3250 that, when activated (e.g., by tapping the icon with a finger), begins recording a voicemail greeting; ● a play icon 3252 that, when activated (e.g., by tapping the icon with a finger), begins playing a voicemail greeting; • A speaker icon 3254 that, when activated (e.g., by tapping the icon with a finger), begins playing a voicemail greeting through the speaker; a reset icon 3256 that, when activated (e.g., by tapping the icon with a finger), initiates a reset of the voicemail greeting (e.g., to the default system greeting rather than a user-generated greeting); and • A stop icon 3258 that, when activated (eg, by tapping the icon with a finger), initiates playback stop of the voicemail greeting.

[0327] User interfaces 3200E-3200H provide visual cues that make it easy for users to set up voicemail.

[0328] In some embodiments, the portable multifunction device (e.g., device 100) displays a voicemail configuration user interface on a touchscreen display (e.g., display 112). This user interface includes a password configuration icon (e.g., icon 3246, FIG. 32F) and a greeting configuration icon (e.g., icon 3248, FIG. 32F).

[0329] A user selection of a set password icon is detected. Upon detecting user selection of set password icon 3246, an input field (e.g., 3249) and a keypad (e.g., 2902) are displayed. In one embodiment, one or more copies of a defined character are added to the input field in response to finger contact with the keypad.

[0330] A user selection of the set greeting icon is detected. Upon detecting the user selection of the set greeting icon, a record icon (e.g., icon 3250, FIG. 32G), a play icon (e.g., icon 3252), and a reset icon (e.g., icon 3256) are displayed.

[0331] In one embodiment, in response to detecting selection of the record icon, recording of the audio stream is started and the play icon is replaced with a stop icon (e.g., icon 3258, FIG. 32H). In response to detecting selection of the stop icon, recording of the audio stream is stopped and the stop icon is replaced with a play icon. In one embodiment, in response to detecting selection of the play icon, the recorded audio stream is played and the play icon is replaced with a stop icon. In response to detecting selection of the stop icon, playback of the recorded audio stream is stopped and the stop icon is replaced with a play icon.

[0332] In some embodiments, in response to detecting selection of the reset icon, a default message is designated. In response to detecting selection of the play icon, the default message is played and the play icon is replaced with a stop icon. In response to detecting selection of the stop icon, playing of the default message is stopped and the stop icon is replaced with the play icon. In some embodiments, the default message includes a telephone number associated with the portable multifunction device. In some embodiments, the default message includes a synthesized audio stream.

[0333] Further description of voicemail systems can be found in U.S. Provisional Patent Application No. 60 / 883,799, entitled "Voicemail Manager For Portable Multifunction Device," filed January 7, 2007; U.S. Patent Application No. 11 / 770,720, entitled "Voicemail Manager For Portable Multifunction Device," filed June 28, 2007; and U.S. Patent Application No. 60 / 947,348, entitled "Voicemail Set-Up on a Portable Multifunction Device," filed June 29, 2007, which are incorporated herein by reference.

[0334] Email 33 is a diagram illustrating an example user interface for organizing and managing emails according to one embodiment. In one embodiment, user interface 3300 includes the following elements, or a subset or superset thereof: 402, 404, and 406 mentioned above; A set of mailboxes, such as the inbox 3302, which can be organized into rows with a selection icon 3306 for each row; - an unread messages icon 3304 indicating the number of unread messages; a settings icon 3308 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a UI (e.g., UI 3600, FIG. 36) for entering mailbox settings; and • A generate email icon 3310 that, when activated (eg, by tapping the icon with a finger), initiates the display of a UI (eg, UI 3400, FIG. 34) for generating a new email message.

[0335] If the set of mailboxes fills more than the screen area, the user can scroll through the mailboxes using vertical up and / or vertical down gestures 3312 on the touchscreen.

[0336] In one embodiment, a vertical bar similar to the one described above is displayed above the list of mailboxes to help the user understand which portion of the list is being displayed.

[0337] 34A-34C are diagrams illustrating example user interfaces for creating emails in accordance with one embodiment.

[0338] In response to a user activating the email generation icon 3310 (FIG. 33), the device displays UI 3400A.

[0339] In one embodiment, if the user taps or makes another specified gesture in the subject line 3408 or body of the email 3412 (FIG. 34A), a character keyboard 616 appears and the user can enter the subject and / or body text (FIG. 34C). In one embodiment, to enter an email address, the user taps or makes another specified gesture in the To: line 3406 of the email, the user's contact list appears (FIG. 18J), the user taps or makes another specified gesture on the desired recipient / contact, and the device populates the email message with the corresponding email address (FIG. 34C). If someone else wants a copy of the email, the user taps or makes another specified gesture on the CC: line 3407 of the email, the user's contact list appears (Figure 18J), the user taps or makes another specified gesture on the desired recipient / contact (e.g., taps Janet Walker in the contact list), and the device places the corresponding email address in the email message (Figure 34C).

[0340] In one embodiment, to enter an email address, the user taps or performs another prescribed gesture on the email's To: line 3406 (FIG. 34A). An add recipient icon 3422 appears, which, when activated (e.g., by tapping icon 3422 with a finger), begins displaying a scrollable list (e.g., 3426, FIG. 34B) of contacts (if any) that match the entry in the To: field. For example, if the letter "B" is entered, contacts whose first or last name begin with "B" are shown. If the letter "Br" is entered in the To: field, the list of contacts is narrowed to contacts whose first or last name begin with "Br," and so on, until one of the displayed contacts is selected (e.g., by tapping the contact in list 3426). If others want a copy of the email, the user taps or performs another predefined gesture on the CC: line 3407 of the email and follows a similar procedure to that used to enter an address in the To: field. In one embodiment, scrollable list 3426 includes names and / or email addresses in emails previously sent or received by the user, even if they are not in the user's contact list. In one embodiment, the order in which email addresses are displayed in scrollable list 3426 is based on the volume of previous email messages with each email address. In other words, for names and / or email addresses that match the characters entered by the user, names and / or email addresses with more recent and / or more frequent email exchanges with the user are placed before names and / or email addresses with less recent and / or less frequent email exchanges with the user. In one embodiment, the order in which email addresses are displayed in scrollable list 3426 is based on the volume of previous communications with the potential recipient for multiple communication modalities. For example, potential recipients who frequently have telephone and / or instant message conversations with the user (in addition to exchanging e-mail with the user) may be placed before other potential recipients.

[0341] In one embodiment, a user can scroll through list 3426 by applying a vertical swipe gesture 3428 to the area displaying list 3426. In one embodiment, a vertically downward gesture scrolls down the list, and a vertically upward gesture scrolls up the list.

[0342] In one embodiment, vertical bar 3430 is temporarily displayed after an object is detected on or near the touchscreen display (e.g., a finger touch is detected anywhere on list 3426). In one embodiment, vertical bar 3430 has a vertical position on the displayed portion of the list that corresponds to the vertical position of the displayed portion of the list within the list. In one embodiment, vertical bar 3430 has a vertical length that corresponds to the portion of the list that is displayed.

[0343] In some embodiments, the user may also enter an email address using one or more keyboards (eg, 616 and 624, not shown).

[0344] The device sends the email message in response to the user activating send icon 3404 (FIG. 34C) (e.g., by tapping the icon with a finger). Alternatively, if the user activates cancel icon 3402, the device may display a save draft icon (e.g., 1810, FIG. 18I) and a don't save (or delete message) icon (e.g., 1812, FIG. 18I). The device saves the draft, for example, to the drafts folder of email client 140 (FIG. 33), if the user activates save draft icon 1810. The device deletes the draft if the user activates don't save icon 1812.

[0345] In one embodiment, in response to a user activating the attach icon 3410 (eg, by tapping the icon with a finger), the touchscreen displays a UI (not shown) for adding an attachment.

[0346] 35A-35O are diagrams illustrating example user interfaces for viewing and managing the inbox according to one embodiment. Similar user interfaces can be used to view and manage other mailboxes (e.g., Drafts, Sent, Trash, Personal, and / or Work in UI 3300). In one embodiment, user interfaces 3500A-3500I include the following elements, or a subset or superset thereof: - 402, 404, 406, and 3310 mentioned above; • A mailbox icon 3502 that, when activated (e.g., by tapping the icon with a finger), initiates the display of the mailbox UI (Figure 33); ● Unread message icon 3504, which displays the number of unread messages in your inbox; ● Name of the sender of the email message 3506, ● The subject line 3508 of an email message, ● Date of email message 3510, ● Unread message icon 3512, indicating an unopened message; a preview pane separator 3518 that separates the list of messages from a preview of the selected message in the list; ● A settings icon 3520 that, when activated (e.g., by tapping the icon with a finger), initiates the display of settings UI 3600 (Figure 36); • a message move icon 3522 that, when activated (e.g., by tapping the icon with a finger), initiates the display of message move UI 3800A (Figure 38A); a symbol delete icon that, when activated (e.g., by tapping the icon with a finger), initiates the display of a UI (e.g., UI 3500E, FIG. 35E) that confirms that the user wants to delete the selected email; a reply / send icon 3526 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a UI (e.g., UI 3500F, FIG. 35F, or UI 3500I, FIG. 35I) for selecting how to reply to or send the selected email; • a preview pane 3528 that displays a portion of a selected email message; a details icon 3530 that, when activated (e.g., by tapping the icon with a finger), begins displaying email address details (e.g., 3534-1, FIG. 35C or 3534-2, FIG. 35K); a hide details icon 3531 that, when activated (e.g., by tapping the icon with a finger), stops displaying email address details (e.g., 3534-2, FIG. 35K); • A cancel icon 3540 that, when activated (e.g., by tapping the icon with a finger), returns the device to the previous user interface (e.g., UI 3500D); • a delete confirmation icon 3542 that, when activated (e.g., by tapping the icon with a finger), deletes the selected email; • a reply icon 3544 that, when activated (e.g., by tapping the icon with a finger), initiates the generation of an email replying to the sender; • a reply all icon 3546 that, when activated (e.g., by tapping the icon with a finger), initiates the generation of an email replying to the sender and any other parties included (e.g., by cc:) in the selected email; • a send icon 3548 that, when activated (e.g., by tapping the icon with a finger), initiates the generation of the email to be sent; • A preview pane show icon 3550 that, when activated (e.g., by tapping the icon with a finger), initiates the display of the preview pane 3528; • A preview pane don't show icon 3552 that, when activated (e.g., by tapping the icon with a finger), stops the display of the preview pane 3528; • A vertical bar 3554 for the list of email messages that helps the user understand which portion of the list of email messages is being displayed; • A vertical bar 3556 for email messages in the preview pane that helps the user understand which part of the message is being displayed; • A horizontal bar 3558 for email messages in the preview pane that helps the user understand which part of the message is being displayed; • A mailbox refresh icon 3560 that, when activated (e.g., by tapping the icon with a finger), initiates the download of new email messages, if any, from a remote server; an edit icon 3562 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a user interface for deleting an email (e.g., as described in U.S. Provisional Patent Application No. 60 / 883,814, entitled "Deletion Gesture On A Portable Multifunction Device," filed January 7, 2007, and U.S. Provisional Patent Application No. 60 / 936,755, entitled "Deletion Gesture On A Portable Multifunction Device," filed June 22, 2007, both of which are incorporated herein by reference); Text body line 3564 for email messages, • a previous email message icon 3566 that, when activated (e.g., by tapping the icon with a finger), begins displaying the previous email message in the corresponding mailbox; a next email message icon 3568 that, when activated (e.g., by tapping the icon with a finger), begins displaying the next email message in the corresponding mailbox; attachment icons 3570 that, when activated (e.g., by tapping the icon with a finger), initiate a display of the corresponding attachment 3572 either as part of the email message (e.g., activating 3570-1 in FIG. 35K initiates the display of 3572-1 in FIG. 35L) or separately from the email message (e.g., activating 3570-3 in FIG. 35M initiates the display of 3572-3 in FIG. 35N); Attachment surface and 3572 (e.g., digital image, PDF file, word processing document, presentation document, spreadsheet, or other electronic document), and • An email message return icon 3574 that, when activated (eg, by tapping the icon with a finger), begins displaying the email message, including any attachments.

[0347] If the set of emails fills more than the screen area (or more than the screen area above the preview pane), the user can scroll through the emails using vertical up and vertical down gestures 3514 on the touchscreen.

[0348] In one embodiment, vertical bar 3554 is temporarily displayed after an object is detected on or near the touchscreen display (e.g., a finger touch is detected anywhere on the list of email messages). In one embodiment, vertical bar 3554 has a vertical position on the displayed portion of the email list that corresponds to the vertical position of the displayed portion of the list within the list. In one embodiment, vertical bar 3554 has a vertical length that corresponds to the portion of the email list that is displayed. For example, in Figure 35H, the vertical position of vertical bar 3554 indicates that the middle of the email list is displayed, and the vertical length of vertical bar 3554 indicates that approximately one-third of the email list is displayed.

[0349] In some embodiments, email subject 3508 is not displayed when preview pane 3528 is used. In some embodiments, the position of the preview pane separator can be adjusted by the user making contact 3516 on or near the preview pane separator and then moving the separator to the desired position by dragging finger contact 3538. In some embodiments, arrow 3539 or other graphic appears during positioning of the preview pane separator to help guide the user (e.g., UI 3500D, FIG. 35D).

[0350] In some embodiments, the text body lines 3564 of the email message are displayed (e.g., UI 3500J, FIG. 35J). In some embodiments, the user can select (e.g., as part of settings 412) the amount of each email message (e.g., sender name 3506, subject 3508, and / or number of text body lines) to display in the list of email messages. In some embodiments, the user can select (e.g., as part of settings 412) the number of text body lines 3564 to display for each email message in the list of email messages. In some embodiments, the text displayed from the body of the email message is text extracted by email client 140 from the HTML version of the selected message. Thus, if the email message body has both plain text and HTML portions, the portion used to generate the text body lines to be displayed is the HTML portion.

[0351] In some embodiments, activating an attachment icon 3570 (e.g., by tapping the icon with a finger) initiates a display of the corresponding attachment 3572. In some embodiments, the attachment is shown as part of the email message (e.g., activating 3570-1 in FIG. 35K initiates a display of 3572-1 in FIG. 35L). In some embodiments, the attachment is shown separately from the email message (e.g., activating 3570-3 in FIG. 35M initiates a display of 3572-3 in FIG. 35N). In some embodiments, activating email message return icon 3574 (FIG. 35N) (e.g., by tapping the icon with a finger) initiates a display of the email message including the attachment.

[0352] In some embodiments, in response to a user tapping or other defined gesture on a line containing information about a particular email message (e.g., 3506, 3510, and / or 3508), some or all of the text in that line is highlighted (e.g., with color, shading, or bolding), and the corresponding message is displayed in the preview pane. In some embodiments, in response to a user tapping or other defined gesture on a line containing information about a particular email message (e.g., 3506, 3510, and / or 3508), the email message is displayed full screen if the preview pane is not being used.

[0353] In one embodiment, if the selected email fills more than the preview pane area, the user can scroll the email using two-dimensional gestures 3522 in the preview pane that move the email vertically and / or horizontally on the touchscreen.

[0354] In some embodiments, vertical bar 3556 is temporarily displayed after an object is detected on or near the touchscreen display (e.g., a finger touch is detected anywhere on the email message in preview pane 3528). In some embodiments, vertical bar 3556 has a vertical position above the displayed portion of the email message that corresponds to the vertical position within the email of the displayed portion of the email. In some embodiments, vertical bar 3556 has a vertical length that corresponds to the portion of the email that is displayed. For example, in FIG. 35H, the vertical position of vertical bar 3556 indicates that the top of the email is displayed, and the vertical length of vertical bar 3556 indicates that the top quarter of the email is displayed.

[0355] In some embodiments, horizontal bar 3558 is temporarily displayed after an object is detected on or near the touchscreen display (e.g., a finger touch is detected anywhere on the email message in preview pane 3528). In some embodiments, horizontal bar 3558 has a horizontal position above the displayed portion of the email that corresponds to the horizontal position of the displayed portion of the email within the email. In some embodiments, horizontal bar 3558 has a horizontal length that corresponds to the portion of the email that is displayed. For example, in FIG. 35H , the horizontal position of horizontal bar 3558 indicates that a portion of the left side of the email is displayed, and the horizontal length of horizontal bar 3558 indicates that a portion from the left half of the email is displayed. Taken together, vertical bar 3556 and horizontal bar 3558 indicate that the northwest corner of the email message in the preview pane is displayed.

[0356] In one embodiment, the email message is displayed such that only vertical scrolling is required; in this case, the horizontal bar 3558 is not used.

[0357] In one embodiment, in response to a user activating an additional information icon (e.g., “>”) in detailed information 3534 of FIG. 35C (e.g., by a finger tap 3536 on the icon), the touch screen can display contact list information for the corresponding party, if available (e.g., UI 2800C, FIG. 28C), or can display a UI similar to UI 2800D of FIG. 28D.

[0358] In one embodiment, in response to detecting a horizontal swipe gesture (e.g., 3576, FIG. 35O) on a particular email message within a list of email messages, a process is initiated to delete the particular email message (e.g., as described in U.S. Provisional Patent Application No. 60 / 883,814, entitled "Deletion Gestures On A Portable Multifunction Device," filed January 7, 2007, and U.S. Provisional Patent Application No. 60 / 936,755, entitled "Deletion Gestures On A Portable Multifunction Device," filed June 22, 2007, both of which are incorporated herein by reference).

[0359] 36 is a diagram illustrating an example user interface for setting email user preferences according to one embodiment. In one embodiment, user interface 3600 includes the following elements, or a subset or superset thereof: 402, 404, and 406 mentioned above; an exit icon 3602 that, when activated (e.g., by tapping the icon with a finger), returns the device to the previous UI; Account 3604 for entering email account information; Message List Display 3606 to select whether sender 3506 and / or subject 3508 information is displayed in the email list; • Display Latest Messages 3608 for selecting whether the latest messages are displayed at the top or bottom of the screen; • Message display position 3610 to select whether the message will be displayed in the preview pane or full screen; • Preferred Message Format 3612 to select how to format the message (e.g., HTML or plain text); Rules 3614 for generating rules for managing email messages (e.g., using UI 3700A, FIG. 37A, and UI 3700B, FIG. 37B); • A selection icon 3616 that, when activated (eg, by tapping the icon with a finger), indicates a selection for the corresponding setting.

[0360] In some embodiments, the user can tap anywhere on the row for a particular setting to initiate a display of the corresponding setting selections.

[0361] In one embodiment, the settings of FIG. 36 are merged into settings 412 (FIG. 4B), and settings icon 3520 need not be displayed in email application 140 (eg, FIG. 35G).

[0362] 37A and 37B are diagrams illustrating an example user interface for creating and managing email rules according to one embodiment. In one embodiment, user interface 3700A includes the following elements, or a subset or superset thereof: 402, 404, and 406 mentioned above; a settings icon 3702 that, when activated (e.g., by tapping the icon with a finger), returns the device to the settings UI 3600 (Fig. 3600); ●Rule 3704, • a selection icon 3706 that, when activated (e.g., by tapping the icon with a finger), indicates selection of the corresponding rule; an add icon 3708 that, when activated (e.g., by tapping the icon with a finger), displays a UI (e.g., UI 3700B, FIG. 37B) for creating a new rule; • An Exit icon 3710 that, when activated (e.g., by tapping the icon with a finger), returns the device to Settings UI 3600 (Fig. 3600).

[0363] In one embodiment, the user can tap anywhere on the row for a particular rule to begin displaying the corresponding rule (e.g., UI 3700B, FIG. 37B).

[0364] 38A and 38B are diagrams illustrating example user interfaces for moving email messages according to one embodiment.

[0365] In response to a user activating the create message move icon 3522, the device displays UI 3800A, which displays some information 3804 for the selected message.

[0366] In one embodiment, when a user taps 3802 or performs another defined gesture on a row corresponding to a particular mailbox or other folder, the message is moved to the corresponding mailbox or folder (e.g., Work in FIG. 38A). In one embodiment, the selected row is highlighted and an animation appears to move the message information 3804 to the selected row (as shown generally in FIG. 38B).

[0367] Further description of email clients can be found in U.S. Provisional Patent Application No. 60 / 883,807, filed January 7, 2007, entitled "Email Client For A Portable Multifunction Device," which is incorporated herein by reference.

[0368] A method for efficiently fetching email messages can be found in U.S. Provisional Patent Application No. 60 / 947,395, filed June 29, 2007, entitled "Email Fetching System and Method in a Portable Electronic Device," which is incorporated herein by reference.

[0369] Methods for automatically selecting email ports and email security can be found in U.S. Provisional Patent Application No. 60 / 947,396, filed June 29, 2007, entitled "Port Discovery and Message Delivery in a Portable Electronic Device," which is incorporated herein by reference.

[0370] Browser Figures 39A-39M are diagrams illustrating example user interfaces for a browser according to one embodiment.

[0371] In one embodiment, user interfaces 3900A-3900M include the following elements, or a subset or superset thereof: 402, 404, and 406 mentioned above; a previous page icon 3902 that, when activated (e.g., by tapping the icon with a finger), begins displaying the previous web page; ●Web page name 3904, a next page icon 3906 that, when activated (e.g., by tapping the icon with a finger), begins displaying the next web page; ● A URL (Uniform Resource Locator) entry box 3908 for entering the URL of a web page; ● A refresh icon 3910 that, when activated (e.g., by tapping the icon with a finger), initiates a refresh of the web page; ● A web page 3912 or other structured document formed of blocks 3914 of textual content and other graphics (e.g., video and in-line multimedia); ● A settings icon 3916 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a settings menu for the browser; ● A bookmark icon 3918 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a bookmarks list or menu for the browser; an add bookmark icon 3920 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a UI for adding a bookmark (e.g., UI 3900F, FIG. 39F, which can be displayed in portrait or landscape view, like other UIs and pages); a new window icon 3922 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a UI that adds a new window (e.g., a web page) to the browser (e.g., UI 3900G, FIG. 39G) and also indicates the number of windows (e.g., “4” in icon 3922 in FIG. 39A); a vertical bar 3962 similar to the vertical bar described above for a web page 3912 or other structured document that helps the user understand what portion of the web page 3912 or other structured document is being displayed; a horizontal bar 3964 similar to the horizontal bar described above for a web page 3912 or other structured document that helps the user understand what portion of the web page 3912 or other structured document is being displayed; ● A share icon 3966 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a UI (e.g., UI 3900K, FIG. 39K) for sharing information with other users; • A URL clear icon 3970 that, when activated (e.g., by tapping the icon with a finger), clears the input in the URL entry box 3908; - A search term entry box 3972 for entering search terms for web searches; a URL suggestion list 3974 that displays URLs that match the input in the URL entry box 3908 (FIG. 39I), such that activating a suggested URL (e.g., by tapping a finger on the suggested URL) initiates a search for the corresponding web page; • A URL entry keyboard 3976 (Figs. 39I and 39M) with a period key 398, a backslash key 3980, and a ".com" key 3982 to facilitate entering common characters into a URL; • a search term clear icon 3984 that, when activated (e.g., by tapping the icon with a finger), clears the entry in the search term entry box 3972; • an email link icon 3986 that, when activated (e.g., by tapping the icon with a finger or other gesture), prepares an email containing a link to be shared with one or more other users; • an email content icon 3988 that, when activated (e.g., by tapping the icon with a finger or other gesture), prepares an email containing content to be shared with one or more other users; an IM link icon 3990 that, when activated (e.g., by tapping the icon with a finger or other gesture), prepares an IM containing a link to be shared with one or more other users; and • A cancel icon 3992 that, when activated (eg, by tapping the icon with a finger or other gesture), cancels the share UI and displays the previous UI.

[0372] In some embodiments, in response to a specified user gesture (e.g., a single tap gesture or a double tap gesture) on block 3914, the block is enlarged and centered (or substantially centered) in the web page display. For example, in response to a single tap gesture 3923 on block 3914-5, block 3914-5 is enlarged and centered in the display, as shown in UI 3900C of FIG. 39C. In some embodiments, the width of the block is scaled to fill the touchscreen display. In some embodiments, the width of the block is scaled to fill the touchscreen display with a specified amount of padding along the sides of the display. In some embodiments, a zoom animation of the block is displayed while the block is being enlarged. Similarly, in response to a single tap gesture 3825 on block 3914-2, block 3914-2 may be enlarged with a zoom animation and scrolled two-dimensionally to the center of the display (not shown).

[0373] In one embodiment, the device analyzes the render tree of the web page 3912 to determine the blocks 3914 in the web page. In one embodiment, the blocks 3914 correspond to render nodes that are replacements, blocks, inline blocks, or inline tables.

[0374] In some embodiments, the magnification and / or centering is substantially or completely reversed in response to the same regular user gesture (e.g., a single tap gesture or a double tap gesture) on an already magnified and centered block 3914. For example, in response to a single tap gesture 3929 (FIG. 39C) on block 3914-5, the web page image may be zoomed out and returned to UI 3900A of FIG. 39A.

[0375] In some embodiments, in response to a user's specified gesture (e.g., a single tap gesture or a double tap gesture) on an already magnified but uncentered block 3914, the block is centered (or substantially centered) in the web page display. For example, in response to a single tap gesture 3927 (FIG. 39C) on block 3914-4, block 3914-4 can be centered (or substantially centered) in the web page display. Similarly, in response to a single tap gesture 3935 (FIG. 39C) on block 3914-6, block 3914-6 can be centered (or substantially centered) in the web page display. Thus, in the case of an already magnified web page display, in response to a specified gesture, the device can intuitively display a series of blocks that the user wants to view. This same gesture can initiate different actions in different situations (e.g., (1) zooming and / or magnification in combination with scrolling when the size of the web page is reduced, UI3900A, and (2) reversing the magnification and / or centering when the block is already centered and magnified).

[0376] In some embodiments, in response to a multi-touch spreading gesture by the user (FIG. 39C) of 3931 and 3933, the web page may be enlarged. Conversely, in response to a multi-touch narrowing gesture by the user, the web page may be reduced.

[0377] In some embodiments, in response to a substantially vertical upward (or downward) swipe gesture by a user, a web page (or other electronic document in general) may scroll vertically upward (or downward) in one dimension. For example, in response to an upward swipe gesture 3937 by a user that is within a predetermined angle (e.g., 27°) of full vertical, the web page may scroll vertically upward in one dimension.

[0378] Conversely, in some embodiments, in response to a swipe gesture that is not within a predetermined angle (e.g., 27 degrees) of full vertical, the web page may scroll two-dimensionally (i.e., moving both vertically and horizontally simultaneously). For example, in response to a user's upward swipe gesture 3939 ( FIG. 39C ) that is not within a predetermined angle (e.g., 27 degrees) of full vertical, the web page may scroll two-dimensionally along the direction of the swipe 3939.

[0379] In one embodiment, in response to a user's rotation gesture of multiple touches 3941 and 3943 (FIG. 39C), the web page can be rotated exactly 90 degrees relative to landscape view (UI 3900D, FIG. 39D), even if the amount of rotation in the rotation gesture of multiple touches 3941 and 3943 is substantially different from 90 degrees. Similarly, in response to a user's rotation gesture of multiple touches 3945 and 3947 (UI 3900D, FIG. 39C), the web page can be rotated exactly 90 degrees relative to portrait view, even if the amount of rotation in the rotation gesture of multiple touches 3945 and 3947 is substantially different from 90 degrees.

[0380] Thus, precise movement of graphics occurs in response to imprecise user gestures. The device behaves as the user desires, even with imprecise user input. Note also that the gestures described for UI 3900C with a portrait view can also be applied to a UI with a landscape view (e.g., UI 3900D, FIG. 39D) so that a user can select which view they prefer for web browsing.

[0381] In one embodiment, a portable electronic device with a touchscreen display (e.g., device 100) displays at least a portion of a structured electronic document on the touchscreen display. The structured electronic document includes multiple boxes of content (e.g., block 3914, FIG. 39A).

[0382] In some embodiments, the plurality of boxes are defined by a style sheet language. In some embodiments, the style sheet language is a cascading style sheet language. In some embodiments, the structured electronic document is a web page (e.g., web page 3912, FIG. 39A). In some embodiments, the structured electronic document is an HTML or XML document.

[0383] In some embodiments, displaying at least a portion of the structured electronic document includes scaling the width of the document to fit within the width of the touchscreen display, independent of the length of the document.

[0384] In one embodiment, the touchscreen display is rectangular with a short axis and a long axis, and the width of the display corresponds to the short axis when the structured electronic document is viewed in portrait view (e.g., FIG. 39C), and the width of the display corresponds to the long axis when the structured electronic document is viewed in landscape view (e.g., FIG. 39D).

[0385] In some embodiments, prior to displaying at least a portion of the structured electronic document, boundaries, edges, and / or padding are determined for the plurality of boxes and adjusted for display on the touchscreen display. In some embodiments, all boxes in the plurality of boxes are adjusted. In some embodiments, only the first box is adjusted. In some embodiments, only the first box and boxes adjacent to the first box are adjusted.

[0386] A first gesture is detected at a location on a displayed portion of a structured electronic document (e.g., gesture 3923, FIG. 39A). In some embodiments, the first gesture is a finger gesture. In some embodiments, the first gesture is a stylus gesture.

[0387] In some embodiments, the first gesture is a tap gesture. In some embodiments, the first gesture is a double tap with one finger, a double tap with two fingers, a single tap with one finger, or a single tap with two fingers.

[0388] A first box in the plurality of boxes (e.g., block 5 3914-5, FIG. 39A ) is determined at the location of the first gesture. In some embodiments, the structured electronic document has an associated render tree with multiple nodes, and determining the first box at the location of the first gesture includes traversing the render tree downward to determine a first node in the plurality of nodes that corresponds to the detected location of the first gesture, traversing the render tree upward from the first node to a nearest parent node that includes a logical grouping of content, and identifying the content corresponding to the nearest parent node as the first box. In some embodiments, the logical grouping of content includes a paragraph, a video, a plug-in object, or a table. In some embodiments, the nearest parent node is a replaced inline, a block, an inline-block, or an inline-table.

[0389] The first box is magnified and substantially centered on the touchscreen display (e.g., block 5 3914-5, FIG. 39C). In some embodiments, magnifying and substantially centering includes substantially zooming and translating the first box on the touchscreen display. In some embodiments, magnifying includes expanding the first box so that its width is substantially the same as the width of the touchscreen display.

[0390] In some embodiments, the text in the enlarged first box is resized to meet or exceed a predetermined minimum text size on the touchscreen display. In some embodiments, the text resizing includes determining a scaling factor by which to enlarge the first box, dividing the predetermined minimum text size on the touchscreen display by the scaling factor to determine a minimum text size for the text in the first box, and, if the text size for the text in the first box is smaller than the determined minimum text size, increasing the text size for the text in the first box to at least the determined minimum text size. In some embodiments, the first box has a width, the display has a display width, and the scaling factor is the display width divided by the width of the first box before enlargement. In some embodiments, the resizing occurs during enlargement. In some embodiments, the resizing occurs after enlargement.

[0391] In one embodiment, text in a structured electronic document is resized to meet or exceed a predetermined minimum text size on a touchscreen display. In one embodiment, the text resizing includes determining a scaling factor by which to enlarge a first box, dividing a predetermined minimum text size on the touchscreen display by the scaling factor to determine a minimum text size for the text in the structured electronic document, and, if the text size of the text in the structured electronic document is smaller than the determined minimum text size, increasing the text size of the text in the structured electronic document to at least the determined minimum text size. In one embodiment, the text resizing includes identifying a box containing text in a plurality of boxes, determining a scaling factor by which to enlarge the first box, dividing a predetermined minimum text size on the touchscreen display by the scaling factor to determine a minimum text size for the text in the structured electronic document, and, for each identified box containing text, if the text size of the text in the identified box is smaller than the determined minimum text size, increasing the text size of the text in the identified box to at least the determined minimum text size and adjusting the size of the identified box.

[0392] In some embodiments, a second gesture (e.g., gesture 3929, FIG. 39C) is detected in the enlarged first box. In response to detecting this second gesture, the size of the displayed portion of the structured electronic document is reduced. In some embodiments, the first box is restored to its size before it was enlarged.

[0393] In some embodiments, the second gesture and the first gesture are the same type of gesture. In some embodiments, the second gesture is a finger gesture. In some embodiments, the second gesture is a stylus gesture.

[0394] In some embodiments, the second gesture is a tap gesture. In some embodiments, the second gesture is a double tap with one finger, a double tap with two fingers, a single tap with one finger, or a single tap with two fingers.

[0395] In some embodiments, while the first box is enlarged, a third gesture (e.g., gesture 3927 or gesture 3935, FIG. 39C ) is detected in the second box but not in the first box. In response to detecting the third gesture, the second box is substantially centered on the touch screen display. In some embodiments, the third gesture and the first gesture are the same type of gesture. In some embodiments, the third gesture is a finger gesture. In some embodiments, the third gesture is a stylus gesture.

[0396] In some embodiments, the third gesture is a tap gesture. In some embodiments, the third gesture is a double tap with one finger, a double tap with two fingers, a single tap with one finger, or a single tap with two fingers.

[0397] In some embodiments, a swipe gesture (e.g., gesture 3937 or gesture 3939, FIG. 39C ) is detected on a touchscreen display. In response to detecting the swipe gesture, a displayed portion of the structured electronic document is translated on the touchscreen display. In some embodiments, the translation includes moving the structured electronic document vertically, horizontally, or diagonally on the touchscreen display. In some embodiments, the swipe gesture is a finger gesture. In some embodiments, the swipe gesture is a stylus gesture.

[0398] In some embodiments, a fifth gesture (e.g., multi-touch gesture 3941 / 3943, FIG. 39C) is detected on the touchscreen display. In response to detecting the fifth gesture, the displayed portion of the structured electronic document is rotated 90 degrees on the touchscreen display. In some embodiments, the fifth gesture is a finger gesture. In some embodiments, the fifth gesture is a multi-finger gesture. Also, in some embodiments, the fifth gesture is a multi-finger twisting gesture.

[0399] In one embodiment, a change in device orientation is detected, and in response to detecting a change in device orientation, a displayed portion of the structured electronic document is rotated 90 degrees on the touchscreen display.

[0400] In one embodiment, a multi-finger spread gesture (e.g., multi-touch gesture 3931 / 3933, FIG. 39C) is detected on a touchscreen display. In response to detecting the multi-finger spread gesture, a portion of the displayed portion of the structured electronic document is enlarged on the touchscreen display based on the location of the multi-finger spread gesture and the amount of movement of the fingers in the multi-finger spread gesture.

[0401] A graphical user interface (e.g., UI 3900A, FIG. 39A) of a portable electronic device with a touchscreen display includes at least a portion of a structured electronic document (e.g., web page 3912, FIG. 39A). The structured electronic document includes multiple boxes of content (e.g., box 3914, FIG. 39A). In response to detecting a first gesture (e.g., gesture 3923, FIG. 39A) at a location of a portion of the structured electronic document, a first box (e.g., block 5 3914-5, FIG. 39A) among the multiple boxes at the location of the first gesture is determined, and the first box is enlarged and substantially centered on the touchscreen display (e.g., block 5 3915-5, FIG. 39C).

[0402] Further discussion of displaying structured electronic documents (e.g., web pages) can be found in U.S. Provisional Patent Application No. 60 / 946,715, entitled "Portable Electronic Device, Method, and Graphical User Interface for Displaying Structured Electronic Documents," filed June 27, 2007, which is incorporated herein by reference.

[0403] In one embodiment, when a web page link is activated in browser 147 that corresponds to an online video (e.g., a YouTube video), the corresponding online video is shown in online video application 155 rather than in browser 147. Similarly, in one embodiment, when a URL is entered in browser 147 that corresponds to an online video (e.g., a YouTube video), the corresponding online video is shown in online video application 155 rather than in browser 147. Redirecting the online video URL to online video application 155 provides an improved viewing experience because the user does not have to navigate to a web page that contains the requested online video.

[0404] In one embodiment, when a link on a web page is activated in browser 147 that corresponds to an online map request (e.g., a Google Maps request), the corresponding map is displayed in maps application 154 rather than in browser 147. Similarly, in one embodiment, when a URL is entered in browser 147 that corresponds to an online map request (e.g., a Google Maps request), the corresponding map is displayed in maps application 154 rather than in browser 147. Redirecting the map request URL to maps application 154 provides an improved viewing experience because the user does not have to navigate to a web page containing the requested map.

[0405] In some embodiments, in response to a tap or other regular user gesture on URL entry box 3908, the touch screen displays an enlarged entry box 3926 and keyboard 616 (e.g., UI 3900B, FIG. 3900B in portrait view and UI 3900E, FIG. 39E in landscape view). In some embodiments, the touch screen also displays: • A context clear icon 3928 that, when activated (e.g., by tapping the icon with a finger), initiates the deletion of all text within the entry box 3926; • A search icon 3930 that, when activated (e.g., by tapping the icon with a finger), initiates an internet search using the search term input in box 3926; and • A “Go to URL” icon 3932 that, when activated (eg, by tapping the icon with a finger), initiates retrieval of the web page with the URL entered in box 3926 .

[0406] Thus, the same entry box 3926 can be used to enter both search terms and URLs. In some embodiments, whether the clear icon 3928 is displayed depends on the context.

[0407] UI 3900G (FIG. 39G) is a UI for adding a new window to an application, such as browser 147. UI 3900 displays an application (e.g., browser 147), which includes a displayed window (e.g., web page 3912-2) and at least one hidden window (e.g., web pages 3912-1 and 3934-3, as well as possibly other web pages completely hidden from the screen). UI 3900G also displays an icon for adding a window to the application (e.g., new window or new page icon 3936). In response to detecting activation of icon 3936 for adding a window, the browser adds a window to the application (e.g., a new window for new web page 3912).

[0408] In response to detecting a gesture on the touchscreen display, displayed windows in applications are moved off the display and hidden windows are moved into the display. For example, in response to detecting a tap gesture 3949 on the left side of the screen, a window with web page 3912-2 is moved to the right partially or completely off the screen, a window with web page 3912-3 is moved completely off the screen, a partially hidden window with web page 3912-1 is moved to the center of the display, and another completely hidden window with a web page (e.g., 3912-0) is moved partially into the display. Alternatively, the same effect can be achieved with detection of a left-to-right swipe gesture 3951.

[0409] Conversely, in response to detecting a tap gesture 3953 on the right side of the screen, the window with web page 3912-2 is moved to the left partially or completely off the screen, the window with web page 3912-1 is moved completely off the screen, a partially obscured window with web page 3912-3 is moved toward the center of the display, and another completely obscured window with a web page (e.g., 3912-4) is moved partially into the display. Alternatively, the same effect can be achieved with detection of a right-to-left swipe gesture 3951.

[0410] In one embodiment, in response to a tap or other defined gesture on the delete icon 3934, the corresponding window 3912 is deleted. In one embodiment, in response to a tap or other defined gesture on the done icon 3938, the center window of the display (e.g., 3912-2) expands to fill the screen.

[0411] Further discussion of adding windows to an application can be found in U.S. patent application Ser. No. 11 / 620,647, filed Jan. 5, 2007, entitled "Method, System, And Graphical User Interface For Viewing Multiple Application Windows," which is incorporated herein by reference.

[0412] 40A-40F are diagrams illustrating example user interfaces for playing an item of inline multimedia content according to one embodiment.

[0413] In one embodiment, user interfaces 4000A-4000F include the following elements, or a subset or superset thereof: - The above-mentioned 402, 404, 406, 3902, 3906, 3910, 3912, 3918, 3920, 3922, Inline multimedia content 4002, such as QuickTime content (4002-1), Windows Media content (4002-2), or Flash content (4002-3); Other forms of content 4004 in structured documents, e.g., text; an exit icon 4006 that, when activated (e.g., by tapping the icon with a finger), initiates an exit from the inline multimedia content player UI (e.g., UI 4000B or 4000F) and a return to another UI (e.g., UI 4000A, FIG. 40A); • elapsed time 4008 indicating how much of the inline multimedia content 4002 has been played in units of time; a progress bar 4010 that can be used to indicate which piece of the inline multimedia content 4002 has been played and to help scroll the inline multimedia content in response to user gestures; • Time remaining 4012, which indicates in units of time how much of the inline multimedia content 4002 remains to be played; • A download icon 4014 that indicates when the inline multimedia content 4002 is downloaded or streamed to the device; a fast rewind / skip backward icon 4016 that, when activated (e.g., by tapping the icon with a finger), begins rewinding or skipping backward through the inline multimedia content 4002; a play icon 4018 that, when activated (e.g., by tapping the icon with a finger 4026 (FIG. 40C)), begins playing the inline multimedia content 4002 from the beginning or from where the inline multimedia content was paused; • Fast forward / skip forward icon 4020 to initiate forward or forward skipping through the inline multimedia content 4002; a volume adjustment slider icon 4022 that, when activated (e.g., by tapping the icon with a finger), begins adjusting the volume of the inline multimedia content 4002; and • A pause icon 4024 that, when activated (eg, by tapping the icon with a finger), initiates pausing of the inline multimedia content 4002.

[0414] In some embodiments, a portable electronic device (e.g., 100) displays at least a portion of a structured electronic document on a touchscreen display. The structured electronic document includes content (e.g., 4002 and 4004). In some embodiments, the structured electronic document is a web page (e.g., 3912). In some embodiments, the structured electronic document is an HTML or XML document.

[0415] A first gesture (e.g., 4028, FIG. 40A) is detected on an item of inline multimedia content (e.g., 4002-1, FIG. 40A) in a displayed portion of a structured electronic document. In some embodiments, the inline multimedia content includes video and / or audio content. In some embodiments, the content can be played with a QuickTime, Windows Media, or Flash plug-in.

[0416] In response to detecting the first gesture, the item of inline multimedia content is enlarged on the touch screen display, and display of other content of the structured electronic document (e.g., 4002-1, 4004 and other 4002 in addition to FIG. 4000A) in addition to the enlarged item of inline multimedia content is discontinued (e.g., UI 4000B, FIG. 40B, or UI 4000F, FIG. 40F).

[0417] In some embodiments, magnifying an item of inline multimedia content includes an animated zoom in on the item. In some embodiments, magnifying an item of inline multimedia content includes simultaneously zooming and translating the item of inline multimedia content on a touchscreen display. Also, in some embodiments, magnifying an item of inline multimedia content includes rotating the item of inline multimedia content by 90 degrees (e.g., from UI 4000A, FIG. 40A to UI 4000B, FIG. 40B).

[0418] In some embodiments, the item of inline multimedia content is full size, the touchscreen display is a size, and enlarging the item of inline multimedia content includes enlarging the item of inline multimedia content to the smaller of the item's full size and the size of the touchscreen display.

[0419] In some embodiments, expanding the item of inline multimedia content includes expanding the item of inline multimedia content so that the width of the item of inline multimedia content is substantially the same as the width of the touchscreen display (e.g., UI4000B, FIG. 40B, or UI4000F, FIG. 40F).

[0420] In some embodiments, ceasing to display other content in the structured electronic document in addition to the item of inline multimedia content includes fading out other content in the structured electronic document in addition to the item of inline multimedia content.

[0421] While the enlarged item of inline multimedia content is displayed, a second gesture is detected on the touchscreen display (eg, 4030, FIG. 40B).

[0422] In response to detecting the second gesture, one or more playback controls are displayed to play the enlarged item of inline multimedia content. In some embodiments, the one or more playback controls include a play icon (e.g., 4018), a pause icon (e.g., 4024), a volume icon (e.g., 4022), and / or a playback progress bar icon (e.g., 4010).

[0423] In some embodiments, displaying one or more playback controls includes displaying one or more playback controls over an enlarged item of inline multimedia content (e.g., playback controls 4016, 4018, 4020, and 4022 over enlarged inline multimedia content 4002-1 in FIG. 40C). Also, in some embodiments, one or more playback controls are overlaid on an enlarged item of inline multimedia content. In some embodiments, one or more playback controls are semi-transparent.

[0424] In one embodiment, instructions in a structured electronic document that automatically start playback of an item of inline multimedia content are disabled, which allows the device time to download more of the selected inline multimedia content before playback begins.

[0425] A third gesture is detected on one of the playback controls (gesture 4026 on play icon 4018 in Figure 40C).

[0426] In response to detecting the third gesture, the enlarged item of inline multimedia content is played. In one embodiment, playing the enlarged item of inline multimedia content includes playing the enlarged item of inline multimedia content with a plug-in for a content format associated with the item of inline multimedia content.

[0427] In some embodiments, the display of one or more playback controls is discontinued while the enlarged item of inline multimedia content is playing (e.g., FIG. 40D no longer shows playback controls 4016, 4018, 4020, and 4022, but still shows 4066, 4088, 4010, and 4012). In some embodiments, the display of all playback controls is discontinued. In some embodiments, discontinuing the display of one or more playback controls includes fading out the one or more playback controls. In some embodiments, the display of one or more playback controls is discontinued after a predetermined time. In some embodiments, the display of one or more playback controls is discontinued after no contact with the touchscreen display is detected for a predetermined time.

[0428] In some embodiments, a fourth gesture is detected on the touchscreen display. In response to detecting the fourth gesture, at least a portion of the structured electronic document is displayed again (e.g., FIG. 40A). In some embodiments, the fourth gesture includes a tap gesture on a playback completion icon, such as an end icon (e.g., gesture 4032 on end icon 4006 in FIG. 40D). In some embodiments, the item of inline multimedia content returns to its pre-enlarged size.

[0429] In some embodiments, the first, second and third gestures are finger gestures.In some embodiments, the first, second and third gestures are stylus gestures.

[0430] In some embodiments, the first, second, and third gestures are tap gestures, hi some embodiments, the tap gestures are a double tap with one finger, a double tap with two fingers, a single tap with one finger, or a single tap with two fingers.

[0431] A graphical user interface on a portable electronic device with a touchscreen display includes at least a portion of a structured electronic document containing content, an item of inline multimedia content in the portion of the structured electronic document, and one or more playback controls. In response to detecting a first gesture on the item of inline multimedia content, the item of inline multimedia content on the touchscreen display is enlarged, and displaying other content in the structured electronic document in addition to the enlarged item of inline multimedia content is discontinued. In response to detecting a second gesture on the touchscreen display while the enlarged item of inline multimedia content is displayed, one or more playback controls for displaying the enlarged item of inline multimedia content are displayed. In response to detecting a third gesture on one of the playback controls, the enlarged item of inline multimedia content is played.

[0432] Further discussion of displaying inline multimedia content can be found in U.S. Provisional Patent Application No. 60 / 947,155, filed June 29, 2007, entitled "Portable Electronic Device, Method, and Graphical User Interface for Displaying Inline Multimedia Content," which is incorporated herein by reference.

[0433] 41A-41E are diagrams illustrating example user interfaces for interacting with user input elements in displayed content according to some embodiments.

[0434] In one embodiment, user interfaces 4100A-4100E include the following elements, or a subset or superset thereof: - 402, 404, 406, 618, 620, 626, 3902, 3906, 3910, 3912, 3918, 3920, and 3922 mentioned above; ● Content 4112 such as web pages, word processing, spreadsheets, email or presentation documents, electronic forms, or online forms; user input elements 4102 in the content 4112, such as radio buttons, text entry fields, check boxes, pull-down lists, and / or form fields; • Information 4108 about the selected user input element 4102; • an area 4114 containing the selected user input element 4102; • A cancel icon 4116 that, when activated (e.g., by tapping the icon with a finger), cancels user input into the selected element 4102; • an input selection 4118 that, when activated (e.g., by tapping an icon with a finger), is used as the input for the selected element 4102; an exit icon 4124 that, when activated (e.g., by tapping the icon with a finger), returns the device to the previous UI (e.g., UI 4100D, FIG. 41D); and • A submit icon 4126 (Figure 41) that, when activated (e.g., by tapping the icon with a finger), sends input to a remote server.

[0435] In one embodiment, a portable multifunction device (eg, device 100) displays content 4112 on a touchscreen display. The content includes a plurality of user input elements 4102.

[0436] In some embodiments, the content is a web page (e.g., page 3912, FIG. 41A). In some embodiments, the content is a word processing, spreadsheet, email, or presentation document. In some embodiments, the content is an electronic form. In some embodiments, the content is an online form.

[0437] In one embodiment, user input elements 4102 include one or more radio buttons, text entry fields, check boxes, pull-down lists (e.g., 4102-1, FIG. 41A), and / or form fields (e.g., username 4102-3, FIG. 41A).

[0438] A finger contact (e.g., 4104, FIG. 41A) is detected on the touchscreen display. The contact includes a contact area.

[0439] A point (e.g., 4106, FIG. 41A) is determined within the contact area. In one embodiment, the point within the contact area is the centroid of the contact area. In one embodiment, the point within the contact area is offset from the centroid of the contact area.

[0440] A user input element from the plurality of user input elements is selected based on the proximity of the user input element to the determined point (e.g., 4102-1, FIG. 41A). In some embodiments, content on the touchscreen display has an associated magnification factor, and selection is limited to user input elements located within a distance from the determined point determined based on the magnification factor. In some embodiments, selection is limited to user input elements located within the contact area. In some embodiments, selection is limited to user input elements that at least partially overlap the contact area. In some embodiments, selection is limited to user input elements located within a predetermined distance from the determined point.

[0441] Information associated with the selected user input element is displayed above the displayed content (e.g., Accounts Menu 4108-1, FIG. 41A). In one embodiment, the displayed information associated with the selected user input element includes a description of the selected user input element.

[0442] In some embodiments, information associated with the selected user input element is displayed outside the contact area. In some embodiments, the location of the information associated with the selected user input element on the displayed content depends on the location of the contact. In some embodiments, the location of the information associated with the selected user input element is displayed in the top half of the displayed content if the location of the contact is in the bottom half of the displayed content, and the location of the information associated with the selected user input element is displayed in the bottom half of the displayed content if the location of the contact is in the top half of the displayed content.

[0443] In some embodiments, information associated with the selected user input element is displayed after contact is maintained for at least a predetermined period of time, hi some embodiments, the displayed information associated with the selected user input element is removed if contact with the touchscreen is maintained for longer than a predetermined period of time.

[0444] A loss of contact between the finger and the touchscreen display is detected, hi some embodiments, detecting the loss of contact includes detecting the loss of contact while information associated with the selected user input element is being displayed.

[0445] In one embodiment, in response to detecting a loss of contact between the touchscreen display and the finger, an area containing the selected user input element on the touchscreen display is enlarged (e.g., for element 4102-1, area 4114-1 in FIG. 41A is enlarged in FIG. 41B; similarly, for elements 4102-3 and 4102-4, area 4114-2 in FIG. 41D is enlarged in FIG. 41E).

[0446] In one embodiment, in response to detecting a loss of contact between the touchscreen display and the finger before a predetermined time has elapsed, the selected user input element is enlarged on the touchscreen display (e.g., element 4102-1 in FIG. 41A is enlarged in FIG. 41B, and similarly, elements 4102-3 and 4102-4 in FIG. 41D are enlarged in FIG. 41E).

[0447] Input is received for the selected user input element. In one embodiment, receiving the input includes receiving text input via a soft keyboard on the touchscreen display (e.g., keyboard 626, FIG. 41E), detecting finger contact with a radio button on the touchscreen display, detecting finger contact with a tech box on the touchscreen display, or detecting finger contact with an item in a pull-down list on the touchscreen display (e.g., contact 4120 at input selection 4118-3 in FIG. 41B).

[0448] In some embodiments, the received input is sent to a remote computer, such as a web server.

[0449] In one embodiment, movement of a contact on a touch screen display (e.g., movement 4110-1, FIG. 41C) is detected, a second user input element (e.g., element 4102-2, FIG. 41C) among the plurality of user input elements is selected based on the proximity of the second user input element to the contact (e.g., contact 4104, FIG. 41C), display of information associated with the first selected user input element over the displayed content is terminated, and information associated with the second selected user input element is displayed over the displayed content (e.g., sign in button 4108-2, FIG. 41C).

[0450] In one embodiment, movement of a contact on a touchscreen display (e.g., movement 4110-1 in FIG. 41C and movement 4110-2 in FIG. 41D) is detected, a series of user input elements from the plurality of user input elements is selected based on the proximity of the user input element to the contact (e.g., element 4102-2 in FIG. 41C and elements 4102-3 and 4102-4 in FIG. 41D), and information associated with each user input element in the series of user input elements is displayed in sequence over the displayed content (e.g., information 4108-3 in FIG. 41C and information 4108-4 in FIG. 41D).

[0451] A graphical user interface (e.g., UI 4100A, FIG. 41A) on a portable multifunction device with a touchscreen display includes (1) content 4112 including a plurality of user input elements 4102, and (2) information 4108-1 associated with a first user input element 4102-1 among the plurality of user input elements. In response to detecting an area of ​​contact 4104 between the touchscreen display and a finger, a point 4106 is determined within the contact area, a first user input element 4102-1 is selected based on the proximity of the first user input element to the determined point, and the information 4108-1 associated with the first user input element is displayed over the content.

[0452] Using interfaces such as 4011A-4100E, users can more easily see information associated with input elements and provide input to portable devices using finger touches on a touchscreen. Users are less concerned about the accuracy of their finger touches for selecting input elements. Furthermore, users can see the information and provide input even when input elements are initially displayed at a small size where the elements are difficult or barely readable.

[0453] Further discussion of interacting with user input elements can be found in U.S. Provisional Patent Application No. 60 / 947,127, filed June 29, 2007, entitled "Portable Multifunction Device, Method, and Graphical User Interface for Interacting with User Input Elements in Displayed Content," which is incorporated herein by reference.

[0454] FIG. 41F is a diagram illustrating an example user interface for interacting with hyperlinks within displayed content according to one embodiment.

[0455] In one embodiment, the user interface UI4100F includes the following elements, or a subset or superset thereof: - 402, 404, 406, 3902, 3906, 3910, 3912, 3918, 3920, 3922, 4112, and 4102 mentioned above; Links 4122 that provide links to other content, and ●Information 4130 related to link 4122.

[0456] Further description of displaying and activating hyperlinks using an interface such as UI4100F can be found in U.S. patent application Ser. No. 11 / 620,644, entitled "Method, System, And Graphical User Interface For Displaying Hyperlink Information," filed Jan. 5, 2007, and U.S. patent application Ser. No. 11 / 620,646, entitled "Method, System, And Graphical User Interface For Activating Hyperlink," filed Jan. 5, 2007, both of which are incorporated herein by reference.

[0457] 42A-42C are diagrams illustrating example user interfaces for translating page content or translating only frame content within page content according to one embodiment.

[0458] In one embodiment, user interfaces 4200A-4200C include the following elements, or a subset or superset thereof: - 402, 404, 406, 3902, 3906, 3910, 3918, 3920, and 3922 mentioned above; - a portion of page content 4202, such as web page content; a frame 4204 that displays a portion 4206 of the frame content; A portion of the frame content 4206, such as a portion of a map or scrollable item list displayed within the frame 4204; - Other content 4208 in the part 4201 excluding a part 4206 of the frame content; a new portion of page content 4212 displayed in response to an N-finger translation gesture 4210; and • A new portion 4216 of frame content displayed in response to an M-finger translation gesture 4214, where M is a number different from N (eg, N=1 and M=2).

[0459] In one embodiment, a portable multifunction device (e.g., device 100) displays a portion of page content (e.g., 4202, FIG. 42A) on a touchscreen display. Portion of page content 4202 includes frame 4204 displaying portion of frame content 4206 and other content 4208 of the page.

[0460] In some embodiments, the page content is web page content, hi some embodiments, the page content is a word processing, spreadsheet, email, or presentation document.

[0461] An N-finger translation gesture (e.g., 4210) is detected on or near the touchscreen display.

[0462] In response to detecting N-finger translation gesture 4210, the page content is translated to display a new portion of the page content (e.g., 4212, FIG. 42B) on the touch screen display. Translating the page content includes translating the displayed portion 4206 of the frame content and other content 4208 of the page.

[0463] In some embodiments, translating the page content includes translating the page content vertically, horizontally, or diagonally. In some embodiments, translating the page content has an associated translation direction that corresponds to the movement direction of the N-finger translation gesture 4210. In some embodiments, the translation direction corresponds directly to the finger movement direction, while in some embodiments, the translation direction is mapped from the finger movement direction based on a rule. For example, a rule may state that if the finger movement direction is within X degrees of a canonical axis, then the translation direction is along the canonical axis; otherwise, the translation direction is substantially the same as the finger movement direction.

[0464] In some embodiments, translating the page content has an associated translation speed that corresponds to the speed of movement of the N-finger translation gesture. In some embodiments, translating the page content is based on a simulation of equations of motion with friction.

[0465] An M-finger translation gesture (e.g., 4214, FIG. 42A) is detected on or near the touchscreen display, where M is a number different from N. In one embodiment, N is equal to 1 and M is equal to 2.

[0466] In response to detecting the M-finger translation gesture 4214, the frame content is translated to display a new portion of the frame content (e.g., 4216, FIG. 42C) on the touchscreen display, without translating other content 4208 of the page.

[0467] In some embodiments, translating the frame content includes translating the frame content vertically, horizontally, or diagonally. In some embodiments, translating the frame content includes translating the frame content diagonally.

[0468] In some embodiments, translating the frame content has an associated translation direction that corresponds to the movement direction of the M-finger translation gesture 4214. In some embodiments, the translation direction corresponds directly to the finger movement direction, while in other embodiments, the translation direction is mapped from the finger movement direction based on a rule. For example, the rule may state that if the finger movement direction is within Y degrees of the canonical axis, then the translation direction is along the canonical axis; otherwise, the translation direction is substantially the same as the finger movement direction.

[0469] In some embodiments, translating the frame content has an associated translation speed that corresponds to the movement speed of the M-finger translation gesture. In some embodiments, translating the frame content is based on a simulation of equations of motion with friction.

[0470] In some embodiments, the frame content includes a map. In some embodiments, the frame content includes a scrollable list of items.

[0471] In one embodiment, the other content 4208 of the page includes text.

[0472] A graphical user interface (e.g., UI 4200A, FIG. 42A ) of a portable multifunction device with a touchscreen display comprises a portion of page content 4202 on the touchscreen display, including (1) a frame 4204 displaying a portion of frame content 4206 and other content of the page 4208. In response to detecting an N-finger translation gesture 4210 on or near the touchscreen display, the page content is translated to display a new portion of the page content 4212 ( FIG. 42B ) on the touchscreen display, where translating the page content includes translat...

Claims

1. 1. A method comprising: In an electronic device having a display, displaying via the display a representation of a first image in a photo library; receiving a selection input for an icon that, while displaying a representation of a first image in the photo library, initiates a process for sharing the first image when selected; displaying a user interface associated with e-mailing the first image including the representation of the first image in response to receiving the selection input for the icon that, when selected, initiates the process of sharing the first image; wherein during a transition from displaying the representation of the first image in the photo library to displaying the representation of the first image in the user interface associated with emailing the first image, the representation of the first image is continuously displayed; during a transition from displaying the representation of the first image in the photo library to displaying the representation of the first image in the user interface associated with emailing the first image, the representation of the first image is animated; A method according to claim 1, wherein during a transition from displaying the representation of the first image in the photo library to displaying the representation of the first image in the user interface associated with emailing the first image, the representation of the first image partially obscures the user interface associated with emailing the first image.

2. detecting a swipe gesture while displaying the representation of the first image in the photo library and prior to accepting the selection input for the icon that, when selected, initiates the process of sharing the first image; In response to detecting the swipe gesture, ceasing to display the representation of the first image in the photo library; and displaying a representation of a second image in the photo library that is different from the representation of the first image; The method of claim 1 further comprising:

3. 2. The method of claim 1, wherein during the transition from displaying the representation of the first image in the photo library to displaying the first image in the user interface associated with emailing the first image, the representation of the first image changes size.

4. 2. The method of claim 1, wherein during the transition from displaying the representation of the first image in the photo library to displaying the first image in the user interface associated with emailing the first image, individual portions of the representation of the first image gradually move closer to individual ends of a user interface area.

5. The method of claim 1, wherein during the transition from displaying the representation of the first image in the photo library to displaying the first image in the user interface associated with e-mailing the first image, the user interface associated with e-mailing the first image is slid onto the display.

6. The method of claim 1 , wherein the user interface associated with emailing the first image includes an input field for identifying a recipient of the first image.

7. the user interface associated with emailing the first image includes a cancel icon; detecting an input corresponding to the cancel icon; In response to detecting an input corresponding to the cancel icon, initiating a process for ceasing display of the user interface associated with emailing the first image; The method of claim 1 further comprising:

8. A memory storing one or more computer programs including instructions for carrying out the method according to any one of claims 1 to 7; one or more processors capable of executing the instructions stored in the memory; 1. An electronic device comprising:

9. A computer program comprising instructions which when executed on a computer cause the computer to carry out the method according to any one of claims 1 to 7.

10. An electronic device comprising means for carrying out the method according to any one of claims 1 to 7.

Images