HK1200947B - Portable multifunction device with interface reconfiguration mode - Google Patents

Description

Portable multifunction device with interface reconfiguration mode

Divisional Application Instructions

This application is a divisional application of the Chinese invention patent application with the international application date of January 6, 2009, the Chinese national application number 200980000229.2, and the name “PORTABLE MULTI-FUNCTION DEVICE WITH INTERFACE RECONFIGURATION MODE”.

Technical Field

The disclosed embodiments relate generally to portable electronic devices, and more particularly to user interfaces on portable multifunction devices having touch-sensitive displays that include interface reconfiguration modes, and to creating widgets on portable multifunction devices for displaying specific areas of web pages (i.e., creating web folder widgets).

Background Art

As portable electronic devices become more compact and the number of functions performed by a given device increases, designing a user interface that allows users to easily interact with multi-function devices has become a major challenge. This challenge is particularly important for handheld portable devices whose screens are much smaller than those of desktop or laptop computers. The situation is unfavorable because the user interface is the way through which the user not only receives content but also responds to user actions or behaviors (which include the features, tools and functions that the user attempts to access the device). Some portable communication devices (e.g., mobile phones, sometimes also referred to as cellular phones, etc.) have resorted to adding more push buttons, increasing the density of push buttons, overloading the functions of push buttons, or utilizing complex menu systems to enable users to access, store and manipulate data. These traditional user interfaces often result in complex key sequences and menu hierarchies that the user must remember.

Many traditional user interfaces, such as those that include physical push buttons, are also inflexible. This may prevent the user interface from being configured and/or modified by an application running on the portable device or by the user. When combined with the time-consuming requirement to remember multiple key sequences and menu hierarchies and the difficulty in activating a desired push button, this inflexibility is frustrating for most users.

Some conventional user interfaces are user-configurable, allowing for at least partial customization. Unfortunately, the process of modifying such conventional user interfaces is often as tedious and complex as using the conventional user interface itself. Specifically, the required actions during configuration of such conventional user interfaces are often unintuitive, and the corresponding indicators guiding user actions are often difficult to understand. These challenges often lead to further user frustration.

Therefore, there is a need for a clearer and more intuitive user interface for a portable device that allows a user to easily configure the user interface.

Furthermore, due to the small size of display screens on portable electronic devices, only the portion of a web page that is of interest to the user is often displayed on the screen at a given time. Furthermore, the dimensions of the display may be too small for comfortable or practical viewing. Consequently, the user may need to frequently scroll and resize the web page to view the portion of interest each time they access the web page. However, limitations of conventional user interfaces may make such scrolling and resizing difficult to perform.

Therefore, there is a need for a portable multifunction device with a clearer and more intuitive user interface for creating a widget that displays a specific area of a web page (i.e., for creating a web folder widget) that is easy to use, configure, and/or modify. Additionally, once a web folder widget is created, there is a need for a clear and intuitive method for configuring the user interface, including an icon that activates the web folder widget.

Summary of the Invention

The disclosed portable multifunction device reduces or eliminates the above-mentioned deficiencies and other problems associated with user interfaces for portable devices. In some embodiments, the device has a touch-sensitive display (also referred to as a "touch screen") with a graphical user interface (GUI), one or more processors, memory, and one or more modules, programs, or instruction sets stored on the memory for performing multiple 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 telephony, video conferencing, email, instant messaging, blogging, digital photography, digital video recording, web browsing, digital music playback, and/or digital video playback. Instructions for performing these functions may be included in a computer-readable storage medium or other computer program product configured for execution by one or more processors.

In one aspect of the present invention, a computer-implemented method at a computing device having a touch screen display includes: displaying a first group of a first plurality of icons in a first area of the touch screen display, wherein the first plurality of icons includes multiple groups of icons, and the multiple groups of icons are displayed separately in the first area of the touch screen display; displaying a second plurality of icons in a second area on the touch screen display, wherein the second area is different from the first area; detecting a first finger gesture on the touch screen display in the first area; and in response to detecting the first finger gesture on the touch screen display in the first area, replacing the display of the first group of the first plurality of icons with the display of the second group of the first plurality of icons in the first area on the touch screen display, while maintaining the display of the second plurality of icons in the second area on the touch screen display.

Thus, interface reconfiguration according to the disclosed embodiments enables users to reposition displayed icons (e.g., icons for activating applications and/or web folder widgets) in a simple, intuitive manner using finger gestures.

BRIEF DESCRIPTION OF THE DRAWINGS

To better understand the above-described embodiments and additional embodiments of the present invention, reference should be made to the following detailed description in conjunction with the accompanying drawings, in which like reference numerals represent corresponding parts throughout.

1A and 1B are block diagrams illustrating a portable multifunction device with a touch-sensitive display in accordance with some embodiments.

Figure 2 illustrates a portable multifunction device with a touch screen in accordance with some embodiments.

3 illustrates an exemplary user interface for unlocking a portable electronic device in accordance with some embodiments.

4A-4B illustrate exemplary user interfaces with menus of applications and/or widgets on a portable multifunction device in accordance with some embodiments.

Figure 4C illustrates an exemplary user interface with a list of user-created widgets on a portable multifunction device in accordance with some embodiments.

5A-5K illustrate exemplary user interfaces for a browser in accordance with some embodiments.

Figures 5L and 5M illustrate exemplary user interfaces for displaying a web folder widget in accordance with some embodiments.

6A-6D illustrate animations for creating and displaying an icon corresponding to a web folder widget in accordance with some embodiments.

Figure 6E illustrates an exemplary user interface for activating a web folder widget in accordance with some embodiments.

7A-7E are flow diagrams illustrating a process for creating and using a web folder widget in accordance with some embodiments.

Figures 7F through 7H are flow diagrams illustrating a process for displaying a web folder widget in accordance with some embodiments.

8A-8D illustrate exemplary user interfaces for displaying icons in accordance with some embodiments.

9A and 9B are flow diagrams of an icon display process according to some embodiments.

10 is a flow diagram of a position adjustment process for a portable multifunction device in accordance with some embodiments.

Figures 11A through 1100 illustrate exemplary user interfaces during interface reconfiguration in accordance with some embodiments.

12A-12F are flow diagrams of an icon reconfiguration process according to some embodiments.

DETAILED DESCRIPTION

Reference will now be made in detail to embodiments, examples of which are illustrated in the accompanying drawings. In order to provide a thorough understanding of the present invention, numerous specific details are set forth in the following detailed description. However, it will be apparent to one of ordinary skill in the art that the present invention can be practiced without these specific details. In other instances, well-known methods, processes, components, circuits, and networks have not been described in detail to avoid unnecessarily obscuring various aspects of the embodiments.

It should also be understood that although the terms first, second, etc. may be used herein to describe various elements, these elements should not be limited to those terms. These terms are merely used to distinguish elements from each other. For example, a first posture may also be referred to as a second posture, and similarly, a second posture may be referred to as a first posture without departing from the scope of the present invention.

The terms used in the description of the present invention are for the purpose of describing specific embodiments only and are not intended to limit the present invention. The singular forms "a" and "the" used in the description of the present invention and the appended claims are also intended to include plural forms, unless the context clearly indicates other meanings. It should also be understood that the term "and/or" used herein refers to and includes any and all possible combinations of one or more associated listed items. It should further be understood that the term "comprising" used herein specifies the presence of the features, wholes, steps, operations, elements and/or parts, without excluding the presence or addition of one or more other features, wholes, steps, operations, elements, parts and/or their groups.

As used herein, the term “if” may be interpreted as “at the time of” or “when” or “in response to determining that…” or “in response to detecting that…”, depending on the context. Similarly, the phrase “if it is determined that…” or “if [the condition or event] is detected” may be interpreted as “when it is determined that…” or “in response to determining that…” or “when [the condition or event] is detected” or “in response to detecting [the condition or event]”, depending on the context.

Embodiments of portable multifunction devices, user interfaces for such devices, and associated processes for using these devices are described. In some embodiments, the device is a portable communication device such as a mobile phone that also includes other functions (e.g., PDA and/or music player functions).

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

The device supports multiple applications, such as one or more of the following: a telephone application; a video conferencing application; an email application; an instant messaging application; a blogging application; a photo management application; a digital camera application; a digital camcorder application; a web browsing application; a digital music player application; and/or a digital video player application.

Multiple applications executable on a device may utilize at least one common physical user interface device, such as a touch screen. One or more functions of the touch screen and the corresponding information displayed on the device may be adjusted and/or varied from one application to the next and/or within each application. In this way, a common physical architecture of the device (such as a touch screen) may support multiple applications with intuitive and clear user interfaces.

The user interface may include one or more soft keyboard implementations. Soft keyboard implementations may include standard (QWERTY) and/or non-standard configurations of symbols displayed on keyboard icons, such as those described in U.S. patent application Ser. No. 11/459,606, filed on July 24, 2006, entitled "Keyboards For Portable Electronic Devices," and U.S. patent application Ser. No. 11/459,615, filed on July 24, 2006, entitled "Touch Screen Keyboards For Portable Electronic Devices," the entire contents of which are incorporated herein by reference. Keyboard implementations may include a reduced number of icons (or soft keys) relative to the number of keys on a conventional physical keyboard, such as the keys on a typewriter. This may make it easier for a user to select one or more icons on the keyboard, and thereby select one or more corresponding symbols. Keyboard implementations may be adaptive. For example, displayed icons may be modified based on user actions (e.g., selection of one or more icons and/or one or more corresponding symbols). One or more applications on a portable device may utilize common and/or different keyboard implementations. Thus, the keyboard implementation used may be tailored to suit at least some applications. In some embodiments, one or more keyboard implementations can be tailored to suit individual users. For example, one or more keyboard implementations can be tailored to suit individual users based on their word usage history (lexicographical, slang, personal usage). Some keyboard implementations can be tailored to reduce the probability of user error when selecting one or more icons, and thereby one or more symbols, when using a soft keyboard implementation.

Now turning our attention to embodiments of the device. Figures 1A and 1B are block diagrams illustrating a portable multifunction device 100 having a touch-sensitive display 112 according to some embodiments. For convenience, the touch-sensitive display 112 is sometimes referred to as a "touch screen" and is also known or referred to as a touch-sensitive display system. The device 100 may include a memory 102 (which may include one or more computer-readable storage media), a memory controller 122, one or more processing units (CPUs) 120, a peripheral 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 external ports 124. The device 100 may include one or more optical sensors 164. These components may communicate via one or more communication buses or signal lines 103.

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

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

Peripherals interface 118 couples the device's input and output peripherals to CPU 120 and memory 102. One or more processors 120 run or execute various software programs and/or instruction sets stored in memory 102 to implement various functions of device 100 and process data.

In some embodiments, peripherals 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.

The RF (radio frequency) circuitry 108 receives and transmits RF signals, also known as electromagnetic signals. The RF circuitry 108 converts electrical signals into/from electromagnetic signals and communicates with a communication network and other communication devices via the electromagnetic signals. The RF circuitry 108 may include known circuitry 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, and the like. The RF circuitry 108 may communicate with networks such as the Internet (also known 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), as well as other devices via wireless communications. Wireless communications may utilize any of a number of communication standards, protocols, and technologies, including, but not limited to, 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), Wi-MAX, protocols for email (e.g., Internet Message Access Protocol (IMAP) and/or Post Office Protocol (POP)), protocols for instant messaging (e.g., Extensible Messaging and Presence Protocol (XMPP), Session Initiation Protocol for Instant Messaging and Presence Extensions (SIMPLE), and/or Instant Messaging Presence Service (IMPS)), and/or a protocol for Short Message Service (SMS), or any other suitable communications protocol (including communications protocols not yet developed as of the filing date of this document).

The audio circuit 110, the speaker 111, and the microphone 113 provide an audio interface between the user and the device 100. The audio circuit 110 receives audio data from the peripheral interface 118, converts the audio data into an electrical signal, and sends the electrical signal to the speaker 111. The speaker 111 converts the electrical signal into sound waves that can be heard by a human. The audio circuit 110 also receives the electrical signal converted from the sound wave by the microphone 113. The audio circuit 110 converts the electrical signal into audio data and sends the audio data to the peripheral interface 118 for processing. The audio data can be retrieved from the memory 102 and/or the RF circuit 108 and/or the audio data can be sent to the memory 102 and/or the RF circuit 108 via the peripheral interface 118. In some embodiments, the audio circuit 110 also includes a headphone jack (e.g., 212 in FIG. 2 ). The headphone jack provides an interface between the audio circuit 110 and a removable audio input/output peripheral, such as an output-only headset or a headset with both output (e.g., a single-ear or dual-ear headset) and input (e.g., a microphone).

The I/O subsystem 106 couples the input/output peripherals on the device 100 (e.g., the touch screen 112 and other input/control devices 116) to the peripherals 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 may receive and send 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, slide switches, joysticks, click wheels, and the like. In some alternative embodiments, the input controllers 160 may be coupled to any (or none) of the following: a keyboard, an infrared port, a USB port, and a pointing device such as a mouse. The 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 may cause the touch screen 112 to unlatch, or initiate a 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," the entire contents of which are incorporated herein by reference. A long press of the push button (e.g., 206) may power the device 100 on or off. The user may be able to customize the functionality of one or more buttons. The touch screen 112 may be used to implement virtual or soft buttons and one or more soft keyboards.

The touch-sensitive touch screen 112 provides an input interface and an output interface between the device and the user. The display controller 156 receives and/or sends electrical signals from/to the touch screen 112. The touch screen 112 displays visual output to the user. The visual output may include graphics, text, icons, videos, and any combination thereof (collectively referred to as "graphics"). In some embodiments, some or all of the visual output may correspond to user interface objects, which will be described in more detail below.

The touch screen 112 has a touch-sensitive surface, sensor, or set of sensors for accepting input from a user based on tactile and/or haptic contact. The touch screen 112 and the display controller 156 (and any associated modules and/or instruction sets in the memory 102) detect contact (and any movement or breakage of contact) on the touch screen 112 and convert the detected contact into interaction with a user interface object (e.g., one or more soft keys, icons, web pages, or images) displayed on the touch screen. In an example embodiment, the point of contact between the touch screen 112 and the user corresponds to a finger of the user.

The touch screen 112 may utilize LCD (liquid crystal display) technology or LPD (light emitting polymer display) technology, although other display technologies may be used in other embodiments. The touch screen 112 and the display controller 156 may utilize any of a variety of currently 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 the touch screen 112 to detect contact and any movement or breakage of contact.

The touch-sensitive display in some embodiments of the touch screen 112 can be similar to the multi-touch sensitive graphics input devices (tablets) described in U.S. Patents 6,323,846 (Westerman et al.), 6,570,557 (Westerman et al.), and/or 6,677,932 (Westerman), and/or U.S. Patent Publication 2002/0015024A1, each of which is incorporated herein by reference in its entirety. However, the touch screen 112 displays visual output from the portable device 100, whereas the touch-sensitive graphics input device does not provide visual output.

