JP7223081B2 - User interface for manipulating user interface objects - Google Patents

Description

[Cross reference to related applications]
This application is filed September 3, 2013, entitled "CROWN INPUT FOR A WEARABLE ELECTRONIC DEVICE," U.S. Provisional Patent Application No. 61/873,356, entitled "USER INTERFACE OBJECT MANIPULATIONS IN A USER INTERFACE," filed September 2013. U.S. Provisional Patent Application No. 61/873,359, filed May 3, 2013, entitled "USER INTERFACE FOR MANIPULATING USER INTERFACE OBJECTS"; ＩＮＴＥＲＦＡＣＥ ＦＯＲ ＭＡＮＩＰＵＬＡＴＩＮＧ ＵＳＥＲ ＩＮＴＥＲＦＡＣＥ ＯＢＪＥＣＴＳ ＷＩＴＨ ＭＡＧＮＥＴＩＣ ＰＲＯＰＥＲＴＩＥＳ」と題する２０１３年９月３日出願の米国特許仮出願第６１／８７３，３６０号、及び「ＵＳＥＲ ＩＮＴＥＲＦＡＣＥ ＦＯＲ ＭＡＮＩＰＵＬＡＴＩＮＧ ＵＳＥＲ ＩＮＴＥＲＦＡＣＥ ＯＢＪＥＣＴＳ ＷＩＴＨ ＭＡＧＮＥＴＩＣ ＰＲＯＰＥＲＴＩＥＳ」と題する２０１４年９ No. 14/476,657, filed May 3, is claimed. The contents of these applications are incorporated herein by reference in their entireties for all purposes.

This application is a co-pending U.S. non-provisional application entitled "CROWN INPUT FOR A WEARABLE ELECTRONIC DEVICE" filed on Sep. 3, 2014, concurrently with the present application, to Nicholas Zambetti et al. U.S. patent nonprovisional applications entitled "USER INTERFACE OBJECT MANIPULATIONS IN A USER INTERFACE" and "Device, Method, and Graphical User" filed on September 3, 2014, concurrently with this filing, to Zambetti et al. No. 61/747,278, filed Dec. 29, 2012, entitled "Interface for Manipulating User Interface Objects with Visual and/or Haptic Feedback". The contents of these applications are incorporated herein by reference in their entireties for all purposes.

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

Modern personal electronic devices can have small form factors. Exemplary personal electronic devices include, without limitation, tablets and smart phones. The use of such personal electronic devices involves manipulating user interface objects on the display screen that have a compact form factor that complements the design of the personal electronic device.

Exemplary operations that a user can perform on a personal electronic device include navigating a hierarchy, selecting user interface objects, adjusting the position, size and zoom of user interface objects, or manipulating user interfaces. Exemplary user interface objects include digital images, videos, text, icons, control elements such as buttons, and other graphics.

Existing methods of manipulating user interface objects on miniaturized personal electronic devices can be inefficient. Moreover, existing methods generally provide less accuracy than is desirable.

In some embodiments, techniques are disclosed for navigating a user interface on a personal electronic device based on crown movements. A system and computer-readable storage medium for performing the processes described above are also disclosed.

1 illustrates an exemplary personal electronic device;

1 illustrates an exemplary user interface;

1 illustrates an exemplary user interface;

1 illustrates an exemplary user interface;

1 illustrates an exemplary user interface;

1 illustrates an exemplary user interface;

1 illustrates an exemplary user interface;

1 illustrates an exemplary user interface;

4 illustrates an exemplary user interface logical structure;

1 illustrates an exemplary user interface;

1 illustrates an exemplary user interface;

1 illustrates an exemplary user interface;

4 illustrates an exemplary user interface transition;

1 illustrates an exemplary user interface;

1 illustrates an exemplary user interface;

4 illustrates an exemplary user interface transition;

1 illustrates an exemplary user interface;

1 illustrates an exemplary user interface;

4 illustrates an exemplary user interface transition;

