List scrolling, document translation, scaling and rotation on touchscreen displays

Abstract

To provide a method for providing a further transparent and intuitive user interface for a device having a touch screen display.SOLUTION: A method 1100, in an electronic device having a display, includes the steps of: displaying at least a first portion of first content at a first magnification (1102); detecting a gesture corresponding to a command to change the size of the first portion of the first content by a user-specified amount (1104); changing the magnification of the first portion of the first content to a second magnification different from the first magnification and displaying the same (1106); and according to detection of the end of a gesture while the first portion of the first content is being displayed at the second magnification in accordance with the gesture, and determination that the second magnification exceeds a predetermined magnification (1108), displaying the first portion of the first content at a predetermined magnification different from the first magnification and the second magnification (1112).SELECTED DRAWING: Figure 11

Description

[Technical Field]

[0001] FIELD OF THE INVENTION The disclosed embodiments relate generally to devices with touchscreen displays, and more particularly to scrolling lists, translating, rotating, and scaling electronic documents on devices with touchscreen displays. [Background technology]

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

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

[0004] As a result of the small size of display screens and potentially large sizes of electronic files in portable electronic devices, it is often the case that only a portion of an electronic document or list can be displayed to a user on the screen at a given time. Thus, users often need to scroll through displayed lists or translate displayed electronic documents. Users also need to rotate and scale (i.e., enlarge or reduce) displayed electronic documents. However, the limitations of conventional user interfaces make performing these actions cumbersome.

[0005] Furthermore, scrolling through displayed lists and translating electronic documents is cumbersome on both portable and non-portable electronic devices with touchscreen displays, leading to user frustration when scrolling or translation does not reflect the user's intent. Similarly, rotating and scaling an electronic document can also lead to user frustration when the scrolling or translation does not reflect the user's intent.

[0006] Therefore, it is desirable to provide devices with touchscreen displays with a more transparent and intuitive user interface that is easy to use, configure, and / or adapt for scrolling through lists of items and translating, rotating, and scaling electronic documents. Summary of the Invention

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

[0008] According to one aspect, a computer-implemented method for use in connection with a device having a touchscreen display is disclosed. In the method, movement of an object on or near the touchscreen display is detected. In response to detecting the movement, an electronic document displayed on the touchscreen display is translated in a first direction. If an edge of the electronic document is reached while moving the electronic document in the first direction while the object is still detected on or near the touchscreen display, an area beyond the edge of the document is displayed. After the object is no longer detected on or near the touchscreen display, the document is translated in a second direction until the area beyond the edge of the document is no longer displayed.

[0009] According to one embodiment, a graphical user interface for a device having a touchscreen display is disclosed, the graphical user interface including a portion of an electronic document displayed on the touchscreen display and an area beyond the edge of the document. In the graphical user interface, the electronic document is translated in a first direction in response to detecting movement of an object on or near the touchscreen display. If the edge of the electronic document is reached while moving the electronic document in the first direction while the object is still detected on or near the touchscreen display, the area beyond the edge of the document is displayed. After the object is no longer detected on or near the touchscreen display, the document is translated in a second direction until the area beyond the edge of the document is no longer displayed.

[0010] According to one embodiment, an apparatus is disclosed that includes a touchscreen display, one or more processors, a memory, and one or more programs. 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 include instructions for detecting movement of an object on or near the touchscreen display and, in response to detecting the movement, for translating an electronic document displayed on the touchscreen display in a first direction. The one or more programs also include instructions for displaying an area beyond the edge of the electronic document if an edge of the electronic document is reached while moving the electronic document in the first direction while an object is still detected on or near the touchscreen display. The one or more programs further include instructions for translating the document in a second direction after the object is no longer detected on or near the touchscreen display until the area beyond the edge of the document is no longer displayed.

[0011] According to one embodiment, a computer program product is disclosed that includes a computer-readable storage medium and a computer program mechanism embedded therein. The computer program mechanism includes instructions that, when executed by a device having a touchscreen display, cause the device to detect movement of an object on or near the touchscreen display and, in response to detecting the movement, translate an electronic document displayed on the touchscreen display in a first direction. The instructions also cause the device to display an area beyond the edge of the document if an edge of the electronic document is reached while moving the electronic document in the first direction while an object is still detected on or near the touchscreen display. The instructions also cause the device to translate the document in a second direction after the object is no longer detected on or near the touchscreen display until the area beyond the edge of the document is no longer displayed.

[0012] According to one embodiment, a device having a touchscreen display is disclosed. The device includes means for detecting movement of an object on or near the touchscreen display and means for translating an electronic document displayed on the touchscreen display in a first direction in response to detecting the movement. The device also includes means for displaying an area beyond the edge of the electronic document if an edge of the electronic document is reached while moving the electronic document in the first direction while the object is still detected on or near the touchscreen display. The device further includes means for translating the document in a second direction after the object is no longer detected on or near the touchscreen display until the area beyond the edge of the document is no longer displayed.

[0013] According to one embodiment, a computer-implemented method for use in connection with a device having a touchscreen display is disclosed. In the method, movement of an object on or near the touchscreen display is detected. In response to detecting this movement, a list of items displayed on the touchscreen display is translated in a first direction. If the end of the list is reached while navigating the list in the first direction while an object is still detected on or near the touchscreen display, the area beyond the end of the list is displayed. After objects are no longer detected on or near the touchscreen display, the list is scrolled in a second direction opposite the first direction until the area beyond the end of the list is no longer displayed.

[0014] According to one embodiment, a graphical user interface for a device having a touchscreen display is disclosed, the graphical user interface including a portion of a list of items displayed on the touchscreen display and an area beyond the end of the list. In response to detecting movement of an object on or near the touchscreen display, the list is scrolled in a first direction. If the end of the list is reached while moving through the list in the first direction while an object is still detected on or near the touchscreen display, the area beyond the end of the list is displayed. After objects are no longer detected on or near the touchscreen display, the list is scrolled in a second direction opposite the first direction until the area beyond the end of the list is no longer displayed.

[0015] According to one embodiment, an apparatus is disclosed that includes a touchscreen display, one or more processors, a memory, and one or more programs. The one or more programs are stored in memory and configured to be executed by the one or more processors. The one or more programs include instructions for detecting movement of an object on or near the touchscreen display and, in response to detecting the movement, for scrolling a list of items displayed on the touchscreen display in a first direction. The one or more programs also include instructions for displaying an area beyond the end of the list if the end of the list is reached while moving through the list in the first direction while an object is still detected on or near the touchscreen display. The one or more programs further include instructions for scrolling the list in a second direction opposite the first direction after an object is no longer detected on or near the touchscreen display until the area beyond the end of the list is no longer displayed.

[0016] According to one embodiment, a computer program product is disclosed that includes a computer-readable storage medium and a computer program mechanism embedded therein. The computer program mechanism includes instructions that, when executed by a device having a touchscreen display, cause the device to detect movement of an object on or near the touchscreen display and, in response to detecting the movement, scroll a list of items displayed on the touchscreen display in a first direction. The instructions also cause the device to display an area beyond the end of the list if the end of the list is reached while moving through the list in the first direction while an object is still detected on or near the touchscreen display. The instructions also cause the device to scroll the list in a second direction opposite the first direction after the object is no longer detected on or near the touchscreen display until the area beyond the end of the list is no longer displayed.

[0017] According to one embodiment, a device having a touchscreen display is disclosed. The device includes means for detecting movement of an object on or near the touchscreen display and means for scrolling a list of items displayed on the touchscreen display in a first direction in response to detecting the movement. The device also includes means for displaying an area beyond the end of the list if the end of the list is reached while moving through the list in the first direction while an object is still detected on or near the touchscreen display. The device further includes means for scrolling the list in a second direction opposite the first direction after the object is no longer detected on or near the touchscreen display until the area beyond the end of the list is no longer displayed.

[0018] According to one embodiment, a computer-implemented method for use in connection with a device having a touchscreen display includes detecting a multi-finger twisting gesture on or near the touchscreen display, the multi-finger twisting gesture having a corresponding degree of rotation, if the corresponding degree of rotation exceeds a predetermined degree of rotation, a 90° screen rotation command is executed, if the corresponding degree of rotation is less than the predetermined degree of rotation, a screen rotation command having an acute angle of rotation is executed, and, in response to detecting the multi-finger twisting gesture ceasing, a screen rotation command having an opposite rotation angle to the acute angle is executed.

[0019] According to one embodiment, a device includes a touchscreen display, one or more processors, a memory, and one or more programs stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for detecting a multi-finger twisting gesture on or near the touchscreen display, the multi-finger twisting gesture having a corresponding degree of rotation, instructions for executing a 90° screen rotation command if the corresponding degree of rotation exceeds a predetermined degree of rotation, instructions for executing a screen rotation command having an acute angle of rotation if the corresponding degree of rotation is less than the predetermined degree of rotation, and instructions for executing a screen rotation command having an opposite rotation angle to the acute angle in response to detection of the multi-finger twisting gesture ceasing.

[0020] According to one embodiment, a computer program product includes a computer-readable storage medium and a computer program mechanism embedded therein that, when executed by a device having a touchscreen display, causes the device to detect a multi-finger twisting gesture on or near the touchscreen display, the multi-finger twisting gesture having a corresponding degree of rotation, execute a 90° screen rotation command if the corresponding degree of rotation exceeds a predetermined degree of rotation, execute a screen rotation command having an acute angle of rotation if the corresponding degree of rotation is less than the predetermined degree of rotation, and execute a screen rotation command having an opposite rotation angle to the acute angle in response to detection of the multi-finger twisting gesture ceasing.

