User interface for manipulating user interface objects

Abstract

To provide a user interface on a personal electronic device for navigation based on movement of a crown.SOLUTION: User interface navigation on a personal electronic device based on movement of a crown is disclosed. The device can select an appropriate level of information arranged along a z-axis 906 for display based on crown movement. The navigation can be based on an angular velocity of the crown.SELECTED DRAWING: Figure 9

Description

[Technical Field]

[0001] [CROSS-REFERENCE TO RELATED APPLICATIONS] This application is related to U.S. Provisional Patent Application No. 61 / 873,356, filed September 3, 2013, entitled "CROWN INPUT FOR A WEARABLE ELECTRONIC DEVICE," U.S. Provisional Patent Application No. 61 / 873,359, filed September 3, 2013, entitled "USER INTERFACE OBJECT MANIPULATIONS IN A USER INTERFACE," U.S. Provisional Patent Application No. 61 / 959,851, filed September 3, 2013, entitled "USER INTERFACE FOR MANIPULATING USER INTERFACE OBJECTS," U.S. Provisional Patent Application No. 61 / 873,360, filed September 3, 2013, entitled "USER INTERFACE FOR MANIPULATING USER INTERFACE OBJECTS WITH MAGNETIC PROPERTIES," and U.S. Provisional Patent Application No. 61 / 873,360, filed September 3, 2013, entitled "USER INTERFACE FOR MANIPULATING USER INTERFACE OBJECTS WITH MAGNETIC PROPERTIES." This application claims priority to U.S. Nonprovisional Patent Application No. 14 / 476,657, filed September 3, 2014, entitled "Interface Objects with Magnetic Properties," the contents of which are incorporated herein by reference in their entirety for all purposes.

[0002] This application is related to a co-pending U.S. non-provisional patent application entitled "CROWN INPUT FOR A WEARABLE ELECTRONIC DEVICE," filed September 3, 2014, concurrently herewith, by Nicholas Zambetti et al., a co-pending U.S. non-provisional patent application entitled "USER INTERFACE OBJECT MANIPULATIONS IN A USER INTERFACE," filed September 3, 2014, concurrently herewith, by Nicholas Zambetti et al., and U.S. Provisional Patent Application No. 61 / 747,278, filed December 29, 2012, entitled "Device, Method, and Graphical User Interface for Manipulating User Interface Objects with Visual and / or Haptic Feedback," the contents of which are incorporated herein by reference in their entirety for all purposes.

[0003] [Technical field] The disclosed embodiments relate generally to user interfaces for electronic devices, including but not limited to user interfaces for electronic watches. [Background technology]

[0004] Modern personal electronic devices can have compact form factors. Exemplary personal electronic devices include, but are not limited to, tablets and smartphones. Use of such personal electronic devices involves manipulation of user interface objects on a display screen that has a compact form factor that complements the design of the personal electronic device.

[0005] Exemplary operations a user may perform on a personal electronic device include navigating a hierarchy, selecting a user interface object, adjusting the position, size, and zoom of a user interface object, or otherwise manipulating the user interface. Exemplary user interface objects include digital images, video, text, icons, control elements such as buttons, and other graphics.

[0006] Existing methods for manipulating user interface objects on miniaturized personal electronic devices can be inefficient, and furthermore, existing methods generally provide less accuracy than would be desirable. Summary of the Invention

[0007] In some embodiments, techniques are disclosed for navigating a user interface on a personal electronic device based on crown motion. A system and computer-readable storage medium for performing the above-described process are also disclosed. [Brief explanation of the drawings]

[0008] [Figure 1] 1 illustrates an exemplary personal electronic device.

[0009] [Figure 2] 1 illustrates an exemplary user interface.

[0010] [Figure 3] 1 illustrates an exemplary user interface.

[0011] [Figure 4] 1 illustrates an exemplary user interface.

[0012] [Figure 5] 1 illustrates an exemplary user interface.

[0013] [Figure 6] 1 illustrates an exemplary user interface.

[0014] [Figure 7] 1 illustrates an exemplary user interface.

[0015] [Figure 8] 1 illustrates an exemplary user interface.

[0016] [Figure 9] 1 illustrates an exemplary user interface logic structure.

[0017] [Figure 10] 1 illustrates an exemplary user interface.

[0018] [Figure 11] 1 illustrates an exemplary user interface.

[0019] [Figure 12] 1 illustrates an exemplary user interface.

[0020] [Figure 13] 1 illustrates an exemplary user interface transition.

[0021] [Figure 14] 1 illustrates an exemplary user interface.

[0022] [Figure 15] 1 illustrates an exemplary user interface.

[0023] [Figure 16] 1 illustrates an exemplary user interface transition.

[0024] [Figure 17] 1 illustrates an exemplary user interface.

[0025] [Figure 18] 1 illustrates an exemplary user interface.

[0026] [Figure 19] 1 illustrates an exemplary user interface transition.

[0027] [Figure 20] 1 illustrates an exemplary user interface.

[0028] [Figure 21] 1 illustrates an exemplary user interface.

[0029] [Figure 22] 1 illustrates an exemplary user interface and transitions.

[0030] [Figure 23] 1 illustrates an exemplary user interface.

[0031] [Figure 24] 1 illustrates an exemplary user interface and transitions.

[0032] [Figure 25A] 1 illustrates an exemplary user interface. [Figure 25B] 1 illustrates an exemplary user interface.