1 illustrates an exemplary user interface;

1 illustrates an exemplary user interface;

4 illustrates an exemplary user interface and transitions;

1 illustrates an exemplary user interface;

4 illustrates an exemplary user interface and transitions;

1 illustrates an exemplary user interface; 1 illustrates an exemplary user interface;

1 illustrates an exemplary user interface;

4 illustrates an exemplary user interface and transitions;

1 illustrates an exemplary user interface;

1 illustrates an exemplary user interface;

4 illustrates an exemplary user interface and transitions;

1 illustrates an exemplary user interface;

1 illustrates an exemplary user interface;

1 illustrates an exemplary user interface;

1 illustrates an exemplary user interface;

1 illustrates an exemplary process;

1 illustrates an exemplary computing system;

1 illustrates an exemplary personal electronic device;

1 illustrates an exemplary personal electronic device;

1 illustrates an exemplary personal electronic device;

1 illustrates an exemplary user interface;

4 illustrates an exemplary user interface logical structure;

1 illustrates an exemplary user interface;

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

FIG. 1 illustrates an exemplary personal electronic device 100 . In the illustrated example, the device 100 is a wristwatch generally including a body 102 and a strap 104 for attaching the device 100 to the user's body. That is, the device 100 is wearable. Body 102 can be designed to be tied 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 .

The term "crown" in the context of a wristwatch usually refers to the cap on top of the wristwatch winding shaft. In the context of personal electronic devices, the crown can be a physical part of the electronic device rather than a virtual crown on a touch sensitive display. The ability of the crown 108 to be mechanical means 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 (eg, forward and backward). Crown 108 can also be pushed into the body of device 100 and/or pulled out of device 100 . Crown 108 can be touch-sensitive, for example, using capacitive touch technology that can detect if a user is touching the crown. Also, the crown 108 can be further rocked in one or more directions or translated along a path along at least a portion of the edge or perimeter of the body 102 . In some examples, more than one crown 108 can be used. The appearance of the crown 108 can, but is not required, resemble that of a normal watch crown. Examples described herein refer to rotating, pushing, pulling and/or touching the crown, each of which constitutes a physical state of the crown.

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

The touch screen 106 may be behind or in front of a touch sensor panel implemented using any desired touch sensing technology such as mutual capacitive touch sensing, self-capacitive touch sensing, resistive touch sensing, projected scanning touch sensing, or the like. It can include display devices such as liquid crystal displays (LCD), light emitting diode (LED) displays, organic light emitting diode (OLED) displays, and the like, partially or fully populated. The touch screen 106 enables a user to perform various functions by touching or hovering near the touch sensor panel with one or more fingers or other objects. can be done.

In some examples, device 100 can further include one or more pressure sensors (not shown) that detect force or pressure applied to the display. Using the force or pressure applied to the touch screen 106 as an input to the device 100 to perform any desired operation, such as making selections, entering or exiting menus, displaying additional options/actions, etc. can be done. In some examples, different operations can be performed based on the amount of force or pressure being applied to touch screen 106 . One or more pressure sensors can also be used to determine the location where force is being applied to the touchscreen 106 .
1. Crown based user interface control

2-7 illustrate exemplary user interfaces responsive to movement of crown 108 (FIG. 1). FIG. 2 shows an exemplary screen 200 that may be displayed by device 100. As shown in FIG. Screen 200 can be, for example, a home screen that appears when device 100 is powered on or that first appears when device 100's touch screen display is powered on (including waking from a sleep state). Icons 204 , 206 and 208 may be displayed on screen 200 . In some embodiments, the icon may correspond to an application operable on device 100, which may indicate that the application may be installed on device 100 and/or the application may run as a service on device 100. means A touch (eg, finger tap) on an icon launches the corresponding application, which means that the application runs in the foreground of device 100 and appears on touch screen 106 . In some embodiments, icons may correspond to text documents, media items, web pages, email messages, and the like.

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