[0021] According to one embodiment, a device having a touchscreen display includes means for detecting a multi-finger twisting gesture on or near the touchscreen display, the multi-finger twisting gesture having a corresponding degree of rotation, means for executing a 90° screen rotation command if the corresponding degree of rotation exceeds a predetermined degree of rotation, means for executing a screen rotation command having an acute angle of rotation if the corresponding degree of rotation is less than the predetermined degree of rotation, and means for executing a screen rotation command having an opposite rotation angle to the acute angle in response to detection of the multi-finger twisting gesture ceasing.

[0022] According to one embodiment, a computer-implemented method for displaying an electronic document having a document length and a document width, for use on a device having a touchscreen display, includes displaying the electronic document at a first magnification and detecting a gesture on or near the touchscreen display corresponding to a command to zoom out by a user-specified amount. In response to detecting the gesture, the electronic document is displayed at a magnification less than the first magnification. If the document length or document width is fully displayed while the gesture is still detected on or near the touchscreen display, the electronic document is displayed at a magnification at which areas beyond the opposing edges of the electronic document are displayed, and, upon detecting the end of the gesture, the electronic document is displayed at a magnification at which areas beyond the opposing edges of the electronic document are no longer displayed.

[0023] According to one embodiment, a graphical user interface for a device having a touchscreen display includes an electronic document having a document length and a document width, and an area beyond the opposing edges of the electronic document, displayed on the touchscreen display at multiple magnifications including a first magnification. In response to detecting a gesture on or near the touchscreen display corresponding to a command to zoom out by a user-specified amount while displaying the electronic document at the first magnification, the electronic document is displayed at a magnification less than the first magnification. If the document length or document width is fully displayed while the gesture is still detected on or near the touchscreen display, the electronic document is displayed at a magnification at which the area beyond the opposing edges of the electronic document is displayed, and, upon detecting the end of the gesture, the electronic document is displayed at a magnification at which the area beyond the opposing edges of the electronic document is no longer displayed.

[0024] According to one embodiment, an apparatus includes a touchscreen display, one or more processors, a memory, and one or more programs stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for displaying an electronic document at a first magnification, instructions for detecting a gesture on or near the touchscreen display corresponding to a command to zoom out by a user-specified amount, instructions for displaying the electronic document at a magnification less than the first magnification in response to detecting the gesture, instructions for displaying the electronic document at a magnification in which an area beyond the opposing edges of the electronic document is displayed if the document length or document width is fully displayed while the gesture is still detected on or near the touchscreen display, and instructions for displaying the electronic document at a magnification in which the area beyond the opposing edges of the electronic document is no longer displayed upon detecting an end of the gesture.

[0025] According to one embodiment, a computer program product includes a computer-readable storage medium and a computer program mechanism embedded therein that, when executed by a device having a touchscreen display, causes the device to display an electronic document at a first magnification, instructions to detect a gesture on or near the touchscreen display corresponding to a command to zoom out by a user-specified amount, instructions to display the electronic document at a magnification less than the first magnification in response to detecting the gesture, instructions to display the electronic document at a magnification at which areas beyond the opposing edges of the electronic document are displayed if the document length or document width is fully displayed while the gesture is still detected on or near the touchscreen display, and instructions to display the electronic document at a magnification at which areas beyond the opposing edges of the electronic document are no longer displayed upon detecting an end of the gesture.

[0026] According to one embodiment, an apparatus having a touchscreen display includes means for displaying an electronic document at a first magnification, means for detecting a gesture on or near the touchscreen display corresponding to a command to zoom out by a user-specified amount, means for displaying the electronic document at a magnification less than the first magnification in response to detecting the gesture, means for displaying the electronic document at a magnification in which areas beyond the opposing edges of the electronic document are displayed if the document length or document width is fully displayed while the gesture is still detected on or near the touchscreen display, and means for displaying the electronic document at a magnification in which areas beyond the opposing edges of the electronic document are no longer displayed upon detecting an end of the gesture.

[0027] According to one embodiment, a computer-implemented method for displaying an electronic document for use with a device having a touchscreen display includes displaying at least a first portion of the electronic document at a first magnification and detecting a gesture on or near the touchscreen display corresponding to a command to zoom in by a user-specified amount. In response to detecting the gesture, decreasing portions of the electronic document are displayed at increasing magnifications. Upon detecting the end of the gesture, portions of the electronic document are displayed at the predetermined magnification if the magnification exceeds the predetermined magnification.

[0028] According to one embodiment, a graphical user interface for a device having a touchscreen display includes decreasing portions of an electronic document to be displayed on the touchscreen display at increasing magnifications. The decreasing portions of the electronic document include a first portion. While displaying at least the first portion of the electronic document at the first magnification, in response to detecting a gesture on or near the touchscreen display corresponding to a command to zoom in by a user-specified amount, the decreasing portions of the electronic document are displayed at increasing magnifications. Upon detecting the end of the gesture, if the magnification exceeds the predetermined magnification, each portion of the electronic document is displayed at the predetermined magnification.

[0029] According to one embodiment, an apparatus includes a touchscreen display, one or more processors, a memory, and one or more programs stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for displaying at least a first portion of an electronic document at a first magnification, instructions for detecting a gesture on or near the touchscreen display corresponding to a command to zoom in by a user-specified amount, instructions for displaying decreasing portions of the electronic document at increasing magnification in response to detecting the gesture, and instructions for displaying portions of the electronic document at the predetermined magnification upon detecting an end of the gesture if the magnification exceeds the predetermined magnification.

[0030] According to one embodiment, a computer program product includes a computer-readable storage medium and a computer program mechanism embedded therein that, when executed by a device having a touchscreen display, causes the device to display at least a first portion of an electronic document at a first magnification, instructions for detecting a gesture on or near the touchscreen display corresponding to a command to zoom in by a user-specified amount, instructions for displaying decreasing portions of the electronic document at increasing magnification in response to detecting the gesture, and instructions for displaying portions of the electronic document at the predetermined magnification upon detecting an end of the gesture if the magnification exceeds the predetermined magnification.

[0031] According to one embodiment, a device having a touchscreen display includes means for displaying at least a first portion of an electronic document at a first magnification, means for detecting a gesture on or near the touchscreen display corresponding to a command to zoom in by a user-specified amount, means for displaying decreasing portions of the electronic document at increasing magnification in response to detecting the gesture, and means for displaying each portion of the electronic document at a predetermined magnification if the magnification exceeds the predetermined magnification upon detecting an end of the gesture.

[0032] The disclosed embodiments enable easy and intuitive scrolling of lists and translation of electronic documents on devices with touchscreen displays, as well as easy and intuitive rotation and scaling of electronic documents on devices with touchscreen displays.

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

[0034] [Figure 1] 1 is a block diagram illustrating a portable multifunction device having a touch-sensitive display in accordance with some embodiments. [Figure 2] FIG. 1 illustrates a portable multifunction device with a touch screen according to some embodiments. [Figure 3] FIG. 10 illustrates an example user interface for unlocking a portable electronic device in accordance with some embodiments. [Figure 4] 10A-10C illustrate example user interfaces for a menu of applications on a portable multifunction device in accordance with some embodiments. [Figure 5]1 is a flowchart illustrating a method for scrolling a list according to one embodiment. [Figure 6A] FIG. 10 illustrates an example user interface for managing an inbox in accordance with an embodiment. [Figure 6B] FIG. 10 illustrates an example user interface for managing an inbox in accordance with an embodiment. [Figure 6C] FIG. 10 illustrates an example user interface for managing an inbox in accordance with an embodiment. [Figure 6D] FIG. 10 illustrates an example user interface for managing an inbox in accordance with an embodiment. [Figure 7] 1 is a flowchart illustrating a method for translating an electronic document according to one embodiment. [Figure 8A] FIG. 2 illustrates an example user interface of a browser according to an embodiment. [Figure 8B] FIG. 2 illustrates an example user interface of a browser according to an embodiment. [Figure 8C] FIG. 2 illustrates an example user interface of a browser according to an embodiment. [Figure 8D] FIG. 2 illustrates an example user interface of a browser according to an embodiment. [Figure 9] 1 is a flowchart illustrating a process for displaying an electronic document at multiple magnifications according to one embodiment. [Figure 10A] 1 illustrates a display of an electronic document at multiple magnifications according to an embodiment. [Figure 10B] 1 illustrates a display of an electronic document at multiple magnifications according to an embodiment. [Figure 10C] 1 illustrates a display of an electronic document at multiple magnifications according to an embodiment. [Figure 11] 1 is a flowchart illustrating a process for displaying an electronic document at multiple magnifications according to one embodiment. [Figure 12A]1 illustrates a display of an electronic document at multiple magnifications according to an embodiment. [Figure 12B] 1 illustrates a display of an electronic document at multiple magnifications according to an embodiment. [Figure 12C] 1 illustrates a display of an electronic document at multiple magnifications according to an embodiment. [Figure 13A] 1 illustrates a display of an electronic document at multiple magnifications according to an embodiment. [Figure 13B] 1 illustrates a display of an electronic document at multiple magnifications according to an embodiment. [Figure 13C] 1 illustrates a display of an electronic document at multiple magnifications according to an embodiment. [Figure 14] 10 is a flowchart illustrating a process for executing a screen rotation command in accordance with one embodiment. [Figure 15A] 1 illustrates rotating a view of an electronic document or other digital object according to one embodiment. [Figure 15B] 1 illustrates rotating a view of an electronic document or other digital object according to one embodiment. [Figure 15C] 1 illustrates rotating a view of an electronic document or other digital object according to one embodiment. [Figure 15D] 1 illustrates rotating a view of an electronic document or other digital object according to one embodiment. [Figure 15E] 1 illustrates rotating a view of an electronic document or other digital object according to one embodiment. [Figure 16A] 10A-10C illustrate an example of a screen rotation gesture according to an embodiment. [Figure 16B] 10A-10C illustrate an example of a screen rotation gesture according to an embodiment. [Figure 16C] 10A-10C illustrate an example of a screen rotation gesture according to an embodiment. [Figure 16D]10A-10C illustrate an example of a screen rotation gesture according to an embodiment. [Figure 16E] 10A-10C illustrate an example of a screen rotation gesture according to an embodiment. [Figure 16F] 10A-10C illustrate an example of a screen rotation gesture according to an embodiment. [Figure 17] FIG. 1 is a block diagram illustrating a device having a touchscreen display according to an embodiment. DETAILED DESCRIPTION OF THE INVENTION

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

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

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