[0033] [Figure 26] 1 illustrates an exemplary user interface.

[0034] [Figure 27] 1 illustrates an exemplary user interface and transitions.

[0035] [Figure 28] 1 illustrates an exemplary user interface.

[0036] [Figure 29] 1 illustrates an exemplary user interface.

[0037] [Figure 30] 1 illustrates an exemplary user interface and transitions.

[0038] [Figure 31] 1 illustrates an exemplary user interface.

[0039] [Figure 32] 1 illustrates an exemplary user interface.

[0040] [Figure 33] 1 illustrates an exemplary user interface.

[0041] [Figure 34] 1 illustrates an exemplary user interface.

[0042] [Figure 35] 1 illustrates an exemplary process.

[0043] [Figure 36] 1 illustrates an exemplary computing system.

[0044] [Figure 37] 1 illustrates an exemplary personal electronic device.

[0045] [Figure 38] 1 illustrates an exemplary personal electronic device.

[0046] [Figure 39] 1 illustrates an exemplary personal electronic device.

[0047] [Figure 40] 1 illustrates an exemplary user interface.

[0048] [Figure 41] 1 illustrates an exemplary user interface logic structure.

[0049] [Figure 42] 1 illustrates an exemplary user interface. DETAILED DESCRIPTION OF THE INVENTION

[0050] In the following description of the present disclosure and examples, reference is made to the accompanying drawings which show, by way of illustration, specific examples which may be practiced. It is to be understood that other examples may be practiced and structural changes may be made without departing from the scope of the present disclosure.

[0051] FIG. 1 illustrates an exemplary personal electronic device 100. In the illustrated example, device 100 is a watch that generally includes a body 102 and a strap 104 that attaches device 100 to a user's body. That is, device 100 is wearable. Body 102 can be designed to be coupled with strap 104. Device 100 can have a touch-sensitive display screen (hereinafter, touchscreen) 106 and a crown 108. In some embodiments, device 100 can have one or more buttons 110, 112, and 114. In some embodiments, device 100 does not have buttons 110, 112, and 114.

[0052] Typically, the term "crown" in the context of a wristwatch refers to the cap on top of the stem around which the watch is wound. In the context of a personal electronic device, the crown can be a physical part of the electronic device rather than a virtual crown on a touch-sensitive display. The crown 108 can be mechanical, meaning that it can be connected to a sensor that converts the physical movement of the crown into an electrical signal. The crown 108 can rotate in two rotational directions (e.g., back and forth). The crown 108 can also be pushed into and / or pulled out of the body of the device 100. The crown 108 can be touch-sensitive, for example, using capacitive touch technology that can detect whether a user is touching the crown. The crown 108 can also be oscillated in one or more directions or translated along a path along at least a portion of the edge or periphery of the body 102. In some examples, more than one crown 108 can be used. The appearance of the crown 108 can, but need not, resemble the crown of a typical wristwatch. The examples described herein refer to rotating, pushing, pulling, and / or touching the crown, each of which constitutes a physical state of the crown.

[0053] If included, buttons 110, 112, and 114 can each be a physical button or a touch-sensitive button. That is, the buttons can be, for example, physical buttons or capacitive buttons. Additionally, body 102, which can include a bezel, can have predetermined areas on the bezel that act as buttons.

[0054] Touch screen 106 may include a display device, such as a liquid crystal display (LCD), a light emitting diode (LED) display, an organic light emitting diode (OLED) display, or the like, disposed partially or completely behind or in front of a touch sensor panel implemented with any desired touch sensing technology, such as mutual capacitance touch sensing, self-capacitance touch sensing, resistive touch sensing, projection scanning touch sensing, etc. Touch screen 106 may allow a user to perform various functions by touching or hovering near the touch sensor panel with one or more fingers or other objects.

[0055] In some examples, device 100 may further include one or more pressure sensors (not shown) that detect force or pressure applied to the display. The force or pressure applied to touchscreen 106 may be used as input to device 100 to perform any desired operation, such as making a selection, entering or exiting a menu, displaying additional options / actions, etc. In some examples, different operations may be performed based on the amount of force or pressure applied to touchscreen 106. One or more pressure sensors may also be used to determine the location where force is being applied to touchscreen 106. 1. Crown-based user interface control

[0056] 2-7 illustrate exemplary user interfaces responsive to the operation of crown 108 (FIG. 1). FIG. 2 shows an exemplary screen 200 that may be displayed by device 100. Screen 200 may be, for example, a home screen that appears when device 100 is powered on or that first appears when the touchscreen display of device 100 is powered on (including waking from a sleep state). Icons 204, 206, and 208 may be displayed on screen 200. In some embodiments, the icons may correspond to applications operable on device 100, meaning that the applications may be installed on device 100 and / or may run as services on device 100. A touch (e.g., a finger tap) on an icon launches the corresponding application, meaning that the application runs in the foreground of device 100 and appears on touchscreen 106. In some embodiments, the icons may correspond to text documents, media items, web pages, email messages, etc.

[0057] Device 100 can select icons 204, 206, and 208 for display on display screen 200 from a large collection of available icons because these icons contain current user-relevant information. For example, icon 204 can correspond to a messaging application in which the user has just received an incoming message, and icon 206 can correspond to a calendar application in which the user has upcoming calendar appointment items.