FIG. 3 shows an exemplary screen 300 that may be displayed by device 100 in response to rotation of crown 108 in direction 302 while screen 200 (FIG. 2) is displayed. Screen 300 may, for example, show the user's favorite icons previously selected by the user from a large set of available icons. Screen 300 may also include icons selected by device 100 from a large 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 applications operable on device 100 . A touch (eg, finger tap) on an icon launches the corresponding application.

FIG. 4 shows an exemplary screen 400 that may be displayed by device 100 in response to rotation of crown 108 in 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 . Since many applications may be operable on device 100, screen 400 may include many icons. When many icons are displayed, the icons can be sized appropriately to fit within the touchscreen 106, or at least a representative or predetermined percentage of the icons can be displayed within the touchscreen 106. It can be sized to fit visually.

FIG. 5 shows an exemplary screen 500 that may be displayed by device 100 in response to rotation of crown 108 in 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, can be larger compared to the display of icons on screen 400, providing additional fidelity. can have For example, icons on screen 500 may have indicia in the form of text and/or images to identify their corresponding applications. As shown, icon 504 uses the letter "c" to advise that the name of the corresponding application begins with "c" for clock. In some embodiments, a touch (eg, finger tap) on an icon launches the corresponding application.

FIG. 6 shows an exemplary screen 600 that may be displayed by device 100 in response to rotation of crown 108 in direction 602 . Screen 600 may, for example, show a more selected subset of icons corresponding to applications operable on device 100 than screen 500 .
Since fewer icons are displayed on screen 600 as compared to screen 500 (FIG. 5), the displayed icons (e.g., icon 604) may be different compared to the display of icons on screens 200, 300, 400, and 500. It can be further expanded and have additional fidelity. For example, icon 604 may have an image of a clock displaying the current time. In some embodiments, a touch (eg, finger tap) on an icon launches the corresponding application.

7 and 8 illustrate 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.

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

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

The screens 200-700 (FIGS. 2-7) described above can be logically organized as information planes along an axis. Under this organization, a given icon screen can be viewed as a plane defined by two axes (eg, x-axis and y-axis) and having icons spatially arranged thereon. Multiple planes can be organized along a third axis, called the z-axis, which is orthogonal to at least one of the x-axis or the y-axis. (The z-axis can be perpendicular to the plane formed by the x- and y-axes.)

This logical organization is such that x-axis 902 and y-axis 904 form a plane that is coplanar with the screen surface of the touch screen of device 100 (FIG. 1), and z-axis 906 is an x/axis formed by axes 902 and 904. It is illustrated by FIG. 9, perpendicular to the y-plane. 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 operable applications of the personal electronic device. Thus, different viewpoints of plane 912 can correspond to screens 400-700 (FIGS. 4-7). Planes 908 and 910 can be related to plane 912 and planes 908 and 910 can each contain a subset of the icons available on plane 912 . A particular information plane (ie, icon screen) to be displayed on the personal electronic device can be selected by movement of the crown, such as rotation of the crown. That is, movement of the crown can be used to traverse an information plane that intersects the z-axis 906, or to provide an alternative view of a given plane (eg, plane 912).

In some embodiments, when the movement of the crown reaches the edge of the z-axis (e.g., the top or bottom plane), the displayed information (e.g., the icon screen) will reach the edge with a rubber band effect. indicate that Consider the situation where the user reaches the bottom information plane by entering the crown. When the user provides additional crown input in the same direction, the cluster of displayed icons shrinks (to the extent possible) according to the movement of the crown until the movement stops. When the crown stops moving, the displayed icons return from their shrunk size to their normal size by an on-screen animation, thereby producing a rubber-banding visual effect.

One notable benefit of this logical organization is that the different information planes do not have to be zoomed subsets of each other (although they can be zoomed subsets). That is, for example, planes 908 and 910 may contain entirely different icons of those available on the personal electronic device, yet different information planes may be more efficiently accessed by the user.