[0038] The device supports a variety of applications, such as a telephone application, a video conferencing application, an email application, an instant messaging application, a blog application, a digital camera application, a digital video camera application, a web browsing application, a digital music player application, and / or a digital video player application.

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

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

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

[0042] It will be apparent that device 100 is only one example of a portable multifunction device 100, and that device 100 may have more or fewer components than those shown, may combine two or more components, or may have components in a different configuration or arrangement. The various components shown in Figure 1 may be implemented in hardware, software, or a combination of both, including one or more signal processing and / or application specific integrated circuits.

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

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

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

[0046] RF (radio frequency) circuitry 108 receives and transmits RF signals, also referred to as electromagnetic signals. RF circuitry 108 converts between electrical and electromagnetic signals and communicates with communication networks and other communication devices via the electromagnetic signals. RF circuitry 108 can include well-known circuits for performing these functions, including, but not limited to, an antenna system, an RF transceiver, one or more amplifiers, a tuner, one or more oscillators, a digital signal processor, a CODEC chipset, a subscriber identity module (SIM) card, memory, etc. RF circuitry 108 can communicate wirelessly with networks, such as the Internet, also referred to as the World Wide Web (WWW), intranets, and / or wireless networks, such as cellular telephone networks, wireless local area networks (LANs), and / or metropolitan area networks (MANs), and other devices. The wireless communications may use any of a number of communications standards, protocols, and technologies, including, but not limited to, Global System for Mobile Communications (GSM), Enhanced Data GSM Environment (EDGE), 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, Internet messaging and / or Short Message Service (SMS), and other suitable communications protocols, including communications protocols not yet developed as of the filing date of this application.

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

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

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

[0050] The touchscreen of display system 112 is a touch-sensitive surface that accepts input from a user based on haptic and / or tactile contact. Display system 112 and display controller 156 (along with associated modules and / or instruction sets in memory 102) detect contact (and movement or breaking of contact) on display system 112 and translate the detected contact into interaction with user interface objects (e.g., one or more softkeys, icons, web pages, or images) displayed on the touchscreen. In the illustrated embodiment, the point of contact between the touchscreen of display system 112 and the user corresponds to the user's finger.

[0051] The touchscreen of display system 112 may use LCD (liquid crystal display) or LPD (light emitting polymer display) technology, although other display technologies may be used in other embodiments. The touchscreen of display system 112 and display controller 156 may detect contact and its movement or disruption using any of a number of now known or later developed touch sensing technologies, including, but not limited to, capacitive, resistive, infrared, and surface acoustic wave technologies, as well as other proximity sensor arrays or other elements for determining one or more points of contact with the touchscreen of display system 112. The touch-sensitive display in some embodiments of display system 112 may be similar to the multi-touch sensitive tablets described in U.S. Pat. Nos. 6,323,846 (Westerman et al.), 6,570,557 (Westerman et al.), and / or 6,677,932 (Westerman), and / or U.S. Patent Publication No. 2002 / 0015024 A1, each of which is incorporated herein by reference. However, while the touchscreen of display system 112 displays visual output from portable device 100, its touch-sensitive tablet does not provide visual output. The touchscreen of display system 112 can have a resolution greater than 100 dpi. In the illustrated embodiment, the touchscreen of the display system has a resolution of approximately 168 dpi. A user can contact the touchscreen of display system 112 using a suitable object or accessory, such as a stylus, finger, etc. In one embodiment, the user interface is designed to function primarily with finger-based touches and gestures, which are significantly less precise than stylus-based input due to the large contact area of ​​a finger on the touchscreen. In one embodiment, the device translates approximate finger-based input into precise pointer / cursor positions or commands to perform the user's desired actions.

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

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

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

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

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

[0057] Device 100 may also include one or more proximity sensors 166. FIG. 1 shows proximity sensor 166 coupled to peripheral interface 118. Alternatively, proximity sensor 166 may be coupled to input controller 160 of I / O subsystem 106. Proximity sensor 166 may operate as described in U.S. patent application Ser. No. 11 / 241,839, entitled "Proximity Detector In Handheld Devices," filed Sep. 30, 2005, and U.S. patent application Ser. No. 11 / 240,788, entitled "Proximity Detector In Handheld Devices," filed Sep. 30, 2005, both of which are incorporated herein by reference. In one embodiment, the proximity sensor turns off and disables touchscreen 112 when the multifunction device is placed near a user's ear (e.g., when the user makes a phone call). In one embodiment, to prevent unnecessary battery drain when the device is in a locked state, a proximity sensor keeps the screen off when the device is placed in a user's pocket, purse, or other dark area.

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

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

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

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

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

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

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

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

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

[0067] In conjunction with the display system 112, the display controller 156, the contact module 130, the graphics module 132, and the text input module 134, the contact module 137 can be used to manage an address book or contact list, including adding a name(s) to the address book, removing a name(s) from the address book, associating phone number(s), email address(es), physical address(es) or other information with a name, associating an image with a name, categorizing and classifying names, providing phone numbers or email addresses to initiate and / or facilitate communication by telephone 138, video conference 139, email 140, or IM 141, and the like.

[0068] In conjunction with RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, display system 112, display controller 156, contact module 130, graphics module 132, and text input module 134, telephone module 138 can be used to enter sequences of characters corresponding to telephone numbers, access one or more telephone numbers in address book 137, modify entered telephone numbers, dial telephone numbers, conduct conversations, and disconnect or end conversations when completed. As noted above, wireless communications can use any of a number of communication standards, protocols, and technologies.

[0069] In conjunction with RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, display system 112, display controller 156, optical sensor 164, optical sensor controller 158, contact module 130, graphics module 132, text input module 134, contact list 137, and telephone module 138, video conferencing module 139 can be used to initiate, conduct, and end video conferences between a user and one or more other participants.

[0070] In conjunction with RF circuitry 108, display system 112, display controller 156, contact module 130, graphics module 132, and text input module 134, email client module 140 can be used to generate, send, receive, and manage emails. In conjunction with video management module 144, email module 140 greatly facilitates generating and sending emails along with still or video footage captured by camera module 143.

[0071] In conjunction with RF circuitry 108, display system 112, display controller 156, contact module 130, graphics module 132, and text input module 134, instant messaging module 141 can be used to enter sequences of characters corresponding to instant messages, modify previously entered characters, send instant messages (e.g., using Short Message Service (SMS) or Multimedia Message Service (MMS) protocols), receive instant messages, and view received instant messages. In some embodiments, sent and / or received instant messages can include graphics, photos, audio files, video files, and / or other attachments supported by MMS and / or Enhanced Messaging Service (EMS).

[0072] In conjunction with RF circuitry 108, display system 112, display controller 156, contact module 130, graphics module 132, text input module 134, image management module 144, and browsing module 147, blog module 142 can be used to send text, still images, video, and / or other graphics to a blog (e.g., a user blog).

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

[0074] In conjunction with the display system 112, display controller 156, touch module 130, graphics module 132, text input module 134, and camera module 143, image management module 144 can be used to arrange, modify, otherwise manipulate, label, delete, present (e.g., in a digital slide show or album), and store still and / or video images.

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

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

[0077] In conjunction with RF circuitry 108, display system 112, display system controller 156, contact module 130, graphics module 132, and text input module 134, browser module 147 can be used to browse the Internet, including searching for, linking to, receiving, and displaying web pages or portions thereof, as well as attachments and other files linked to web pages.

[0078] In conjunction with RF circuitry 108, display system 112, display system controller 156, contact module 130, graphics module 132, text input module 134, email module 140, and browser module 147, calendar module 148 can be used to generate, display, modify, and store calendars and calendar-related data (e.g., calendar entries, to-do lists, etc.).

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

[0080] In conjunction with the RF circuitry 108, the display system 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., direct a user-specified portion of a web page to the widget).

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

[0082] Each of the above-described modules and applications corresponds to a set of instructions for performing one or more of the functions described above. These modules (i.e., sets of instructions) need not be implemented as separate software programs, procedures, or modules; thus, various subsets of these modules may be combined or otherwise rearranged in various embodiments. In some embodiments, memory 102 may store a subset of the modules and data structures described above. Additionally, memory 102 may store additional modules and data structures not described above.

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

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

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

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