[0058] 3 illustrates an exemplary screen 300 that may be displayed by device 100 in response to a rotation of crown 108 in a direction 302 while screen 200 (FIG. 2) is displayed. Screen 300 may, for example, show a user's preferred icons previously selected by the user from a larger collection of available icons. Screen 300 may also include icons selected by device 100 from the larger collection of available icons based on the user's icon access frequency. Exemplary icons 304, 306, 308, 310, and 312 displayed on screen 300 may each correspond to an application operable on device 100. A touch (e.g., a finger tap) on an icon launches the corresponding application.

[0059] 4 shows an exemplary screen 400 that may be displayed by device 100 in response to a rotation of crown 108 in a direction 402 while screen 300 (FIG. 3) is displayed. Screen 400 may, for example, show icons corresponding to all of the applications operable on device 100. Because many applications may be operable on device 100, screen 400 may include many icons. When many icons are displayed, the icons may be sized appropriately to fit within touchscreen 106, or may be sized so that at least a representative or predetermined percentage of the icons can visually fit within touchscreen 106.

[0060] FIG. 5 illustrates an exemplary screen 500 that may be displayed by device 100 in response to a rotation of crown 108 in a direction 502 while screen 400 ( FIG. 4 ) is displayed. Screen 500 may, for example, show icons corresponding to a subset of applications operable on device 100. Because fewer icons are displayed on screen 500 compared to screen 400, icons displayed on screen 500, such as icon 504, may be larger and have additional fidelity compared to the representation of icons on screen 400. For example, an icon on screen 500 may include indicia in the form of text and / or an image to identify its corresponding application. As shown, icon 504 uses the letter “c” to advise that the name of the corresponding application begins with “c” as in clock. In some embodiments, a touch (e.g., a finger tap) on an icon launches the corresponding application.

[0061] 6 illustrates an exemplary screen 600 that may be displayed by device 100 in response to a rotation of crown 108 in a direction 602. Screen 600 may, for example, show a subset of icons corresponding to applications operable on device 100, further selected compared to screen 500. Because fewer icons are displayed on screen 600 compared to screen 500 (FIG. 5), the displayed icons (e.g., icon 604) may be enlarged and have additional fidelity compared to the display of icons on screens 200, 300, 400, and 500. For example, icon 604 may have an image of a clock that displays the current time. In some embodiments, a touch (e.g., a finger tap) on an icon launches a corresponding application.

[0062] 7 and 8 show exemplary screens 700 and 800, respectively, that may be displayed by device 100 in response to rotation of crown 108 in direction 702 while screen 600 (FIG. 6) is displayed.

[0063] 7, in some embodiments, screen 700 may be displayed in response to a crown rotation in direction 702 when screen 600 (FIG. 6) is displayed. Because a single icon 704 is displayed on screen 700, icon 704 may have additional fidelity compared to previous screens. For example, icon 704 may have an image of a clock that displays date information along with the current time. A touch (e.g., a finger tap) on icon 704 launches a corresponding application.

[0064] Turning to FIG. 8, in some embodiments, screen 800 can be displayed in response to a crown rotation in direction 802 when screen 600 (FIG. 6) is displayed. Screen 800 shows application 804, which corresponds to icon 704 (FIG. 7) and is running in the foreground of device 100. That is, application 804 was launched in response to a crown rotation in direction 802. An exemplary application 804 can be a clock application that provides an alarm function. Also, in some embodiments, screen 800 becomes displayed in response to a crown rotation in direction 802 when screen 700 (FIG. 7) is displayed.

[0065] The above-described screens 200-700 (FIGS. 2-7) can be logically organized as axial information planes. Under this organization, a given icon screen can be considered as a plane defined by two axes (e.g., x-axis and y-axis) with icons spatially arranged on it. The planes can be organized along a third axis, called the z-axis, that is orthogonal to at least one of the x-axis or y-axis. (The z-axis can be perpendicular to the plane formed by the x- and y-axes.)

[0066] This logical organization is illustrated by FIG. 9, in which x-axis 902 and y-axis 904 form a plane coplanar with the screen surface of the touchscreen of device 100 (FIG. 1), and z-axis 906 is perpendicular to the x / y plane formed by axes 902 and 904. Plane 908 may correspond to screen 200 (FIG. 2). Plane 910 may correspond to screen 300 (FIG. 3). Plane 912 may represent a collection of icons representing operational applications of the personal electronic device. Thus, different perspectives of plane 912 may correspond to screens 400-700 (FIGS. 4-7). Planes 908 and 910 may be related to plane 912, and planes 908 and 910 may each contain a subset of the icons available on plane 912. A particular information plane (i.e., icon screen) to be displayed on the personal electronic device may be selected by a crown movement, such as by rotating the crown. That is, the movement of the crown can be used to traverse information planes that intersect the z-axis 906 or to provide alternate views of a given plane (eg, plane 912).

[0067] In some embodiments, when the crown movement reaches the end of the z-axis (e.g., the top or bottom plane), the displayed information (e.g., the icon screen) creates a rubber-band effect to indicate that the end has been reached. Consider the situation where a user reaches the bottom information plane with a crown input. If the user provides additional crown input in the same direction, the displayed collection of icons shrinks (to the extent possible) to follow the crown movement until the movement stops. When the crown movement stops, the displayed icons animate on the screen from their shrunken size back to their normal size, thereby creating the rubber-banding visual effect.

[0068] One notable benefit of this logical organization is that different information planes need not be zoomed subsets of each other (although they can be), i.e., for example, planes 908 and 910 may contain entirely different icons of those available on the personal electronic device, but the different information planes may be more efficiently accessible to the user.

