PATENT DOCUMENT

Publication Number: US-11604559-B2
Application Number: US-202117321313-A
Country: US
Kind Code: B2

Title: Editing interface

Abstract:
A portable electronic device displays icons (e.g., graphical objects) in one or more regions of a user interface of a touch-sensitive display, and detects user input specifying an exchange of positions of icons in the user interface. In some aspects, the respective positions of two icons in a user interface can be selected to exchange positions in the one or more regions of the user interface, and one or both icons can change their visual appearance to indicate their selection status.

Claims:
What is claimed: 
     
       1. A method comprising:
 at a portable electronic device with a touch-sensitive display:
 displaying a first icon in a first position on the touch-sensitive display at a first size; 
 displaying a second icon in a second position on the touch-sensitive display, the second position distinct from the first position and the second icon is displayed at the first size; 
 detecting a touch input on the touch-sensitive display corresponding to the second icon at the second position on the touch-sensitive display; and 
 while continuing to detect, the touch input on the touch-sensitive display corresponding to the second icon in the second position on the touch-sensitive display:
 detecting a movement of the touch input on the touch-sensitive display from the second position on the touch-sensitive display to a third position on the touch-sensitive display; and 
 in response to detecting the movement of the touch input on the touch-sensitive display from the second position on the touch-sensitive display to the third position on the touch-sensitive display, displaying movement of second icon from the second position on the touch-sensitive display to the third position on the touch-sensitive display while continuing to display the first icon at the first size during the movement of the second icon, wherein second icon is displayed at a second size, different than the first size, during the movement of the second icon. 
 
 
 
     
     
       2. The method of  claim 1 , further comprising:
 in response to ceasing to detect the touch input on the touch-sensitive display corresponding to the second icon at the second position of the touch-sensitive display, displaying the first icon at the first size and displaying the second icon at the first size. 
 
     
     
       3. The method of  claim 1 , wherein the first size is smaller than the second size. 
     
     
       4. The method of  claim 1 , further comprising:
 in response to detecting the movement of the touch input on the touch-sensitive display from the second position on the touch-sensitive display to the third position on the touch-sensitive display, modifying a visual appearance of the third position. 
 
     
     
       5. The method of  claim 4 , wherein modifying the visual appearance of the third position comprises displaying a graphical indicator corresponding to a boundary of the third position. 
     
     
       6. The method of  claim 1 , wherein prior to detecting the movement of the touch input on the touch-sensitive display from the second position on the touch-sensitive display to the third position on the touch-sensitive display, further comprising:
 in response to detecting the touch input on the touch-sensitive display corresponding to the second icon at the second position of the touch-sensitive display:
 entering an icon reconfiguration mode; and 
 displaying the second icon at the second size. 
 
 
     
     
       7. A portable electronic device comprising:
 a touch-sensitive display; 
 one or more processors; and 
 memory storing one or more programs configured to be executed by the one or more processors, the one or more programs including instructions for:
 displaying a first icon in a first position on the touch-sensitive display at a first size; 
 displaying a second icon in a second position on the touch-sensitive display, the second position distinct from the first position and the second icon is displayed at the first size; 
 detecting a touch input on the touch-sensitive display corresponding to the second icon at the second position on the touch-sensitive display; and 
 while continuing to detect the touch input on the touch-sensitive display corresponding to the second icon in the second position on the touch-sensitive display:
 detecting a movement of the touch input on the touch-sensitive display from the second position on the touch-sensitive display to a third position on the touch-sensitive display; and 
 in response to detecting the movement of the touch input on the touch-sensitive display from the second position on the touch-sensitive display to the third position on the touch-sensitive display, displaying movement of second icon from the second position on the touch-sensitive display to the third position on the touch-sensitive display while continuing to display the first icon at the first size during the movement of the second icon, wherein second icon is displayed at a second size, different than the first size, during the movement of the second icon. 
 
 
 
     
     
       8. The portable electronic device of  claim 7 , the one or more programs further including instructions for:
 in response to ceasing to detect the touch input on the touch-sensitive display corresponding to the second icon at the second position of the touch-sensitive display, displaying the first icon at the first size and displaying the second icon at the first size. 
 
     
     
       9. The portable electronic device of  claim 7 , wherein the first size is smaller than the second size. 
     
     
       10. The portable electronic device of  claim 7 , the one or more programs further including instructions for:
 in response to detecting the movement of the touch input on the touch-sensitive display from the second position on the touch-sensitive display to the third position on the touch-sensitive display, modifying a visual appearance of the third position. 
 
     
     
       11. The portable electronic device of  claim 10 , wherein modifying the visual appearance of the third position comprises displaying a graphical indicator corresponding to a boundary of the third position. 
     
     
       12. The portable electronic device of  claim 7 , wherein prior to detecting the movement of the touch input on the touch-sensitive display from the second position on the touch-sensitive display to the third position on the touch-sensitive display, the one or more programs further including instructions for:
 in response to detecting the touch input on the touch-sensitive display corresponding to the second icon at the second position of the touch-sensitive display:
 entering an icon reconfiguration mode; and 
 displaying the second icon at the second size. 
 
 
     
     
       13. A non-transitory computer-readable storage medium storing one or more programs configured to be executed by one or more processors of a portable electronic device having a touch-sensitive display, the one or more programs including instructions for:
 displaying a first icon in a first position on the touch-sensitive display at a first size; 
 displaying a second icon in a second position on the touch-sensitive display, the second position distinct from the first position and the second icon is displayed at the first size; 
 detecting a touch input on the touch-sensitive display corresponding to the second icon at the second position on the touch-sensitive display; and 
 while continuing to detect the touch input on the touch-sensitive display corresponding to the second icon in the second position on the touch-sensitive display:
 detecting a movement of the touch input on the touch-sensitive display from the second position on the touch-sensitive display to a third position on the touch-sensitive display; and 
 in response to detecting the movement of the touch input on the touch-sensitive display from the second position on the touch-sensitive display to the third position on the touch-sensitive display, displaying movement of second icon from the second position on the touch-sensitive display to the third position on the touch-sensitive display while continuing to display the first icon at the first size during the movement of the second icon, wherein second icon is displayed at a second size, different than the first size, during the movement of the second icon. 
 
 
     
     
       14. The non-transitory computer-readable storage medium of  claim 13 , the one or more programs further including instructions for:
 in response to ceasing to detect the touch input on the touch-sensitive display corresponding to the second icon at the second position of the touch-sensitive display, displaying the first icon at the first size and displaying the second icon at the first size. 
 
     
     
       15. The non-transitory computer-readable storage medium of  claim 13 , wherein the first size is smaller than the second size. 
     
     
       16. The non-transitory computer-readable storage medium of  claim 13 , the one or more programs further including instructions for:
 in response to detecting the movement of the touch input on the touch-sensitive display from the second position on the touch-sensitive display to the third position on the touch-sensitive display, modifying a visual appearance of the third position. 
 
     
     
       17. The non-transitory computer-readable storage medium of  claim 16 , wherein modifying the visual appearance of the third position comprises displaying a graphical indicator corresponding to a boundary of the third position. 
     
     
       18. The non-transitory computer-readable storage medium of  claim 13 , wherein prior to detecting the movement of the touch input on the touch-sensitive display from the second position on the touch-sensitive display to the third position on the touch-sensitive display, the one or more programs further including instructions for:
 in response to detecting the touch input on the touch-sensitive display corresponding to the second icon at the second position of the touch-sensitive display:
 entering an icon reconfiguration mode; and 
 displaying the second icon at the second size.