Alternatively, the 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 may correspond to the first and second mode states of the device, and screens 400-700 may correspond to the third mode state, for example. The personal electronic device may cycle through mode states in response to depression of the crown to display screen 200 or 300 in first and second mode states, respectively. In alternate embodiments, mode states may be cycled using buttons 110 , 112 , or 114 . When multiple screens are available within a particular mode state (e.g., a third mode state), the device transitions from displaying one screen (e.g., 300) to another (e.g., 400) based on crown rotation. can switch. On-screen user interface elements, such as paging dots, can be used to indicate the availability of additional screens for display within a particular mode state.

This logical arrangement is illustrated by FIG. As shown, planes 4102 and 4104 correspond to screens 200 (FIG. 2) and 300 (FIG. 3), respectively. Plane 4106 may represent a collection of icons representing operable applications of the personal electronic device. Thus, different viewpoints of plane 4106 can correspond to screens 400-700 (FIGS. 4-7). A particular information plane (ie, icon screen) to be displayed on the personal electronic device can be selected by a crown action, such as depressing the crown.
2. Crown control based on speed

Device 100 (FIG. 1) may consider the rotational angular velocity of crown 108 (FIG. 1) in determining whether one icon screen should be replaced with another icon screen. Specifically, device 100 may require crown 108 to rotate above a predetermined angular velocity before changing the display of one icon screen to another icon screen. In this way, a slow rotation of crown 108 unintended by the user causes device 100 to receive crown input indicative of angular displacement, while the displacement has sufficient velocity to cause an unintended update of the user interface. Then it need not be interpreted. The selection of the predetermined angular velocity for this purpose can depend on a number of factors, such as the density of the currently displayed icons, the visual arrangement of the currently displayed icons, and the like.

（数式１） In some embodiments, the minimum rotational angular velocity of the crown required to switch between icon screens corresponds directly to the instantaneous angular velocity of crown 108 (FIG. 1), which means that the user interface of device 100 Essentially, it means that the crown 108 responds when it reaches sufficient angular velocity. In some embodiments, the minimum angular velocity of crown rotation required to switch between icon screens is calculated based on, but not directly equal to, the instantaneous (“current”) angular velocity of crown 108. speed. In these embodiments, the device 100 can maintain a calculated crown (angular) velocity V at discrete moments within time T according to Equation 1.

(Formula 1)

In Equation 1, V _T represents the calculated crown velocity (speed and direction) at time T, V _(T-1) represents the previous velocity (speed and direction) at time T-1, ΔV _CROWN represents the change in velocity caused by the force applied by the rotation of the crown at time _T , and ΔV _DRAG represents the change in velocity due to drag. The applied force is reflected by ΔV _CROWN and can depend on the current rotational angular velocity of the crown. Therefore, ΔV _CROWN can also depend on the current angular velocity of the crown. In this manner, the device 100 provides user interface interaction based on user input in the form of not only the instantaneous velocity of the crown, but also the motion of the crown over multiple time intervals, even if those intervals are subdivided. can provide action. Typically, in the absence of user input in the form of ΔV _CROWN , _VT approaches zero (goes to zero) based on ΔV _DRAG according to Equation 1, but the sign of _VT is the rotation of the crown (ΔV _CROWN ) does not change without user input in the form of

Typically, the greater the rotational angular velocity of the crown, the greater the value of ΔV _CROWN . However, the actual mapping between crown rotational angular velocity and ΔV _CROWN may vary depending on the desired user interface effect. For example, various linear or non-linear mappings can be used between crown rotational angular velocity and ΔV _CROWN . In another example, the mapping can depend on the number and/or placement of icons currently displayed.

Also, ΔV _DRAG can take on various values. For example, ΔV _DRAG can be dependent on the rotational speed of the crown such that at higher speeds, a larger opposite speed change (ΔV _DRAG ) can be produced. In another example, ΔV _DRAG can have a constant value. In yet another example, ΔV _DRAG can be based on the number of icons currently displayed and/or the placement of icons currently displayed. It should be understood that the above-described requirements for ΔV _CROWN and ΔV _DRAG can be varied to produce desired user interface effects.