[0069] Alternatively, screens 200-700 (FIGS. 2-7) can be logically organized as subsets of information belonging to different mode states of the personal electronic device. Under this organization, screens 200 and 300 can correspond to the device's first and second mode states, and screens 400-700 can correspond to, for example, a third mode state. The personal electronic device can cycle through mode states in response to a press of the crown to display screens 200 or 300 in the first and second mode states, respectively. In alternative embodiments, mode states can be cycled using buttons 110, 112, or 114. When multiple screens are available within a particular mode state (e.g., the third mode state), the device can switch from displaying one screen (e.g., 300) to another screen (e.g., 400) based on a rotation of the crown. User interface elements on the screens, such as paging dots, can be used to indicate the availability of additional screens for display within a particular mode state.

[0070] This logical arrangement is illustrated by Figure 41. As shown, planes 4102 and 4104 correspond to screens 200 (Figure 2) and 300 (Figure 3), respectively. Plane 4106 can display a collection of icons representing operational applications of the personal electronic device. Thus, different perspectives of plane 4106 can correspond to screens 400-700 (Figures 4-7). A particular information plane (i.e., icon screen) to be displayed on the personal electronic device can be selected by a crown action, such as by depressing the crown. 2. Speed-based crown control

[0071] Device 100 ( FIG. 1 ) can consider the angular velocity of rotation of crown 108 ( FIG. 1 ) when determining whether one icon screen should be replaced with another. Specifically, device 100 can require crown 108 to rotate above a predetermined angular velocity before changing the display of one icon screen to another. In this way, slow rotation of crown 108 unintentionally by the user can cause device 100 to receive a crown input indicating an angular displacement, while the displacement need not be interpreted as having a sufficient velocity to cause an unintended update of the user interface. The selection of the predetermined angular velocity for this purpose can depend on a number of factors, such as the density of currently displayed icons, the visual placement of currently displayed icons, etc.

[0072] In some embodiments, the minimum angular velocity of crown rotation required to switch between icon screens corresponds directly to the instantaneous angular velocity of crown 108 ( FIG. 1 ), meaning that the user interface of device 100 essentially responds when crown 108 reaches a sufficient angular velocity. In some embodiments, the minimum angular velocity of crown rotation required to switch between icon screens is a calculated velocity that is based on, but not directly equal to, the instantaneous (“current”) angular velocity of crown 108. In these embodiments, device 100 can maintain a calculated crown (angular) velocity V at different instants within time T according to Equation 1:

number