[0087] In one embodiment, device 100 includes a touchscreen 112, a menu button 204, a pushbutton 206 for powering the device on / off and locking the device, and volume control button(s) 208. Pushbutton 206 can be used to power the device on / off by pressing and holding the button down for a predetermined time interval, lock the device by pressing and releasing the button before the predetermined time interval has elapsed, and / or unlock the device or begin the unlocking process. In another embodiment, device 100 can also accept verbal input to activate or deactivate certain functions through microphone 113.

[0088] Described below are embodiments of user interfaces (UIs) and associated processes that may be implemented on portable multifunction device 100 and device with touchscreen display 1700 (FIG. 17).

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

[0090] In one embodiment, the device detects contact with the touch-sensitive display (e.g., a user's finger touching or near the unlock image 302) while the device is in the user interface locked state. The device moves the unlock image 302 based on the contact. The device transitions to the user interface unlocked state if the detected contact corresponds to a predetermined gesture, such as moving the unlock image across channel 306. Conversely, the device remains in the user interface locked state if the detected contact does not correspond to a predetermined gesture. As noted above, the process of unlocking a device using gestures on a touchscreen is described in U.S. patent application Ser. No. 11 / 322,549, filed Dec. 23, 2005, entitled "Unlocking a Device by Performing Gesture on an Unlock Image," which is incorporated herein by reference.

[0091] 4 illustrates an example user interface for a menu of applications on a portable multifunction device according to one embodiment. In one embodiment, user interface 400 includes the following elements, or a subset or superset thereof: ● A signal strength indicator 402 for wireless communications; ●Time 404, ● Battery status indicator 406, A tray 408 with icons for frequently used applications, such as one or more of the following: ○Telephone 138, An email client 140 that may include an indicator 410 of the number of unread emails; ○ Browser 147, ○Music player 146, and Icons for other applications, such as one or more of the following: ○IM141, ○Video management 144, ○ Camera 143, ○Video player 145, ○Weather 149-1, ○Stock 149-2, ○Blog 142, ○Calendar 148, ○Calculator 149-3, ○Alarm clock 149-4, Dictionary 149-5, and ○User-generated widget 149-6.

[0092] In one embodiment, the UI 400 displays all available applications 136 on one screen, eliminating the need to scroll through the list of applications (e.g., with a scroll bar or swipe gesture). In one embodiment, as the number of applications increases, the size of the icons corresponding to the applications decreases so that all applications can be displayed on a single screen without scrolling. In one embodiment, having all applications on one screen, along with a menu button, allows a user to access a desired application with at most two inputs: activating the menu button 204 (e.g., by tapping or other finger gesture on the icon corresponding to the application) and then activating the desired application.

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

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

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

[0096] As described above, the UI 400 displays all available applications 136 on a single screen, eliminating the need to scroll through a list of applications. However, in some embodiments, the touch-sensitive display may include a GUI with one or more windows that display only a portion of a list of items (e.g., information items) or an electronic document. The list may be scrolled or the electronic document may be translated in response to detecting movement of an object on or near the touch-sensitive display. Detecting object movement may include determining the speed (magnitude), velocity (magnitude and direction), and / or acceleration (including magnitude and / or direction) of the object. Scrolling the list or translating the document may accelerate in response to accelerated movement of the object. In some embodiments, the scrolling and scrolling acceleration or translation and translation acceleration are based on a simulation of a physical device with friction or damped motion. For example, the scrolling or translation corresponds to a simulation of an equation of motion or force law having a mass or inertia term and a dissipation term. In some embodiments, the simulation corresponds to a cylinder rotating about its axis.

[0097] In some embodiments, the detected accelerated movement of the object includes an accelerated movement of the contact point followed by a break in the contact point. For example, a user contacts the touch-sensitive display, swipes or sweeps one or more of their fingers along the display (i.e., moves and / or accelerates the contact point), and optionally breaks contact with the display, i.e., moves the one or more fingers away from the display. The swipe or sweep may be along a predetermined axis of the touch-sensitive display or may be within a predetermined angle in a predetermined direction on the touch-sensitive display. In other embodiments, the accelerated movement of the contact point may include a first user gesture directed along a predetermined axis of the touch-sensitive display or within a predetermined angle in a predetermined direction on the touch-sensitive display.

[0098] The scrolling of the list of items or translational movement of the electronic document may be further accelerated in response to detecting a second movement of an object on or near the touch-sensitive display, such as a second sweeping movement of the contact point along a predetermined axis or within a predetermined angle in a predetermined direction on the touch-sensitive display, and / or a second user gesture directed along a predetermined axis or within a predetermined angle in a predetermined direction on the touch-sensitive display. For example, a user may swipe one or more of their fingers along the touch-sensitive display two or more times.

[0099] The scrolling of a list of items or the translation of an electronic document may be stopped based on the user breaking contact and then establishing a substantially fixed contact with the touch-sensitive display for at least a predetermined period of time. For example, after swiping one or more of their fingers along the touch-sensitive display and breaking contact, the user may touch the display and hold the one or more fingers touching the display in a fixed (or nearly fixed) state for more than one second or less than one second.

[0100] The direction of scrolling or translation can be reversed in response to crossing a virtual boundary corresponding to the end of a list or an edge of the electronic document. Reversing scrolling or reversing translation corresponds to a damped motion. For example, during scrolling, the displayed portion of the list of items appears to bounce off the boundary of the touch-sensitive display window when the beginning or end of the list of items is reached. Similarly, during translation, the displayed portion of the electronic document appears to bounce off the boundary of the touch-sensitive display window when the edge of the document is reached. This apparent bouncing corresponds to a simulation of a sticky or bouncy ball with momentum in a first direction hitting an immobile and / or inelastic object, such as a wall. Subsequent motion of the document (which corresponds to the ball in the analogy) can be damped, for example, by including a friction or dissipation term in the simulation. A parameter corresponding to the friction term in the simulation can be adjusted to cause the document to reach equilibrium in contact with the virtual boundary or to be displaced from the virtual boundary.

[0101] In some embodiments, it is determined that a user moves a contact point over an index on a touch-sensitive display. In some embodiments, the index is displayed in a first area or window of the touch-sensitive display, while a scrolling item or list of information items is displayed in a second area or window of the touch-sensitive display. The displayed index may comprise a series of index items. In the illustrated embodiment, the series of index items may include letters of the alphabet, i.e., the index may comprise an alphabetical index. The list of information items may comprise an alphabetical list of information items. The alphabetical list of information items may include, for example, contact information in a user's contact list or address book.

[0102] A list of information items on the touch-sensitive display can be scrolled in response to moving a user's contact point over a displayed index. The list of information items can include a series of information item subsets corresponding to a series of information items. The subsets can include one or more categories. For example, each category can include contact information for one or more individuals whose first and / or last names begin with one or more respective letters, such as the letter 's'. In the illustrated embodiment, there is a subset corresponding to each letter of the alphabet with one or more entries. In one embodiment, scrolling is based on a simulation of equations of motion with friction.

[0103] The scrolling includes scrolling each information item subset as the touch point moves over each corresponding index item in the index items. The scrolling has an associated scroll speed based on the speed at which the touch point moves over each index item and the number of items in the information item subset corresponding to each index item. For example, the scroll speed is faster for subsets with more entries than for subsets with fewer entries. The scrolling includes scrolling all items in the information item subsets in response to the touch point moving over the corresponding index item in the displayed index.

[0104] If the touch point with the index is determined to correspond to a respective index in the index, the list of information items can be scrolled to the corresponding subset of the list of information items. For example, if the user selects an index item such as the letter 'R' in the set of index symbols, the list of items can be smoothly scrolled to the corresponding subset of the letter 'R' in the list of items. Alternatively, the displayed list of information items can jump directly from the current scroll position to the scroll position where the information item corresponding to index item 'R' is displayed.

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

[0106] When a point of contact with the touch-sensitive display corresponds to a user selection of an information item in the list of information items, information corresponding to each information item can be displayed on the touch-sensitive display, for example, when a user selects a name, corresponding contact information can be displayed.

[0107] An index symbol may be displayed in association with each information item subset while scrolling through each information subset. In some embodiments, each index symbol may be displayed adjacent to the corresponding subset (such as the displayed text) of the list of information items. In some embodiments, each index symbol may be displayed at the top border of a window containing the displayed text of each information item subset.

[0108] An index symbol corresponding to each information subset may be displayed semi-transparently above each information item subset. The semi-transparently displayed symbol may have a different font color than that used to display the text in the information item subset and / or may be displayed using a larger font than the font used to display the text in the information item subset.

[0109] If the list of information items does not include an item for a particular index symbol, i.e., does not include an entry for a particular subset, a first index symbol preceding the particular index symbol and a second index symbol following the particular index symbol may be displayed in association with scrolling the list of information items from the information subset corresponding to the first index symbol to the information subset corresponding to the second index symbol. The particular index symbol is not displayed in association with the displayed text of the list of information items during scrolling. For example, when the list of information items does not include an item for a particular index symbol, the display of each index symbol may be skipped.

[0110] In some embodiments, the scrolling of lists described herein operates without displaying scroll bars. Similarly, in some embodiments, the translation of electronic documents described herein also operates without displaying scroll bars. User sweeping motions for touch-sensitive display operations can be performed directly over a displayed list or a displayed electronic document and include sweeping or gliding motions near or in contact with the surface of the display along a path anywhere within the display window in which the list or electronic document is displayed. Although a scroll bar can potentially be displayed in association with a displayed list, the scrolling or translation described herein can be independent of such a scroll bar. In some embodiments, if a scroll bar is used, an upward movement of the contact point on the scroll bar can cause an earlier entry in the list to be displayed, while a downward movement of the contact point on the scroll bar can cause a later entry in the list to be displayed.

[0111] In some embodiments, scrolling or translation is based on the detected object's movement speed, e.g., the speed of the contact point. This speed may be a time average of values ​​determined during several intervals. In the illustrated embodiment, the speed, velocity, and / or acceleration are determined over five intervals, where each time interval corresponds to the inverse of the display's frame rate, e.g., 0.0167 s. In some embodiments, the speed, velocity, and / or acceleration may be determined even when a variable frame rate is used, e.g., when one or more frames are skipped or not displayed. In these embodiments, the speed, velocity, and / or acceleration may be determined more than once during each time interval and / or may be calculated based on values ​​determined in previous and / or subsequent time intervals.

[0112] In some embodiments, scrolling or translation after a user voluntarily breaks contact is based on the acceleration and speed or change in velocity in one or more time intervals before breaking contact. For example, the velocity vf of scrolling or translation in one or more time intervals after breaking contact can be determined using the following equation: vf=v0+aΔt where v0 is the current value of velocity when contact is broken, a is the current value of acceleration when contact is broken, and Δt is the elapsed time, e.g., one time interval. The velocity and acceleration in such calculations may be calculated along the axis or direction of the scrolling or translation. In some embodiments, the velocity of the scrolling or translation may be tapered in subsequent time intervals after determining the velocity based on the acceleration and / or velocity in one or more time intervals before contact is broken. For example, the velocity may be decreased by 5% in each successive time interval. The velocity may be set to zero when a lower threshold is crossed.

[0113] 5 is a flow chart illustrating a method 500 for scrolling a list according to one embodiment, which provides a simple visual indicator to the user that they have reached the end of the list.

[0114] Movement of an object is detected on or near a touchscreen display of a device 502. In some embodiments, the object is a finger. In some embodiments, the device is a portable multifunction device.

[0115] In response to detecting movement, a list of items displayed on the touchscreen display is scrolled in a first direction (504). In some embodiments, the list is a list of email messages, as shown in FIGS. 6A-6D. In some embodiments, the list of items is a list of instant message conversations, a list of favorite phone numbers, a list of contact information (sometimes referred to as a contact list or address book list), a list of labels, a list of email folders, a list of email addresses, a list of physical addresses, a list of ring tones, a list of album names, or a list of bookmarks. In some embodiments, the first direction is vertical, and in some embodiments, the first direction is horizontal. In some embodiments, scrolling the list in the first direction before reaching the end of the list has an associated scroll speed corresponding to the speed of movement of the object (506). In some embodiments, the list is scrolled based on a simulation of equations of motion with friction (508).

[0116] If the end of the list is reached while scrolling the list in a first direction while an object is still detected on or near the touchscreen display (e.g., the end of the list is reached), an area beyond the end of the list is displayed (510-YES, 514). In some embodiments, the list has a first item and a last item, and the end is either the first item or the last item. For example, in FIG. 6B, email 3534 from Aaron Jones is the first item and therefore the end of the corresponding list of emails. In some embodiments, the area beyond the end of the list is white (516). In some embodiments, the list of items has a background, and the area beyond the end of the list is visually indistinguishable from the background (518). For example, in FIG. 6C, both the background of the listed emails and area 3536 are white.

[0117] After objects are no longer detected on or near the touchscreen display, the list of items is scrolled in a second direction opposite the first direction until the area beyond the end of the list is no longer visible (520). In some embodiments, the list is scrolled in the second direction using a braking motion (522). In some embodiments, switching from scrolling the list in the first direction to scrolling the list in the second direction until the area beyond the end of the list is no longer visible causes the end of the list to appear elastically attached to an edge of the touchscreen display or an edge displayed on the touchscreen display (524).

[0118] In some embodiments, scrolling in a first direction to reach the end of the list has a first associated scroll distance that corresponds to the distance the object is moved to reach the end of the list. For example, the scroll distance to reach the end of the list shown in Figures 6A-6D corresponds to the distance traversed on the touchscreen display by swipe gesture 3514 to reach the end. Displaying an area beyond the end of the list includes scrolling the list in the first direction a second associated scroll distance that is less than the distance the object is moved after reaching the end. For example, in Figure 6C, after reaching the end, the list is scrolled a distance 3538, which is less than the distance traversed on the touchscreen display by swipe gesture 3514 after reaching the end.

[0119] In some embodiments, scrolling in a first direction to reach the end of the list has a first associated scrolling speed that corresponds to the speed of movement of the object. For example, the end-of-list scrolling speed shown in FIGS. 6A-6D corresponds to the speed of the end-of-list swipe gesture 3514 on the touchscreen display. Displaying an area beyond the end of the list includes scrolling the list in the first direction at a second associated scrolling speed. The second associated scrolling speed is slower than the first associated scrolling speed. For example, in FIG. 6C , displaying an area beyond the end of the list 3536 includes scrolling the list at a speed slower than the end-of-list scrolling speed. In some embodiments, the second associated speed is a fraction (e.g., 1 / 2 or 1 / 3) of the first associated speed. In some embodiments, the second associated speed is the square root of the first associated speed.

[0120] If the end of the list is not reached while scrolling the list in the first direction while the object is still detected on or near the touchscreen display, then process 500 is complete (510-NO, 512). Process 500 is resumed when another movement of the object is subsequently detected on or near the touchscreen display (502).

[0121] 6A-6D illustrate scrolling a list of items to the end of the list, at which point the area beyond the end is displayed, and then scrolling the list backward until the area beyond the end is no longer displayed, according to one embodiment. While FIGS. 6A-6D illustrate this scrolling in the context of portable multifunction device 100, this scrolling is not limited to portable multifunction devices. In the example of FIGS. 6A-6D, the listed items are email messages, and FIGS. 6A-6D illustrate user interface 3500A for managing an inbox, according to one embodiment. Similar user interfaces can also be used to view and manage other mailboxes (e.g., Drafts, Sent, Trash, Personal, etc.). Additionally, other types of lists are contemplated, including, but not limited to, a list of instant message conversations, a list of favorite phone numbers, a list of contact information, a list of labels, a list of email folders, a list of email addresses, a list of physical addresses, a list of ringtones, a list of album names, or a list of bookmarks.

[0122] In one embodiment, user interface 3500A includes the following elements, or a subset or superset thereof: - 402, 404 and 406 mentioned above; a generate email icon 3310 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a UI for generating a new email message; • A mailbox icon 3502 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a UI listing email mailboxes (i.e., folders); ● Unread message icon 3504, which displays the number of unread messages in your inbox; ● The name of the sender of the email message 3506; ● the subject line 3508 of the email message; ● Date of email message 3510, ● Unread message icon 3512, which indicates an unopened message; • A preview pane separator 3518 that separates the list of messages from a preview of a selected message in the list; ● A settings icon 3520 that, when activated (e.g., by tapping the icon with a finger), initiates display of a UI for changing settings; ● A message move icon 3522 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a UI for moving messages; a symbolic delete icon 3524 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a UI confirming that the user wants to delete the selected email; • Reply / Send icon 3526 that, when activated (eg, by tapping the icon with a finger), initiates the display of a UI for selecting how to reply to or send the selected email.

[0123] If the list of emails fills more than the allotted screen area, the user can scroll through the emails using vertically upward and / or vertically downward swipe gestures on the touchscreen. In the example of FIG. 6A , a portion of the list of emails is displayed in the screen area, including a top-displayed email 3530 from Bruce Walker and a bottom-displayed email 3532 from Kim Brook. The user performs a vertically downward swipe gesture 3514 to scroll toward the top of the list. The vertically downward gesture 3514, which may be a finger gesture, corresponds to movement on or near the touchscreen detected in operation 502 of process 500 ( FIG. 5 ). The vertically downward gesture 3514 need not be strictly vertical; a substantially vertical gesture will suffice. In some embodiments, a gesture within a predetermined angle of full vertical will cause vertical scrolling. In some embodiments, a gesture within 27° of full vertical will cause vertical scrolling.

[0124] As a result of detecting the vertical downward gesture 3514, in Figure 6B, the displayed emails shift downward, so that the previously lowest displayed email 3532 from Kim Brook is no longer displayed, the previously highest displayed email 3530 from Bruce Walker is now second to the top, and the email 3534 from Aaron Jones, which was not displayed in Figure 6A, is now displayed at the top of the list. This shifting of emails is an example of the scrolling described in operation 504 of process 500 (Figure 5).

[0125] In this example, email 3534 from Aaron Jones is the first email in the list and is therefore at the end of the list. When this email 3534 is reached, in response to continued detection of vertically downward gesture 3514, area 3536 (FIG. 6C) above the first email 3534 (i.e., beyond the end of the list) is displayed, as described at operation 514 of process 500 (FIG. 5). In one embodiment, the area displayed beyond the end of the list is visually indistinguishable from the background of the list, as described at operation 518 of process 500 (FIG. 5). In FIG. 6C, both area 3536 and the background of the emails (e.g., emails 3534 and 3530) are white and therefore visually indistinguishable.

[0126] Once vertically downward gesture 3514 is completed and the corresponding object is no longer detected on or near the touchscreen display, the list is scrolled backward until area 3536 is no longer displayed. Figure 6D shows the result of this backward scrolling, which corresponds to operation 520 of process 500 (Figure 5), i.e., email 3534 from Aaron Jones is now displayed at the top of the screen area allocated to the list, and area 3536 is no longer displayed.

[0127] 6A-6D, a vertically downward gesture causes the display of an area beyond the first item in the list. Similarly, a vertically upward gesture causes the display of an area beyond the last item in the list if the vertically upward gesture is continued when the list is scrolled to the last item. The last item, like the first item, is considered the end of the list. As noted above, a gesture need not be strictly vertical to cause vertical scrolling; a gesture within a certain angle of perfect verticality is sufficient.

[0128] In some embodiments, rather than scrolling a list of items in one dimension, a user may wish to translate an electronic document in two dimensions. If an electronic document fills more than the screen allocated for displaying the document, the screen will only display a portion of the document. The user can translate the electronic document to view portions of the document that are not initially displayed.

[0129] 7 is a flowchart illustrating a method 700 for translating an electronic document according to one embodiment. The method 700 provides a simple visual indicator to the user that one or more edges of the electronic document are being displayed. Movement of an object is detected (702) on or near a touchscreen display of a device. In one embodiment, the object is a finger. In one embodiment, the device is a portable multifunction device.

[0130] In response to detecting the movement, an electronic document displayed on the touchscreen display is translated in a first direction (704). In some embodiments, the electronic document is a web page, as shown in FIGS. 8A-8D. In some embodiments, the electronic document is a digital image. In some embodiments, the electronic document is a word processing, spreadsheet, email, or presentation document. In some embodiments, the first direction is vertical, horizontal, or diagonal. In some embodiments, the first direction corresponds to, but is not necessarily identical to, the direction of movement of an object detected on or near the display.

[0131] In some embodiments, translating the electronic document in a first direction until an edge of the electronic document is reached has an associated translation speed corresponding to the speed of movement of the object (706). In some embodiments, the electronic document is translated based on a simulation of equations of motion with friction (708).

[0132] If an edge of the electronic document is reached while translating the electronic document in a first direction while an object is still detected on or near the touchscreen display (e.g., upon reaching the edge of the document), the area beyond the edge of the electronic document is displayed (710-YES, 714). In some embodiments, the area beyond the edge of the electronic document is black, gray, a solid color, or white (716). In some embodiments, the area beyond the edge of the electronic document is visually distinct from the document (718). For example, in FIG. 8C , the area 3930 beyond the edge of web page 3912 is black, in contrast to the white background of web page 3912. In other embodiments, a wallpaper image, such as a picture or pattern, is displayed in the area beyond the edge of the electronic document.

[0133] After the object is no longer detected on or near the touchscreen display, the electronic document is translated in a second direction until the area beyond the edge of the electronic document is no longer displayed (720). For example, in FIG. 8D , web page 3912 is translated so that area 3930 beyond its edge is no longer displayed. In some embodiments, the second direction is opposite to the first direction. In some embodiments, the electronic document is translated in the second direction using a braking motion (722). In some embodiments, switching from translating the electronic document in the first direction to translating the electronic document in the second direction until the area beyond the edge of the electronic document is no longer displayed causes the edges of the electronic document to appear elastically attached to the edges of the touchscreen display or edges displayed on the touchscreen display (724).

[0134] In some embodiments, translating in a first direction until reaching an edge of the electronic document has a first associated translation distance corresponding to the distance the object moved until reaching the edge of the electronic document. For example, the translation distance of web page 3912 shown in FIGS. 8A-8D until reaching the edge of the document corresponds to the distance traversed on the touchscreen display by swipe gesture 3925 until reaching the edge. In some embodiments, displaying an area beyond the edge of the electronic document includes translating the electronic document in the first direction a second associated translation distance, where the second associated translation distance is less than the distance the object moved after reaching the edge of the electronic document. For example, in FIG. 8C , after reaching the edge, web 3912 is translated the distance indicated by opposing arrows 3928-1 and 3928-2, which is less than the distance traversed on the touchscreen display by swipe gesture 3925 after reaching the end.

[0135] In some embodiments, translating in a first direction until reaching an edge of the electronic document has a first associated translation speed corresponding to the speed of movement of the object. For example, the translation speed until reaching the edge of web page 3912 shown in FIGS. 8A-8D corresponds to the movement speed of swipe gesture 3925. Displaying an area beyond the edge of the electronic document includes translating the electronic document in the first direction at a second associated translation speed. The second associated translation speed is slower than the first associated translation speed. For example, in FIG. 8C , displaying area 3930 beyond the edge of web page 3912 includes translating web page 3912 at a speed slower than the translation speed until reaching the edge. In some embodiments, the second associated speed is a fraction (e.g., ½ or ⅓) of the first associated speed. In some embodiments, the second associated speed is the square root of the first associated speed.

[0136] If the edge of the electronic document is not reached while scrolling the electronic document in the first direction while the object is still detected on or near the touchscreen display, process 700 is completed (710-NO, 712). Process 700 is resumed when another movement of the object is subsequently detected on or near the touchscreen display (702).

[0137] 8A-8D illustrate translating an electronic document to an edge of the document, at which point the area beyond the edge is displayed, and then translating the document in a second direction until the area beyond the edge of the document is no longer displayed, according to one embodiment. While FIGS. 8A-8D illustrate this translation in the context of portable multifunction device 100, this translation is not limited to portable multifunction devices. In the example of FIGS. 8A-8D, the document is a web page 3912, and FIGS. 8A-8D illustrate a user interface for a browser, according to one embodiment. Similar user interfaces can be used to display other types of electronic documents, such as word processing, spreadsheet, email, presentation documents, or digital images.

[0138] In one embodiment, the user interface 3900A of FIGS. 8A-8D includes the following elements, or a subset or superset thereof: - 402, 404 and 406 mentioned above; a previous page icon 3902 that, when activated (e.g., by tapping the icon with a finger), begins displaying the previous web page; ●Web page name 3904, a next page icon 3906 that, when activated (e.g., by tapping the icon with a finger), begins displaying the next web page; ● A URL (Uniform Resource Locator) entry box 3908 for entering the URL of a web page; ● A refresh icon 3910 that, when activated (e.g., by tapping the icon with a finger), initiates a refresh of the web page; ● A web page 3912 or other structured document formed of blocks 3914 of textual content and other graphics (e.g., video); ● A settings icon 3916 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a settings menu for the browser; ● A bookmark icon 3918 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a bookmarks list or menu for the browser; an add bookmark icon 3920 that, when activated (e.g., by tapping the icon with a finger), initiates the display of a UI for adding a bookmark; and • A new window icon 3922 that, when activated (eg, by tapping the icon with a finger), initiates the display of a UI for adding a new window to the browser.

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

[0140] 8A, the web page fills more than the allocated screen area, i.e., only the left side of block 7 (3914-7) and block 8 (3914-8) are visible, and only the upper left corner of block 9 (3914-9) is visible. To view the partially displayed blocks, a user can translate the displayed document using gestures on the touchscreen, according to one embodiment.

[0141] In some embodiments, in response to a user's substantially vertical upward (or downward) swipe gesture, a web page (or, more generally, other electronic document) may be translated vertically upward (or downward) in one dimension. In some embodiments, a gesture is considered substantially vertical if it is within a predetermined angle from perfectly vertical. For example, in response to a user's upward swipe gesture that is within a predetermined angle (e.g., 27°) from perfectly vertical, a web page may be scrolled vertically upward in one dimension.

[0142] Conversely, in some embodiments, in response to a gesture that is not within a predetermined angle (e.g., 27°) from perfectly vertical, the web page may translate two-dimensionally (i.e., moving both vertically and horizontally simultaneously). For example, in response to a user swipe-up gesture that is not within a predetermined angle (e.g., 27°) from perfectly vertical, the web page may translate two-dimensionally along the direction of the swipe.

[0143] In the example of FIG. 8A , the upward swipe gesture 3925 is not within a predetermined angle of perfect vertical. Therefore, detecting the upward swipe gesture 3925 results in the web page being translated in two dimensions. In this example, the translation is approximately diagonal. FIG. 8B shows the result of this translation: blocks 8 (3914-8) and 9 (3914-9) are now fully displayed, blocks 1 (3914-1) and 2 (3914-2) are now only partially displayed, and block 3 (3914-3) is no longer displayed at all. This translation is an example of the translation described in operation 704 of process 700 ( FIG. 7 ).

[0144] In Figure 8B, block 9 (3914-9) is in the lower right corner of web page 3912 and reaches the bottom and right edges of the web page during translation of the web page. Upon reaching these edges of the document, area 3930 (Figure 8C) beyond the bottom and right edges of the web page is displayed in response to continued detection of up gesture 3925. In one embodiment, the area displayed beyond the edges of the electronic document is visually distinct from the document, as described in operation 718 of process 700 (Figure 7). In Figure 8C, area 3930 is black and therefore visually distinct from the white background of web page 3912.

[0145] Once the upward gesture 3925 is completed and the corresponding object is no longer detected on or near the touchscreen display, the web page 3912 is translated (e.g., in the opposite direction from the original translation) until the area 3930 is no longer displayed. Figure 8D shows the result of this transformation, which corresponds to operation 720 of process 700 (Figure 7), i.e., block 9 (3914-9) is now displayed in the lower right corner of the portion of the screen allocated for displaying the web page 3912, and the area 3930 is no longer displayed. In some embodiments, the direction of translation is not necessarily the opposite of the original direction, but can be any direction such that the area beyond the edge of the electronic document is no longer displayed when the translation is completed.

[0146] 9 is a flowchart illustrating a process 900 for displaying an electronic document having a document length and a document width according to one embodiment, which provides a simple visual indicator to the user that the electronic document is being displayed at a minimum magnification (e.g., the electronic document cannot be zoomed out and / or reduced further).

[0147] Process 900 is performed on a device having a touchscreen display. In some embodiments, the device is a portable multifunction device. In some embodiments, the electronic document is a web page (e.g., web page 3912 in Figures 10A-10C). In some embodiments, the electronic document is a digital image. In some embodiments, the electronic document is a word processing, spreadsheet, email, or presentation document.

[0148] An electronic document is displayed at a first magnification on a touchscreen display 902. A gesture corresponding to a command to zoom out by a user-specified amount is detected on or near the touchscreen display 904. In some embodiments, the gesture is a pinching gesture (e.g., gestures 3951 / 3953, FIG. 10A).

[0149] In response to detecting the gesture, the electronic document is displayed at a magnification level lower than the first magnification level 906. For example, web page 3912 is shown at a lower magnification level in Figure 10B than in Figure 10A.

[0150] If neither the document length nor the document width is fully displayed while a gesture is still detected on or near the touchscreen display (908-NO), then the process 900 is complete (910).

[0151] However, if the document length (e.g., 3957, FIG. 10B) or document width (e.g., 3959, FIG. 10B) is fully displayed (908-YES) while a gesture (e.g., 3951 / 3953) is still detected on or near the touchscreen display, the electronic document is displayed at a magnification that displays an area beyond the opposing edge of the electronic document (e.g., area 3955, FIG. 10B) (912).

[0152] In some embodiments, the areas beyond the opposing edges of the electronic document include an area beyond the top edge of the document and an area beyond the bottom edge of the document. In some embodiments, the areas beyond the opposing edges of the electronic document include an area beyond the right edge of the document and an area beyond the left edge of the document. In some embodiments, the areas beyond the opposing edges of the electronic document include an area beyond the top edge of the document, an area beyond the bottom edge of the document, an area beyond the right edge of the document, and an area beyond the left edge of the document (e.g., FIG. 10B).

[0153] In some embodiments, the areas beyond the opposing edges of the electronic document are black, gray, a solid color, or white. In some embodiments, the areas beyond the opposing edges of the electronic document are visually distinct from the document. For example, area 3955 (FIG. 10B) is black and therefore visually distinct from web page 3912.

[0154] Upon detecting the end of the gesture, the electronic document is displayed 914 at a magnification where areas beyond the opposing edges of the electronic document are no longer displayed, e.g., area 3955 in Figure 10C is not displayed.

[0155] 10A-10C illustrate displaying an electronic document at multiple magnifications according to one embodiment. While FIGS. 10A-10C illustrate these multiple magnifications in the context of portable multifunction device 100, these multiple magnifications are not limited to portable multifunction devices. In the example of FIGS. 10A-10C, the document is a web page 3912, and FIGS. 10A-10C (similar to FIGS. 8A-8D) illustrate a user interface for a browser according to one embodiment. Similar user interfaces can be used to display other types of electronic documents, such as digital images or word processing, spreadsheet, email, or presentation documents.

[0156] 10A, web page 3912 is displayed at a first magnification factor. Web page 3912 fills more than the allocated screen area, so that only the left sides of block 7 (3914-7) and block 8 (3914-8) are visible, and only the upper left corner of block 9 (3914-9) is visible.

[0157] In response to detecting pinch-in gesture 3951 / 3953 (FIG. 10A), the web page is displayed at a magnification lower than the first magnification, as shown in FIG. 10B. If document length 3957 or document width 3959 is fully displayed while gesture 3951 / 3953 is still detected, area 3955 beyond the opposing edge of web page 3912 is displayed. Upon detecting the end of gesture 3951 / 3953, web page 3912 is displayed at a magnification where area 3955 is no longer displayed, as shown in FIG. 10C.

[0158] 11 is a flowchart illustrating a process 1100 for displaying an electronic document at multiple magnifications according to one embodiment, which provides a simple visual indicator to the user that the electronic document is being displayed at maximum magnification (e.g., the electronic document cannot be zoomed in and / or further enlarged).

[0159] Process 1100 is performed on a device having a touchscreen display. In some embodiments, the device is a portable multifunction device. In some embodiments, the electronic document is a web page (e.g., web page 3912, Figures 12A-12C). In some embodiments, the electronic document is a digital image (e.g., digital image 1302, Figures 13A-13C). In some embodiments, the electronic document is a word processing, spreadsheet, email, or presentation document.

[0160] At least a first portion of an electronic document is displayed at a first magnification 1102. A gesture corresponding to a command to zoom in by a user-specified amount is detected on or near the touchscreen display 1104. In some embodiments, the gesture is a de-pinching gesture (e.g., 3931 / 3933, FIGS. 12A and 13A).

[0161] In response to detecting the gesture, decreasing portions of the electronic document are displayed at increasing magnification 1106. For example, in Figure 12B, a decreased portion of web page 3912 is displayed at a higher magnification than the portion in Figure 12A, and in Figure 13B, a decreased portion of digital image 1302 is displayed at a higher magnification than the portion in Figure 13A.

[0162] If the magnification does not exceed the predetermined magnification when the end of the gesture is detected (1108-NO), the process 1100 is complete (1110).

[0163] However, if the magnification exceeds the predetermined magnification (1108—YES) when the end of the gesture is detected, then the portions of the electronic document are displayed at the predetermined magnification (1112). In the examples of Figures 12B and 13B, the magnification exceeds the predetermined magnification. Upon detecting the end of gesture 3931 / 3933, a portion of web page 3912 is displayed at the predetermined magnification, as shown in Figure 12C, and a portion of digital image 1302 is displayed at the predetermined magnification, as shown in Figure 13C.

[0164] In one embodiment, immediately prior to detecting the end of the gesture, at least a reduced portion of the electronic document is displayed at a first resolution, and upon detecting the end of the gesture, each portion of the electronic document is displayed at a second resolution that is higher than the first resolution.

[0165] 12A-12C illustrate displaying an electronic document at multiple magnifications according to some embodiments. While FIGS. 12A-C illustrate these multiple magnifications in the context of portable multifunction device 100, these multiple magnifications are not limited to portable multifunction devices. In the example of FIGS. 12A-12C, the document is a web page 3912, and FIGS. 12A-12C (similar to FIGS. 8A-8D) illustrate a user interface for a browser according to some embodiments. Similar user interfaces can be used to display other types of electronic documents, such as digital images or word processing, spreadsheet, email, or presentation documents.

[0166] 12A, a first portion of web page 3912 is displayed at a first magnification factor. Web page 3912 fills more than the allocated screen area, with only the left sides of block 7 (3914-7) and block 8 (3914-8) visible, and only the upper left corner of block 9 (3914-9) visible.

[0167] In response to detecting pinch out gesture 3931 / 3933 (FIG. 12A), decreasing portions of web page 3912 are displayed at increasing magnifications relative to the magnification shown in FIG. 12A. For example, the portion of web page 3912 shown in FIG. 12B is smaller than and has a higher magnification than the portion of web page 3912 shown in FIG. 12A.

[0168] In the example of Figure 12B, the magnification exceeds the default magnification. Upon detecting the end of gesture 3931 / 3933, the portion of web page 3912 is displayed at the default magnification, as shown in Figure 12C.

[0169] 13A-13C illustrate the display of an electronic document at multiple magnifications according to one embodiment. While Figures 13A-13C illustrate these multiple magnifications in the context of a portable multifunction device 100, these multiple magnifications are not limited to portable multifunction devices. In the example of Figures 13A-13C, the document is a digital image 1302 containing an image of an individual 1304.

[0170] In Figure 13A, digital image 1302 is displayed at a first magnification. In response to detecting pinch out gestures 3931 / 3933, decreasing portions of digital image 1302 are displayed at increasing magnifications relative to the magnification shown in Figure 13A. For example, the portion of digital image 1302 shown in Figure 13B is smaller than, and has a higher magnification than, the portion of digital image 1302 shown in Figure 13A.

[0171] In the example of Figure 13B, the magnification exceeds the default magnification. Upon detecting the end of gesture 3931 / 3933, a portion of digital image 1302 is displayed at the default magnification, as shown in Figure 13C.

[0172] 14 is a flow chart illustrating a process 1400 for executing a screen rotation command according to one embodiment, which provides a simple visual indicator to the user that the user has not made enough gestures to initiate a 90° screen rotation command.

[0173] Process 1400 is performed on a device having a touchscreen display. In one embodiment, the device is a portable multifunction device.

[0174] A multi-finger twisting gesture (e.g., 1506, FIG. 15A, or 1508, FIG. 15C) is detected 1402 on or near the touchscreen display. The multi-finger twisting gesture has a corresponding degree of rotation. In one embodiment, the multi-finger twisting gesture includes a gesture with two thumbs 1604-L and 1604-R (FIGS. 16A and 16D).

[0175] If the corresponding rotation degree exceeds the specified rotation degree (1404-YES), a 90° screen rotation command is executed 1406. For example, the digital image 1502 of Figures 15A and 16A is rotated from portrait to landscape orientation as shown in Figures 15B and 16B, respectively.

[0176] If the corresponding rotation degree does not exceed the specified rotation degree (1404-NO), a screen rotation command with an acute angle rotation (i.e., less than 90°) is executed (1408). For example, the digital images 1502 of Figures 15C and 16D are rotated at an acute angle as shown in Figures 15D and 16E, respectively. In response to detection of the multi-finger twisting gesture ceasing, a screen rotation command with a rotation angle opposite to the acute angle is executed (1410) (e.g., the results of which are shown in Figures 15E and 16F).

[0177] 15A-15E illustrate rotating a view of an electronic document or other digital object according to one embodiment. While FIGS. 15A-15E illustrate rotating a view in the context of a portable multifunction device 100, display rotation is not limited to portable multifunction devices. In the example of FIGS. 15A-15E, the electronic document is a digital image 1502.

[0178] 15A and 15C, a digital image 1502 is displayed in portrait orientation. A multi-finger twisting gesture 1506 (FIG. 15A) or 1508 (FIG. 15C) is detected on a touchscreen display. The multi-finger twisting gesture 1506 or 1508 has a corresponding degree of rotation. In one embodiment, the degree of rotation corresponds to a degree of rotation about an axis between contact points on the touchscreen display of two fingers in the multi-finger gesture (e.g., an axis between the center points or centroids of the contact areas of the two fingers).

[0179] In the example of FIG. 15A , a multi-finger twisting gesture 1506 corresponds to a rotation that exceeds the specified rotation. Therefore, a 90° screen rotation command is executed, resulting in the digital image being displayed in landscape orientation, as shown in FIG. 15B . However, in the example of FIG. 15C , a multi-finger twisting gesture 1508 corresponds to a rotation that does not exceed the specified rotation. A screen rotation command having an acute angle of rotation is executed, the result of which is shown in FIG. 15D . In response to detection of the multi-finger twisting gesture 1508 ceasing, a screen rotation command with an angle opposite to the acute angle is executed, resulting in the digital image 1502 being restored to portrait orientation, as shown in FIG. 15E .

[0180] 16A-16F illustrate a screen rotation gesture according to one embodiment. While FIGS. 16A-16F show the screen rotation gesture in the context of portable multifunction device 100, the screen rotation gesture is not limited to portable multifunction devices. In the example of FIGS. 16A-16F, the screen rotation gesture is used to rotate digital image 1502.

[0181] In Figure 16A, device 100 displays digital image 1502 in portrait orientation. The simultaneous rotation of two fingers (e.g., 5704-L and 5704-R) in a first rotational direction is detected on touchscreen display 112. In one embodiment, the first rotational direction is clockwise rotation (e.g., Figure 16C). The simultaneous rotation of two thumbs has a corresponding degree of rotation.

[0182] In some embodiments, the direction of rotation of each thumb is detected by monitoring changes in the orientation of the contact area between the thumb and the touchscreen display. For example, if the thumb contact area is an ellipse, a change in the orientation of the ellipse's axis is detected (e.g., from contact ellipse 1606-L in FIG. 16A to contact ellipse 1608-L in FIG. 16B, as shown in the enlarged portion of touchscreen 112 in FIG. 16C). In some embodiments, the change in the orientation of the ellipse's axis determines a corresponding degree of rotation. In some embodiments, at least some of the user's other fingers (i.e., fingers other than thumbs 1604-L and 1604-R) support device 100 by contacting the back of the device.

[0183] In one embodiment, the first rotation direction is counterclockwise rotation. For example, if thumb 1604-L is initially on the lower left side of touchscreen 112 (rather than the upper left side of FIG. 16A ) and thumb 1604-R is initially on the upper right side of touchscreen 112 (rather than the lower right side of FIG. 16A ), and the thumbs are moved away from each other, the direction of rotation detected by touchscreen 112 will be counterclockwise relative to the thumbs.

[0184] If the corresponding rotation exceeds the specified rotation, a 90° screen rotation command is executed, for example, rotating the display of digital image 1502 from portrait orientation in Figure 16A to landscape orientation in Figure 16B.

[0185] However, if the corresponding rotation degree does not exceed the specified rotation degree, a screen rotation command having an acute angle of rotation is executed. For example, digital image 1502 in Figure 16D is rotated at an acute angle, the result of which is shown in Figure 16E. In response to the detection of two thumbs 1604-L and 1604-R ceasing, a screen rotation command having a rotation angle opposite to the acute angle is executed, restoring digital image 1502 to a portrait orientation as shown in Figure 16F.

[0186] 6A-6D, 8A-8D, 10A-10C, 12A-12C, 13A-13C, 15A-15E, and 16A-16F illustrate scrolling, translation, scaling, and rotation operations in the context of portable multifunction device 100, although similar operations can be performed in any device having a touchscreen display according to some embodiments. Devices such as device 1700 below may or may not be portable, and the function(s) performed by the device may vary.

[0187] FIG. 17 is a block diagram illustrating a device 1700 with a touchscreen display according to one embodiment. The device 1700 does not have to be portable. The device 1700 typically includes one or more processing units (CPUs) 1710, one or more network or other communication interfaces 1760, memory 1770, and one or more communication buses 1720 for interconnecting these components. The communication bus 1720 may include circuitry (sometimes referred to as a chipset) that interconnects and controls communication between the system components. The device 1700 includes a user interface 1730 that includes a touchscreen display 1740. The user interface 1730 may also include a keyboard and / or a mouse (or other pointing device) 1750. Memory 1770 may include high-speed random-access memory, such as DRAM, SRAM, DDR RAM, or other random-access solid-state memory devices, and may also include non-volatile memory, such as one or more magnetic disk storage devices, optical disk storage devices, flash memory devices, or other non-volatile solid-state storage devices. Memory 1770 may optionally include one or more storage devices located remotely from CPU 1710. In one embodiment, memory 1770 stores programs, modules, and data structures similar to these programs, modules, and data structures stored in memory 102 of portable multifunction device 100 (FIG. 1), or a subset thereof. Memory 1770 may also store additional programs, modules, and data structures (not shown) that are not present in the memory of portable multifunction device 100.

[0188] Each of the elements of Figure 17 may be stored in one or more of the memory devices described above. Each of the modules corresponds to a set of instructions for performing a function described above. The modules or programs (i.e., sets of instructions) need not be implemented as separate software programs, procedures, or modules; thus, various subsets of these modules may be combined or otherwise rearranged in various embodiments. In some embodiments, memory 1770 may store a subset of the modules and data structures described above. Additionally, memory 1770 may store additional modules and data structures not described above.

[0189] The present invention has been described in detail with reference to specific embodiments. However, the description is not exhaustive and is not intended to limit the invention to the precise form. Many variations and modifications are possible in light of the above teachings. The embodiments were chosen and described in order to best explain the principles of the invention and its practical application. Those skilled in the art will be able to best utilize the invention and its various embodiments with various modifications as suited to the particular use intended. [Explanation of symbols]

[0190] 100:Portable multifunction device 102: Memory 106: I / O subsystem 108:RF circuit 110: Audio circuit 111: Speaker 112: Touch-sensitive display system 113: Microphone 116: Other input control devices 118: Peripheral interface 120: Processor 122: Controller 124: External port 126: Operating System 128: Communication module 130: Contact / Movement Module 132: Graphics module 134: Text input module 135: GPS module 136: Application 137: Contacts module 138: Telephone module 139: Videoconferencing module 140: Email client module 141: Instant messaging module 142: Blog module 143: Camera module 144: Video management module 145: Video player module 146: Music player module 147: Browsing module 148: Calendar module 149: Widget module 149-1: Weather widget 149-2: Stock widget 149-3: Calculator widget 149-4: Alarm Clock Widget 149-5: Dictionary widget 149-6: User-generated widgets 150: Widget Creator Module 151: Search module 156: Display controller 158: Optical sensor controller 160: Other input controllers 162: Power System 164: Optical sensor 166: Proximity sensor 1700: Equipment 1710:CPU 1730: User Interface 1740: Touchscreen display 1750:Keyboard / Mouse 1760: Network communication interface 1770:Memory

Claims

1. 1. A computer-implemented method comprising: In an electronic device having a display, displaying, with the display, at least a first portion of first content at a first magnification; Detecting a gesture corresponding to a command to resize the first portion of the first content by a user-specified amount; In response to detecting the gesture, changing a magnification of the first portion of the first content to a second magnification different from the first magnification, and displaying the first portion on the display; detecting an end of the gesture while displaying the first portion of the first content at the second magnification in accordance with the gesture; In response to detecting an end of the gesture, pursuant to determining that the second scale factor exceeds a predetermined scale factor, displaying, by the display, the first portion of the first content at the predetermined scale factor, the predetermined scale factor being different from the first scale factor and the second scale factor and greater than the first scale factor; A method comprising:

2. In response to detecting an end of the gesture, maintaining display of the first portion of the first content at the second magnification in accordance with a determination that the second magnification does not exceed the predetermined magnification; The computer-implemented method of claim 1 further comprising:

3. displaying the first portion of the first content at the second magnification includes displaying the first portion of the first content at a first resolution; displaying the first portion of the first content at the predetermined magnification includes displaying the first portion of the first content at a second resolution higher than the first resolution. The computer-implemented method of claim 2.

4. The computer-implemented method of claim 1 , wherein the gesture comprises a pinch-out gesture.

5. The computer-implemented method of claim 1 , wherein the electronic device is a portable multifunction device.

6. The computer-implemented method of claim 1 , wherein the first content comprises a web page.

7. The computer-implemented method of claim 1 , wherein the first content comprises a digital image.

8. The computer-implemented method of claim 1 , wherein the first content comprises a word processing document, a spreadsheet document, an email, or a presentation document.

9. The computer-implemented method of claim 1 , wherein the predetermined scaling factor is less than the second scaling factor.

10. A computer program product for causing a computer to carry out the computer-implemented method of any one of claims 1 to 9.

11. a memory storing the computer program according to claim 10; one or more processors capable of executing computer programs stored in said memory; An electronic device comprising:

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

Images