Description:
CROSS-REFERENCE TO RELATED APPLICATIONS 
     This application is a continuation of U.S. application Ser. No. 14/261,112, filed Apr. 24, 2014, which is a continuation of U.S. application Ser. No. 14/142,640, filed Dec. 27, 2013, which is a continuation of U.S. application Ser. No. 11/849,938 filed Sep. 4, 2007, which are incorporated herein by reference in their entirety. 
    
    
     TECHNICAL FIELD 
     The disclosed embodiments relate to graphical user interfaces. 
     BACKGROUND 
     As portable devices become more compact, and the amount of information to be processed and stored increases, it has become a significant challenge to design a user interface that allows users to easily interact with the device. This is unfortunate since the user interface is the gateway through which users receive not only content but also responses to user actions or behaviors, including user attempts to access a device&#39;s features or tools. Some portable electronic devices (e.g., mobile phones) have resorted to adding more push buttons, overloading the functions of pushbuttons, or using complex menu systems to allow a user to access, store and manipulate functions or data. These conventional user interfaces often result in complicated key sequences and menu hierarchies that must be memorized by the user. 
     Many conventional user interfaces, such as those that include physical pushbuttons, are also inflexible. This is unfortunate because the inflexibility may prevent a user interface from being configured and/or adapted by either an application running on the portable device or by users. When coupled with the time consuming requirement to memorize multiple key sequences and/or menu hierarchies, such inflexibility is frustrating to many users. 
     Some conventional user interfaces can be configured by users, thereby allowing at least partial customization. Unfortunately, the process of modifying such conventional user interfaces is often as cumbersome and complicated as the use of the conventional user interface itself. In particular, the required behaviors during configuration of such conventional user interfaces are often counter intuitive and the corresponding indicators guiding user actions are often difficult to understand. These challenges are often a source of additional frustration for users. 
     SUMMARY 
     A portable electronic device displays icons (e.g., graphical objects) in one or more regions of a user interface of a touch-sensitive display, and detects user input specifying an exchange of positions of icons in the user interface. In some aspects, the respective positions of two icons in a user interface can be selected to exchange positions in the one or more regions of the user interface, and one or both icons can change their visual appearance to indicate their selection status. 
     In some implementations, a method includes: displaying a first icon in a first position in a touch-sensitive display; displaying a second icon in a second position of the touch-sensitive display; receiving first touch input specifying selection of the first icon; responsive to the first touch input, modifying the visual appearance of the first icon; receiving second touch input indicating movement of the first icon to within proximity of the second icon; and responsive to the second touch input, modifying the visual appearance of the second icon. 
     In some implementations, a method includes: displaying an icon in a first position of a touch-sensitive display; receiving first touch input specifying selection of the icon; responsive to the first touch input, modifying the visual appearance of the icon; receiving second touch input indicating movement of the icon to within proximity of a second position in the user interface; and responsive to the second touch input, modifying the visual appearance of the second position. 
     In some implementations, a method includes: displaying a first icon in a first page of a touch-sensitive display; receiving first touch input specifying selection of the first icon; responsive to the first touch input, modifying the visual appearance of the first icon; receiving second touch input indicating movement of the first icon to within proximity of an edge of the touch sensitive display; responsive to the second touch input, displaying a second page of the touch-sensitive display, the second page including a second icon; receiving third touch input indicating movement of the first icon to within proximity of the second icon; and responsive to the third touch input, modifying the visual appearance of the second icon. 
    
    
     
       BRIEF DESCRIPTION OF THE DRAWINGS 
         FIG.  1    is a flow diagram of one embodiment of a position adjustment process for a portable electronic device. 
         FIG.  2 A  is an illustration of one embodiment of a portable electronic device responsive to touch input for adjustment of the position of one or more icons, 
         FIG.  2 B  is an illustration of one embodiment of a portable electronic device responsive to touch input for adjustment of the position of one or more icons. 
         FIG.  2 C  is an illustration of one embodiment of a portable electronic device responsive to touch input for adjustment of the position of one or more icons. 
         FIG.  2 D  is an illustration of one embodiment of a portable electronic device responsive to touch input for adjustment of the position of one or more icons. 
         FIG.  2 E  is an illustration of one embodiment of a portable electronic device responsive to touch input for adjustment of the position of one or more icons. 
         FIG.  3 A  is an illustration of one embodiment of a portable electronic device responsive to touch input for adjustment of the position of one or more icons. 
         FIG.  3 B  is an illustration of one embodiment of a portable electronic device responsive to touch input for adjustment of the position of one or more icons. 
         FIG.  4    is a block diagram of one embodiment of a portable electronic device. 
         FIG.  5    is a block diagram of one embodiment of a portable electronic device illustrating repositioning of icons in one or more regions of a user interface. 
         FIG.  6    is a flow diagram of one embodiment of a process for exchanging icons of a user interface. 
     
    
    
     DESCRIPTION OF EMBODIMENTS 
     Reference will now be made in detail to embodiments, examples of which are illustrated in 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 one of ordinary skill in the art that the present invention may be practiced without these specific details. In other instances, well-known methods, procedures, components, and circuits have not been described in detail so as not to unnecessarily obscure aspects of the embodiments. 
     Overview of the Interface Reconfiguration Mode 
     Attention is directed towards embodiments of portable electronic devices, including portable communications devices, that have graphical user interfaces (GUIs). The portable devices include an interface reconfiguration mode. In response to a user initiating the interface reconfiguration mode, positions of one or more icons displayed on the portable device may be varied about respective average positions. The varying of the positions of the one or more icons may include animating the one or more icons to simulate floating of the one or more icons on a surface corresponding to a surface of a display in the portable device. The display may be a touch-sensitive display, which responds to physical contact by a stylus or one or more fingers at one or more contact points. While the following embodiments may be equally applied to other types of displays, a touch-sensitive display is used as an illustrative example. 
     The varying of the positions of the one or more icons may intuitively indicate to the user that the positions of the one or more icons may be reconfigured by the user. The user may modify, adapt and/or reconfigure the positions of the one or more icons. In embodiments Where the portable device includes a touch-sensitive display, the user may make contact with the touch-sensitive display proximate to a respective icon at a first position. Upon making contact with the touch-sensitive display, the respective icon may cease varying its position. The user may drag the respective icon to a second position. Upon breaking contact with the touch-sensitive display, the respective icon may resume varying its position. In some embodiments, the display may include two regions. During the interface reconfiguration mode, positions of one or more icons displayed in the first region may be varied while positions of one or more icons displayed in the second region may be stationary. 
     The user may similarly modify, adapt and/or reconfigure the positions of additional icons during the interface reconfiguration mode. When the user has completed these changes (at least for the time being), he or she may terminate reconfiguration mode. In response to this user action, the portable device may return to a normal mode of operation and the varying of the displayed positions of the one or more icons will cease. 
     The user may initiate or terminate the interface reconfiguration process by selecting one or more appropriate physical buttons on the portable device, by a gesture (such as making contact and swiping one or more fingers across the touch-sensitive display and holding for more than a predefined time period) and/or by selecting one or more soft buttons (such as one or more icons that are displayed on the touch-sensitive display). As used herein, a gesture is a motion of the object/appendage making contact with the touch screen display surface. In some embodiments, the interface reconfiguration process terminates a pre-defined time after the interface reconfiguration process is initiated, i.e., there is a time out. 
     The one or more icons displayed on the portable device may be graphical objects. In some embodiments, the one or more icons may be widgets, which are combinations of states and procedures that constitute on-screen representations of controls that may be manipulated by the user, such as bars, buttons and text boxes. In an exemplary embodiment, the one or more icons correspond to application programs (email, browser, address book, etc.) that may be selected by the user by contacting the touch-sensitive display proximate to an icon of interest. 
       FIG.  1    is a flow diagram of one embodiment of a position adjustment process  100  for a portable electronic device. While the position adjustment process  100  described below includes a number of operations that appear to occur in a specific order, it should be apparent that the process  100  can include more or fewer operations, which can be executed serially or in parallel (e.g., using parallel processors or a multi-threading environment), an order of two or more operations may be changed and/or two or more operations may be combined into a single operation. 
     In the position adjustment process  100 , a plurality of icons are displayed in a GUI in a touch-sensitive display ( 110 ). A first predefined user action that initiates an interface reconfiguration process is detected ( 112 ). Exemplary predefined user actions include selecting a physical button on the portable device, making a predefined gesture on the touch screen display surface, or selecting a soft button, Position(s) of one or more of the plurality of displayed icons are varied ( 114 ). A point of contact with the touch-sensitive display at a first position of a respective icon is detected ( 116 ). Movement of the point of contact to a second position is detected ( 1 . 18 ). Movement of the respective icon to the second position is displayed and the respective icon is displayed at the second position ( 120 ). 
     If a second predefined user action that terminates the interface reconfiguration process is detected ( 122 —yes), the position(s) of the one or more icons is fixed ( 124 ). Exemplary predefined user actions include selecting or deselecting a physical button on the portable device, making another predefined gesture on the touch screen display surface, or selecting or deselecting a soft button. The fixed position(s) may correspond to a respective average position(s) for the one or more icons. If a second pre-defined user action that terminates the interface reconfiguration process is not detected ( 122 —no), the process may continue when a point of contact proximate to the same or another icon is detected ( 116 ). 
       FIG.  2 A  is an illustration of one embodiment of a portable electronic device  200  responsive to touch input for adjustment of the position of one or more icons. The portable electronic device  200  includes a touch-sensitive display with a GUI  210 . The display surface is transparent to allow various graphical objects to be displayed to the user (e.g., widgets). In some embodiments, the GUI  210  is divided into multiple sections or windows. For example, a region  212  of GUI  210  may include a tray  216  for holding icons or graphical objects  222  representing functions that are frequently used by the user (e.g., video, weather, schedule, game, music, etc.) and a tray  214  for holding icons or graphical objects  220  representing functions that are used less frequently by the user (e.g., mail, address book, browser, etc.). The GUI  210  may also include graphical objects corresponding to high-level functions of the portable electronic device  200 . For example, various objects and/or images may be presented and changed in GUI  210  by pressing a menu button  240 . In embodiments that include a mobile phone, dedicated graphical objects can be presented in GUI  210  representing traditional voice and data service operations (e.g., hold, clear, etc.). 
     The user may interact with the portable communications device  200  by making contact with the display surface with GUI  210  using a stylus, a finger  218  (not drawn to scale in  FIG.  2   ) or more than one finger. For example, the user may make contact with the display surface at a position of one of the icons  222  (direct contact), thereby activating the function or application program corresponding to that icon. In some embodiments, the icon  222  is activated when the user makes contact at the position of the icon and then breaks contact (for example, a tapping gesture). In some embodiments, the contact with the display surface used to activate the icon may not be at the position of the icon  222 . Instead, contact may be proximate to the icon  222  (indirect contact). The latter technique is similar to “hot spots” used with Web pages and other computer user interfaces. 
       FIGS.  2 B-D  show the portable electronic device  200  during the interface reconfiguration mode. After the interface reconfiguration mode is initiated, the display of one or more of the icons  222  in the tray  216  is modified from the previous stationary positions to time-varying positions. As noted previously, the display may include animating one or more of the icons  222  to simulate floating of one or more of the icons  222  on a surface corresponding to the display surface. For example, the animated varying of the positions of one or more of the icons  222  during the interface reconfiguration mode may resemble that of a hockey puck in an air hockey game. The displayed position(s) of a respective icon in the icons  222  may be varied in a region  224  centered on the average position of the respective icon. 
     While  FIG.  2 B- 2 D  illustrates movement of one or more of the icons  222  in the tray  216 , in other embodiments positions of one or more of the icons  220  in another region of GUI  210 , such as tray  214 , may be varied separately or in addition to those of one or more of the icons  222  in tray  216 . 
     The time-varying position(s) of one or more of the icons  222  intuitively indicate to the user that the positions of one or more of the icons  222  may be modified. This is illustrated in  FIGS.  2 C-D , which show the portable electronic device  200  during the interface reconfiguration mode. The user makes contact, either direct or indirect, with one of the icons that is moving at a position  226  and moves the point of contact across the display surface with GUI  210 . The contact and the motion are detected by the portable electronic device  200 . As a consequence, the displayed icon, in this example corresponding to a game, is moved accordingly. 
     As shown in  FIG.  2 D , the user moves the game icon to position  228  and breaks contact with the display surface. The game icon is now displayed at the position  228 . While the displayed position of the game icon is shown as stationary in  FIG.  2 D , in some embodiments the position of the game icon may be varied once the user breaks contact with the display surface. In some embodiments, only icons displayed in one or more subsections of the GUI  21 . 0  are displayed with a varying position during the interface reconfiguration mode. Thus, if the game icon had been dragged to another position in the tray  222 , it may be displayed with a varying position after the user breaks contact with the display. 
       FIG.  2 D  also illustrates the optional displacement of the browser icon to position  230 . The browser icon was displaced from its initial position  228  to its new position  230  due to at least partial overlap with the game icon, i.e., when the portable electronic device  200  determined that the user positioned the game icon over the browser icon, the displayed position of the browser icon was changed. 
     In other embodiments, an icon may be evicted or removed from the tray  214  when an additional icon, such as the browser icon, is added to the tray  214 . For example, the tray  214  may be configured to accommodate a finite number of icons, such as 4 icons. If an additional icon is added to the tray  214 , a nearest icon to the additional icon or an icon that at least partially overlaps the additional icon may be evicted or removed from the tray  214 , 
       FIG.  2 E  illustrates the portable electronic device  200  after the interface reconfiguration mode has been terminated or has terminated (due to a time out). The icons in GUI  210  have stationary positions. The game icon and the browser icon are displayed in their new positions in the tray  214 . 
     The animated effects during the interface reconfiguration mode, such as the varying position(s) of one or more of the icons  222 , may be in accordance with corresponding equations of motion for one or more of the icons in a plane substantially coincident with the display surface with GUI  210 . The equations of motion may have a coefficient of friction less than a threshold allowing the simulation and/or animation of floating or sliding of one or more of the icons. The equation of motion for the respective icon may have a non-zero initial velocity, a non-zero angular velocity, and/or a restoring force about the respective average position of the respective icon such that the position of the respective icon oscillates in the region  224  ( FIG.  2 D ) substantially centered on the respective average position of the respective icon. 
     In some embodiments, the position of the respective icon may be varied during the interface reconfiguration mode in such a way that the respective icon rotates about the respective average position of the respective icon while maintaining a fixed orientation with respect to the GUI  210  and the portable electronic device  200 , This is illustrated in  FIGS.  3 A and  3 B , which show the portable electronic device  200  during the interface reconfiguration mode. In this example, the position of the video icon  222  in tray  216  is varied in such a way that it maintains a fixed orientation in region  224 . This may make it easier for the user to determine the function of the respective icon during the interface reconfiguration mode. 
     Portable Electronic Device Architecture 
     Attention is now directed towards embodiments of the portable electronic device architecture.  FIG.  4    is a block diagram of one embodiment of portable electronic device. A portable electronic device  400  generally includes one or more computer-readable mediums  402 , a processing system  404 , an Input/Output (I/O) subsystem  406 , radio frequency (RF) circuitry  408  and audio circuitry  410 . These components may be coupled by one or more communication buses or signal lines  403 . The device  400  can be any portable electronic device, including but not limited to a handheld computer, a tablet computer, a mobile phone, a media player, personal digital assistant (PDA) and the like, including a combination of two or more of these items. 
     It should be apparent that the architecture shown in  FIG.  4    is only one example of an architecture for the portable electronic device  400 , and that the device  400  could have more or fewer components than shown, or a different configuration of components. The various components shown in  FIG.  4    can be implemented in hardware, software, or a combination of both hardware and software, including one or more signal processing and/or application specific integrated circuits. The RF circuitry  408  is used to send and receive information over a wireless link or network to one or more other devices and includes well-known circuitry for performing this function, 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, memory, etc. In some embodiments, the RF circuitry  408  is capable of establishing and maintaining communications with other devices using one or more communications protocols, including but not limited to time division multiple access (TDMA), code division multiple access (CDMA), global system for mobile communications (GSM), Enhanced Data GSM Environment (EDGE), wideband code division multiple access (W-CDMA), Wi-Fi (such as IEEE 802.11a, IEEE 802.11b, IEEE 802.11g and/or IEEE 802.11n), Bluetooth, Wi-MAX, voice over Internet Protocol (Voile), a protocol for email, instant messaging, and/or a short message service (SMS), or any other suitable communication protocol, including communication protocols not yet developed as of the filing date of this document. 
     The RF circuitry  408  and the audio circuitry  410  are coupled to the processing system  404  via the peripherals interface  416 . The interface  416  includes various known components for establishing and maintaining communication between peripherals and the processing system  404 . The audio circuitry  410  is coupled to an audio speaker  450  and a microphone  452  and includes known circuitry for processing voice signals received from interface  416  to enable a user to communicate in real-time with other users. In some embodiments, the audio circuitry  410  includes a headphone jack (not shown). Voice and data information received by the RF circuitry  408  and the audio circuitry  410  (e.g., in speech recognition or voice command applications) is sent to one or more processors  418  via the peripherals interface  416 . The one or more processors  418  are configurable to process various data formats for one or more applications programs  430  stored on the medium  402 . 
     Note that the term “data” includes but is not limited to text, graphics, Web pages, JAVA applets, widgets, emails, instant messages, voice, digital images or video, widgets, MP3s, etc., which can be used by one or more applications programs  430  stored on the medium  402  (e.g., Web browser, email, etc.). In some embodiments, the device  400  is capable of uploading and downloading various data from the Internet over a wireless network or an external port  436 , such as files, songs, digital images, videos, emails, widgets, instant messages and the like. 
     The peripherals interface  416  couples the input and output peripherals of the device to the processor  418  and the computer-readable medium  402 . The one or more processors  418  communicate with the one or more computer-readable mediums  402  via a controller  420 . The computer-readable medium  402  can be any device or medium that can store code and/or data for use by the one or more processors  418 , The medium  402  can include a memory hierarchy, including but not limited to cache, main memory and secondary memory. The memory hierarchy can be implemented using any combination of RAM (e.g., SRAM, DRAM, DDRAM), ROM, FLASH, magnetic and/or optical storage devices, such as disk drives, magnetic tape, CDs (compact disks) and DVDs (digital video discs). The medium  402  may also include a transmission medium for carrying information-bearing signals indicative of computer instructions or data (with or without a carrier wave upon which the signals are modulated). For example, the transmission medium may include a communications network, including but not limited to the Internet (also referred to as the World Wide Web), intranet(s), Local Area Networks (LANs), Wide Local Area. Networks (WLANs), Storage Area Networks (SANs), Metropolitan Area Networks (MAN) and the like. 
     The one or more processors  418  run various software components stored in the medium  402  to perform various functions for the device  400 . In some embodiments, the software components include an operating system  422 , a communication module (or set of instructions)  424 , a contact/motion module (or set of instructions)  426 , a graphics module (or set of instructions)  428 , one or more applications (or set of instructions)  430 , a timer module (or set of instructions)  438  and a reconfiguration module (or set of instructions)  440 . 
     The operating system  422  (e.g., Darwin, RTXC, LINUX, UNIX, OS X, WINDOWS, or an embedded operating system such as VxWorks) includes various procedures, sets of instructions, software components and/or drivers for controlling and managing general system tasks (e.g., memory management, storage device control, power management, etc.) and facilitates communication between various hardware and software components. 
     The communication module  424  facilitates communication with other devices over one or more external ports  436  or via RF circuitry  408  and includes various software components for handling data received from the RF circuitry  408  and/or the external port  436 . The external port  436  (e.g., USB, FireWire™, etc.) is adapted for coupling directly to other devices or indirectly over a network (e.g., the Internet, wireless LAN, etc.). 
     The graphics module  428  includes various known software components for rendering, animating and displaying graphical objects on a display surface of a touch-sensitive display system  412 . Note that the term “graphical object” includes any object that can be displayed to a user, including without limitation text, web pages, icons, digital images, animations and the like. 
     The one or more applications  430  can include any applications installed on the device  400 , including without limitation, a browser, address book, contact list, email, instant messaging, word processing, keyboard emulation, widgets, JAVA-enabled applications, encryption, digital rights management, voice recognition, voice replication, location determination capability (such as that provided by the global positioning system (OPS)), a music player (which plays back recorded music stored in one or more files, such as MP3 sur AAC files), etc. 
     In some embodiments, the device  400  may include the functionality of an MP3 player, such as an iPod (trademark of Apple Computer, Inc.), The device  400  may, therefore, include a 36-pin connector that is compatible with the iPod. In some embodiments, the device  400  may include one or more optional optical sensors (not shown), such as CMOS or CCD image sensors, for use in imaging applications. 
     The contact/motion module  426  includes various software components for performing various tasks associated with the touch-sensitive display system  412 , as previously described with respect to the embodiments in  FIGS.  1 - 3   . 
     The timer module  438  is a software timer used with the interface reconfiguration process  100  ( FIG.  1   ). The timer module  438  can also be implemented in hardware. 
     The reconfiguration module  440  may include an icon effects module (or a set of instructions)  442 . The icon effects module  442  may include animation for the icons during the interface reconfiguration mode. In some embodiments, the icon effects module  442  may be included in the graphics module  428 . 
     The I/O subsystem  406  is coupled to the touch-sensitive display system  412  and one or more other physical control devices  414  (e.g., pushbuttons, switches, dials, LEDs, etc.) for controlling or performing various functions, such as power control, speaker volume control, ring tone loudness, keyboard input, scrolling, hold, menu, screen lock, clearing and ending communications and the like. The touch-sensitive display  412  communicates with the processing system  404  via the touch sensitive screen controller  432 , which includes various components for processing user input (e.g., scanning hardware), The one or more other input controllers  434  receives/sends electrical signals from/to the other input or control devices  414 . The other input/control devices  414  may include physical buttons (e.g., push buttons, rocker buttons, etc.), dials, slider switches, sticks, and so forth. 
     The touch-sensitive display  412  displays visual output to the user in a GUI. The visual output may include text, graphics, video, and any combination thereof. Some or all of the visual output may correspond to user-interface objects. The touch-sensitive display  412  may also accept input from the user based on haptic and/or tactile contact. The touch-sensitive display  412  forms a touch-sensitive surface that accepts user input. The touch-sensitive display  412  and the touch screen controller  432  (along with any associated modules and/or sets of instructions in the medium  4021  detects contact (and any movement of release of the contact) on the touch-sensitive display  412  and converts the detected contact into interaction with user-interface objects, such as one or more soft keys, that are displayed on the touch screen when the contact occurs. In an exemplary embodiment a point of contact between the touch-sensitive display  412  and the user corresponds to one or more digits of the user. The touch-sensitive display  412  may use LCD (liquid crystal display) technology, or LPD (light emitting polymer display) technology, although other display technologies may be used in other embodiments. The touch-sensitive display  412  and touch screen controller  432  may detect contact and any movement or release thereof using any of a plurality of touch sensitivity technologies, including but not limited to capacitive, resistive, infrared, and surface acoustic wave technologies, as well as other proximity sensor arrays or other elements for determining one or more points of contact with the touch-sensitive display  412 . 
     The touch-sensitive display may be analogous to the multi-touch sensitive tablets described in the following U.S. Pat. No. 6,323,846 (Westerman et al.), U.S. Pat. No. 6,570,557 (Westerman et al.), and/or U.S. Pat. No. 6,677,932 (Westerman), and/or U.S. Patent Publication 2002/0015024A1, each of which is hereby incorporated by reference. However, the touch screen  126  displays visual output from the portable device, whereas touch sensitive tablets do not provide visual output. The touch-sensitive display  412  may have a resolution in excess of 100 dpi. In an exemplary embodiment, the touch-sensitive display  412  may have a resolution of approximately 168 dpi. The user may make contact with the touch-sensitive display  412  using any suitable object or appendage, such as a stylus, pen, finger, and so forth. 
     In some embodiments, in addition to the touch screen, the device  400  may include a touchpad (not shown) for activating or deactivating particular functions. In some embodiments, the touchpad is a touch-sensitive area of the device that, unlike the touch screen, does not display visual output. The touchpad may be a touch-sensitive surface that is separate from the touch-sensitive display  412  or an extension of the touch-sensitive surface formed by the touch-sensitive display  412 . 
     The device  400  also includes a power system  444  for powering the various hardware components. The power system  444  can include a power management system, one or more power sources (e.g., battery, alternating current (AC)), a recharging system, a power failure detection circuit, a power converter or inverter, a power status indicator (e.g., a light emitting diode (LED)) and any other components typically associated with the generation, management and distribution of power in portable devices. 
     In some embodiments, the peripherals interface  416 , the one or more processors  418 , and the memory controller  420  may be implemented on a single chip, such as the processing system  404 . In some other embodiments, they may be implemented on separate chips. 
     Repositioning Icons 
       FIG.  5    is a block diagram of one example of a portable electronic device illustrating the repositioning of user interface elements (hereinafter referred to generally as “icons”) in one or more regions of a user interface. In some implementations, one or more icons  502  can be repositioned by a user in a user interface  501  of a device (e.g., portable electronic device  500 ). In some implementations, a user can initiate an interface reconfiguration mode on the device  500 . While in the interface reconfiguration mode, one or more of the icons  502  can be repositioned in the user interface  501  by the user. While in the interface reconfiguration mode, the user can touch one of the icons  502  and drag it to a desired new position on the user interface  501 . For example, the user can drag an icon  508  selected from the icons  502  to an empty or occupied position in a tray  504 , in which case an occupying icon  512  will be replaced by the icon  508 . 
     In some implementations, when the device  500  enters an interface reconfiguration mode, the icons  502  that are movable are displayed at a scaled size (e.g., scaled up by 150%). When the device  500  exits the interface reconfiguration mode, the icons  502  are displayed at their original size. Alternatively, an icon that the user touches and moves while the device  500  is in the interface reconfiguration mode (as opposed to all of the movable icons  502 ) is displayed at a scaled size to indicate its selection status to the user. When the touching ceases the icon can be displayed at its original size again. In other implementations, the selected icon can change color, animate, flash, change shape, display text or otherwise modify its visual appearance. In addition to changing its visual appearance, the device  500  can emit an audible sound (e.g., tone, succession of tones) to indicate its selection status. In some implementations, the repositioning of icons can be enabled without entering a reconfiguration mode on the device  500 . 
     In some implementations where icons can be displayed in multiple “pages” and the user can navigate between the pages, as described in U.S. patent application Ser. No. 11/850,005, for “Application Menu User Interface,” filed Sep. 4, 2007 which patent application is incorporated by reference herein in its entirety. In such implementations, the user can drag an icon from a first page of icons to a second page of icons. For example, a user can touch and drag an icon in the first page and drag the icon toward the edge of the user interface  501 . When the icon is dragged to within a predetermined distance from the edge of the user interface  501  (e.g., 5 pixels), the first page of icons displayed on the user interface  501  can be replaced with a second page of icons. The user can then position the dragged icon within the second page, which is now displayed on the user interface  501 . 
     In some implementations, a user can drag a first icon toward a second icon in the user interface  501  to exchange the positions of the two icons in the user interface  501 . In this case, the second icon can be displayed with additional graphical effects to indicate its selection status for exchange with, or replacement by, the first icon. For example, the second icon can be displayed with an oscillating visual intensity, from a high intensity (e.g., bright) to a low intensity (e.g., dim) and back to high intensity. As another example, the second icon can be displayed with a “glow” effect. In some implementations, the additional graphical effects applied to the second icon can be triggered when the first icon is moved to within a predetermined distance of the second icon. 
       FIG.  5    illustrates an example mobile device  500  with a first icon  508  moved into proximity of a second icon  512  located in tray  504 . The proximity can be x pixels (e.g., 1 pixel) from the periphery of the icon  512  as indicated by a boundary  510 , When the first icon  508  is moved such that any part of the first icon  508  is within the region enclosed by the boundary  510 , the second icon  512  can be displayed with additional graphical effects, such as a glow effect or an oscillating intensity, for example. In some implementations, the additional graphical effects are not displayed when the user releases the touch on the first icon  508  over the second icon  512 , and thus having them exchange positions, or when the user moves the first icon  508  outside of the region enclosed by the boundary  510 , In some implementations, the first icon  508  can be repositioned into an empty position in the tray  504 . In such implementations, the outline  510  can be displayed to indicate the empty position within the tray  504  where the first icon  508  will be positioned when the user releases the touch. Other visual feedback can be provided to indicate an empty or available position in the tray  504 , such as changing the color or opacity of the position in the tray  504  or applying a graphic, pattern overlay or animated object at the position in the tray  504 . 
     Process for Exchanging Icon Positions 
       FIG.  6    is a flow diagram of an example process  600  for exchanging icons of a user interface. In some implementations, the process  600  includes displaying a first icon in a first position of a touch-sensitive display ( 602 ). The touch-sensitive display can be a multi-touch sensitive display which is responsive to finger gestures as well as touch. A second icon is displayed in, or associated with, a second position of the touch-sensitive display ( 604 ). In some implementations, the first and second icon positions can be in different regions of a user interface. For example, the first region can be used to display a first set of icons and the second region can be a tray, dock, menu bar, a second page or any other user interface element capable of displaying a second set of icons in a manner that visually distinguishes or otherwise prominently displays the second set of icons from the first set of icons. The second set of icons can include icons that are frequently used icons or icons that have a common property or attribute (e.g., application icons). 
     The process  600  receives a first touch input specifying selection of the first icon ( 606 ), The touch can be with a finger or styles. Responsive to the first touch input, the visual appearance of the first icon is modified ( 608 ). Some examples of modifying the visual appearance of the first icon include but are not limited to: scaling, changing color, vibrating, bouncing, displaying text, animating, etc. 
     The process  600  receives a second touch input indicating movement of the first icon to within proximity of the second icon ( 610 ). The movement can be the dragging of the first icon across the display. In some implementations, proximity to the second icon occurs when a (transparent or non-transparent) boundary line at least partially surrounding the second icon is touched or crossed by the first icon as a result of, or in response to, the movement. 
     Responsive to the second touch input, the visual appearance of the second icon can be modified ( 612 ). Some examples of modifying the second icon include but are not limited to: scaling, applying a glowing effect, changing color, vibrating, bouncing, animating, etc. 
     The foregoing descriptions of specific embodiments of the present invention are presented for purposes of illustration and description. They are not intended to be exhaustive or to limit the invention to the precise forms disclosed. Rather, it should be appreciated that many modifications and variations are possible in view of the above teachings. The embodiments were chosen and described in order to best explain the principles of the invention and its practical applications, to thereby enable others skilled in the art to best utilize the invention and various embodiments with various modifications as are suited to the particular use contemplated.

Metadata:
Filing Date: 20210514
Publication Date: 20230314
Grant Date: 20230314
Priority Date: 20070904
Inventors: CHAUDHRI, IMRAN A.
ORDING, BAS
JOBS, STEVEN P.
Assignee: APPLE INC
CPC Classifications: [{"code": "G06F3/041", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/04847", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/04817", "inventive": true, "first": true, "tree": "[]"}, {"code": "G06F3/016", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/04817", "inventive": true, "first": true, "tree": "[]"}, {"code": "G06F3/0488", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/0488", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/0482", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/0486", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/04842", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/0488", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/0482", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/04817", "inventive": true, "first": true, "tree": "[]"}, {"code": "G06F3/0486", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/0486", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/04817", "inventive": true, "first": true, "tree": "[]"}, {"code": "G06F3/04847", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/0488", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/04842", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/0482", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/016", "inventive": true, "first": false, "tree": "[]"}, {"code": "G06F3/0486", "inventive": true, "first": false, "tree": "[]"}]
Family ID: 39797932