As can be seen from Equation 1, the sustained velocity (V _T ) can continue to increase as long as ΔV _CROWN is greater than ΔV _DRAG . Additionally, V _T can have a non-zero value even when no input for ΔV _CROWN is received, meaning that user interface screens can continue to change even if the user does not rotate the crown. do. When this happens, the screen can stop changing based on the sustained velocity and the ΔV _DRAG component when the user stops rotating the crown.

In some embodiments, the V _(T−1) component can be reset to a zero value when the crown is rotated in a direction corresponding to the direction of rotation opposite to the current user interface change, allowing the user to , VT to allow the direction of the screen change to be changed quickly without having to provide sufficient force to offset _VT .

In other embodiments, different states of the physical crown other than crown rotation are used to navigate the displayed icons.
3. User interface appearance

Icons can take on a variety of appearances. For example, the icon can be rectangular in shape as shown in FIG. As another example, the icons can be circular as shown in FIGS. 2-7. Additionally, the icons can take on a variety of spatial placement schemes, which means that they can be arranged along the rows and columns of the 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 asymmetric grid is used with x icons arranged in the first row and y icons arranged along the second row.

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. The invisible circles 1102 and 1104 are concentric, although this is not required. Icons, such as icon 1106, arranged along different invisible circles can have different sizes. As shown, the icons arranged along the invisible circle 1102 are closer to the center of the device 100 and are larger than the icons arranged along the invisible circle 1104 . Also, although not shown in FIG. 11, the radially arranged icons can be arranged along more than two invisible circles.

The distance that 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 icon use, with frequently used icons closer to the center. As another example, the distance can depend on whether an incoming call notification is received for (the application corresponding to) the icon. As another example, the distance can be user-defined or can be determined (ie, curated) by the device 100 .

FIG. 25A illustrates the placement of icons within icon groups. Four groups of icons are displayed on grid 2502 , including icon group 2512 . In response to touch input, such as a finger tap, at touch screen location 2514 on group 2512, icons within group 2512 may be displayed in an enlarged format. In grid 2506, the icons in 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 (eg, by finger tap 2518) can cause a group of functions 2520 provided by application 2510 (corresponding to icon 2508) to be displayed.

The size and shape of icon groups can be systematic or 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 of different user-defined shapes and sizes. In some embodiments, the systematic icon group is defined using software running on a computer external to the personal electronic device and downloaded onto the personal electronic device.

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

FIG. 31 illustrates an icon placement scheme in which the icons are placed around the circumference of the turning dial. An exemplary swivel dial 3102 may swivel in response to rotation of the crown. For example, rotation of the crown in direction 3104 causes dial 3102 to pivot in the same direction (3106). Also, pushing (or pulling) the crown can change the number of columns in 3102, allowing icons in the remaining columns to be enlarged and/or increased fidelity.

FIG. 32 illustrates an icon placement scheme in the form of a thumbnail list 202. FIG. Icons 3204 in exemplary thumbnail list 3202 may have corresponding thumbnails 3206 . Icons in thumbnail list 3202 can be traversed by rotating the crown. A particular icon such as icon 3204 can be directly selected for display by touching the corresponding thumbnail 3206 .

FIG. 33 illustrates a placement scheme in which icons are aligned with the surface of an invisible sphere or polyhedron. An icon, such as icon 3302, of 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 touch screen input, thereby changing the particular icon displayed.

In operation, device 100 (FIG. 1) may employ one or more of the icon placement schemes described above. The particular arrangement(s) used by device 10 may be selected by the user and/or may be selected by the system. That is, the user may be permitted to specify one or more preferred placements for display. Also, placement can be selected by the device 100 based on criteria such as the total number of applications installed on the device, the number of frequently accessed icons, and the like.