The touch sensitive display in some embodiments of the touch screen 112 may be as described in the following applications: (1) U.S. patent application No. 11/381,313, entitled “Multipoint Touch Surface Controller,” filed on May 2, 2006; (2) U.S. patent application No. 10/840,862, entitled “Multipoint Touchscreen,” filed on May 6, 2004; (3) U.S. patent application No. 10/903,964, entitled “Gestures For Touch Sensitive Input Devices,” filed on July 30, 2004; (4) U.S. patent application No. 11/048,264, entitled “Gestures For Touch Sensitive Input Devices,” filed on January 31, 2005; and (5) U.S. patent application No. 11/086,574, entitled “Mode-Based Graphical User Interfaces For Touch Sensitive Input Devices,” filed on January 18, 2005. and (9) U.S. patent application No. 11/367,749, filed on March 3, 2006, entitled “Multi-Functional Hand-Held Device.” The entire contents of all of these applications are incorporated herein by reference.

The touch screen 112 can have a resolution exceeding 100 dpi. In one exemplary embodiment, the touch screen has a resolution of approximately 160 dpi. The user can utilize any suitable object or accessory, such as a stylus, finger, or the like, to contact the touch screen 112. In some embodiments, the user interface is designed to primarily utilize finger-based contacts and gestures, which are much less precise than stylus-based input due to the larger contact area of a finger on the touch screen. In some embodiments, the device converts the rough finger-based input into a precise pointer/cursor position or command for performing the user's desired action.

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

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

Device 100 also includes a power system 162 for powering the various components. Power system 162 may include a power management system, one or more power sources (e.g., batteries, alternating current (AC)), a recharging system, power fault detection circuitry, a power converter or inverter, a power status indicator (e.g., a light emitting diode (LED)), and any other components associated with power generation, management, and distribution in a portable device.

The device 100 may also include one or more optical sensors 164. Figures 1A and 1B illustrate an optical sensor coupled to the optical sensor controller 158 in the I/O subsystem 106. The optical sensor 164 may include a charge-coupled device (CCD) or a complementary metal-oxide semiconductor (CMOS) phototransistor. The optical sensor 164 receives light from the environment, projected through one or more lenses, and converts the light into data representing an image. In conjunction with the imaging module 143 (also known as a camera module), the optical sensor 164 can capture still images or video. In some embodiments, the optical sensor is located on the back of the device 100, opposite the touchscreen display 112 located on the front of the device, so that the touchscreen display can be used as a viewfinder for still and/or video image acquisition. In some embodiments, the optical sensor is located on the front of the device, so that the user's image can be obtained for video conferencing while the user views other video conference participants on the touchscreen display. In some embodiments, the user can change the position of the optical sensor 164 (for example, by rotating the lens and sensor in the device housing), so that a single optical sensor 164 can be used in conjunction with the touchscreen display for video conferencing and still and/or video image acquisition.

Device 100 may also include one or more proximity sensors 166. Figures 1A and 1B show proximity sensor 166 coupled to peripherals interface 118. Alternatively, proximity sensor 166 may be coupled to input controller 160 in I/O subsystem 106. The proximity sensor 166 can be implemented as described in the following applications: U.S. patent application No. 11/241,839, entitled “Proximity Detector In Handheld Device,” filed on September 30, 2005; U.S. patent application No. 11/240,788, entitled “Proximity Detector In Handheld Device,” filed on September 30, 2005; U.S. patent application No. 11/620,702, entitled “Using Ambient Light Sensor To Augment Proximity Sensor Output,” filed on October 24, 2006; U.S. patent application No. 11/586,862, entitled “Automated Response To And Sensing Of User Activity In Portable Devices,” filed on October 24, 2006; and U.S. patent application No. 11/638,251, entitled “Methods And Systems For Automatic Configuration Of Peripherals,” the entire contents of which are incorporated herein by reference. In some embodiments, when the multifunction device is held to the user's ear (e.g., when the user is on a phone call), the proximity sensor turns off and disables touch screen 112. In some embodiments, when the device is in the user's pocket, purse, or other dark area, the proximity sensor turns off the screen to prevent unnecessary battery drain while the device is in a locked state.

Device 100 may also include one or more accelerometers 168. Figures 1A and 1B show accelerometer 168 coupled to peripherals interface 118. Alternatively, accelerometer 168 may be coupled to input controller 160 in I/O subsystem 106. Accelerometer 168 may be implemented 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 Apparatuses For Operating A Portable Device Based On An Accelerometer," both of which are incorporated herein by reference in their entireties. In some embodiments, information is displayed on the touch screen display in a portrait view or a landscape view based on analysis of data received from one or more accelerometers.

In some embodiments, the software components stored in memory 102 may include an operating system 126, a communication module (or instruction set) 128, a touch/movement module (or instruction set) 130, a graphics module (or instruction set) 132, a text input module (or instruction set) 134, a global positioning system (GPS) module (or instruction set) 135, and an application (or instruction set) 136.

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

The communication module 128 facilitates communication with other devices via one or more external ports 124 and also includes various software components for processing data received by the RF circuitry 108 and/or the external ports 124. The external ports 124 (e.g., Universal Serial Bus (USB), FIREWIRE, etc.) are suitable for coupling directly to other devices or indirectly to other devices via a network (e.g., the Internet, wireless LAN, etc.). In some embodiments, 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 employed in iPod (trademark of Apple Computer, Inc.) devices.