[0073] In Equation 1, V T represents the calculated crown velocity (speed and direction) at time T, and V (T-1) represents the previous velocity (speed and direction) at time T-1, and ΔV CROWN is the time T represents the change in velocity caused by the force applied by the rotation of the crown at DRAGrepresents the change in velocity due to drag. The applied force is ΔV CROWN and can depend on the current rotational angular velocity of the crown. CROWN can also depend on the current angular velocity of the crown. In this way, device 100 can provide user interface interactions based not only on the instantaneous velocity of the crown, but also on user input in the form of crown movement over multiple time intervals, even if those intervals are finely divided. Typically, ΔV CROWN In the absence of user input in the form of T is expressed as ΔV according to Equation 1. DRAG approaches zero (becomes zero) based on V T The sign of the crown rotation (ΔV CROWN Note that the value of the parameter does not change without user input in the form of

[0074] Typically, the greater the rotational angular velocity of the crown, the greater the ΔV CROWN However, the value of ΔV CROWN The actual mapping between the rotational angular velocity of the crown and ΔV may vary depending on the desired user interface effect. CROWN Various linear or non-linear mappings can be used between

[0000] and

[0000] . In another example, the mapping can depend on the number of icons currently displayed and / or the arrangement of the icons.

[0075] Also, ΔV DRAG can take on various values. For example, ΔV DRAG At higher speeds, there is a larger opposite change in velocity (ΔV DRAG ) can be generated depending on the rotation speed of the crown. DRAG can have a constant value. DRAG can be based on the number of icons currently displayed and / or the arrangement of the icons currently displayed. CROWN and ΔV DRAGIt should be understood that the above-mentioned requirements can be varied to produce the desired user interface effect.

[0076] As can be seen from Equation 1, the sustained velocity (V T ) is ΔV CROWN is ΔV DRAG It can continue to increase as long as it is greater than V T is ΔV CROWN can have a non-zero value even when no input is received, meaning that the user interface screen can continue to change even if the user does not rotate the crown. When this happens, the screen will continue to change at the same velocity and ΔV that was maintained when the user stopped rotating the crown. DRAG You can stop changes based on the ingredients.

[0077] In some embodiments, when the crown is rotated in a direction corresponding to the opposite rotation direction of the current user interface change, V (T-1) The components can be reset to zero, allowing the user to T This allows the direction of the screen change to be changed quickly without having to provide sufficient force to offset the

[0078] In other embodiments, different states of the physical crown other than rotating the crown are used to navigate the displayed icons. 3. User Interface Appearance

[0079] The icons can take on a variety of appearances. For example, the icons can be rectangular in shape, as shown in FIG. 10. As another example, the icons can be circular, as shown in FIGS. 2-7. Furthermore, the icons can take on a variety of spatial arrangement schemes, meaning that the icons can be arranged along the rows and columns of an invisible grid. The grid can be symmetrical or asymmetrical. In FIG. 10, for example, a symmetrical grid is used. In FIG. 5, for example, an asymmetrical grid is used, with x icons arranged in the first row and y icons arranged along the second row.

[0080] FIG. 11 illustrates a radial icon placement scheme in which circular icons are aligned along the perimeter of invisible circles 1102 and 1104 of different diameters. Invisible circles 1102 and 1104 may, but need not, be concentric. Icons, such as icon 1106, positioned along different invisible circles may have different sizes. As shown, icons positioned along invisible circle 1102 are closer to the center of device 100 and larger than icons positioned along invisible circle 1104. Also, although not shown in FIG. 11, radially positioned icons can be positioned along more than two invisible circles.

[0081] The distance a particular icon is placed from the center of the radial icon arrangement can depend on different factors. For example, the distance can be proportional to the frequency of use of the icon, with frequently used icons being closer to the center. As another example, the distance can depend on whether an incoming notification has been received for the icon (or its corresponding application). As another example, the distance can be user-defined or determined (i.e., curated) by device 100.

[0082] FIG. 25A illustrates the arrangement of icons within icon groups. On grid 2502, four groups of icons are displayed, including icon group 2512. In response to a touch input, such as a finger tap, at touchscreen location 2514 on group 2512, the icons within group 2512 can be displayed in an enlarged format. In grid 2506, the icons within group 2512, including icon 2516, are displayed in an enlarged format. FIG. 25B illustrates the arrangement of application functionality within groups. On grid 2508, the four icons of icon group 2512 are displayed on grid 2506, as discussed above. Selection of icon 2516 (e.g., by finger tap 2518) can cause a group of functions 2520 provided by application 2510 (corresponding to icon 2508) to be displayed.

[0083] The size and shape of icon groups can be systematic or can be defined. Defined icon groups, such as icon group 2512 (FIG. 25A) in grid 2502, share a predefined group size and group shape. The systematic icon groups shown in FIG. 42 can be user-defined group sizes and / or group shapes. For example, icon groups 4204 and 4206 in grid 4202 are different user-defined shapes and sizes. In some embodiments, systematic icon groups are defined using software running on a computer external to the personal electronic device and downloaded onto the personal electronic device.

[0084] 30 illustrates an icon arrangement scheme in which icons are arranged similarly to the pages of a Rolodex. The pages of exemplary Rolodex 3002 can flip in response to a rotation of the crown. For example, page (icon) 3004 can flip down onto page (icon) 3006 in response to a rotation of the crown.

[0085] 31 illustrates an icon placement scheme in which icons are arranged around the circumference of a turning dial. The exemplary turning dial 3102 can turn in response to a rotation of the crown. For example, rotating the crown in direction 3104 causes the dial 3102 to turn in the same direction (3106). Additionally, pushing (or pulling) the crown can change the number of rows in 3102, allowing for larger and / or more detailed icons in the remaining rows.

[0086] 32 illustrates an icon arrangement scheme in the form of a thumbnail list 202. Icons 3204 in the exemplary thumbnail list 3202 can have corresponding thumbnails 3206. The icons in the thumbnail list 3202 can be traversed by rotating a crown. A particular icon, such as icon 3204, can be directly selected for display by touching the corresponding thumbnail 3206.

[0087] 33 illustrates an arrangement scheme in which icons are aligned with the surface of an invisible sphere or polyhedron. Icons, such as icon 3302, on the foreground surface of the invisible sphere can be displayed. Icons on the opposite side of the invisible sphere's surface are not displayed. The invisible sphere can rotate in response to crown rotation and / or touchscreen input, thereby changing the particular icon displayed.

[0088] In operation, device 100 (FIG. 1) can use one or more of the icon arrangement schemes described above. The particular arrangement(s) used by device 10 can be user-selected and / or system-selected. That is, the user can be permitted to specify one or more preferred arrangements for display. Arrangements can also be selected by device 100 based on criteria such as the total number of applications installed on the device, the number of frequently accessed icons, etc.

[0089] Additionally, the particular order and arrangement of icons in a particular icon arrangement scheme may be selected by the user and / or selected by the system. For example, the user may be allowed to specify the location of icons on a given screen. Icon arrangement may also be determined (i.e., curated) by device 100 based on criteria such as frequency of use of particular icons, calculated relationships, etc. 4. Responding to user input

[0090] The displayed icons can respond to user input. FIGS. 12-14 illustrate rearrangement of displayed icons in response to rotation of the crown. In FIG. 12, nine icons are displayed along a 3×3 symmetrical grid 1202. Icon 1204 is displayed in the upper right position of grid 1202. As discussed above with respect to FIGS. 4-7, rotation of crown 108 can cause device 100 to reduce the number of displayed icons. For example, rotation of crown 108 can cause device 100 to display a 2×2 grid, thereby reducing the number of displayed icons. FIG. 13 illustrates an exemplary transition to a 2×2 grid in response to rotation of the crown in direction 1302. As shown, in response to rotation of the crown 1302, icon 1204 is visibly translated on the screen from its upper right position of the 3×3 grid of FIG. 12 to its new position within the 2×2 grid where it should be displayed. 14, icon 1204 is translated to the bottom left corner of 2x2 grid 1402. Additionally, icons that are to remain displayed within the 2x2 grid after transitioning from grid 1202 are enlarged and positioned within 2x2 grid 1402.

[0091] 15-17 illustrate another repositioning of icons in response to a crown rotation. In FIG. 15, nine icons are displayed along a 3×3 symmetrical grid 1502. Icon 1504 is displayed in the upper right position of grid 1502. As shown in FIG. 16, in response to a crown rotation 1602, icon 1504 is translated off-screen from its position within grid 1502 (FIG. 15) while being translated to its new position to be displayed within the 2×2 grid. In other words, during the transition illustrated by FIG. 16, icon 1504 can be split into two portions displayed at two separate, non-touch locations on the touchscreen of device 100. More specifically, one portion of icon 1504 remains partially displayed in the upper right corner as icon 1504 is translated off-screen, while the remaining portion of icon 1504 is partially displayed in the lower left corner as it is translated on-screen. 17, icon 1504 is translated to the bottom left corner of 2x2 grid 1702. Additionally, icons that are to remain displayed within the 2x2 grid after transitioning from grid 1502 are enlarged and positioned within 2x2 grid 1702.

[0092] 18-20 illustrate another rearrangement of icons in response to a crown rotation. In FIG. 18, nine icons are displayed along a 3x3 symmetrical grid 1802. As shown in FIG. 19, in response to a crown rotation 1902, icons along the right and bottom boundaries of grid 1802 (FIG. 18) are removed from display while the remaining icons are enlarged. The remaining icons are then displayed enlarged as shown within grid 2002 in FIG. 20.

[0093] It should be noted that in the exemplary screens shown in Figures 12-20, the icon displayed in the upper left corner (i.e., marked "A") is pinned, meaning that the transitions described above do not cause the icon to move away from the upper left corner. However, as discussed below, such an icon can be unpinned by user input.

[0094] FIG. 21 illustrates the rearrangement of icons in response to touchscreen input. As shown, icon 2106 is displayed in the bottom row of a 4×4 grid 2012. In response to a finger tap 2104 on icon 2106, a 3×3 grid 2108 is displayed with icon 2106 expanded and in the center. Notably, the icon marked "A" is displayed within grid 2012 and is no longer displayed within grid 2108. FIG. 21 also illustrates the updating of the displayed icons in response to a crown rotation. Specifically, in response to a crown rotation 2110, icon 2106 is further expanded and becomes the only icon displayed on the screen.

[0095] FIG. 22 illustrates the rearrangement of icons in response to motion of device 100. Device motion can be detected using one or more sensors, such as a gyroscope. As shown, various icons are displayed in grid 2202. In response to tilting device 100 in direction 2204, the displayed icons are translated in direction 2206, resulting in the display of different icons in grid 2208. Specifically, in response to tilting device 100 leftward in direction 2204, the icons in grid 2202 are translated leftward in direction 2206. In some embodiments, the translation may be incremental, such that a single row or column transitions out and a single row or column transitions onto the display. Alternatively, an entire screen of icons may transition out as an entirely new set of icons transitions onto the display.

[0096] FIG. 23 illustrates the change in icon appearance in response to touchscreen input. As shown, in response to a touch at location 2304, icon 2306 enters an enlarged state. Notably, icon 2306 is not located at location 2304; rather, icon 2306 (in its unenlarged state) is in row 2310 above touch location 2304 along row 2312. In this manner, user visibility of icon 2306 is improved both because the icon is enlarged and because visibility of the icon is not obstructed by a potentially opaque object touching device 100. It should be noted that more than one icon can be enlarged in response to a nearby touch. Multiple icons can be enlarged at different magnification levels that are inversely proportional to the distance between each enlarged icon and the touch location.

[0097] 40 illustrates icon behaviors that describe physical interactions between nearby icons. As shown, grid 4002 includes multiple icons arranged in a radial configuration. In response to a touch input at location 4010, the multiple icons are enlarged at different magnification levels. Notably, the enlargement of icon 4004 can move adjacent icons 4006 and 4008 away from icon 4004 so that the icons do not obscure each other's views.

[0098] FIG. 24 illustrates icon behavior illustrating the interaction between icons and grid boundaries. As shown, multiple icons are displayed according to an asymmetric grid 2402. The displayed icons include an uncompressed icon 2408. In response to a touch input in the form of a rightward directional gesture 2404, the icons on the right boundary of the grid 2402 can be compressed to a compressed icon 2406, such that the icons on the left side of the grid 2402 are displayed more dominantly in either an expanded or unexpanded format. Also, in response to a leftward directional touch gesture 2406, the icons on the left boundary of the grid 2402 can be compressed to a compressed icon 2412, such that the icons on the right side of the grid 2402 are displayed more dominantly. The above-described interaction allows all or substantially all icons to be displayed simultaneously while allowing a user to easily view and select the icons. Note that this compression could occur in a symmetric grid, although not shown.

[0099] FIG. 34 illustrates icon behavior illustrating interactions between grid boundaries and nearby icons. In the radial arrangement of FIG. 34 , icons are displayed between an invisible inner circle 3402 and an invisible outer boundary circle 3400. The outer circle 3400 can be sized based on the physical size of the touchscreen of device 100. The inner circle 3402 can be sized based on design and / or user preference. The inner circle 3402 can also be sized based on user input, such as a crown rotation. The inner circle 3402 can respond to touchscreen input within its surface area. For example, a touchdown and subsequent touch action occurring within the surface area of ​​the inner circle 3402 can be interpreted as panning the inner circle 3402. When the inner circle 3402 is panned, icons positioned between the inner circle 3402 and the outer circle 3400, such as icons 3404 and 3408, can be resized based on the available space between the inner circle 3402 and the outer circle 3400, the number of displayed icons, and the size of adjacent icons. For example, in response to panning circle 3402 to the right, icon 3404 may increase in size, and the expansion of icon 3404 may cause icon 3408 to decrease in size.

[0100] Note that in the absence of user input, displayed icons can be programmed to move on the screen to prevent screen burn-in. Icon placement can also respond to multi-touch gestures. For example, a two-finger downward gesture on the touchscreen of device 100 (FIG. 1) can cause the display of system information, such as a status bar. As another example, a two-finger gesture, in which two fingers move in opposite directions, can configure device 100 (FIG. 1) for left-handed or right-handed use. 5. Additional Features

[0101] Returning to Figure 2, home screen 200 can display system-generated information such as alerts. For example, home screen 200 can display a reminder that the user has been sedentary for a long time and exercise is required. Screen 200 can also display a rest recommendation because the user has a busy calendar the next morning. Returning also to Figure 3, screen 300 can be displayed when device 100 is docked.

[0102] FIG. 26 illustrates the use of wallpaper 2602 to aid user navigation of icons within a grid. As shown, grid 2600 has a relatively large number of icons. In response to a crown rotation 2604, a subset of the icons in grid 2600 is enlarged and displayed within grid 2606. In addition, a corresponding portion of wallpaper 2602 displayed behind the subset is also displayed, meaning, for example, that if icons in the upper left quadrant of grid 2600 become displayed within grid 2606, then the upper left quadrant of wallpaper 2602 is also displayed in grid 2606. Also shown, in response to a leftward touch gesture 2608, device 100 can display another subset of icons in grid 2600. For example, in grid 2610, icons in the upper right quadrant of grid 2600 are displayed along with the upper right quadrant of wallpaper 2600. In this manner, the user can determine the relationship between the currently displayed set of icons and the totality of icons available for display on device 100.

[0103] 27 illustrates an exemplary arrangement of icons, where the arrangement provides information to a user, such as current time information. The arrangement can be displayed in response to a crown movement. The arrangement can also be displayed after a predetermined period of user input inactivity. For example, screen 2702 showing the current time using small-sized icons can be displayed after a predetermined period of user input inactivity. Furthermore, in response to a crown rotation, screen 2702 can transition through screens 2704 and 2706 to screen 2708 showing a grid of icons.

[0104] 28 illustrates an example arrangement of icons (grid 2802) where the color and / or intensity of the displayed icon can change in response to incoming information. For example, icon 2804 corresponding to a messaging application can flash or illuminate when a new message arrives. In some embodiments, the flashing or illumination can correspond to the popularity of the application in an application store or the frequency of use of the application in the user's larger ecosystem. Additionally, the icons in grid 2802 can go beyond those applications that are installed to show icons representing a larger collection of applications available in the application store.

[0105] 29 illustrates an example display of a context-dependent message. The context-dependent message may be displayed in response to detecting a touch of the crown 108 by a user. The context-dependent message indicates the current functionality of the crown 108, which may take on different functions depending on the application currently running in the foreground of the device 100. For example, when a music application is running in the foreground of the device 100, a touch on the crown 108 may result in the display of a context-dependent message 2902 in the form of a volume indicator, which may indicate to the user that the current functionality of the crown 108 is volume control.

[0106] FIG. 35 depicts an example process 3500 for providing the user interface techniques described above. At block 3510, input based on a crown movement and / or a crown touch is received. The crown movement can be a rotation, a push, and / or a pull. At block 3520, a decision is made based on the type of crown movement represented by the received input. If the received input represents a crown rotation, processing proceeds to block 3530. If the received input represents a crown push or pull, processing proceeds to block 3550. When the received input represents a crown touch (without a rotation or a push / pull), processing proceeds to block 3560. At block 3530, the currently displayed screen and its corresponding position along the z-axis 906 ( FIG. 9 ) can be determined. Additionally, adjacent information levels along the z-axis 906 can be determined. The adjacent levels can be determined based on the direction of the crown rotation represented by the received input. A corresponding grid of icons, such as the icons illustrated by each of FIGS. 4-7, can be displayed. At block 3550, a home screen may be displayed, such as exemplary screen 200 of Figure 2. Alternatively, a user preferences screen may be displayed, such as exemplary screen 300 of Figure 3. At block 3560, a context-sensitive message may be displayed, such as exemplary context-sensitive message 2902 of Figure 29.

[0107] FIG. 36 depicts an exemplary computing system 3600 that provides the user interface techniques described above. In some embodiments, the computing system 3600 can form the device 100. As shown, the computing system 3600 can have a bus 3602 coupling together an I / O section 3604, one or more computer processors 3606, and a memory section 3608. The memory section 3608 can contain computer-executable instructions and / or data that implement the techniques described above, including process 3500 (FIG. 35). The I / O section 3604 can be connected to a display 3610, which can have touch-sensitive components 3612. The I / O section 3604 can be connected to a crown 3614. The I / O section 3604 can be connected to an input device 3616, which can include buttons. The I / O section 3604 can be connected to a communication unit 3618, which can provide, for example, Wi-Fi, Bluetooth, and / or cellular functionality. The I / O section 3604 can be connected to a sensor pack 3620, which can include a gyroscope, a GPS sensor, a light sensor, a gyroscope, an accelerometer, and / or combinations thereof. Note that one or more of the above-mentioned components can be part of an on-chip system.

[0108] The memory section 3608 of the computing system 3600 can be a non-transitory computer-readable storage medium that stores computer-executable instructions that, when executed by one or more computer processors 3606, can cause the computer processors to perform, for example, the user interface techniques described above, including process 3500 (FIG. 35). The computer-executable instructions can also be stored in and / or transmitted within any non-transitory computer-readable storage medium for use by or in connection with an instruction execution system, apparatus, or device, such as a computer-based system, a system including a processor, or other system that can fetch and execute instructions from an instruction execution system, apparatus, or device. For purposes of this document, a "non-transitory computer-readable storage medium" can be any medium that can contain or store computer-executable instructions for use by or in connection with an instruction execution system, apparatus, or device. Non-transitory computer-readable storage media can include, without limitation, magnetic, optical, and / or semiconductor storage. Examples of such storage include magnetic disks, optical disks based on CD, DVD or Blu-ray technology, as well as RAM, ROM, EPROM, flash memory and solid-state memory.

[0109] Computing system 3600 is not limited to the components and configuration of Figure 36, but may include other or additional components in multiple configurations. In some embodiments, system 3600 may form a personal electronic device 3700 that is a tablet, as shown in Figure 37. In some embodiments, computing system 3600 may form a personal electronic device 3800 that is a mobile phone, as shown in Figure 38. In some embodiments, computing system 3600 may form a personal electronic device 3900 that is a portable music device, as shown in Figure 39.

[0110] Although the present disclosure and examples have been fully described with reference to the accompanying drawings, it should be noted that various changes and modifications will be apparent to those skilled in the art, and it is to be understood that such changes and modifications are included within the scope of the present disclosure and examples as defined by the appended claims.

Claims

1. 1. A method comprising:

1. An electronic device having a display and a rotatable input mechanism, displaying a graphical object selection user interface on the display, the graphical object selection user interface comprising: a first graphical object and a second graphical object; the first graphical object corresponds to the second graphical object; the first graphical object is displayed at a first size that is larger than a first individual size of the second graphical object; the second graphical object is selected from a set of displayed graphical objects; And, detecting a rotational input via the rotatable input mechanism while displaying the first graphical object and the second graphical object; selecting a third graphical object different from the second graphical object in response to detecting the rotation input; the second graphical object is displayed at a second discrete size; the third graphical object is displayed at the first individual size, which is larger than the second individual size. And, Equipped with each selected graphical object is displayed at a larger size than non-selected displayed graphical objects of said set of graphical objects; the non-selected graphical objects include a fourth graphical object and a fifth graphical object, the fourth graphical object being displayed closer to the individual selected graphical object than the fifth graphical object, the individual selected graphical object being displayed at a larger size than the fourth graphical object, and the fourth graphical object being displayed at a larger size than the fifth graphical object; method.

2. 2. The method of claim 1, wherein the third graphical object is selected from the set of displayed graphical objects. method.

3. 3. The method of claim 1, wherein selecting the third graphical object comprises traversing a portion of the set of displayed graphical objects. method.

4. 4. The method of claim 1, wherein selecting the third graphical object comprises visually distinguishing the third graphical object from among the set of displayed graphical objects. method.

5. 5. A method according to any one of claims 1 to 4, wherein the set of displayed graphical objects is displayed as a list of graphical objects along relative edges of the display. method.

6. 6. The method of claim 5, wherein the rotatable input mechanism is positioned adjacent the respective edges of the display. method.

7. 7. The method of claim 1, wherein the rotatable input mechanism rotates about an axis that is fixed relative to the display. method.

8. 8. The method of claim 1, wherein the set of displayed graphical objects is displayed in a vertical arrangement. method.

9. 9. The method according to any one of claims 1 to 8, wherein the electronic device is a wristwatch. method.

10. 10. The method of any one of claims 1 to 9, wherein the rotatable input mechanism is a physical crown. method.

11. 11. The method of any one of claims 1 to 10, the graphical object selection user interface includes the set of displayed graphical objects including the second graphical object and the third graphical object, the third graphical object being displayed at a third discrete size that is smaller than the first discrete size; the rotation input is detected while displaying the first graphical object, the second graphical object, and the third graphical object; method.

12. 12. The method of any one of claims 1 to 11, wherein the display is a touch-sensitive display, the method further comprising: detecting a touch input via the touch-sensitive display selecting a sixth graphical object from the set of displayed graphical objects, the sixth graphical object being displayed at the first discrete size; in response to detecting the touch input selecting the sixth graphical object from the set of displayed graphical objects, replacing the display of the first graphical object with a seventh graphical object at the first size, the seventh graphical object corresponding to the sixth graphical object; A method comprising:

13. 13. The method of any one of claims 1 to 12, wherein the third graphical object is displayed adjacent to the second graphical object. method.

14. 14. A computer-readable storage medium having stored thereon one or more programs configured to be executed by one or more processors of an electronic device having a display and a rotatable input mechanism, the one or more programs comprising instructions for performing the method of any one of claims 1 to 13. A computer-readable recording medium.

15. 1. An electronic device comprising: The display and a rotatable input mechanism; one or more processors; and a memory storing one or more programs configured to be executed by said one or more processors, said one or more programs including instructions for performing the method of any one of claims 1 to 13. Electronic devices.

16. 1. An electronic device comprising: Means for carrying out the method according to any one of claims 1 to 13 An electronic device comprising:

Images