Additionally, the particular order and placement of icons in a particular icon placement scheme can be selected by the user and/or selected by the system. For example, a user may be permitted to specify the location of icons on a given screen. Also, icon placement can be determined (ie, curated) by the device 100 based on criteria such as frequency of use of particular icons, calculated relationships, and the like.
4. Response to user input

The displayed icons can be responsive to user input. 12-14 illustrate the 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 crown rotation in direction 1302 . As shown, in response to crown rotation 1302, icon 1204 is visible on the screen from its upper right position in the 3x3 grid of Figure 12 to its new position within the 2x2 grid to be displayed. is translated to Specifically, as shown in FIG. 14, icon 1204 is translated to the lower left corner of 2×2 grid 1402 . Additionally, icons that should remain displayed within the 2×2 grid after transitioning from grid 1202 are enlarged and placed within 2×2 grid 1402 .

15-17 illustrate another repositioning of the icons in response to 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 crown rotation 1602, icon 1504 is translated to its new position within grid 1502 (FIG. 15) while being translated to its new position to be displayed within the 2×2 grid. It is translated off-screen from that position. In other words, during the transition illustrated by FIG. 16, the icon 1504 can be split into two portions that are displayed at two separate non-touch locations on the touch screen of the device 100 . More specifically, a portion of icon 1504 remains partially displayed in the upper right corner as icon 1504 is translated off-screen, while the remainder of icon 1504 is translated on-screen. Sometimes partially visible in the lower left corner. As shown in FIG. 17, icon 1504 is translated to the lower left corner of 2×2 grid 1702 . Additionally, icons that should remain displayed within the 2×2 grid after transitioning from grid 1502 are enlarged and placed within 2×2 grid 1702 .

18-20 illustrate another repositioning of the icons in response to crown rotation. In FIG. 18, nine icons are displayed along a 3×3 symmetrical grid 1802 . As shown in FIG. 19, in response to 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 displayed enlarged as shown in grid 2002 of FIG.

In the exemplary screens shown in FIGS. 12-20, the icon displayed in the upper left corner (ie marked "A") is fixed, which means that the transition described above moves the icon from the upper left corner to It should be noted that it means do not let go. However, as discussed below, such icons can be unpinned by user input.

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

FIG. 22 illustrates the rearrangement of icons in response to device 100 actions. Motion of the device can be detected using one or more sensors, such as a gyroscope. As shown, various icons are displayed within grid 2202 . In response to tilting the device 100 in direction 2204 , the displayed icons are translated in direction 2206 resulting in the display of different icons within grid 2208 . Specifically, in response to tilting the device 100 in the left direction 2204 , the icons in the grid 2202 translate in the left direction 2206 . In some embodiments, translation may be increased such that a single row or column transitions out and a single row or column transitions on the display. Alternatively, a full screen of icons may transition out when a completely new set of icons transitions onto the display.

FIG. 23 illustrates the change in icon appearance in response to touch screen input. As shown, in response to a touch at location 2304, icon 2306 enters an expanded state. Notably, icon 2306 is not located at location 2304 , but rather icon 2306 (in its unmagnified state) is in row 2310 above touch location 2304 along row 2312 . In this manner, user visibility of icon 2306 is enhanced both because the icon is enlarged and because viewing of the icon is not obstructed by possibly opaque objects touching device 100 . It should be noted that more than one icon can be expanded in response to nearby touches. Multiple icons can be magnified at different magnification levels that are inversely proportional to the distance between each magnified icon and the touch location.

FIG. 40 illustrates icon behavior describing physical interactions between nearby icons. As shown, grid 4002 includes a number of icons arranged in a radial arrangement. In response to touch input at location 4010, multiple icons are magnified at different magnification levels. Notably, enlarging icon 4004 can move adjacent icons 4006 and 4008 away from icon 4004 so that the icons do not interfere with each other's view.