The contact/motion module 130 can detect contact with the touch screen 112 (in conjunction 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 detecting contact, such as determining whether contact has occurred, determining whether the contact has moved and tracking the movement on the touch screen 112, and determining whether the contact has been broken (i.e., whether the contact has ceased). Determining the movement of a contact point can include determining the rate (magnitude), velocity (magnitude and direction), and/or acceleration (change in magnitude and/or direction) of the contact point. These operations can apply to a single contact (e.g., a single finger contact) or to multiple simultaneous contacts (e.g., "multi-touch"/multi-finger contacts). In some embodiments, the contact/motion module 130 and the display controller 156 also detect contact on a touchpad. In some embodiments, the contact/motion module 130 and the controller 160 detect contact on a click wheel.

Graphics module 132 includes various known software components for rendering and displaying graphics on touch screen 112, including components for changing the intensity of displayed graphics. As used herein, the term "graphics" includes any object that can be displayed to a user, including but not limited to text, web pages, icons (such as user interface objects including soft keys), digital images, videos, animations, and the like. Animation in this context is the display of a sequence of images that give a moving pattern and informs the user of an action that has been performed (such as enlarging a portion of a web page selected by the user to fill a browser window). In this context, each animation that performs an action or confirms an action performed by a user of the device typically takes a predetermined, finite amount of time, typically between 0.2 and 1.0 seconds, and generally less than 2 seconds, depending on the circumstances.

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

The GPS module 135 determines the location of the device and provides this information to various applications (e.g., to the phone 138 for location-based dialing, to the camera 143 and/or blogging device 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).

The application 136 may include the following modules (or instruction sets), or a subset or superset thereof:

● Contacts module 137 (sometimes called an address book or contact list);

● Telephone module 138;

● Video conferencing module 139;

● Email client module 140;

Instant messaging (IM) module 141;

●Blog module 142;

A camera module 143 for still and/or video images;

Image management module 144;

●Video player module 145;

Music player module 146;

●Browser module 147;

●Calendar module 148;

Widget module 149, which may include a weather widget 149-1, a stock widget 149-2, a calculator widget 149-3, an alarm widget 149-4, a dictionary widget 149-5, and other widgets obtained by the user, as well as a user-created widget 149-6;

A widget creator module 150 for forming user-created widgets 149-6;

●Search module 151;

• Video and music player module 152, which merges the video player module 145 and the music player module 146;

●Memorandum module 153;

● Map module 154; and/or

●Online video module 155.

Examples of other applications 136 that may be stored in memory 102 include other word processing applications, JAVA-enabled applications, encryption, digital rights management, voice recognition, and voice replication.

In conjunction with the touch screen 112, display controller 156, contact module 130, graphics module 132, and text input module 134, the contacts module 137 can be used to manage an address book or contact list, including: adding names to the address book; deleting names from the address book; associating phone numbers, email addresses, physical addresses, or other information with names; associating images with names; categorizing and sorting names; providing phone numbers or email addresses to initiate and/or facilitate communication via telephone 138, video conferencing 139, email 140, or IM 141; and the like.

In conjunction with RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, touch screen 112, display controller 156, contact module 130, graphics module 132, and text input module 134, phone module 138 may be used to enter a character sequence corresponding to a telephone number, access one or more telephone numbers in address book 137, modify an already entered telephone number, dial various telephone numbers, conduct a call, and close or hang up when the call is complete. As described above, wireless communications may employ any of a number of communication standards, protocols, and technologies.

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 phone module 138, video conferencing module 139 may be used to initiate, conduct, and terminate a video conference between a user and one or more other participants.

In conjunction with RF circuitry 108, touch screen 112, display controller 156, contact module 130, graphics module 132, and text input module 134, email client module 140 may be used to create, send, receive, and manage emails. In conjunction with image management module 144, email module 140 makes it very easy to create and send emails with still or video images captured using camera module 143.

In conjunction with the RF circuitry 108, the touch screen 112, the display controller 156, the contact module 130, the graphics module 132, and the text input module 134, the instant messaging module 141 may be used to enter a character sequence corresponding to an instant message, modify previously entered characters, send each instant message (e.g., using the Short Message Service (SMS) or Multimedia Messaging Service (MMS) protocols for phone-based instant messaging, or using XMPP, SIMPLE, or IMPS for Internet-based instant messaging), receive instant messages, and view received instant messages. In some embodiments, the instant messages sent and/or received may include graphics, photos, audio files, video files, and/or other attachments as supported by MMS and/or Enhanced Messaging Service (EMS). As used herein, "instant messaging" refers to both phone-based messages (e.g., messages sent using SMS or MMS) and Internet-based messages (e.g., messages sent using XMPP, SIMPLE, or IMPS).

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 may be used to send text, still images, video, and/or other graphics to a blog (e.g., a user's blog).

In conjunction with the touch screen 112, display controller 156, optical sensor 164, optical sensor controller 158, contact module 130, graphics module 132, and image management module 144, the camera module 143 can be used to capture still images or videos (including video streams) and store them in the memory 102, modify the characteristics of the still images or videos, or delete the still images or videos in the memory 102.

In conjunction with touch screen 112, display controller 156, contact module 130, graphics module 132, text input module 134, and camera module 143, image management module 144 may be used to arrange, modify, or otherwise dispose of, mark, delete, present (e.g., in the form of a digital slide show or album), and store still and/or video images.

In conjunction with touch screen 112, display controller 156, contact module 130, graphics module 132, audio circuitry 110, and speaker 111, video player module 145 may be used to display, present, or otherwise play back video (e.g., on the touch screen or on an externally connected display via external port 124).

In conjunction with touch screen 112, display system controller 156, contact module 130, graphics module 132, audio circuit 110, speaker 111, RF circuit 108, and browser module 147, music player module 146 allows a user to download and play back recorded music and other sound files stored in one or more file formats, such as MP3 or AAC files. In some embodiments, device 100 may include the functionality of an MP3 player, such as an iPod (trademark of Apple Computer, Inc.).

In conjunction with the RF circuitry 108, the touch screen 112, the display system controller 156, the contact module 130, the graphics module 132, and the text input module 134, the browser module 147 may be used to browse the Internet, including searching for, linking to, receiving, and displaying web pages or portions of web pages, as well as attachments and other files linked to web pages. An embodiment of a user interface and associated processing using the browser module 147 will be further described below.

In conjunction with the RF circuitry 108, the touch screen 112, the display system controller 156, the contact module 130, the graphics module 132, the text input module 134, the email module 140, and the browser module 147, the calendar module 148 may be used to create, display, modify, and store calendars and data associated with calendars (e.g., calendar entries, to-do lists, etc.).

In conjunction with the RF circuitry 108, the touch screen 112, the display system controller 156, the contact module 130, the graphics module 132, the text input module 134, and the browser module 147, the widget module 149 is a small application that can be downloaded and used by a user (e.g., a weather widget 149-1, a stock widget 149-2, a calculator widget 149-3, an alarm widget 149-4, and a dictionary widget 149-5) or created by a user (e.g., a user-created widget 149-6). In some embodiments, a widget includes an HTML (Hypertext Markup Language) file, a CSS (Cascading Style Sheets) file, and a JavaScript file. In some embodiments, a widget includes an XML (Extensible Markup Language) file and a JavaScript file (e.g., Yahoo! Widgets). An embodiment of a user interface and associated processing using the widget module 149 will be further described below.

In conjunction with the RF circuit 108, the touch screen 112, the display system controller 156, the contact module 130, the graphics module 132, the text input module 134, and the browser module 147, the widget creator module 150 can be used by a user to create a widget (e.g., converting a user-specified portion of a web page into a web folder widget). In some embodiments, the web folder widget comprises a file containing an XML attribute list, wherein the XML attribute list includes a URL for a web page and data indicating the user-specified portion of the web page. In some embodiments, the data indicating the user-specified portion of the web page includes a reference point and a scale factor. In some embodiments, the data indicating the user-specified portion of the web page includes a coordinate group within the web page or an identifier of a structural element within the web page. Alternatively, in some embodiments, the web folder widget includes an HTML (Hypertext Markup Language) file, a CSS (Cascading Style Sheets) file, and a JavaScript file. Alternatively, in some embodiments, the web folder widget includes an XML (Extensible Markup Language) file and a JavaScript file.

In some embodiments, the web folder widget includes an image file (e.g., a png file) of an icon corresponding to the widget. In some embodiments, the web folder widget corresponds to a folder containing the image file and a file including a URL for a web page and data indicating a user-specified portion of the web page. In some embodiments, the web folder widget corresponds to a folder containing the image file and an executable script.

Embodiments of user interfaces and associated processes employing the widget creator module 150 are described further below.

In conjunction with the touch screen 112, display system controller 156, contact module 130, graphics module 132, and text input module 134, the search module 151 can be used to search the memory 102 for text, music, sound, images, videos, and/or other files that match one or more search criteria (e.g., one or more user-specified search terms).

In conjunction with the touch screen 112 , the display controller 156 , the contact module 130 , the graphic module 132 , and the text input module 134 , the memo module 153 may be used to create and manage memos, schedules, and the like.

In conjunction with the RF circuitry 108, touch screen 112, display system controller 156, contact module 130, graphics module 132, text input module 134, GPS module 135, and browser module 147, the map module 154 may be used to receive, display, modify, and store maps and data associated with the maps (e.g., driving directions; data regarding window shops and other points of interest at or near a particular location; and other location-based data).

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

The modules and applications given above each correspond to an instruction set for performing one or more of the functions described above. These modules (i.e., instruction sets) do not have to be implemented as separate software programs, processes, or modules, and thus various subsets of these modules can be combined or otherwise rearranged in various embodiments. For example, the video player module 145 can be combined with the music player module 146 to form a single module (e.g., the video and music player module 152 in Figure 1B). In some embodiments, the memory 102 can store a subset of the above modules and data structures. In addition, the memory 102 can store other modules and data structures not described above.

In some embodiments, device 100 is a device in which operation of a predetermined set of functions on the device is performed exclusively through touch screen 112 and/or touchpad. By utilizing the touch screen and/or touchpad as the primary input/control device for operation of device 100, the number of physical input/control devices (e.g., push buttons, dials, etc.) on device 100 can be reduced.

The predetermined set of functions that can be performed exclusively via the touch screen and/or touchpad includes navigation between user interfaces. In some embodiments, the touchpad, when touched by the user, navigates the device 100 from any user interface that may be displayed on the device 100 to a main, home, or root menu. In such embodiments, the touchpad may be referred to as a "menu button." In some other embodiments, the menu button may be a physical push button or other physical input/control device that replaces the touchpad.

FIG2 illustrates a portable multifunction device 100 with a touch screen 112 according to some embodiments. The touch screen can display one or more graphics within a user interface (UI) 200. In this embodiment, as well as 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 the one or more graphics occurs when the user breaks contact with the one or more graphics. In some embodiments, contact can include gestures, such as one or more taps, one or more swipes (from left to right, from right to left, up and/or down), and/or rolling of a finger that has been in contact with the device 100 (from right to left, from left to right, up and/or down). In some embodiments, unintentional contact with a graphic does not select the graphic. For example, a swipe gesture that sweeps across an application icon does not select the corresponding application when the gesture corresponding to selection is a tap.

The device 100 may also include one or more physical buttons, such as a “home” or menu button 204. As previously described, the menu button 204 may be used to navigate to any application 136 in a set of applications executable on the device 100. Alternatively, in some embodiments, the menu button is implemented as a soft key in a GUI on the touch screen 112.

In one embodiment, the device 100 includes a touch screen 112, a menu button 204, a push button 206 for powering the device on/off and locking the device, volume adjustment buttons 208, a subscriber identity module (SIM) card slot 210, a headset jack 212, and an external docking/charging port 124. The push button 206 can be used to power the device on/off by pressing and holding the button for a predetermined time interval; to lock the device by pressing and releasing the button before the predetermined time interval has elapsed; and/or to unlock the device or initiate an unlocking process. In an alternative embodiment, the device 100 can also accept voice input through the microphone 113 to activate or deactivate certain functions.

Attention is now directed to embodiments of a user interface (“UI”) and associated processing that may be implemented on portable multifunction device 100 .

Figure 3 illustrates an exemplary user interface for unlocking a portable electronic device according to some embodiments. In some embodiments, user interface 300 includes the following elements, or a subset or superset thereof:

An unlock image 302 is moved using a finger gesture to unlock the device;

• An arrow 304 providing a visual cue of the unlock gesture;

● Channel 306 providing additional prompts for the unlock gesture;

●Time 308;

●Day 310;

Date 312; and

●Wallpaper image 314.

In some embodiments, while the device is in the user interface locked state, the device detects contact with the touch-sensitive display (e.g., a user's finger makes contact on or near the unlock image 302). The device moves the unlock image 302 based on the contact. If the detected contact corresponds to a predetermined gesture, such as moving the unlock image through the channel 306, the device transitions to the user interface unlocked state. Conversely, if the detected contact does not correspond to the predetermined gesture, the device remains in the user interface locked state. This process conserves battery power by ensuring that the device is not accidentally awakened. This process is easy for the user to perform, in part due to visual cues provided on the touch screen.

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

Figure 4A illustrates an exemplary user interface for an application menu on a portable multifunction device according to some embodiments. In some embodiments, user interface 400A includes the following elements or a subset or superset thereof:

• Signal strength indicator 402 for wireless communication;

●Time 404;

Battery status indicator 406;

A tray 408 with icons for commonly used applications such as the following:

○Tel: 138;

o Email client 140, which may include an indicator 410 of the number of unread emails;

o Browser 147; and

o Music player 146; and

●Icons for other applications, such as:

○IM141;

○Image 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;

o User created widget 149-6; and

o Other applications (not shown) (eg, maps 154 and online video 155).

In some embodiments, UI 400A displays all available applications 136 on a single screen, eliminating the need to scroll through a list of applications (e.g., via a scroll bar). In some embodiments, as the number of applications increases, the size of the icons corresponding to the applications can decrease, allowing all applications to be displayed on a single screen without scrolling. In some embodiments, having all applications and a menu button on a single screen enables a user to access any desired application with at most two inputs, such as activating menu button 204 and then activating the desired application (e.g., by tapping or other finger gestures on the icon corresponding to the application).

In some embodiments, UI400A provides integrated access to widget-based and non-widget-based applications. In some embodiments, all widgets, regardless of whether they are user-created, are displayed in UI400A. In other embodiments, activating the icon for user-created widget 149-6 may lead to another UI displaying user-created widgets or icons corresponding to user-created widgets. For example, UI400B (FIG. 4B) displays a menu of six icons corresponding to six user-created widgets 149-6-1 to 149-6-6 according to some embodiments. A user can activate a specific widget by making a gesture on the corresponding icon. Alternatively, user-created widgets can be displayed in a list. UI400C (FIG. 4C) illustrates a list of the names of six user-created widgets 149-6-1 to 149-6-6 and corresponding icons according to some embodiments. A user can activate a specific widget by making a gesture on the corresponding name or icon.

In some embodiments, the user can rearrange the icons in UI 400A, UI 400B, or UI 400C using, for example, the process described in U.S. patent application Ser. No. 11/459,602, filed on July 24, 2006, entitled “Portable Electronic Device With Interface Reconfiguration Mode,” which is incorporated herein by reference in its entirety. For example, the user can move application icons in and out of tray 408 using finger gestures.

In some embodiments, UI400A includes a meter (not shown) that displays updated account usage metrics for an account associated with use of the device (e.g., a cellular telephone account), as described in U.S. patent application Ser. No. 11/322,552, entitled “Account Information Display For Portable Communication Device,” filed on Dec. 23, 2005, the entire contents of which are incorporated herein by reference.

Creating and using web clip widgets

5A-5I illustrate exemplary user interfaces for a browser in accordance with some embodiments.

In some embodiments, user interface 3900A ( FIG. 5A ) includes the following elements, or a subset or superset thereof:

402, 404, and 406 as described above;

Previous page icon 3902, which, when activated (e.g., by a finger tap on the icon), initiates display of the previous web page (if any);

●Webpage name 3904;

• Next Page icon 3906, which, when activated (e.g., by a finger tap on the icon), initiates display of the next web page (if any);

URL (Uniform Resource Locator) input box 3908, for entering the URL of a web page;

Refresh icon 3910, which, when activated (e.g., by a finger tap on the icon), initiates a refresh of the web page;

A web page 3912 or other structured document that includes multiple blocks 3914 of textual content and other graphics (e.g., images);

• Settings icon 3916, which, when activated (e.g., by a finger tap on the icon), initiates display of a settings menu for the browser;

• Bookmark icon 3918, which, when activated (e.g., by a finger tap on the icon), initiates display of a bookmark list or menu for the browser;

an options icon 3920 that, when activated (e.g., by a finger tap on the icon), initiates display of a plurality of options, including an option to create a web folder widget, an option to add a bookmark, and an option to email a link to the displayed web page 3912 (e.g., like other UIs and pages, UI 3900F in FIG. 5F may be displayed in either portrait view or landscape view); and

- New window icon 3922, which, when activated (eg, by a finger tap on the icon), initiates display of a UI for adding a new window to the browser (eg, UI 3900G in Figure 5G).

In some embodiments, in response to a predetermined gesture (e.g., a single tap gesture or a double tap gesture) of the user on block 3914, the block is magnified and centered (or substantially centered) in the webpage display. For example, in response to a single tap gesture 3923 on block 3914-5, the user selects block 3914-5 to be magnified and centered in the display, as shown in UI3900C (Fig. 5C). In some embodiments, the width of the user selection block is adjusted to fill the touch screen display. In some embodiments, the width of the user selection block is adjusted to fill the touch screen display with a predetermined amount of filling along the side of the display. In some embodiments, a zoom animation of the block is displayed during the amplification of the user selection block. Similarly, in response to a single tap gesture 3925 on block 3914-2, block 3914-2 can be magnified with a zoom animation and scrolled two-dimensionally to the center (not shown) of the display.

In some embodiments, the device analyzes the render tree of the web page 3912 to determine a block 3914 in the web page. In some embodiments, the block 3914 corresponds to the following rendering nodes: a replaced node; a block; an inline block; an inline table.

In some embodiments, the magnification and/or centering is substantially or completely reversed in response to the same predetermined gesture (e.g., a single tap gesture or a double tap gesture) by the user on the already magnified and centered block 3914. For example, in response to a single tap gesture 3929 ( FIG. 5C ) on block 3914-5, the webpage image can be zoomed out and returned to UI 3900A ( FIG. 5A ).

In some embodiments, in response to a predetermined gesture (e.g., a single tap gesture or a double tap gesture) by the user on a block 3914 that has been magnified but not centered, the block is centered (or substantially centered) on the web page display. For example, in response to a single tap gesture 3927 (FIG. 5C) on block 3914-4, block 3914-4 can be centered (or substantially centered) on the web page display. Similarly, in response to a single tap gesture 3935 on block 3914-6, block 3914-6 can be centered (or substantially centered) on the web page display. Thus, for a web page display that has been magnified, in response to a predetermined gesture, the device can display a series of blocks that the user wishes to see in an intuitive manner. The same gesture can initiate different actions in different environments (e.g., (1) zooming and/or zooming in combination with scrolling when the web page size is reduced, UI 3900A; and (2) reversing zooming and/or centering if the block has been centered and magnified).

In some embodiments, in response to a user's multi-touch (3931 and 3933) pinching gesture (FIG. 5C), the webpage can be zoomed in. Conversely, in response to a user's multi-touch pinching gesture, the webpage can be zoomed out.

In some embodiments, in response to a substantially vertical upward (or downward) swipe gesture by a user, a webpage (or more generally, other electronic documents) can be scrolled one-dimensionally upward (or downward) in the vertical direction. For example, in response to a user's upward swipe gesture 3937 within a predetermined angle (e.g., 27°) of being completely vertical, the webpage can be scrolled one-dimensionally upward in the vertical direction.

Conversely, in some embodiments, in response to a swipe gesture that is not within a predetermined angle (e.g., 27°) of a completely vertical position, the webpage can scroll two-dimensionally (e.g., moving simultaneously in the vertical and horizontal directions). For example, in response to an upward or diagonal swipe gesture 3939 by a user that is not within a predetermined angle (e.g., 27°) of a completely vertical position, the webpage can scroll two-dimensionally in the direction of the swipe 3939.

In some embodiments, in response to a user's multi-touch (3941 and 3943) rotation gesture, the webpage can be rotated exactly 90° (UI 3900D, FIG. 5D ) for landscape viewing, even if the amount of rotation in the multi-touch (3941 and 3943) rotation gesture is substantially different from 90°. Similarly, in response to a user's multi-touch (3945 and 3947) rotation gesture (UI 3900D, FIG. 5D ), the webpage can be rotated exactly 90° for portrait viewing, even if the amount of rotation in the multi-touch (3945 and 3947) rotation gesture is substantially different from 90°.

Thus, in response to the user's imprecise gesture, a precise movement of the graphic occurs. Despite the user's inaccurate input, the device still operates in the manner the user intended. Additionally, it should be noted that the gestures described for UI 3900C with a portrait view can also be applied to UIs with a landscape view (e.g., UI 3900D, FIG. 5D ), allowing the user to select whichever view (portrait or landscape) they prefer for web browsing.

In some embodiments, in response to a tap or other predetermined user gesture on the URL input box 3908 (UI 3900A in FIG. 5A ), the touchscreen displays an enlarged input box 3926 and keyboard 616 (e.g., UI 3900B in the portrait view of FIG. 5B and UI 3900E in the landscape view of FIG. 5E ). In some embodiments, the touchscreen also displays:

• A contextual clear icon 3928, which, when activated (e.g., by a finger tap on the icon), initiates deletion of all text in the input box 3926;

• Search icon 3930, which when activated (e.g., by a finger tap on the icon) initiates an Internet search using the search terms entered in box 3926; and

●To URL icon 3932, which when activated (e.g., by a finger tap on the icon) initiates retrieval of the web page at the URL in box 3926.

Therefore, the same input box 3926 can be used to enter both the search term and the URL.In some embodiments, whether to display the clear icon 3928 depends on the context.

UI 3900G ( FIG. 5G ) is a UI for adding a new window to an application, such as browser 147. UI 3900G displays an application (e.g., browser 147) that includes a displayed window (e.g., web page 3912-2) and at least one hidden window (e.g., web pages 3912-1 and 3912-3, and possibly other web pages that are completely hidden from the screen). UI 3900G also displays an icon for adding a window to the application (e.g., a 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).

In response to detecting a gesture on the touch screen display, displayed windows in the application are moved off the display and hidden windows are moved onto the display. For example, in response to detecting a tap gesture 3949 on the left side of the screen, the window with web page 3912-2 is partially or completely moved off the screen to the right, the window with web page 3912-3 is completely moved off the screen, the 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 (not shown in FIG. 5G ) may be partially moved onto the display. Alternatively, detecting a swipe gesture 3951 from left to right can achieve the same effect.

Conversely, in response to detecting a tap gesture 3953 on the right side of the screen, the window with web page 3912-2 is partially or completely moved off the screen to the left, the window with web page 3912-1 is completely moved off the screen, a partially hidden window with web page 3912-3 is moved to the center of the display, and another completely hidden window with a web page (not shown in FIG. 5G ) may be partially moved onto the display. Alternatively, detecting a swipe gesture 3951 from right to left may achieve the same effect.

In some embodiments, in response to a tap or other predetermined gesture on a delete icon 3934 (e.g., 3934-2 or 3934-3), the corresponding window 3912 is deleted. In some embodiments, in response to a tap or other predetermined gesture on a done icon 3938, the window in the center of the display (e.g., 3912-2) is enlarged to fill the screen.

According to some embodiments, a user may create a web folder widget. Activation of the user-created web folder widget displays a previously specified area in a web page (with a specified URL) at a specified display size or scale factor. In some embodiments, an area in a web page is specified by resizing and/or panning the display of the web page. For example, a specified area in a web page is magnified and centered. The specified area may be displayed in a browser application (e.g., browser 147) or other application. For example, activating the web folder widget may display a specific block of interest to the user within a web page; in addition, the block may be magnified. Activation of the web folder widget thereby allows the user to view a specific block of interest without having to magnify and center the area of the web page of interest each time the user visits the web page. In some embodiments, after activating the web folder widget, the user may manipulate the display to view other parts of the web page by resizing and/or panning the display. Alternatively, in some embodiments, the user may not be allowed to manipulate the display.

The Web Clip widget provides more functionality than a simple bookmark: activation of a bookmark displays only the specified web page, whereas activation of the Web Clip widget, according to some embodiments, displays a specified area of a web page at a specified display size or scale factor. Similarly, a Web Clip widget can be distinguished from a hyperlink. In order to view a web page or a portion thereof specified by a hyperlink, a user must activate a browser application, navigate to the web page containing the hyperlink, activate the hyperlink, and then possibly scroll and/or resize the resulting web page. In contrast, to view the area of the web page specified by the Web Clip widget, a user merely activates the widget.

In some embodiments, the web folder widget corresponds to a block or other structural element in a web page. As described in U.S. patent application Ser. No. 11/620,492, filed on January 5, 2007, entitled "Selecting and Manipulating Web Content," the entire contents of which are incorporated herein by reference, structural elements displayed in a web page can be identified during the web folder widget creation process. In some embodiments, if the dimensions of the selected structural element change after the web folder widget is created, the area displayed when the web folder widget is activated changes accordingly.

In some embodiments, the web folder widget includes a URL for a web page and data indicating a user-specified portion of the web page (e.g., metadata). For example, in some embodiments, the web folder widget includes a file containing an XML property list that includes the URL and the data indicating the user-specified portion of the web page. In some embodiments, the data indicating the user-specified portion of the web page includes a reference point (e.g., a corner point or a center point of the widget) and a scale factor. In some embodiments, the data indicating the user-specified portion of the web page includes a coordinate set within the web page (e.g., a user-specified rectangle) or an identification of a structural element within the web page. The application used to view the web folder widget (e.g., browser 147) is configured to process the data indicating the user-specified portion of the web page and display the corresponding portion.

In some embodiments, the web folder widget includes an executable script. In some embodiments, the widget includes an HTML (Hypertext Markup Language) file, a CSS (Cascading Style Sheets) file, and a JavaScript file. In some embodiments, the widget includes an XML (Extensible Markup Language) file and a JavaScript file (e.g., Yahoo! Widgets).

To the extent any application incorporated by reference herein includes a definition of a web folder widget that conflicts with the definition in the preceding five paragraphs, the definition in the preceding five paragraphs shall be deemed controlling for purposes of interpreting the specification and claims of this application.

5C , in some embodiments, once the user has centered and/or zoomed in on an area of the webpage (e.g., block 3914-5), the user can create a web folder widget simply by activating options icon 3920. Options icon 3920 is an example of the options icon referenced in operation 706 of process 700 ( FIG. 7A , below). In some embodiments, the user activates options icon 3920 by performing a tap or other predetermined gesture on options icon 3920.

As a result of activating options icon 3920, a user interface such as UI 3900F ( FIG. 5F ) is displayed (e.g., operation 708 in FIG. 7A ), which includes a plurality of icons 3972. In some embodiments, plurality of icons 3972 include an icon 3973 for creating a web folder widget, an icon 3974 for adding a bookmark (e.g., via UI 3900I in FIG. 5I ), an icon 3975 for emailing a link corresponding to displayed web page 3912, and a cancel icon 3976 for returning to the previous UI. If the user activates “Create Web Folder Widget” icon 3973, a web folder widget corresponding to the centered and/or magnified area of the web page (e.g., blocks 3914-5 or the entire displayed portion of web page 3912) is created (e.g., operations 710 and 712 in FIG. 7A ). The text and/or graphics displayed for icon 3973 may change. In some embodiments, for example, icon 3973 may be labeled “Add to Start Screen.”

In some embodiments, in response to the user activating the "Create Web Folder Widget" icon 3973 (Figure 5F), UI 3900H (Figure 5H) will appear and will prompt the user to enter the widget name in the text input box 3960 using the contextual keyboard 616. In some embodiments, the user can access other keyboards that display other symbols by activating the alternative keyboard selector icon 618. In some embodiments, UI 3900H includes an image 3978 of the selected area of the web page. Once the user has finished entering the widget name in the text input box 3960, the user activates the add widget icon 3928 and the widget is created. Alternatively, the user can activate the cancel icon 3928 to avoid creating the widget.

In some embodiments, as a result of activating the "Create Web Clip Widget" icon 3973, a web clip widget corresponding to the centered and/or magnified area of the web page will be created and assigned a name without any further action by the user. In some embodiments, instead of displaying a user interface such as UI 3900H (FIG. 5H) for receiving a name, the newly created web clip widget will be assigned the same name as the web page name 3904.

An icon corresponding to the newly created widget will be created and will be displayed in a menu in a UI such as UI400A or UI400B (Figure 4A or Figure 4B). Alternatively, the icon and/or name of the newly created widget will be listed on a UI such as UI400C (Figure 4C). Subsequent activation of the newly created widget will start an application (e.g., browser 147) that displays the web folder widget. In some embodiments, the web folder widget is displayed within the browser UI (e.g., UI3900C in Figure 5C). In some embodiments, the web folder widget is displayed without other elements in the browser UI (e.g., without elements 3902, 3906, 3908 and/or 3910) so that the web folder widget appears as its own mini-application rather than as part of a web page displayed in the browser. In some embodiments, the web folder widget is displayed as a decorative feature with a border such as a decorative frame or a torn page. In some embodiments, the decorative feature is user-customizable.

For example, as described above, the user of browsing webpage 3912 (Fig. 5A) can enlarge and center block 3914-5 by performing tapping gesture 3923 (for example, single tap or double tap) on block 3914-5.As a result, block 3914-5 appears as enlarged and centered in the browser window, as shown in Fig. 5C.According to some embodiments, the user can then perform gesture (for example, tap) on options icon 3920 and webpage folder widget creation icon 3973 (Fig. 5F) to create the widget corresponding to block 3914-5.In some embodiments, the user then enters widget name (Fig. 5H) in text input box 3960 and activates add widget icon 3928.Corresponding icon can be created and displayed on a menu such as UI400A or 400B (Fig. 4A or 4B) or in a list such as UI400C (Fig. 4C). In some embodiments, subsequent activation of the newly created widget will launch the browser 147, which will display tile 3914-5, as shown in UI 3900C (FIG. 5C).

In some embodiments, instead of or in addition to performing a tap gesture 3923 (FIG. 5A) to center and enlarge a tile, a user can define an area of the web page to be associated with the widget by performing one or more other gestures. Examples of gestures that can be used to define an area of a web page include tap gestures 3927 or 3935 (FIG. 5C) for centering adjacent enlarged tiles; multi-touch de-pinch gestures (3931 and 3933) (FIG. 5C) for enlarging a web page; a multi-touch pinch gesture (not shown) for reducing a web page; a swipe gesture for scrolling a web page, such as a substantially vertical swipe 3937 (FIG. 5C), an upward or diagonal swipe 3939 (FIG. 5C), and/or other swipe gestures (not shown); and/or a multi-touch rotate gesture (3941 and 3943) for selecting a portrait view or a landscape view (FIG. 5C).

In some embodiments, instead of first defining the area of the web page to be associated with the web folder widget and then activating options icon 3920 (e.g., FIG. 5C ) and “Create Web Folder Widget” icon 3973 ( FIG. 5F ), the user can first activate icons 3920 and 3973 and then define the area by performing a gesture detected by the touch screen display, such as the gesture described above. Once the area has been selected and/or the size of the area has been adjusted, the user can make a gesture on the touch screen to indicate that the area of the web page to be associated with the widget has been defined.

In some embodiments, in response to the user activating the "Create Web Folder Widget" icon 3973 (Figure 5F), the device displays a user interface (e.g., UI3900K in Figure 5K) that allows the user to define the area in the web page to be associated with the widget. The user can define the area using gestures such as those described above with reference to UI3900A, 3900C, and 3900D (Figures 5A, 5C, and 5D). In some embodiments, the user interface may include information 3950 to help guide the user. In some embodiments, the user can activate the cancel icon 3952 to abandon the widget creation process and can activate the add widget icon 3954 to complete the widget creation process. In some embodiments, a rotation gesture such as a multi-touch rotation gesture (3941 and 3943, Figure 5C) rotates the entire UI3900K from portrait to landscape viewing or from landscape to portrait viewing rather than just a defined area.

In some embodiments, in response to the user activating the “Create Web Folder Widget” icon 3973 (Figure 5F), the device displays a user interface (e.g., UI3900J in Figure 5J) that allows the user to define the area in the web page to be associated with the widget by switching between multiple frames. These frames are successively overlaid on the web page to frame or highlight successive blocks and other structural elements of the web page. For example, in UI3900J, frame 3958 frames block 23914-2. The user can activate the switch icon 3956 to switch between successive blocks. Once the block of interest is framed, the user can activate the add widget icon 3954 to create a widget corresponding to the framed block. The user can activate the cancel icon 3952 to end the widget creation process.

In some embodiments, creating and displaying an icon corresponding to the newly created web folder widget includes displaying an animation, as illustrated in Figures 6A-6D according to some embodiments. The animation can be displayed, for example, after activating the add widget icon 3928 (Figure 5H) or after activating the "create web folder widget" icon 3973 (Figure 5F). In the animation, a selected area (e.g., block 3914-5 in UI3900C) corresponding to the newly created web folder widget in the web page 3912 is displayed, as illustrated in Figure 6A. The displayed image is reduced, as illustrated for image 602 (Figure 6B), and is displayed on the icon menu. In some embodiments, the icon menu includes vacant areas (e.g., 604-1 and 604-2 in Figure 6B) where icons can be displayed but are not currently displayed. Image 602 can be moved ( FIG. 6C ) to the first available slot 604-1 where it is displayed as an icon corresponding to the new web folder widget 149-6-7 ( FIG. 6D ). In some embodiments, the first available slot is the leftmost slot in the top row of slots. In other embodiments, the image is moved to another slot or appended to the last (e.g., bottom and rightmost) slot in the menu.

In some embodiments, instead of displaying an animation, the icon corresponding to the newly created web folder widget is simply displayed in the first available slot in the icon menu or in another available slot in the menu, or attached to the menu.

Activating the icon corresponding to the newly created web folder widget 149-6-7 (e.g., by gesture 606 (Figure 6E) on the icon, such as a tap gesture) causes the corresponding web folder widget to be displayed in the browser application or in its own mini-application without other elements of the browser UI (e.g., display block 3914-5, as shown in Figure 6A).

UI 3900L ( FIG. 5L ) is a UI for displaying a portion of two or more web folder widgets according to some embodiments. The displayed portion may include a first web folder widget (e.g., 149-6-1) and may include all or a portion of an additional web folder widget (e.g., 149-6-2). The displayed portion is scrolled in response to detecting a gesture on the touch screen display (e.g., a swipe gesture 3962).

UI3900M (Figure 5M) is a UI for displaying a web folder widget (e.g., 149-6-2) according to some embodiments. In response to detecting a gesture on the touch screen display, display of the web folder widget is stopped and another web folder widget is displayed. For example, in response to detecting a downward swipe 3962 or a tap gesture 3964 at the top of the displayed widget 149-6-2, display of the web folder widget 149-6-2 is stopped and the previous user-created widget 149-6-1 is displayed. In response to detecting an upward swipe 3962 or a tap gesture 3966 at the bottom of the displayed widget 149-6-2, display of the web folder widget 149-6-2 is stopped and the next user-created widget 149-6-3 is displayed. Alternatively, in response to detecting a substantially horizontal right-to-left swipe 3963 or a tap gesture 3965 at the right side of the displayed widget 149-6-2, the display of the web folder widget 149-6-2 is stopped, and the next user-created widget 149-6-3 is displayed. In response to detecting a substantially horizontal left-to-right swipe 3963 or a tap gesture 3967 at the left side of the displayed widget 149-6-2, the display of the web folder widget 149-6-2 is stopped, and the previous user-created widget 149-6-1 is displayed.

7A is a flow diagram illustrating a process 700 for creating a webpage folder widget from a webpage or portion of a webpage on a portable multifunction device with a touch screen display in accordance with some embodiments. Although the webpage folder widget creation process 700 described below includes multiple operations that appear to occur in a particular order, it is apparent that the process 700 may include more or fewer operations that may be performed serially or in parallel (e.g., using parallel processors or a multithreaded environment), the order of two or more operations may be changed, and/or two or more operations may be combined into a single operation.

In some embodiments, a selection of a web page or a portion of a web page for display is detected (702). For example, one or more finger gestures are detected on a touch screen display to select a web page or a portion of a web page. In some embodiments, the one or more finger gestures include one or more finger gestures for zooming an area in the web page. In some embodiments, the one or more finger gestures include one or more finger gestures for centering an area in the web page. Examples of finger gestures for selecting, centering, and/or zooming an area in the web page include: a tap gesture 3923 or 3925 (FIG. 5A) for centering and enlarging a tile; a tap gesture 3927 or 3935 for centering adjacent enlarged tiles; a multi-touch de-pinch gesture (3931 and 3933) for enlarging a web page; a multi-touch pinch gesture (not shown) for zooming out a web page; a swipe gesture for panning a web page, such as a substantially vertical swipe 3937, an upward or diagonal swipe 3939, and/or other swipe gestures (not shown); and/or a multi-touch rotate gesture (3941 and 3943) for selecting a portrait view or a landscape view.

The web page or a portion of the web page is displayed 704 on the touch screen display. In the example of Figure 5C, block 3914-5 is displayed on the touch screen display.

Activation of an options icon (eg, icon 3920) is detected (706). In some embodiments, detecting activation of the options icon includes detecting a finger gesture (eg, a tap gesture) on the options icon.

In response to detecting activation of the options icon, a plurality of icons (e.g., 3972 in FIG. 5F ) including a web folder widget creation icon (e.g., icon 3973 in FIG. 5F ) are displayed ( 708 ). In some embodiments, the web folder widget creation icon includes text, such as “Create a web folder widget” or “Add to start screen.”

Detect (710) activation of a web folder widget creation icon (e.g., 3973). In some embodiments, detecting activation of the web folder widget creation icon includes detecting a finger gesture (e.g., a tap gesture) on the web folder widget creation icon.

In response to detecting activation of the web folder widget creation icon, a web folder widget corresponding to the displayed web page or portion of a web page is created (712).

In some embodiments, the webpage folder widget corresponds to a structural element of the webpage, such as a specific block within the webpage. In some embodiments, the webpage folder widget corresponds to a user-specified rectangle in the webpage.

In some embodiments, creating a web folder widget includes (714) requesting a name for the web folder widget, receiving the name, and storing the name. In some embodiments, requesting the name includes displaying a keyboard to receive input for the name. For example, in UI 3900H ( FIG. 5H ), the user is prompted to use keyboard 616 to enter a widget name in text input box 3960.

In some embodiments, creating a web folder widget includes creating (716) an icon corresponding to the web folder widget and displaying (718) the icon corresponding to the web folder widget in an icon menu (e.g., UI 400A or 400B in Figures 4A or 4B) or a list (e.g., UI 400C in Figure 4C). In some embodiments, the icon corresponding to the web folder widget is created in response to detecting activation of an add widget icon (e.g., icon 3928 in Figure 5H). In some embodiments, the icon corresponding to the web folder widget is created in response to detecting activation of a web folder widget create icon (e.g., 3973 in Figure 5F).

In some embodiments, the icon menu or list includes a menu or list of applications and widgets on the multifunction device (e.g., UI 400A in FIG. 4A ). In some embodiments, the icon menu or list includes a menu or list of widgets on the multifunction device. In some embodiments, the icon menu or list includes a menu or list of user-created widgets on the multifunction device (e.g., UI 400B or 400C in FIG. 4B or 4C ).

In some embodiments, an icon corresponding to the web folder widget is displayed in a previously vacant area of the icon menu. In some embodiments, the previously vacant area is the first available space in the icon menu (e.g., 604-1 in Figure 6B). In some embodiments, an animation is displayed of the icon corresponding to the web folder widget being moved to the previously vacant area. For example, Figures 6A to 6D illustrate an animation of an icon corresponding to the web folder widget 149-6-7 being created and moved to the previously vacant area in UI 600B.

In some embodiments, the web clip widget is stored as a bookmark in the browser application (720). In some embodiments, the web clip widget is encoded as a URL associated with the bookmark, as described in U.S. Patent Application No. 11/469,838, filed September 1, 2006, entitled "Presenting and Managing Clipped Content," the entire contents of which are incorporated herein by reference.

In some embodiments, the web folder widget is sent (722) to a network server for storage. In some embodiments, the web folder widget stored on the network server is publicly accessible. Storing the user-created web folder widget on a publicly accessible server enables the user to share the web folder widget with other users.

In some embodiments, as illustrated in FIG7B , activation of an icon corresponding to the web folder widget is detected (724). For example, a finger gesture on the icon (e.g., a tap gesture 606 in FIG6E ) is detected. In response, the web folder widget is displayed (726). For example, in response to detecting the tap gesture 606, as illustrated in FIG6A , block 3914-5 is displayed in the browser application, or as described above, block 3914-5 is displayed as its own mini-app without other elements in the browser UI.

In some embodiments, as illustrated in FIG7C , the web folder widget is sent (728) to an electronic device external to the portable multifunction device. For example, the web folder widget may be sent to another portable multifunction device 100. The external electronic device stores (730) the web folder widget, detects activation of the web folder widget (732), and displays the web folder widget (734). In some embodiments, the web folder widget is sent to the external electronic device via email. In some embodiments, the web folder widget is sent to the external electronic device via instant messaging. As used herein, “instant messaging” refers to both phone-based messages (e.g., messages sent using Multimedia Messaging Service (MMS)) and Internet-based messages (e.g., messages sent using Extensible Messaging Presence Protocol (XMPP), Session Initiation Protocol for Instant Messaging and Presence Support Extensions (SIMPLE), or Instant Messaging Presence Service (IMPS)). Sending a user-created web folder widget to another electronic device provides a way for the user to share the web folder widget with other users. Operations 728 - 734 in FIG. 7C may be performed as part of process 700 or may be performed as a separate process.

In some embodiments, as illustrated in FIG7D , activation of a widget edit icon (e.g., edit widget icon 3970 in FIG5M ) is detected (736). In response to detecting activation of the widget edit icon, one or more settings associated with the web clip widget are displayed (738). In some embodiments, an animation of flipping the web clip widget is displayed (740) to reveal one or more settings. As described in U.S. patent application Ser. No. 11/145,561, filed June 3, 2005, entitled “Presenting Clips of Content,” the entire contents of which are incorporated herein by reference, settings (e.g., preferences) associated with the web clip widget can be displayed by flipping the widget to reveal a user interface for editing the settings. A change to one of the one or more settings is received (742). In some embodiments, one or more finger gestures are detected to refocus (744) an area of a web page or portion of a web page for use by the web clip widget. As described in the "Presenting Clips of Content" application, the user interface presented by the flip widget may include a refocusing preference that allows re-defining a selected area of the web page for use by the web clip widget. The change is stored (746) and the display of one or more settings is stopped (748). Operations 736-748 in Figure 7D can be performed as part of process 700 or can be performed as a separate process.

In some embodiments, the operations in process 700 are performed by a portable multifunction device. In some embodiments, however, one or more operations in process 700 are performed by a server system that communicates with the portable multifunction device via a network connection. The portable multifunction device can send data associated with the widget creation process to the server system and, in return, can receive information corresponding to the widget. For example, the server system can generate code associated with the widget (e.g., an HTML file, a CSS file, and/or a JavaScript file, according to some embodiments, or an XML file and/or a JavaScript file, according to some other embodiments) and then send the code to the portable multifunction device. In general, the operations in the widget creation process can be performed by the portable multifunction device, by the server system, or by a combination thereof.

Process 700 creates a widget that allows a user to view a designated area in a web page when activated. The user thus does not have to amplify and center an area of interest, such as a specific block of interest, each time the web page is visited.

7E is a flow diagram illustrating a process 750 for creating a webpage folder widget from a webpage or portion of a webpage, according to some embodiments. Although the webpage folder widget creation process 750 described below includes multiple operations that appear to occur in a particular order, it is apparent that the process 750 may include more or fewer operations that may be performed serially or in parallel (e.g., using parallel processors or a multi-threaded environment), the order of two or more operations may be changed, and/or two or more operations may be combined into a single operation.

On the touch screen display of the portable multifunction device, activation of an options icon (e.g., icon 3920 in Figure 5A) is detected (752). In some embodiments, a finger gesture (e.g., a tap gesture) on the options icon is detected (753).

Detect (754) activation of the web folder widget creation icon (e.g., icon 3973 in Figure 5F).In some embodiments, detect (756) a finger gesture (e.g., a tap gesture) on the web folder widget creation icon.

An area in a web page or a portion of a web page displayed on the touch screen display is selected (758). In some embodiments, selecting the area includes switching (760) between a plurality of frames that are successively overlaid on the displayed web page or a portion of a web page. For example, in UI 3900J (FIG. 5J), frame 3958 is displayed overlaid on web page 3912 so that it frames block 2 3914-2. When the toggle icon 3956 is activated, the display of frame 3958 is stopped, and another frame is displayed overlaid on web page 3912 so that it frames another block (e.g., block 3 3914-3). Thus, in some embodiments, these frames successively highlight blocks and other structural elements in the web page. As described in U.S. patent application No. 11/620,492, entitled “Selecting and Manipulating Web Content,” filed on January 5, 2007, the structural elements displayed in the web page can be identified during the web folder widget creation process, the entire contents of which are incorporated herein by reference.

In some embodiments, selecting an area includes detecting (762) one or more finger gestures for selecting an area of a web page or a portion of a web page for use by the web folder widget. In some embodiments, selecting an area includes detecting (764) one or more finger gestures for adjusting the size of an area of a web page or a portion of a web page for display by the web folder widget. Examples of finger gestures for selecting and/or adjusting the size of an area of a web page or a portion of a web page include: a single tap gesture 3923 or 3925 to center and enlarge a tile ( FIG. 5A ); a single tap gesture 3927 or 3935 to center adjacent enlargement tiles; a multi-touch de-pinch gesture ( 3931 and 3933 ) to enlarge a web page; a multi-touch pinch gesture (not shown) to reduce a web page; a swipe gesture such as a substantially vertical swipe 3937 , an upward or diagonal swipe 3939 , and/or other swipe gestures (not shown) to scroll a web page; and/or a multi-touch rotate gesture ( 3941 and 3943 ) to select a portrait view or a landscape view ( FIG. 5C ).

A completion gesture is detected (766). In some embodiments, a finger gesture (e.g., a tap gesture) on an icon (e.g., add widget icon 3954 in Figures 5J or 5K) is detected (768). A web folder widget is created (770) from the selected area.

In some embodiments, according to operation 714 of process 700 (FIG. 7A), creating a web folder widget includes requesting a name for the web folder widget, receiving the name, and storing the name.

In some embodiments, according to operation 716 of process 700, creating the web folder widget includes creating an icon corresponding to the web folder widget. In some embodiments, according to operation 718 of process 700, the icon corresponding to the web folder widget is displayed in an icon menu or list. In some embodiments, the icon menu or list includes a menu or list of applications and widgets on the multifunction device. In some embodiments, the icon menu or list includes a menu or list of widgets on the multifunction device. In some embodiments, the icon menu or list includes a menu or list of user-created widgets on the multifunction device.

In some embodiments, according to operations 724 and 726 of process 700 (FIG. 7B), activation of an icon corresponding to a web binder widget is detected and the web binder widget is displayed.

In some embodiments, according to operations 736-748 of process 700 (FIG. 7D), settings associated with the web folder widget are edited.

In some embodiments, according to operation 720 of process 700 (FIG. 7A), the web folder widget is stored as a bookmark in the browser application.

In some embodiments, the web folder widget is sent to a network server for storage according to operation 722 of process 700. In some embodiments, the web folder widget is sent to an external electronic device according to operations 728-734 of process 700 (FIG. 7C).

In some embodiments, the operations in process 750 are performed by a portable multifunction device. In some embodiments, however, one or more operations in process 750 are performed by a server system that communicates with the portable multifunction device via a network connection. The portable multifunction device can send data associated with the widget creation process to the server system and, in return, can receive information corresponding to the widget. For example, the server system can generate code associated with the widget (e.g., an HTML file, a CSS file, and/or a JavaScript file, according to some embodiments, or an XML file and/or a JavaScript file, according to some other embodiments) and then send the code to the portable multifunction device. In general, the operations in the widget creation process can be performed by the portable multifunction device, by the server system, or by a combination thereof.

Similar to process 700, process 750 creates a widget that, when activated, allows a user to view a designated area of a web page, thereby eliminating the need for the user to zoom in and center on an area of interest in the web page each time the user visits the web page.

7F is a flow diagram illustrating a process 780 for displaying a web folder widget according to some embodiments. Icons corresponding to a plurality of widgets (including two or more web folder widgets) are displayed 781 on a touch screen display on a portable multifunction device. For example, in some embodiments, the icon for the user-created widget 149-6 ( FIG. 4A ) corresponds to a plurality of widgets including a plurality of web folder widgets.

Activation of the icon is detected (782). For example, a finger gesture (e.g., a tap gesture) on the icon is detected.

In response to detecting the activation, a first portion of two or more web folder widgets is displayed (783). For example, UI 3900L (FIG. 5L) displays a first portion that includes a first user-created widget 149-6-1 and a portion of a second user-created widget 149-6-2. In another example, UI 3900M (FIG. 5M) displays a first portion that includes the second user-created widget 149-6-2 without other widgets or portions thereof. Thus, in some embodiments, the first portion is a first web folder widget.

A gesture is detected (784) on the touch screen display. In some embodiments, the gesture is a scroll gesture. For example, a swipe gesture 3962 (Figures 5L and 5M) or 3963 (Figure 5M) is detected on the touch screen display.

In response to detecting the gesture, a second portion of the two or more web folder widgets is displayed (785). In some embodiments, in response to detecting the gesture, the displayed portion of the two or more web folder widgets is scrolled from the first portion to the second portion. For example, in response to detecting the upward scroll gesture 3962 in UI 3900L ( FIG. 5L ), a second portion including more or all of the second user-created widget 149-6-2 and fewer or no first user-created widget 149-6-1 is displayed. In some embodiments, the second portion is a second web folder widget (e.g., the second user-created widget 149-6-2).

In some embodiments, the gesture is a de-pinch gesture (eg, gestures 3931 and 3933 in Figure 5C). In response to detecting the de-pinch gesture, the displayed portion of the two or more web folder widgets is enlarged from a first portion to a second portion.

In some embodiments, the gesture is a finger tap on an area within the first portion (e.g., a finger tap similar to gesture 3923 in Figure 5A), and the displayed second portion is centered in the area and enlarged with respect to the first portion.

7G illustrates a process 790 for displaying a web folder widget according to some embodiments. On the touch screen display of the portable multifunction device, icons corresponding to a plurality of widgets (including two or more web folder widgets) are displayed (791). For example, in some embodiments, the icon for the user-created widget 149-6 (FIG. 4A) corresponds to a plurality of widgets including a plurality of web folder widgets.

Activation of the icon is detected (792). For example, a finger gesture (e.g., a tap gesture) is detected on the icon.

In response to detecting the activation of the icon, a plurality of icons corresponding to each of the plurality of widgets is displayed (793). In some embodiments, the plurality of icons are displayed in a menu or list. For example, UI 400B (FIG. 4B) displays a menu of icons corresponding to user-created widgets 149-6-1 to 149-6-6, and UI 400C (FIG. 4C) displays a list of icons corresponding to user-created widgets 149-6-1 to 149-6-6.

Detecting (794) activation of a corresponding icon among the plurality of icons that corresponds to the corresponding web folder widget. In response to detecting activation of the corresponding icon, displaying (795) the corresponding web folder widget. For example, in response to detecting activation of an icon corresponding to the user-created widget 149-6-2 in UI 400B or UI 400C, displaying the user-created widget 149-6-2 in UI 3900M ( FIG. 5M ).

Detect (796) a gesture on the touch screen display. For example, a swipe gesture 3962 or 3963 (FIG. 5M) is detected on the touch screen display. Alternatively, a tap gesture 3964 at the top of the displayed widget 149-6-2 or a tap gesture 3966 at the bottom thereof is detected. In another example, a tap gesture 3965 at the right side of the displayed widget 149-6-2 or a tap gesture 3967 at the left side thereof is detected.

In response to detecting the gesture, the display of the corresponding web folder widget is stopped and another web folder widget (797) is displayed. For example, in response to detecting a downward swipe 3962, a substantially horizontal swipe 3963 from left to right, a tap gesture 3967 at the left side of the displayed widget 149-6-2, or a tap gesture 3964 at the top of the displayed widget 149-6-2, the previous user-created widget 149-6-1 is displayed. In response to detecting an upward swipe 3962, a substantially horizontal swipe 3963 from right to left, a tap gesture 3965 at the right side of the displayed widget 149-6-2, or a tap gesture 3966 at the bottom of the displayed widget 149-6-2, the next user-created widget 149-6-3 is displayed.

Processes 780 and 790 thus provide a user-friendly way to view multiple designated areas in a web page without having to surf between successive web pages and without having to zoom in and center the area of interest in each web page.

Figure 7H is a flow diagram illustrating a process 7000 for displaying a web folder widget in accordance with some embodiments. On a touch screen display of a portable multifunction device, an icon for a web folder widget (e.g., 149-6-7 in Figure 6E) is displayed (7002). The web folder widget corresponds to a user-specified area of a web page (e.g., block 3914-5 in Figure 6A).

In some embodiments, the icon is displayed (7004) in a menu or list of icons. In some embodiments, the menu or list of icons includes a menu or list of applications and widgets on the multifunction device (e.g., UI 400A in FIG. 4A ). In some embodiments, the menu or list of icons includes a menu or list of widgets on the multifunction device. In some embodiments, the menu or list of icons includes a menu or list of user-created widgets on the multifunction device (e.g., UI 400B or 400C in FIG. 4B or 4C ).

In some embodiments, the user-specified area was previously selected by panning and zooming (7006) a displayed portion of the web page. In some embodiments, the user-specified area was previously selected by centering and magnifying (7008) a displayed portion of the web page. Examples of finger gestures for panning, zooming, centering, and/or magnifying an area in a web page include a tap gesture 3923 or 3925 (FIG. 5A) for centering and magnifying one tile; a tap gesture 3927 or 3935 for centering adjacent magnified tiles; a multi-touch de-pinch gesture (3931 and 3933 in FIG. 5C) for magnifying a web page; a multi-touch pinch gesture (not shown) for zooming out of a web page; a swipe gesture for panning a web page, such as a substantially vertical swipe 3937, an upward or diagonal swipe 3939, and/or other swipe gestures (not shown); and/or a multi-touch rotate gesture (3941 and 3943 in FIG. 5C) for selecting a portrait view or a landscape view.

Activation of an icon is detected (7010).In some embodiments, a finger gesture on the icon (eg, tap gesture 606 in Figure 6E) is detected (7012).

In response to detecting activation of the icon, a user-specified area in the web page is displayed (7014). For example, in response to activation of the icon for the web folder widget 149-6-7 (FIG. 6E), block 3914-5 (FIG. 6A) is displayed.

Process 7000 allows a user to view a designated area in a web page when a corresponding icon is activated. The user thus does not have to amplify and center an area of interest, such as a specific block of interest, every time the web page is visited.

Icon display and interface reconfiguration

Figures 8A to 8D illustrate exemplary user interfaces for displaying icons according to some embodiments. Figures 9A and 9B are flow diagrams of an icon display process 900 according to some embodiments. The process is performed by a computing device (e.g., portable multifunction device 100) having a touch screen display. The process provides a user with a simple and intuitive way to view a large number of icons (e.g., multiple pages of application icons and web folder widget icons) on a touch screen display.

The computing device displays (902) a first group of a first plurality of icons in a first area of the touch screen display (eg, area 802 in FIG. 8A ). The first plurality of icons includes a plurality of groups of icons displayed separately in the first area of the touch screen display. For example, in Figures 8A to 8C, icons 141, 148, 144, 143, 155, 149-2, 154, 149-1, 149-4, 149-3, 153, 412, 149-6, 149-6-1, 149-6-2, 149-6-3, 149-6-4, 149-6-5, 149-6-6, 149-6-7, 149-6-8, 149-6-9, 149-6-10, 149-6-11, 149-6-12, 149-6-13, 149-6-14 and 149-6-15 are the first plurality of icons in area 802. In Figure 8A, icons 141, 148, 144, 143, 155, 149-2, 154, 149-1, 149-4, 149-3, 153, 412 and 149-6 form a first group in area 802; in Figure 8B, icons 149-6-1, 149-6-2, 149-6-3, 149-6-4, 149-6-5 and 149-6-6 form a second group in area 802; and in Figure 8C, icons 149-6-7, 149-6-8, 149-6-9, 149-6-10, 149-6-11, 149-6-12, 149-6-13, 149-6-14 and 149-6-15 form a third group in area 802. In this article, "displaying separately" means that when one group is displayed, the other groups are not displayed simultaneously, except for possibly during a brief transition (e.g., animation) from one group of icons to the next group of icons. As illustrated in this example, the first and second groups in the first plurality of icons are different groups of icons.

In some embodiments, the first plurality of icons includes a plurality of application launch icons, wherein in response to detecting activation of an application launch icon in the plurality of application icons, an application corresponding to the activated application icon is launched and displayed. In some embodiments, the applications include a set of default applications, third-party applications, and/or web folder widget applications. The application launch icons do not issue commands or sub-commands regarding applications. Instead, they are used to launch applications. If an application is already launched, activation of the corresponding application launch icon causes the application to be displayed.

In some embodiments, the first plurality of icons includes one or more web folder widget icons (e.g., widget icon 149-6 in Figure 8A), wherein, in response to detecting activation of a web folder widget icon, a portion of the web page corresponding to the activated web folder widget icon is displayed.

The computing device displays (904) a second plurality of icons in a second area (e.g., tray 408 in FIG. 8A ) on the touch screen display while displaying the icons from the first plurality of icons in the first area. For example, in FIG. 8A through 8C , application launcher icons 138 , 140 , 147 , and 152 are displayed in tray 408. The second area is distinct (e.g., visually distinguishable) from the first area. For example, in FIG. 8A , tray 408 is distinct from area 802. In some embodiments, the second plurality of icons corresponds to applications or functions frequently used by the user.

In some embodiments, the second plurality of icons includes a plurality of application launch icons, wherein in response to detecting activation of an application icon in the plurality of application icons, an application corresponding to the activated application icon is launched and/or displayed, as described above. In some embodiments, the applications include a set of default applications, third-party applications, and/or web folder widget applications.

The computing device detects (906) a first finger gesture on the touch screen display in the first area. In some embodiments, the first finger gesture is a swipe gesture (e.g., swipe 808 in FIG. 8A ). In some embodiments, the swipe gesture is a horizontal (or substantially horizontal) swipe gesture on the touch screen display, a left-to-right swipe gesture on the touch screen display, or a right-to-left swipe gesture on the touch screen display. In some embodiments, the swipe gesture is a vertical (or substantially vertical) swipe gesture on the touch screen display.

In response to detecting a first finger gesture on the touch screen display in the first area, the computing device replaces (908) display of the first group of the first plurality of icons with display of the second group of the first plurality of icons in the first area of the touch screen display while maintaining display of the second plurality of icons in the second area of the touch screen display. For example, in response to swipe 808, UI 800A (FIG. 8A) transitions to UI 800B (FIG. 8B). The first group of icons (141, 148, 144, 143, 155, 149-2, 154, 149-1, 149-4, 149-3, 153, 412 and 149-6 in area 802 in Figure 8A) is replaced by a second group of icons (149-6-1, 149-6-2, 149-6-3, 149-6-4, 149-6-5 and 149-6-6 in area 802 in Figure 8B) while maintaining the display of the second plurality of icons (138, 140, 147 and 152).

In some embodiments, replacing display of the first group of the first plurality of icons with display of the second group of the first plurality of icons in the first area of the touch screen display includes an animation of moving the first group out of the first area and moving the second group into the first area.

In some embodiments, the plurality of groups of icons include a plurality of groups of icons configured to be displayed as a sequence of group icons in a first area of a touch screen display, respectively. In some embodiments, the computing device displays two or more group sequence indicator icons (e.g., icons 804-1, 804-2, and 804-3 in Figures 8A to 8D). The group sequence indicator icons provide information about the number of icon groups in the plurality of groups of icons and the position of the displayed icon groups in a sequence of group icons. In response to detecting a first finger gesture, the computing device updates (910) the information provided by the group sequence indicator icons to reflect the replacement of the displayed first group by the second group. For example, the group sequence indicator icons 804-1, 804-2, and 804-3 in Figures 8A to 8D indicate that there are three groups of icons in the plurality of groups of icons. The group sequence indicator icons 804-1, 804-2, and 804-3 also indicate the position of the displayed icon groups in the sequence of group icons. For example, the group sequence indicator icons are displayed in sequence, where the icon corresponding to the group being displayed is visually distinguished from the other group sequence indicator icons (e.g., icon 804-1 is dimmed in FIG. 8A when the first group is displayed, icon 804-2 is dimmed in FIG. 8B when the second group is displayed, and icon 804-3 is dimmed in FIG. 8C when the third group is displayed).

In some embodiments, the computing device detects (912) a second finger gesture on an icon in a second group of the first plurality of icons. In response to detecting the second finger gesture, the computing device displays (914) an application corresponding to the icon in the second group on which the second finger gesture was detected. For example, in response to finger tap gesture 814 ( FIG. 8B ), user creation widget 149-6-5 is displayed.

In some embodiments, the computing device detects (916) a third finger gesture on the touch screen display while displaying the second group of the first plurality of icons. In response to detecting the third finger gesture, the computing device replaces (918) display of the second group of the first plurality of icons with display of the third group of the first plurality of icons in the first area of the touch screen display while maintaining display of the second plurality of icons in the second area of the touch screen display. For example, in response to detecting the swipe 812 (Figure 8B), the computing device replaces (918) display of the second group of the first plurality of icons (icons 149-6-1, 149-6-2, 149-6-3, 149-6-4, 149-6-5, and 149-6-6 in Figure 8B) with display of the third group of the first plurality of icons (icons 149-6-7, 149-6-8, 149-6-9, 149-6-10, 149-6-11, 149-6-12, 149-6-13, 149-6-14, and 149-6-15 in Figure 8C) in the area 802 on the touch screen display, while maintaining display of the second plurality of icons (icons 138, 140, 147, and 152 in the tray 408) in the second area on the touch screen display.

In some embodiments, the computing device detects (920) a fourth finger gesture on an icon in a third group of the first plurality of icons. In response to detecting the fourth finger gesture, the computing device displays (922) an application corresponding to the icon in the third group on which the fourth finger gesture was detected. For example, in response to finger tap gesture 816 ( FIG. 8C ), user creation widget 149-6-11 is displayed.

In some embodiments, the first finger gesture is a swipe gesture in a first direction, and the computing device detects (924) a second finger swipe gesture on the touch screen display in a direction opposite (or substantially opposite) to the first direction. In response to detecting the second finger swipe gesture, the computing device replaces (926) display of the first group of the first plurality of icons with display of information customized for a user of the device other than the group in the plurality of groups of icons. In some embodiments, the customized information includes: local time, location, weather, stocks, calendar entries, and/or recent messages for the user. For example, in response to detecting the finger tap gesture 810 (Figure 8A), the computing device replaces (926) the display of the first group of the first plurality of icons (icons 141, 148, 144, 143, 155, 149-2, 154, 149-1, 149-4, 149-3, 153, 412, and 149-6 in Figure 8A) with the display of information that is customized for the user of the device in addition to the groups in the plurality of groups of icons (e.g., the local time, location, weather, stocks, calendar entries, and recent messages for the user in area 802 in Figure 8D).

In some embodiments, the first finger gesture is a swipe gesture in a first direction (e.g., swipe 808 in FIG. 8A ), and the computing device detects ( 924 ) a second finger swipe gesture on the touch screen display in a direction opposite (or substantially opposite) to the first direction (e.g., swipe 810 in FIG. 8A ). In response to detecting the second finger swipe gesture, the computing device replaces ( 926 ) display of a first group of the first plurality of icons with display of information that is customized for a user of the device in addition to the groups in the plurality of groups of icons, and the computing device updates ( 928 ) information provided by a customized information indicator icon (e.g., icon 806 in FIG. 8A through 8D ) and a group sequence indicator icon (e.g., icon 804) to reflect the replacement of the displayed first group with the customized information (e.g., dimming icon 806 and not dimming any of the group sequence indicator icons 804 in FIG. 8D ). In some embodiments, the customized information indicator icon and the group sequence indicator icon have the same visual appearance (e.g., all circles, not shown). In some embodiments, the custom information indicator icon is visually distinguishable from the group sequence indicator icon (e.g., the custom information indicator icon 806 is a star, while the group sequence indicator icon 804 is a circle). In some embodiments, the custom information indicator icon 806 and the group sequence indicator icon 804 are adjacent to each other (e.g., as shown in Figures 8A to 8D).

Now let's focus on interface reconfiguration. In response to a user initiating an interface reconfiguration mode, the position of one or more icons displayed on the portable device can be changed with respect to a corresponding average position. Changing the position of the one or more icons can include animating the one or more icons to simulate floating of the one or more icons on a surface corresponding to a surface of a display of the portable device. The display can be a touch-sensitive display that responds to physical contact of a stylus or one or more fingers at one or more contact points. Although the following embodiments can be equally applicable to other types of displays, a touch-sensitive display is used as an example.

Changing the position of one or more icons can intuitively indicate to the user that the user can reconfigure the position of one or more icons. The user can modify, change and/or reconfigure the position of one or more icons. In an embodiment where the portable device includes a touch-sensitive display, the user can make contact with the touch-sensitive display adjacent to the corresponding icon at a first position. When making contact with the touch-sensitive display, the corresponding icon can stop changing its position. The user can drag the corresponding icon to a second position. When disconnecting contact with the touch-sensitive display, the corresponding icon can continue to change its position. In some embodiments, the corresponding icon can be "thrown" so that the final position of the icon is different from the point at which the icon is released. In this embodiment, the final position can depend on multiple factors, such as the speed of the "throw", the parameters used in the simulated motion equation for the "throw" (e.g., friction coefficient), and/or the presence of a layout grid with simulated gravity. In some embodiments, the display can include two areas. During the interface reconfiguration mode, the position of one or more icons displayed in the first area can change, while the position of the first or more icons displayed in the second area can be fixed.

The user can similarly modify, change, and/or reconfigure the positions of the additional icons during the interface reconfiguration mode. When the user has completed these changes (at least temporarily), he or she can terminate the interface reconfiguration mode. In response to this user action, the portable device can return to normal operating mode, and the changes to the display position of one or more icons will cease.

The user can initiate or terminate the interface reconfiguration process by selecting one or more appropriate physical buttons (e.g., menu button 204 in FIG. 2 ) on the portable device using a gesture (e.g., contacting and swiping one or more fingers on the touch-sensitive display, or contacting and maintaining for more than a predetermined period of time) and/or by selecting one or more soft buttons (e.g., one or more icons displayed on the touch-sensitive display). As used herein, a gesture is a movement of an object/accessory in contact with the surface of the touch screen display. Exemplary gestures include a finger tap gesture and a finger swipe gesture. In some embodiments, after the interface reconfiguration process is initiated, the interface reconfiguration process terminates a predetermined time, i.e., there is a timeout.

The one or more icons displayed on the portable device may be graphical objects. In some embodiments, the one or more icons may be on-screen control representations that can be manipulated by the user, such as bars, buttons, and text boxes. In some embodiments, the one or more icons correspond to application items (email, browser, address book, etc.) and/or web folder widgets that can be selected by the user by contacting the touch screen display adjacent to the icon of interest.

10 is a flow diagram of a position adjustment process 1000 for a portable multifunction device in accordance with some embodiments. Although the position adjustment process 1000 described below includes multiple operations that appear to occur in a particular order, it should be apparent that the process 1000 may include more or fewer operations that may be performed serially or in parallel (e.g., using parallel processors or a multithreaded environment), the order of two or more operations may be changed, and/or two or more operations may be combined into a single operation.

In a position adjustment process 1000, a plurality of icons are displayed in a GUI of a touch-sensitive display (1002). A first predetermined user action that initiates the interface reconfiguration process is detected (1004). Exemplary predetermined user actions include selecting a physical button on a portable device, making a predetermined gesture on a touch screen display surface, or selecting a soft button. The position of one or more of the plurality of displayed icons is changed with respect to a corresponding average position (1006). Point contact with the touch screen display at a first position of the corresponding icon is detected (1008). Movement of the point contact to a second position is detected (1010). Movement of the corresponding icon to the second position is displayed, and the corresponding icon is displayed at the second position (1012).

If a second predetermined user action is detected to terminate the interface reconfiguration process ("Yes" in 1014), the position of the one or more icons is fixed (1016). Exemplary predetermined user actions include selecting or deselecting a physical button on the portable device (e.g., menu button 204 in FIG. 2 ), making another predetermined gesture on the touch screen display surface, or selecting or deselecting a soft button. The fixed position may correspond to a respective average position of the one or more icons. If a second predetermined user action is not detected to terminate the interface reconfiguration process ("No" in 1014), the process may continue to detect a point contact adjacent to the same or another icon (1008).

Figures 11A through 1100 illustrate exemplary user interfaces during interface reconfiguration in accordance with some embodiments.

In some embodiments, the user interface on the touch screen display 112 is divided into multiple parts or windows. For example, in Figure 11A, the area of UI 1100A may include a tray 408 for holding icons or graphic objects representing functions frequently used by the user (e.g., phone 138, email 140, and browser 147), and an area 802 for holding icons or graphic objects representing functions that are less frequently used by the user (e.g., IM 141, calendar 148, image management 144, etc.).

Figures 11B through 11D illustrate portable multifunction device 100 during interface reconfiguration mode according to some embodiments. After interface reconfiguration mode is initiated, the display of one or more icons in area 802 is modified from a previously fixed position to a position that changes over time. As previously described, the display can include an animated display of one or more icons to simulate the floating of one or more icons on a surface corresponding to the display surface. For example, the animated change in position of one or more icons during interface reconfiguration mode can be similar to a hockey puck in a floating air hockey game. The display position of a corresponding icon in a plurality of icons can be changed within area 1104 (Figure 11B) centered around the average position of the icon.

Although Figures 11B to 11D illustrate the movement of one or more icons in area 802, in other embodiments, the position of one or more icons in other areas of the user interface, such as tray 408, can be changed independently of or in addition to the position of one or more icons in area 802.

The changing position of one or more icons in area 802 over time visually indicates to the user that the position of one or more icons can be modified. This is illustrated in Figures 11C to 11D, which show the repositioning of icons during interface reconfiguration mode. The user makes contact with a moving icon at location 1108 and moves the point of contact on the display surface. This contact and movement is detected by portable multifunction device 100. As a result, the displayed icon, in this example, corresponding to stock application 149-2, is moved accordingly.

As shown in Figure 11D, the user moves the stock application icon 149-2 to position 1110 and breaks contact with the display surface. The stock application icon 149-2 is now displayed at position 1110. Although the display position of the stock application icon 149-2 is shown as fixed in Figure 11D, in some embodiments, the position of the stock application icon 149-2 can change when the user breaks contact with the display surface. In some embodiments, during the interface reconfiguration mode, only the icons displayed in one or more sub-portions of the user interface are displayed with a changed position. Thus, if the stock application icon 149-2 has been dragged to another location in area 802, it can be displayed as having a changed position after the user breaks contact with the display. In some embodiments, the device can provide audio and/or tactile feedback, such as an audible chime and/or vibration, when the icon moves to a new position.

11D also illustrates an optional shifting of browser icon 147 to position 1112. Browser icon 147 is shifted from its initial position to its new position 1112 due to at least partial overlap with stock application icon 149-2, i.e., the display position of browser icon 147 changes when portable multifunction device 100 determines that the user has positioned stock application icon 149-2 over browser icon 147.

In other embodiments, when an additional icon such as iPod icon 152 is added to tray 408, an icon can be ejected or moved out of tray 408. For example, tray 408 can be configured to hold a limited number of icons, such as four icons. If an additional icon is added to tray 408, the icon closest to the additional icon or the icon that at least partially overlaps with the additional icon can be ejected or moved out of tray 408. In some embodiments, the ejected icon floats or scales from its position in tray 408 to a new position in area 802, where it can join a sorted list of icons. In some embodiments, if the ejection process is not yet complete (for example, the attachment icon is not added to tray 408), the ejected icon can terminate its progress toward the new position in area 802 and return to its position in tray 408.

FIG11E illustrates a user interface after the interface reconfiguration mode has been terminated or has been terminated (due to a timeout) according to some embodiments. The icons in UI1100E have fixed positions. The stock application icon 149-2 and the browser icon 147 are displayed in their new positions in the tray 408.

Animation effects during the interface reconfiguration mode (e.g., changing the position of one or more icons) can follow a corresponding motion equation for the one or more icons in a plane substantially consistent with the touch screen display surface. The motion equation can have a coefficient of friction less than a threshold value, thereby allowing simulation and/or animation of floating or sliding one or more icons. The motion equation for the corresponding icon can have a non-zero initial velocity, a non-zero angular velocity, and/or a restoring force about the corresponding average position of the corresponding icon so that the position of the corresponding icon oscillates in an area 1104 ( FIG. 11B ) substantially centered about the corresponding average position of the corresponding icon.

In some embodiments, during the interface reconfiguration mode, the position of the corresponding icon can be changed in such a manner that the corresponding icon rotates about its corresponding average position while maintaining a fixed orientation relative to the user interface and portable electronic device 100. This is illustrated in Figures 11F and 11G. In this example, the position of the online video icon 155 in area 802 can be changed in such a manner that the icon maintains a fixed orientation in area 1104. This makes it easier for the user to determine the function of the corresponding icon during the interface reconfiguration mode.

Figures 12A through 12F are flow diagrams of an icon reconfiguration process 1200 according to some embodiments. These processes are performed by a computing device with a touch screen display (e.g., portable multifunction device 100). Although the icon reconfiguration process 1200 described below includes multiple operations that appear to occur in a particular order, it should be apparent that the process 1200 may include more or fewer operations that may be performed serially or in parallel (e.g., using parallel processors or a multi-threaded environment), the order of two or more operations may be changed, and/or two or more operations may be combined into a single operation.

The computing device displays (1202) a first group of a first plurality of icons in a first area of the touch screen display (eg, area 802 in FIG. 11H ). The first plurality of icons includes a plurality of groups of icons displayed separately in the first area of the touch screen display. For example, in Figures 11H to 11OO, icons 141, 148, 144, 143, 155, 149-2, 154, 149-1, 149-4, 149-3, 153, 412, 152, 149-6-20, 149-6-21, 149-6-22, 149-6-30, 149-6-31, 149-6-32, 149-6-33, 149-6-34, 149-6-35, 149-6-40, 149-6-41, 149-6-42, 149-6-43, 149-6-44 and 149-6-45 are the first multiple icons in area 802. In Figure 11H, icons 141, 148, 144, 143, 155, 149-2, 154, 149-1, 149-4, 149-3, 153, 412, 152, 149-6-20, 149-6-21 and 149-6-22 form a first group in area 802; in Figure 11Z, icons 149-6-30, 149-6-31, 149-6-32, 149-6-33, 149-6-34 and 149-6-35 form a second group in area 802; and in Figure 11KK, icons 149-6-40, 149-6-41, 149-6-42, 149-6-43, 149-6-44 and 149-6-45 form a third group in area 802. In this context, "displayed separately" means that when one group is displayed, the other groups are not displayed simultaneously, except perhaps during a brief transition (e.g., animation) from one group of icons to the next. As illustrated in this example, the groups in the first plurality of icons are different groups of icons, although an icon can be moved from one group to another during the icon reconfiguration process (e.g., as described below using calculator icon 149-3 as an example).

In some embodiments, the first plurality of icons includes a plurality of application launch icons, wherein in response to detecting activation of one of the plurality of application icons when the user interface reconfiguration process is inactive, an application corresponding to the activated application icon is launched and displayed. In some embodiments, the applications include a set of default applications, third-party applications, and/or web folder widget applications. As described above, the application launch icons do not issue commands or sub-commands regarding applications. Instead, they are used to launch applications. If an application is already launched, activation of the corresponding application launch icon will result in the display of the application.

In some embodiments, the first plurality of icons includes one or more web folder widget icons (e.g., web folder widget icons 149-6-20, 149-6-21, and 149-6-22 in FIG. 11H ), wherein, in response to detecting activation of a web folder widget icon when the user interface reconfiguration process is inactive, a portion of the web page corresponding to the activated web folder widget icon is displayed.

The computing device displays (1204) a second plurality of icons in a second area (e.g., tray 408 in FIG. 11H ) on the touch screen display while displaying the icons of the first plurality of icons in the first area. The second area is different (e.g., visually distinct) from the first area. For example, in FIG. 11H , tray 408 is different from area 802. In some embodiments, the second plurality of icons corresponds to applications or functions frequently used by the user.

In some embodiments, the second plurality of icons includes a plurality of application launch icons, wherein in response to detecting activation of one of the plurality of application icons when the user interface reconfiguration process is inactive, an application corresponding to the activated application icon is launched and/or displayed, as described above. In some embodiments, the applications include a set of default applications, third-party applications, and/or web folder widget applications.

The computing device detects (1206) a first finger gesture on the touch screen display. In some embodiments, the first finger gesture is a fixed (or substantially fixed) contact with an icon in the first group of the first plurality of icons for more than a predetermined time (e.g., 0.5 seconds to 2.0 seconds) (e.g., gesture 1114 on the stock icon 149-2 in Figure 11H). In some embodiments, the first finger gesture is on an edit icon (not shown). In some embodiments, the first finger gesture is on any application icon.

In response to detecting the first finger gesture, the computing device initiates a user interface reconfiguration process and changes the positions of one or more icons in the first group of the first plurality of icons relative to the corresponding average positions (1208). In some embodiments, in response to detecting the first finger gesture, the computing device also changes (1210) the positions of one or more icons in the second plurality of icons relative to the corresponding average positions (e.g., UI1100I in Figure 11I).

In some embodiments, the changing includes animating the one or more icons to simulate floating of the one or more icons on a surface corresponding to a surface of the touch screen display.

In some embodiments, the changing of the position of the corresponding icon in the one or more icons corresponds to an equation of motion in a plane substantially consistent with the touch screen display, the equation of motion having a coefficient of friction less than a threshold value. In some embodiments, the equation of motion for the corresponding icon has a non-zero initial velocity. In some embodiments, the equation of motion for the corresponding icon has a restoring force about the corresponding average position of the corresponding icon so that the position of the corresponding icon oscillates in an area substantially centered about the corresponding average position of the corresponding icon. In some embodiments, the equation of motion for the corresponding icon includes a non-zero angular velocity. In some embodiments, the corresponding icon rotates about the corresponding average position of the corresponding icon while maintaining a fixed orientation relative to the touch screen display.

In some embodiments, the changing comprises randomly changing each icon in the first group of the first plurality of icons about a corresponding average position.

In some embodiments, the icons displayed in at least one of the first area and the second area include icons that the user can delete and icons that the user cannot delete. In some embodiments, the computing device visually distinguishes (1212) icons that the user can delete from icons that the user cannot delete; detects (1214) one or more finger gestures corresponding to a request to delete an icon that the user can delete; and in response to detecting one or more finger gestures corresponding to a request to delete an icon, deletes (1216) the icon. For example, in Figure 11I, only the web folder widget 149-6 is deletable, so there is a circle "X" delete icon 1116 near these icons to visually indicate that these icons can be deleted. In response to detecting a finger gesture of the delete icon 1116 (Figure 11I) at icon 149-6-22, icon 149-6-22 is deleted (Figure 11J).

In some embodiments, third-party applications and web folder widgets can be deleted, but core or default applications cannot be deleted. In some embodiments, if the device is reset, the default applications are displayed in the first group in area 802 and in tray 408, with the third-party applications and web folder widgets deleted. In some embodiments, if the device is reset, the default applications are displayed in the first group in area 802 and in tray 408, with the third-party applications and web folder widgets displayed after the default applications in the first group in area 802. In some embodiments, if the device is reset, the default applications are displayed in the first group in area 802 and in tray 408, with the third-party applications and web folder widgets displayed in the second group in area 802.

In some embodiments, the computing device detects (1218) a user making a point contact with the touch screen display at a first location corresponding to a first icon in the first group, and detects movement of the point contact to a second location on the touch screen display. In response to detecting the point contact and detecting movement of the point contact, the computing device displays (1220) movement of the first icon to the second location on the touch screen display and displays the first icon at the second location. In some embodiments, the second location is in the first region. For example, in response to detecting point contact 1118 (Figure 11J) on stock icon 149-2 and detecting movement of the point contact, the computing device displays (1220) movement of stock icon 149-2 to the second location on the touch screen display (Figure 11J) and displays stock icon 149-2 at the second location (Figure 11L).

In some embodiments, when the second position of the first icon at least partially overlaps the corresponding initial position of the second icon, the computing device moves (1222) the second icon from the corresponding initial position to the corresponding new position. For example, iPod icon 152 (Figure 11J) that overlaps with stock icon 149-2 is moved to the new position (Figures 11K to 11L). In some embodiments, the second icon is either in the first area (e.g., area 802) or in the second area (e.g., tray 408).

In some embodiments, the second position is in the first region, and the computing device rearranges (1224) the icons in the first group except the first icon to accommodate display of the first icon at the second position in the first region (e.g., as shown in Figures 11K to 11L).

In some embodiments, rearranging (1224) the icons in the first group other than the first icon includes compacting (1226) at least some of the icons in the first group other than the first icon to place an icon in the first position previously occupied by the first icon (e.g., as shown in Figures 11K to 11L).

In some embodiments, rearranging (1224) the icons in the first group other than the first icon includes snake-arranging (1228) at least some of the icons in the first group other than the first icon to place an icon in the first position previously occupied by the first icon (e.g., as shown in Figures 11K to 11L).

In some embodiments, rearranging (1224) the icons in the first group other than the first icon includes moving (1230) one of the icons in the first group to the first position previously occupied by the first icon, wherein the moved icon was in the second position before the first icon was moved (e.g., as shown in FIG. 11M ). In other words, the icons in the first position and the second position swap positions.

In some embodiments, in response to detecting a predetermined user action for terminating the user interface reconfiguration process, the computing device fixes (1232) the position of the first icon to the second position and stops changing the position of one or more icons in the first group (e.g., as shown in FIG. 11N ). In some embodiments, the predetermined user action is activation of a physical button (e.g., menu button 204 in FIG. 11N ) or a soft button (e.g., a Done button, not shown).

In some embodiments, the computing device detects (1234) a user making a first point contact with the touch screen display at a first location corresponding to a first icon in the first group (e.g., contact 1120 in FIG. 11O ), and detects movement of the first point contact to a second location in a second region on the touch screen display (e.g., as shown in FIG. 11O ). In response to detecting the first point contact and detecting movement of the first point contact, the computing device displays (1236) movement of the first icon to the second location in the second region on the touch screen display and displays the first icon at the second location (e.g., as shown in FIG. 11Q ). In some embodiments, the icons in the second region are symmetrically distributed about a center of the second region (e.g., as shown in FIG. 11R ).

In some embodiments, when the new position of the first icon at least partially overlaps with the corresponding initial position of a third icon in the second plurality of icons, the third icon is moved (1238) from the corresponding initial position to the corresponding new position (e.g., as shown in Figures 11P to 11R, where the mail icon 140 and the browser icon 147 are moved to new positions). In some embodiments, the size of the icons in the second area (e.g., tray 408) decreases as more icons are added until a predetermined maximum number (e.g., 6 icons) is reached (e.g., as shown in Figure 11S). In some embodiments, after the maximum is reached, icons must be moved out of the second area before more icons are added to the second area. In some embodiments, after the maximum is reached, icons in the second area are evicted from the second area as more icons are added to the second area.

In some embodiments, the computing device detects (1240) a user making a second point contact with the touch screen display at a third location in the second area of the touch screen display corresponding to a second icon in the second plurality of icons (e.g., contact 1122 in FIG. 11T ), and detects movement of the second point contact to a fourth location in the first area of the touch screen display (e.g., as shown in FIG. 11T ). In response (1242) to detecting the second point contact and detecting movement of the second point contact, the computing device displays movement of the second icon to the fourth location of the touch screen display and displays the second icon at the fourth location (e.g., as shown in FIG. 11T through FIG. 11V , where mail icon 140 moves from tray 408 to first area 802 ). In some embodiments, the computing device fixes (1244) the position of the second icon to the fourth location and stops changing the position of one or more icons in the first group (e.g., as shown in FIG. 11W ) in response to detecting a predetermined user action for terminating a predetermined user interface reconfiguration process. In some embodiments, the predetermined user action is activation of a physical button (e.g., menu button 204 in FIG. 11W ) or a soft button (e.g., a Done icon, not shown).

In some embodiments, the computing device detects ( 1246 ) a second finger gesture on the touch screen display on the first icon in the first group. In response to detecting the second finger gesture, the computing device replaces (1256) display of the first group of the first plurality of icons with display of the second group of the first plurality of icons in the first area on the touch screen display, and moves the first icon from the first group to the second group (e.g., as shown in Figures 11X to 11Z, where the first group of icons (141, 148, 144, 143, 155, 149-2, 154, 149-1, 149-4, 149-3, 153, 412, 152, 149-6-20, 149-6-21 and 149-6-22) are replaced by the second group of icons (149-6-30, 149-6-31, 149-6-32, 149-6-33, 149-6-34 and 149-6-35), and the calculator icon 149-3 is moved from the first group to the second group).

In some embodiments, detecting the second finger gesture includes: detecting (1248) a first point contact by the user with the touch screen display at a first location corresponding to a first icon in the first group (e.g., contact 1124 in FIG. 11X ), and detecting movement of the first point contact to an edge of the first area; and in response to detecting the first point contact and detecting movement of the first point contact to the edge of the first area, displaying (1250) movement of the first icon to the edge of the first area (e.g., as shown for calculator icon 149-3 in FIG. 11X ). In some embodiments, the edge of the first area coincides with an edge of the touch screen display. In some embodiments, the multiple groups form a sequential group, and coming to the right edge causes the next group in the sequential group to be displayed, while coming to the left edge causes the previous group in the sequential group to be displayed. In some embodiments, the multiple groups form a sequential group, and coming to the bottom edge causes the next group in the sequential group to be displayed, and coming to the top edge causes the previous group in the sequential group to be displayed.

In some embodiments, detecting the second finger gesture includes detecting (1252) a first point contact at an edge of the first area for more than a predetermined time (eg, 0.2 seconds to 1.0 seconds).

In some embodiments, detecting a second finger gesture includes detecting (1254) movement of the first point contact away from the edge of the first area, and then detecting another movement of the first point contact back to the edge of the first area within a predetermined time (e.g., 0.2 seconds to 0.5 seconds) (e.g., as shown for calculator icon 149-3 in Figure 11Y).

In some embodiments, the computing device detects (1258) a user making a second point contact with the touch screen display at a second location corresponding to a first icon in the second group, and detects movement of the second point contact to a third location on the touch screen display. In response to detecting the second point contact and detecting movement of the second point contact, the computing device displays (1260) movement of the first icon to the third location on the touch screen display and displays the first icon at the third location (e.g., as shown for calculator icon 149-3 in Figures 11Z, 11AA, and 11CC-11EE). In some embodiments, the third location is in the first region. In some embodiments, the first icon is the only icon in the second group (e.g., as shown for calculator icon 149-3 in Figure 11BB). In other words, the first icon is added to the otherwise empty first region. In some embodiments, the multiple groups of icons displayed separately in the first region comprise a sequence of groups, and during the reconfiguration process, an empty group is added after the last group of icons in the sequence of groups.

In some embodiments, the position of one or more icons in the second group of the first plurality of icons is changed relative to the corresponding average position (e.g., as shown in Figures 11Z and 11AA). In some embodiments, the position of all icons in the second group is changed relative to the corresponding average position. In some embodiments, the position of all icons in the second group other than the first icon is changed relative to the corresponding average position.

In some embodiments, the third position is in the first area, and the computing device rearranges (1262) the icons in the second group other than the first icon to accommodate display of the first icon at the third position in the first area (e.g., as shown in Figures 11CC and 11DD). In some embodiments, rearranging the icons in the second group other than the first icon includes: squeezing (1264) at least some of the icons in the first and second groups other than the first icon (e.g., as shown in Figures 11FF and 11GG, where icon 149-6-30 is squeezed into the first group). In some embodiments, rearranging the icons in the second group other than the first icon includes arranging (1266) at least some of the icons in the second group other than the first icon in a zigzag manner (e.g., as shown in Figures 11CC and 11DD).

In some embodiments, the plurality of groups of icons includes a plurality of groups of icons configured to be displayed as a sequence of group icons in a first area of the touch screen display, respectively. The computing device displays (1268) two or more group sequence indicator icons (e.g., icons 804-1, 804-2, and 804-3 in Figures 11H to 11OO, which operate in the same manner as the corresponding icons in Figures 8A to 8D described above). The group sequence indicator icons provide information about the number of icon groups in the plurality of groups of icons and the position of the displayed icon groups in the sequence of group icons. In response to detecting a second finger gesture, the computing device updates (1270) the information provided by the group sequence indicator icons to reflect the replacement of the displayed first group by the second group (e.g., in Figure 11X, icon 804-1 is dimmed when the first group is displayed, and in Figure 11Z, icon 804-2 is dimmed when the second group is displayed).

In some embodiments, in response to detecting a predetermined user action for terminating the user interface reconfiguration process, the computing device fixes 1272 the position of the first icon to a third position and stops changing the position of one or more icons in the second group (e.g., as shown in Figures 11EE and 11HH). In some embodiments, the predetermined user action is activation of a physical button (e.g., menu button 204 in Figures 11EE or 11HH) or a soft button (e.g., a Done icon, not shown).

In some embodiments, the computing device detects ( 1274 ) a second finger gesture on the touch screen display over the first icon in the first group. In response to detecting the second finger gesture, the computing device replaces (1276) display of the first group of the first plurality of icons with display of the second group of the first plurality of icons in the first area on the touch screen display, and moves the first icon from the first group to the second group (e.g., as shown in Figures 11X to 11Z, where the first group of icons (141, 148, 144, 143, 155, 149-2, 154, 149-1, 149-4, 149-3, 153, 412, 152, 149-6-20, 149-6-21, and 149-6-22) are replaced by the second group of icons (149-6-30, 149-6-31, 149-6-32, 149-6-33, 149-6-34, and 149-6-35), and the calculator icon 149-3 is moved from the first group to the second group). The computing device detects (1278) a third finger gesture on the touch screen display on the first icon in the second group. In response to detecting the third finger gesture, the computing device replaces (1280) display of the second group of the first plurality of icons with display of the third group of the first plurality of icons in the first region of the touch screen display and moves the first icon from the second group to the third group (e.g., as shown in Figures 1111 to 11KK for calculator icon 149-3). The computing device detects (1282) a second point contact made by the user with the touch screen display at a second location corresponding to the first icon in the third group and detects movement of the second point contact to the third location on the touch screen display. In response to detecting the second point contact and detecting movement of the second point contact, the computing device displays (1284) movement of the first icon to the third location on the touch screen display and displays the first icon at the third location (e.g., as shown in Figures 11LL to 11NN for calculator icon 149-3). In some embodiments, the third location is in the first region. In some embodiments, the first icon is the only icon in the third group. In other words, the first icon is added to the otherwise empty first region. In some embodiments, the positions of one or more icons in a third group of the first plurality of icons are changed relative to the corresponding average position (e.g., as shown in FIG. 11NN ). In some embodiments, the positions of all icons in the third group are changed relative to the corresponding average position. In some embodiments, the positions of all icons in the third group other than the first icon are changed relative to the corresponding average position.

In some embodiments, in response to detecting a predetermined user action for terminating the user interface reconfiguration process, the computing device fixes (1286) the position of the first icon to a third position and stops changing the position of one or more icons in the third group (e.g., as shown in FIG. 1100 ). In some embodiments, the predetermined user action is activation of a physical button (e.g., menu button 204 in FIG. 1100 ) or a soft button (e.g., a Done icon, not shown).

The above description has been given with reference to specific embodiments for purposes of illustration. However, the above illustrative discussion is not intended to be exhaustive or to limit the invention to the precise forms disclosed. Many modifications and variations are possible in light of the above teachings. The embodiments were chosen and described to best explain the principles of the invention and its practical application, thereby enabling those skilled in the art to best utilize the invention and various embodiments with various modifications as are suitable for the particular application contemplated.

Claims (28)

1. A portable electronic device, comprising: Touch-sensitive display; One or more processors; Memory; and One or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for the following operations: A first icon is displayed at a first location on the touch-sensitive display; A second icon is displayed in a second location on the touch-sensitive display, the second location being different from the first location; Detect touch input on the first icon corresponding to the first position of the touch-sensitive display; Determine whether the touch input on the first icon corresponding to the first position of the touch-sensitive display remains in contact with the display for a predetermined time period; Based on the determination that the touch input on the first icon corresponding to the first position of the touch-sensitive display has not maintained contact with the display for a period of time longer than the predetermined time period, the application associated with the first icon is activated; and Based on the determination that the touch input on the first icon corresponding to the first position of the touch-sensitive display remains in contact with the display for a period of time longer than the predetermined time: Visually distinguish the first icon, wherein visually distinguishing the first icon includes displaying the delete icon; Detecting a movement of the touch input from the first position to a position on the touch-sensitive display adjacent to the second position, wherein the detected movement of the touch input causes the first icon to be moved from the first position to the position on the touch-sensitive display adjacent to the second position; and In response to detecting that the first icon has moved from the first position to a position on the touch-sensitive display adjacent to the second position, the second icon is moved from the second position to a different position on the touch-sensitive display. 2. The device of claim 1, wherein visually distinguishing the first icon includes changing the size of the first icon. 3. The device of claim 1, wherein visually distinguishing the first icon includes changing the position of the first icon with respect to its corresponding average position. 4. The device according to claim 1, wherein the instructions further include: Detecting the lifting of the touch input at the second position on the touch-sensitive display; and In response to the release of a touch input detected at the second location on the touch-sensitive display, the first icon is displayed at the second location on the touch-sensitive display and the second icon is displayed at the different locations on the touch-sensitive display. 5. The device according to claim 1, wherein the instructions further include: Based on the determination that the touch input on the first icon corresponding to the first position of the touch-sensitive display remains in contact with the display for a period of time longer than the predetermined time: Visually distinguish the first icon; and Provide feedback, wherein the feedback includes at least one of audio feedback and haptic feedback. 6. The device according to claim 1, wherein the different position is the first position. 7. The device of claim 1, wherein the first position and the second position are in different areas of the touch-sensitive display, and the second position and the different positions are in the same area of the touch-sensitive display. 8. The device of claim 1, wherein the first location is in a first region on the touch-sensitive display, the second location on the touch-sensitive display is in a second region on the touch-sensitive display, and the second region includes a tray, dock, or menu bar with a set of icons between the first region and the bottom edge of the touch-sensitive display. 9. The device of claim 8, wherein the different location is also in the second region on the touch-sensitive display, adjacent to the second location. 10. A device implemented in a portable electronic device having a touch-sensitive display, comprising: A component for displaying a first icon at a first location on the touch-sensitive display; A component for displaying a second icon in a second location on the touch-sensitive display, the second location being different from the first location; A component for detecting touch input on the first icon corresponding to the first position of the touch-sensitive display; A component for determining whether the touch input on the first icon corresponding to the first position of the touch-sensitive display remains in contact with the display for a period of time greater than a predetermined time. A component for activating an application associated with the first icon based on a determination that the touch input on the first icon corresponding to the first position of the touch-sensitive display has not maintained contact with the display for a predetermined time period; and A component for maintaining contact with the display for a predetermined time period based on the touch input on the first icon corresponding to the first position of the touch-sensitive display: A component for visually distinguishing the first icon, wherein visually distinguishing the first icon includes displaying a delete icon; A component for detecting movement of the touch input from the first position to a position on the touch-sensitive display adjacent to the second position, wherein the detected movement of the touch input causes the first icon to move from the first position to the position on the touch-sensitive display adjacent to the second position; and A component for moving the second icon from the second position to a different position on the touch-sensitive display in response to detecting that the first icon has moved from the first position to a position on the touch-sensitive display adjacent to the second position. 11. The apparatus of claim 10, wherein visually distinguishing the first icon includes changing the size of the first icon. 12. The apparatus of claim 10, wherein visually distinguishing the first icon includes changing the position of the first icon with respect to its corresponding average position. 13. The apparatus of claim 10, further comprising: A component for detecting the lifting of the touch input at the second position on the touch-sensitive display; and A component for displaying the first icon at the second position on the touch-sensitive display and the second icon at the different positions on the touch-sensitive display in response to a lift-off of a touch input detected at the second position on the touch-sensitive display. 14. The apparatus of claim 10, further comprising: A component for maintaining contact with the display for a predetermined time period based on the touch input on the first icon corresponding to the first position of the touch-sensitive display: Components used to visually distinguish the first icon; and A component for providing feedback, wherein the feedback includes at least one of audio feedback and haptic feedback. 15. The apparatus of claim 10, wherein the different position is the first position. 16. The apparatus of claim 10, wherein the first position and the second position are in different areas of the touch-sensitive display, and the second position and the different positions are in the same area of the touch-sensitive display. 17. The apparatus of claim 10, wherein the first location is in a first region on the touch-sensitive display, the second location on the touch-sensitive display is in a second region on the touch-sensitive display, and the second region includes a tray, dock, or menu bar with a set of icons between the first region and the bottom edge of the touch-sensitive display. 18. The apparatus of claim 17, wherein the different location is also in the second region on the touch-sensitive display, adjacent to the second location. 19. A method implemented in a portable electronic device having a touch-sensitive display, comprising: A first icon is displayed at a first location on the touch-sensitive display; A second icon is displayed in a second location on the touch-sensitive display, the second location being different from the first location; Detect touch input on the first icon corresponding to the first position of the touch-sensitive display; Determine whether the touch input on the first icon corresponding to the first position of the touch-sensitive display remains in contact with the display for a predetermined time period; Based on the determination that the touch input on the first icon corresponding to the first position of the touch-sensitive display has not maintained contact with the display for a period of time longer than the predetermined time period, the application associated with the first icon is activated; and Based on the determination that the touch input on the first icon corresponding to the first position of the touch-sensitive display remains in contact with the display for a period of time longer than the predetermined time: Visually distinguish the first icon, wherein visually distinguishing the first icon includes displaying the delete icon; Detecting a movement of the touch input from the first position to a position on the touch-sensitive display adjacent to the second position, wherein the detected movement of the touch input causes the first icon to be moved from the first position to the position on the touch-sensitive display adjacent to the second position; and In response to detecting that the first icon has moved from the first position to a position on the touch-sensitive display adjacent to the second position, the second icon is moved from the second position to a different position on the touch-sensitive display. 20. The method of claim 19, wherein visually distinguishing the first icon includes changing the size of the first icon. 21. The method of claim 19, wherein visually distinguishing the first icon includes changing the position of the first icon with respect to its respective average position. 22. The method of claim 19, further comprising: Detecting the lifting of the touch input at the second position on the touch-sensitive display; and In response to the release of a touch input detected at the second location on the touch-sensitive display, the first icon is displayed at the second location on the touch-sensitive display and the second icon is displayed at the different locations on the touch-sensitive display. 23. The method of claim 19, further comprising: Based on the determination that the touch input on the first icon corresponding to the first position of the touch-sensitive display remains in contact with the display for a period of time longer than the predetermined time: Visually distinguish the first icon; and Provide feedback, wherein the feedback includes at least one of audio feedback and haptic feedback. 24. The method of claim 19, wherein the different position is the first position. 25. The method of claim 19, wherein the first location and the second location are in different areas of the touch-sensitive display, and the second location and the different locations are in the same area of the touch-sensitive display. 26. The method of claim 19, wherein the first location is in a first region on the touch-sensitive display, the second location on the touch-sensitive display is in a second region on the touch-sensitive display, and the second region includes a tray, dock, or menu bar with a set of icons between the first region and the bottom edge of the touch-sensitive display. 27. The method of claim 26, wherein the different location is also in the second region on the touch-sensitive display, adjacent to the second location. 28. A computer-readable storage medium storing one or more programs, the one or more programs including instructions that, when executed by one or more processors of an electronic device, cause the electronic device to perform the method according to any one of claims 19-27.