FIG. 24 illustrates icon behavior that describes the interaction between icons and grid boundaries. As shown, multiple icons are displayed according to an asymmetric grid 2402 . The displayed icons include uncompressed icons 2408 . Icons on the right border of grid 2402 are displayed such that, in response to touch input in the form of a right direction 2404 gesture, the icons on the left side of grid 2402 are predominantly displayed in either expanded or non-expanded form. can be compressed into compressed icon 2406 . Also, in response to a touch gesture in the left direction 2406, the icons on the left border of the grid 2402 can be compressed into a compressed icon 2412 such that the icons on the right side of the grid 2402 are more prominently displayed. The interaction described above allows all or substantially all icons to be displayed simultaneously while allowing the user to easily view and select the icons. Note that this compression can occur with a symmetrical grid, not shown.

FIG. 34 illustrates icon behavior describing interactions between grid boundaries and nearby icons. In the radial arrangement of FIG. 34, the icons are displayed between an invisible inner circle 3402 and an invisible outer bounding circle 3400 . Outer circle 3400 can be sized based on the physical size of the touch screen 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 crown rotation. The inner circle 3402 can respond to touch screen input within its surface area. For example, a touchdown and subsequent touch motion that occurs within the plane of the inner circle 3402 can be interpreted as a pan of 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, are displayed in the available space between the inner circle 3402 and the outer circle 3400. It can again be sized based on the number of icons and the size of neighboring icons. For example, in response to panning circle 3402 to the right, icon 3404 may increase in size, and expansion of icon 3404 may cause icon 3408 to decrease in size.

Note that in the absence of user input, the displayed icons can be programmed to move on the screen to prevent screen burn-in. The icon arrangement can also respond to multi-touch gestures. For example, a two-finger down 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

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

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

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

FIG. 28 illustrates an exemplary arrangement of icons (grid 2802) in which the color and/or intensity of displayed icons can change in response to incoming information. For example, icon 2804 corresponding to a messaging application may flash or glow when new messages arrive. In some embodiments, the blinking or lighting may correspond to the popularity of the application in application stores or the frequency of usage of the application in a larger ecosystem of users. Further, the icons in grid 2802 can show icons representing a larger collection of applications available in the application store beyond those installed applications.

FIG. 29 illustrates an exemplary display of context sensitive messages. A context-sensitive message may be displayed in response to detecting a touch of the crown 108 by the user. The context-sensitive message indicates the current functionality of Crown 108, which may take different functions depending on the application currently running in the foreground of device 100. FIG. For example, when a music application is running in the foreground of device 100, a touch on crown 108 provides context in the form of a volume indicator that can indicate to the user that the current functionality of crown 108 is volume control. Display of dependent message 2902 can be provided.

FIG. 35 depicts an exemplary process 3500 for providing the user interface techniques described above. At block 3510, input based on movement of the crown and/or touch of the crown is received. Movement of the crown can be rotating, pushing and/or pulling. At block 3520, a determination is made based on the type of crown motion represented by the received input. If the received input represents crown rotation, processing proceeds to block 3530 . If the input received represents pushing or pulling the crown, processing proceeds to block 3550 . When the input received represents a touch of the crown (without rotation or pushing/pulling), 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 level can be determined based on the direction of crown rotation represented by the received input. A corresponding grid of icons, such as the icons illustrated by each of FIGS. 4-7, may be displayed. At block 3550, a home screen, such as exemplary screen 200 of FIG. 2, may be displayed. Alternatively, a user-preferred screen, such as exemplary screen 300 of FIG. 3, may be displayed. At block 3560, a context sensitive message, such as the example context sensitive message 2902 of FIG. 29, may be displayed.

FIG. 36 depicts an exemplary computing system 3600 that provides the user interface techniques described above. In some embodiments, computing system 3600 may form device 100 . As shown, computing system 3600 may have a bus 3602 coupling together an I/O section 3604, one or more computer processors 3606, and a memory section 3608. Memory section 3608 may 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 that can have touch sensitive components 3612 . I/O section 3604 can be connected to crown 3614 . The I/O section 3604 can be connected to input devices 3616, which can include buttons. The I/O section 3604 can be connected to a communication unit 3618 that can provide Wi-Fi®, Bluetooth®, and/or cellular functionality, for example. The I/O section 3604 can be connected to a sensor pack 3620, which can have gyroscopes, GPS sensors, optical sensors, gyroscopes, accelerometers, and/or combinations thereof. Note that one or more of the components described above may be part of an on-chip system.

The memory section 3608 of the computing system 3600, when executed by one or more computer processors 3606, can, for example, cause the computer processors to perform the user interface techniques described above, including process 3500 (FIG. 35). It can be a non-transitory computer-readable storage medium that stores executable instructions. use by or in connection with an instruction execution system, apparatus, or device, such as a computer-based system, a system that includes a processor, or any other system capable of fetching and executing instructions from an instruction execution system, apparatus, or device As such, the computer-executable instructions may be stored and/or transferred in any non-transitory computer-readable storage medium. For the purposes of this document, a "non-transitory computer-readable storage medium" shall be any medium capable of containing or storing computer-executable instructions for use by or in connection with an instruction execution system, apparatus, or device. can. Non-transitory computer-readable storage media may include, without limitation, magnetic, optical, and/or semiconductor storage. Examples of such storage include magnetic discs, CDs, DVDs or optical discs based on Blu-ray technology, as well as RAM, ROM, EPROM, flash memory and solid state memory.

Computing system 3600 is not limited to the components and configuration of FIG. 36, but can include other or additional components in multiple configurations. In some embodiments, system 3600 may form a personal electronic device 3700, which is a tablet as shown in FIG. In some embodiments, computing system 3600 may form personal electronic device 3800, which is a mobile phone as shown in FIG. In some embodiments, computing system 3600 may form personal electronic device 3900, which is a portable music device as shown in FIG.

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 become apparent to those skilled in the art. It is to be understood that such changes and modifications are included within the scope of this disclosure and examples as defined by the appended claims.

Claims (11)

a method,
In a wearable electronic device with a display and a physical crown,
displaying a first application icon set of a plurality of application icons on the display, the first application icon set including a first quantity of icons;
receiving input via the physical crown while displaying the first set of application icons;
In response to receiving said input,
According to a determination that the input is of the first type,
replacing a display of the first application icon set with a second application icon set of the plurality of application icons, the second application icon set being a second set different from the first amount; a quantity of icons, wherein the first set of application icons and the second set of application icons include at least one common application icon;
According to a determination that the input is of a second type,
ceasing to display the first set of application icons ;
displaying the current time;
A method. 2. The method of claim 1, wherein the first type of input is rotational input in a first direction, and the second set of application icons are selected from the first application A subset of the icon set ,
Method. 3. The method of claim 2, wherein the second set of application icons includes icons in different sizes including a first size and a second size smaller than the first size.
Method. 3. The method of claim 2 , further comprising:
In response to receiving said input,
following a determination that the input is of a third type, the third type of input is a rotational input in a second direction opposite the first direction;
replacing a display of the first application icon set with a third application icon set of the plurality of application icons, the third application icon set being different from the first amount; a quantity of icons, wherein the first set of application icons and the third set of application icons include at least one common application icon;
with
the first application icon set is a subset of the third application icon set of the plurality of application icons ;
Method. 5. The method of claim 4, wherein the third set of application icons are displayed in the same size.
Method. 6. The method of any one of claims 1-5, wherein the second type of input is a press input.
Method. 7. The method of any one of claims 1-6, further comprising:
According to a determination that the input is of the second type,
A method comprising: displaying a home screen user interface. 8. The method of any one of claims 1-7, further comprising:
According to a determination that the input is of the second type,
A method comprising: displaying a user-predetermined set of application icons. A computer program for causing a computer to perform the method according to any one of claims 1 to 8. an electronic device,
a memory storing the computer program according to claim 9;
one or more processors capable of executing the computer program stored in the memory;
An electronic device comprising: an electronic device,
An electronic device comprising means for performing the method according to any one of claims 1-8.

Images