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

Abstract

Navigating a personal electronic device user interface based on the movement of the crown is disclosed. The device can select an appropriate level of information located along the z-axis for display based on crown motion. Navigation can be based on the angular velocity of the crown.

Description

[Cross-reference of related applications]
This application is a US Provisional Application No. 61 / 873,356, filed September 3, 2013, entitled “CROWN INPUT FOR A WEARABLE ELECTRONIC DEVICE”, “USER INTERFACE OBJECT MANIPULATIONS IN A USER INTERF13”. US Provisional Patent Application No. 61 / 873,359, filed September 3, US Patent Provisional Application 61 / 959,851, filed September 3, 2013, entitled “USER INTERFACE FOR MANIPULING USER INTERFACE OBJECTS”. INTERFACE FOR MANIPULATING USER INTERFACE OBJECTS WITH MAGNETIC PROPERTIE US Provisional Application No. 61 / 873,360, filed Sep. 3, 2013, entitled “S”, and US Patent Non-patent, filed September 3, 2014, entitled “USER INTERFACE FOR MANIPULATORING USER INTERFACE OBJECTS WIJECTS PROPERITES”. Claims priority of provisional application 14 / 476,657. The contents of these applications are incorporated herein by reference in their entirety for all purposes.

  This application is a non-provisional US patent application, Nicholas, which is a co-pending application entitled “CROWN INPUT FOR A WEABLE ELECTRONIC DEVICE” filed on September 3, 2014 at the same time as this inventor, with the inventor of Nicholas Zambetti et al. US patent non-provisional application entitled “USER INTERFACE MANIPULATIONS IN A USER INTERFACE” and “Device, Method, and GraphicU” filed on September 3, 2014 at the same time as this inventor, with Zambetti et al. Interface for Manipulating User Interface Objects with Visual and Related to US Provisional Application No. 61 / 747,278, filed December 29, 2012, entitled “/ or Haptic Feedback”. The contents of these applications are incorporated herein by reference in their entirety 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 a small shape. Exemplary personal electronic devices include, but are not limited to, tablets and smartphones. The use of such personal electronic devices involves the manipulation of user interface objects on the display screen that have small shapes that complement 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 control elements such as digital images, video, text, icons, buttons, and other graphics.

  Existing methods for manipulating user interface objects on miniaturized personal electronic devices can be inefficient. Furthermore, existing methods generally provide less accuracy than preferred.

  In some embodiments, techniques are disclosed for navigating a user interface on a personal electronic device based on the movement of a crown. 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.

1 illustrates an exemplary user interface logic structure.

1 illustrates an exemplary user interface.

1 illustrates an exemplary user interface.

1 illustrates an exemplary user interface.

Fig. 4 illustrates an exemplary user interface transition.

1 illustrates an exemplary user interface.

1 illustrates an exemplary user interface.

Fig. 4 illustrates an exemplary user interface transition.

1 illustrates an exemplary user interface.

1 illustrates an exemplary user interface.

Fig. 4 illustrates an exemplary user interface transition.

1 illustrates an exemplary user interface.

1 illustrates an exemplary user interface.

2 illustrates an example user interface and transitions.

1 illustrates an exemplary user interface.

2 illustrates an example user interface and transitions.

1 illustrates an exemplary user interface. 1 illustrates an exemplary user interface.

1 illustrates an exemplary user interface.

2 illustrates an example user interface and transitions.

1 illustrates an exemplary user interface.

1 illustrates an exemplary user interface.

2 illustrates an example 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.

An exemplary process is illustrated.

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.

1 illustrates an exemplary user interface logic 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 the structure can be changed 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 watch that generally includes a body 102 and a strap 104 that attaches the device 100 to the user's body. That is, the device 100 is wearable. The body 102 can be designed to be associated with the strap 104. The device 100 can have a touch-sensitive display screen (hereinafter touch screen) 106 and a crown 108. In some embodiments, the 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.

  Usually, the term “crown” in the context of a watch refers to the cap at the top of the shaft 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 the touch-sensitive display. The ability to make the crown 108 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 directions of rotation (eg, front and back). 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 the user is touching the crown. Also, the crown 108 can be further swung 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 is not necessary, but can resemble a normal watch crown. The examples described herein refer to crown rotation, push-in, withdrawal, and / or touch, each of which constitutes a physical state of the crown.

  Buttons 110, 112, and 114, when included, can each be a physical button or a touch-sensitive button. That is, the button can be, for example, a physical button or a capacitive button. Further, the body 102, which can include a bezel, can have a predetermined area on the bezel that acts as a button.

  Touch screen 106 may be located on the back or front of a touch sensor panel implemented using any desired touch sensing technique such as mutual capacitive touch sensing, self-capacitive touch sensing, resistive touch sensing, projection scanning touch sensing, etc. It can include display devices, such as liquid crystal displays (LCDs), light emitting diode (LED) displays, organic light emitting diode (OLED) displays, partially or fully disposed. Touch screen 106 allows a user to perform various functions by touching or hovering near the touch sensor panel with one or more fingers or other objects. Can do.

In some examples, the device 100 can further include one or more pressure sensors (not shown) that detect the 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 a selection, entering or exiting a menu, displaying additional options / actions, etc. Can do. In some examples, different operations can be performed based on the amount of force or pressure being applied to the touch screen 106. One or more pressure sensors can further be used to determine the location at which force is being applied to the touch screen 106.
1. Crown-based user interface control

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

  The device 100 can select icons 204, 206, and 208 for display on the display screen 200 from a large set of available icons, which means that these icons have current user related information. It is because it is doing. 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 an upcoming calendar appointment item.

  FIG. 3 illustrates an exemplary screen 300 that can be displayed by the device 100 in response to rotation of the crown 108 in the direction 302 while the screen 200 (FIG. 2) is being displayed. The screen 300 can show, for example, the user's favorite icons previously selected by the user from a large set of available icons. The screen 300 may also include icons selected by the device 100 based on the user's icon access frequency from a large set of available icons. Exemplary icons 304, 306, 308, 310, and 312 displayed on screen 300 may correspond to applications that are operable on device 100, respectively. A touch on the icon (for example, finger tap) activates the corresponding application.

  FIG. 4 illustrates an exemplary screen 400 that can be displayed by the device 100 in response to rotation of the crown 108 in the direction 402 while the screen 300 (FIG. 3) is being displayed. The screen 400 can show icons corresponding to all of the applications that can operate on the device 100, for example. Since multiple applications can be operable on the device 100, the screen 400 can include multiple icons. When many icons are displayed, the icons can be appropriately sized to fit within the touch screen 106, or at least a representative or a predetermined percentage of the icons can be within the touch screen 106. It can be sized so that it can be viewed.

  FIG. 5 illustrates an exemplary screen 500 that can be displayed by the device 100 in response to rotation of the crown 108 in the direction 502 while the screen 400 (FIG. 4) is being displayed. The screen 500 can show icons corresponding to a subset of applications operable on the device 100, for example. Since fewer icons are displayed on screen 500 than screen 400, icons displayed on screen 500, for example icon 504, can be larger than the display of icons on screen 400, providing additional fidelity. Can have. For example, an icon on the screen 500 may have a mark 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” in the clock. In some embodiments, a touch on an icon (eg, a finger tap) activates the corresponding application.

FIG. 6 illustrates an exemplary screen 600 that can be displayed by the device 100 in response to rotation of the crown 108 in the direction 602. The screen 600 corresponds to, for example, an application operable on the device 100 and can indicate a subset of icons further selected as compared to the screen 500.
Since fewer icons are displayed on the screen 600 than the screen 500 (FIG. 5), the displayed icons (eg, the icon 604) are compared to the display of the icons on the screens 200, 300, 400, and 500. It can expand further and have additional fidelity. For example, the icon 604 may have a clock image that displays the current time. In some embodiments, a touch on an icon (eg, a finger tap) activates the corresponding application.

  7 and 8 illustrate exemplary screens 700 and 800, respectively, that can be displayed by the device 100 in response to rotation of the crown 108 in the direction 702 while the 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 displayed. Because a single icon 704 is displayed on the screen 700, the icon 704 can have additional fidelity compared to the previous screen. For example, the icon 704 may have a clock image that displays date information along with the current time. A touch (for example, finger tap) on the icon 704 activates the corresponding application.

  Turning to FIG. 8, in some embodiments, the screen 800 can be displayed in response to a crown rotation in the direction 802 when the screen 600 (FIG. 6) is displayed. Screen 800 shows application 804 that corresponds to icon 704 (FIG. 7) and operates in the foreground of device 100. That is, application 804 was activated in response to crown rotation in direction 802. The example application 804 can be a clock application that provides an alarm function. Also, in some embodiments, screen 800 is displayed in response to crown rotation in direction 802 when screen 700 (FIG. 7) is displayed.

  The above-described screens 200 to 700 (FIGS. 2 to 7) can be logically organized as an information plane along the axis. Under this systematization, a given icon screen can be considered as a plane with icons defined by two axes (eg, x-axis and y-axis) and spatially arranged thereon. A plurality of planes can be organized along a third axis called the z-axis that 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 the x-axis 902 and the y-axis 904 form a plane that is coplanar with the screen surface of the touch screen of the device 100 (FIG. 1) and the z-axis 906 is formed by the axes 902 and 904. Illustrated by FIG. 9, which is perpendicular to the y-plane. The plane 908 can correspond to the screen 200 (FIG. 2). The plane 910 can correspond to the screen 300 (FIG. 3). Plane 912 can represent a collection of icons representing operable applications of the personal electronic device. Therefore, different viewpoints on the plane 912 can correspond to the screens 400 to 700 (FIGS. 4 to 7). Planes 908 and 910 can be related to plane 912, and planes 908 and 910 can include a subset of icons available on plane 912, respectively. The particular information plane (ie, the icon screen) to be displayed on the personal electronic device can be selected by the action of the crown, such as the rotation of the crown. That is, the motion of the crown can be used to traverse an information plane that intersects the z-axis 906 or can provide an alternative view of a given plane (eg, plane 912).

  In some embodiments, when the end of the z-axis is reached by movement of the crown (eg, the top or bottom plane), the displayed information (eg, the icon screen) reaches the end with a rubber band effect. Indicates that Consider the situation where the user has reached the bottom information plane due to crown input. If the user provides additional crown input in the same direction, the displayed collection of icons will shrink (to the extent possible) according to the crown motion until it stops. When the crown stops moving, the displayed icons return from their shrunken size to their normal size by an on-screen animation, thereby creating a rubber banding visual effect.

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

  Instead, the screens 200-700 (FIGS. 2-7) can be logically organized as a subset of information belonging to different mode states of the personal electronic device. Under this organization, the screens 200 and 300 can correspond to the first and second mode states of the device, and the screens 400-700 can correspond to the third mode state, for example. The personal electronic device circulates through the mode states in response to the crown depression, and can display the screen 200 or 300 in the first and second mode states, respectively. In alternative embodiments, the mode state may be cycled using buttons 110, 112, or 114. When multiple screens are available within a particular mode state (eg, third mode state), the device is based on the rotation of the crown from one screen (eg, 300) display to another screen (eg, 400). It can be switched. User interface elements on the screen, 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. Therefore, different viewpoints on the plane 4106 can correspond to the screens 400 to 700 (FIGS. 4 to 7). A particular information plane (ie, an icon screen) to be displayed on the personal electronic device can be selected by a crown action such as pushing the crown.
2. Crown control based on speed

  Device 100 (FIG. 1) can take into account the rotational angular velocity of crown 108 (FIG. 1) in determining whether one icon screen should be replaced with another icon screen. Specifically, the device 100 can request the crown 108 to rotate above a predetermined angular velocity before changing the display of one icon screen to another icon screen. In this way, slow rotation of the crown 108 that is not intended by the user causes the device 100 to receive crown input indicative of angular displacement, while the displacement has sufficient speed to cause an unintended update of the user interface. Then it need not be interpreted. The selection of a predetermined angular velocity for this purpose can depend on a number of factors such as the density of the currently displayed icons, the visual placement 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 directly corresponds to the instantaneous angular velocity of the crown 108 (FIG. 1), which means that the user interface of the device 100 Essentially, it means that the crown 108 responds when it reaches a sufficient angular velocity. In some embodiments, the minimum angular velocity of crown rotation required to switch between icon screens is calculated based on the instantaneous ("current") angular velocity of the crown 108, but not directly equal to the angular velocity. Speed. In these embodiments, the device 100 can maintain the calculated crown (angular) velocity V at different instants in time T according to Equation 1.

(Formula 1)

In Equation 1, V _T represents the calculated crown speed (speed and direction) at time T, V _(T−1) represents the previous speed (speed and direction) at time T−1, ΔV _CROWN represents the speed change caused by the force applied by the rotation of the crown at time _T , and ΔV _DRAG represents the speed change due to the drag. The applied force is reflected by ΔV _{CROWN and} can depend on the current rotational angular velocity of the crown. Thus, ΔV _CROWN can also depend on the current angular velocity of the crown. In this way, the device 100 can interact with each other even if the intervals are subdivided 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. An action can be provided. Typically, in the absence of user input in the form of ΔV _CROWN , V _T approaches zero (becomes zero) based on ΔV _DRAG according to Equation 1, but the sign of V _T is the crown rotation (ΔV _CROWN Note that it 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 the rotational angular velocity of the crown and ΔV _CROWN may vary depending on the desired user interface effect. For example, various linear or non-linear mappings can be used between the rotational angular velocity of the crown and ΔV _CROWN . In another example, the mapping can depend on the number of icons currently displayed and / or the placement of the icons.

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

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 . In addition, V _T can have a non-zero value even when the input of the [Delta] V _CROWN is not received, this means that the user can continue to change the user interface screen may not rotate the crown To do. When this happens, the screen can stop changing based on the velocity and ΔV _DRAG component maintained when the user stops rotating the crown.

In some embodiments, when the crown is rotated in a direction corresponding to the direction of rotation opposite to the current user interface change, the V _(T-1) component can be reset to zero value, , it makes it possible to quickly change the direction of the screen changes without the need to provide sufficient force to offset the V _T.

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

  Icons can take various appearances. For example, the icon can be rectangular as shown in FIG. As another example, the icon can be circular as shown in FIGS. Furthermore, the icons can take various spatial arrangement schemes, which means that the icons can be arranged along rows and columns of the grid that are not visible. The grid can be symmetric or asymmetric. In FIG. 10, for example, a symmetric grid is used. In FIG. 5, for example, an asymmetric grid having an x icon arranged in the first row and a y icon arranged along the second row is used.

  FIG. 11 illustrates a radial icon placement scheme in which circular icons are aligned around the perimeter of invisible circles 1102 and 1104 of different diameters. The invisible circles 1102 and 1104 are not required, but are concentric. Icons, such as icon 1106, placed along different invisible circles can have different sizes. As shown, the icons placed along the invisible circle 1102 are closer to the center of the device 100 and larger than the icons placed 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 at which a particular icon is placed from the center of the radial icon placement can depend on different factors. For example, the distance can be proportional to the frequency of use of the icon, and frequently used icons are closer to the center. As another example, the distance may depend on whether an incoming notification has been received for the icon. As another example, the distance can be defined by the user or can be determined (ie, selected) by the device 100.

  FIG. 25A illustrates the placement of icons within icon groups. Four groups of icons including icon group 2512 are displayed on grid 2502. In response to a touch input such as a finger tap at touch screen position 2514 on group 2512, the icons in group 2512 can be displayed in an expanded format. In the grid 2506, the icons in the group 2512 including the icons 2516 are displayed in an enlarged format. FIG. 25B illustrates the placement of application functionality within a group. On the grid 2508, four icons of the icon group 2512 are displayed on the 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 the icon group 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 group shown in FIG. 42 can be a user-defined group size and / or group shape. For example, icon groups 4204 and 4206 in grid 4202 are different user-defined shapes and sizes. In some embodiments, the systematic icon group is defined using software that runs on a computer external to the personal electronic device and is downloaded onto the personal electronic device.

  FIG. 30 illustrates an icon placement scheme in which icons are placed similar to Rolodex pages. The exemplary Rolodex 3002 page can be flipped in response to crown rotation. For example, page (icon) 3004 can be flipped down on page (icon) 3006 in response to crown rotation.

  FIG. 31 illustrates an icon placement scheme in which icons are placed on the outer periphery of the swivel dial. The exemplary swivel dial 3102 can swivel in response to crown rotation. For example, rotation of the crown in direction 3104 causes dial 3102 to pivot in the same direction (3106). Also, crown indentation (or withdrawal) can change the number of 3102 columns, allowing the icons in the remaining columns to expand and / or increase fidelity.

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

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

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

Further, a 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 allowed to specify the position of an icon on a given screen. In addition, the icon arrangement can be determined (ie, carefully selected) by the device 100 based on criteria such as the frequency of use of a specific icon and the calculated relationship.
4). Responding to user input

  The displayed icon can respond to user input. 12-14 illustrate the repositioning of the displayed icons in response to crown rotation. In FIG. 12, nine icons are displayed along a 3 × 3 symmetric grid 1202. The icon 1204 is displayed at the upper right position of the grid 1202. As discussed above with respect to FIGS. 4-7, rotation of the crown 108 can reduce the number of displayed icons to the device 100. For example, rotation of the crown 108 can cause the device 100 to display a 2 × 2 grid, thereby reducing the number of icons displayed. 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 3 × 3 grid of FIG. 12 to its new position in the 2 × 2 grid to be displayed. Translated to. Specifically, as shown in FIG. 14, the icon 1204 is translated to the lower left corner of the 2 × 2 grid 1402. In addition, icons that should remain displayed in the 2 × 2 grid after transition from the grid 1202 are enlarged and placed in the 2 × 2 grid 1402.

  FIGS. 15-17 illustrate another repositioning of icons in response to crown rotation. In FIG. 15, nine icons are displayed along a 3 × 3 symmetric grid 1502. The icon 1504 is displayed at the upper right position of the grid 1502. As shown in FIG. 16, in response to crown rotation 1602, icon 1504 is translated into its new position to be displayed in the 2 × 2 grid while in grid 1502 (FIG. 15). It is translated from the position outside the screen. In other words, during the transition illustrated by FIG. 16, the icon 1504 can be divided into two portions that are displayed at two separate non-contact locations on the touch screen of the device 100. More specifically, when the icon 1504 is translated off the screen, a portion of the icon 1504 remains partially displayed in the upper right corner, while the rest of the 1504 is translated on the screen. Sometimes displayed partially in the lower left corner. As shown in FIG. 17, the icon 1504 is translated to the lower left corner of the 2 × 2 grid 1702. In addition, icons that should remain displayed in the 2 × 2 grid after transition from the grid 1502 are enlarged and placed in the 2 × 2 grid 1702.

  18-20 illustrate another repositioning of icons in response to crown rotation. In FIG. 18, nine icons are displayed along a 3 × 3 symmetric grid 1802. As shown in FIG. 19, in response to crown rotation 1902, icons along the right and bottom borders of grid 1802 (FIG. 18) are removed from the display while the remaining icons are magnified. The remaining icons are enlarged and displayed as shown in the 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, because the transition described above causes the icon to move from the upper left corner. It should be noted that it means not letting go. However, as will be discussed below, such icons can be unlocked 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 the finger tap 2104 on the icon 2106, the 3 × 3 grid 2108 is displayed with the icon 2106 being enlarged around the center. It should be noted that the icon marked “A” is displayed in the grid 2012 and is no longer displayed in the grid 2108. FIG. 21 also illustrates the updating of the displayed icon in response to crown rotation. 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 the operation of the device 100. The operation of the device 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 of device 100 in direction 2204, the displayed icon is translated in direction 2206, resulting in the display of a different icon in grid 2208. Specifically, in response to the tilt of the device 100 in the left direction 2204, the icon of the grid 2202 translates 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, the full screen of icons may transition out when a completely new set of icons transitions on the display.

  FIG. 23 illustrates changes in the appearance of icons in response to touch screen input. As shown, in response to a touch at location 2304, icon 2306 is in an expanded state. Notably, icon 2306 is not located at position 2304, but rather icon 2306 is in line 2310 above touch position 2304 along line 2312 (in its unmagnified state). In this way, the user visibility of the icon 2306 is improved both because the icon is enlarged, and in some cases, when the device 100 is touched, the visibility of the icon is not disturbed by an opaque object. It should be noted that more than one icon can be magnified in response to a nearby touch. Multiple icons can be magnified at different magnification levels that are inversely proportional to the distance between each magnified icon and the touch position.

  FIG. 40 illustrates icon operations that illustrate 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, a number of icons are magnified at different magnification levels. Note that enlarging icon 4004 can cause adjacent icons 4006 and 4008 to move away from icon 4004 so that the icons do not interfere with each other.

  FIG. 24 illustrates icon operations that illustrate the interaction between icons and grid boundaries. As shown, a number of icons are displayed according to the asymmetric grid 2402. The displayed icons include uncompressed icons 2408. In response to a touch input in the form of a gesture in the right direction 2404, the icon on the right border of the grid 2402 so that the icon on the left side of the grid 2402 is displayed more preferentially in either an expanded or non-enlarged format Can be compressed into a compressed icon 2406. Also, in response to a touch gesture in the left direction 2406, the icon on the left border of the grid 2402 can be compressed into a compressed icon 2412 so that the icon on the right side of the grid 2402 is displayed more preferentially. 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 in a symmetric grid, not shown.

  FIG. 34 illustrates icon operations that illustrate the interaction between the grid boundary and nearby icons. In the radial arrangement of FIG. 34, icons are displayed between the invisible inner circle 3402 and the invisible outer boundary circle 3400. The outer circle 3400 can be sized based on the physical size of the touch screen of the device 100. Inner circle 3402 can be sized based on design and / or user preferences. 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 action that occurs within the surface area of the inner circle 3402 can be interpreted as a pan of the inner circle 3402. When the inner circle 3402 is panned, icons placed between the inner circle 3402 and the outer circle 3400, such as icons 3404 and 3408, are displayed, the available space between the inner circle 3402 and the outer circle 3400. Based on the number of icons and the size of the adjacent icon, it can be resized. For example, in response to panning to the right of the circle 3402, the icon 3404 can increase in size and the enlargement of the icon 3404 can decrease the size of the icon 3408.

Note that in the absence of user input, the displayed icon can be programmed to move on the screen to prevent screen burn-in. The icon placement can also respond to multi-touch gestures. For example, a downward gesture of two fingers on the touch screen 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 set the device 100 (FIG. 1) for left-handed or right-handed use.
5. Additional functions

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

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

  FIG. 27 illustrates an exemplary arrangement of icons where the arrangement provides information to the user, eg, current time information. The arrangement can be displayed in response to crown movement. Also, the arrangement can be displayed after a predetermined user input inactivity period. For example, a screen 2702 showing the current time using a small size icon can be displayed after a predetermined user input inactivity period. Further, in response to crown rotation, 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) where the color and / or strength of the displayed icon can change in response to incoming information. For example, the icon 2804 corresponding to the messaging application can flash or light up when a new message arrives. In some embodiments, the blinking or light emission may correspond to the popularity of the application in the application store, or the frequency of use of the application in the user's larger ecosystem. In addition, the icons in grid 2802 may represent icons that represent a larger set of applications available in the application store beyond those applications that are installed.

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

  FIG. 35 depicts an example process 3500 that provides the user interface technology described above. At block 3510, input based on crown motion and / or crown touch is received. The movement of the crown can be rotation, pushing and / or withdrawal. 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 received input represents crown indentation or withdrawal, processing proceeds to block 3550. When the received input represents a crown touch (without rotation or push / draw), 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. In addition, adjacent information levels along the z-axis 906 can be determined. Adjacent levels 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 in each of FIGS. 4-7, can be displayed. At block 3550, a home screen such as the exemplary screen 200 of FIG. 2 may be displayed. In the alternative, a user-preferred screen such as the exemplary screen 300 of FIG. 3 can 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 technology described above. In some embodiments, the computing system 3600 can form the device 100. As shown, computing system 3600 can include a bus 3602 that connects an I / O section 3604, one or more computer processors 3606, and a memory section 3608 together. 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 a touch sensitive component 3612. An I / O section 3604 can be connected to the crown 3614. The I / O section 3604 can be connected to an input device 3616 that can include buttons. The I / O section 3604 can be connected to a communication unit 3618 that 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, GPS sensor, light sensor, gyroscope, accelerometer, and / or combinations thereof. Note that one or more of the components described above can 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 cause, for example, a computer processor to execute the user interface techniques described above, including the process 3500 (FIG. 35). It may be a non-transitory computer readable storage medium that stores executable instructions. Use or association by an instruction execution system, apparatus, or device, such as a computer-based system, a system that includes a processor, or other system that can fetch instructions from and execute instructions from an instruction execution system, apparatus, or device Thus, computer-executable instructions may be stored and / or transferred within any non-transitory computer-readable storage medium. For the purposes of this document, a “non-transitory computer readable storage medium” may be any medium that can contain or store computer-executable instructions for use or in connection with an instruction execution system, apparatus, or device. it can. Non-transitory computer readable storage media may include, but are not limited to, magnetic, optical, and / or semiconductor storage. Examples of such storage include magnetic disks, CDs, DVDs, or optical disks based on Blu-ray technology, and RAMs, ROMs, EPROMs, flash memories, and solid state memories.

  The computing system 3600 is not limited to the components and configurations of FIG. 36, but can include other or additional components in multiple configurations. In some embodiments, the system 3600 can form a personal electronic device 3700 that is a tablet as shown in FIG. In some embodiments, the computing system 3600 may form a personal electronic device 3800 that is a mobile phone as shown in FIG. In some embodiments, the computing system 3600 may form a personal electronic device 3900 that 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. Such changes and modifications are to be understood as being included within the scope of the present disclosure and examples as defined by the appended claims.

Claims (67)

A method performed by a computer,
Displaying a first plurality of icons on a touch-sensitive display of the wearable electronic device;
Receiving input based on a physical crown motion of the wearable electronic device;
In response to the received input, replacing the first plurality of icons with a second plurality of icons in the touch-sensitive display;
And the second plurality of icons is a subset of the first plurality of icons.   The method of claim 1, wherein the wearable electronic device is a wristwatch.   The method according to claim 1, wherein the action is pushing and pulling of the physical crown.   The method of claim 1, wherein the movement is rotation of the physical crown.   The method of claim 4, wherein the rotation is in a first direction of rotation.   The method of claim 4, wherein the rotation exceeds a predetermined angular velocity threshold.   The physical crown includes a capacitive touch sensor configured to sense touch input, and the received input is further based on the touch input on the physical crown. The method described in 1. A first icon of the first plurality of icons is associated with an application, a second icon of the second plurality of icons is associated with the same application, and the method comprises:
Displaying the second icon along with information about the application when the second plurality of icons are displayed;
Displaying the first icon along with different information about the application when the first plurality of icons are displayed;
The method of claim 1, further comprising:   The method of claim 8, wherein a first information density is associated with the first plurality of icons and a second information density is associated with the second plurality of icons. The received input is a first received input and the method comprises:
Receiving a second input based on a second motion of the physical crown;
In response to the second received input, replacing the second plurality of icons with the first plurality of icons in the touch-sensitive display;
The method of claim 1, further comprising:   The method of claim 10, wherein the second action is a rotation of the physical crown in a second direction opposite to the first direction.   The method of claim 10, wherein the second action is pushing or withdrawing the physical crown. The received input is a first received input and the method comprises:
Receiving a second input based on a second motion of the physical crown, wherein the second motion is a rotation in the first rotational direction;
Responsive to the second received input, replacing the display of the second plurality of icons with a third plurality of icons;
The method of claim 1, further comprising: wherein the third plurality of icons is a subset of the second plurality of icons. The received input is a first received input and the method comprises:
Receiving a second input based on a second motion of the physical crown, wherein the second motion is a rotation in the first direction;
Activating an application associated with an icon of the second plurality of icons in response to the second received input;
The method of claim 1, further comprising: The method comprises
Receiving information representing the activity state of the application corresponding to the displayed icon;
Changing the appearance of the displayed icon in response to the received information;
The method of claim 1, further comprising:   The method of claim 15, wherein the changing is one or more of blinking, changing color, and displaying an animation.   The method of claim 1, wherein an upper right icon of the first plurality of icons is not displayed in the second display.   The method according to claim 1, wherein an upper right icon of the first plurality of icons is a leftmost icon in a second row from the top in the second display. The replacement of the display of the first plurality of icons with the second plurality of icons;
Translating an icon of the first plurality of icons from a first position of the touch-sensitive display to a second position of the touch-sensitive display;
The method of claim 18, wherein the entire icon is displayed on the touch-sensitive display during the translation. The replacement of the display of the first plurality of icons with the second plurality of icons;
Displaying only a portion of the first plurality of icons at a first position of the touch-sensitive display;
Displaying the remaining portion of the icon at a second position of the touch-sensitive display;
The method of claim 18, wherein the first location and the second location are separated.   The method of claim 1, wherein the physical crown is a mechanical crown. Detecting a force applied to the touch-sensitive display;
Replacing the first display based on the detected force;
The method of claim 1, further comprising: A non-transitory computer-readable storage medium having computer-executable instructions, wherein when the computer-executable instructions are executed by one or more computer processors, the one or more computer processors have:
Displaying a first plurality of icons on the touch-sensitive display of the wearable electronic device;
Receiving input based on a physical crown motion of the wearable electronic device;
Responsive to the received input, causing the first plurality of icons to be replaced with a second plurality of icons in the touch-sensitive display;
A non-transitory computer readable storage medium, wherein the second plurality of icons is a subset of the first plurality of icons.   24. The non-transitory computer readable storage medium of claim 23, wherein the wearable electronic device is a watch.   24. A non-transitory computer readable storage medium according to claim 23, wherein the operation is pushing and pulling of the physical crown.   24. The non-transitory computer readable storage medium of claim 23, wherein the action is rotation of the physical crown.   27. The non-transitory computer readable storage medium of claim 26, wherein the rotation is a first direction of rotation.   27. The non-transitory computer readable storage medium of claim 26, wherein the rotation exceeds a predetermined angular velocity threshold.   24. The physical crown includes a capacitive touch sensor configured to sense touch input, and the received input is further based on the touch input on the physical crown. A non-transitory computer-readable storage medium described in 1. A first icon of the first plurality of icons is associated with an application, and a second icon of the second plurality of icons is associated with the same application, and is a non-transitory computer-readable storage. The medium is
Displaying the second icon together with information about the application when the second plurality of icons is displayed;
Displaying the first icon together with different information about the application when the first plurality of icons are displayed;
24. The non-transitory computer readable storage medium of claim 23, further comprising computer executable instructions.   24. The non-transitory computer readable storage medium of claim 23, wherein a first information density is associated with the first plurality of icons and a second information density is associated with the second plurality of icons. The received input is a first received input and the computer executable instructions are:
Receiving a second input based on a second motion of the physical crown;
Responsive to the second received input, replacing the second plurality of icons with the first plurality of icons in the touch-sensitive display;
24. The non-transitory computer readable storage medium of claim 23, further comprising instructions.   33. The non-transitory computer readable storage medium of claim 32, wherein the second action is a rotation of the physical crown in a second direction opposite to the first direction.   The non-transitory computer readable storage medium of claim 32, wherein the second action is pushing or withdrawing the physical crown. The received input is a first received input, and the non-transitory computer readable storage medium comprises:
Receiving a second input based on a second motion of the physical crown that is a rotation in the first rotational direction;
Responsive to the second received input, replacing the display of the second plurality of icons with a third plurality of icons;
24. The non-transitory computer-readable storage medium of claim 23, further comprising computer executable instructions, wherein the third plurality of icons is a subset of the second plurality of icons. The received input is a first received input, and the non-transitory computer readable storage medium comprises:
Receiving a second input based on a second motion of the physical crown that is a rotation in the first direction;
Activating an application associated with one of the second plurality of icons in response to the second received input;
24. The non-transitory computer readable storage medium of claim 23, further comprising computer executable instructions. Receives information representing the activity state of the application corresponding to the displayed icon,
Changing the appearance of the displayed icon in response to the received information;
24. The non-transitory computer readable storage medium of claim 23, further comprising computer executable instructions.   38. The non-transitory computer readable storage medium of claim 37, wherein the changing is one or more of blinking, changing color, and displaying an animation.   24. The non-transitory computer-readable storage medium according to claim 23, wherein an upper right icon of the first plurality of icons is not displayed in the second display.   The non-transitory computer-readable storage medium according to claim 23, wherein an upper right icon of the first plurality of icons is a leftmost icon in the second row from the top in the second display. Replacing the display of the first plurality of icons with the second plurality of icons;
Translating an icon of the first plurality of icons from a first position of the touch-sensitive display to a second position of the touch-sensitive display;
41. The non-transitory computer readable storage medium of claim 40, wherein the entire icon is displayed on the touch-sensitive display during the translation. Replacing the display of the first plurality of icons with the second plurality of icons;
Displaying only a portion of one of the first plurality of icons at a first position of the touch-sensitive display;
Displaying the remaining portion of the one icon at a second position of the touch-sensitive display;
41. The non-transitory computer readable storage medium of claim 40, wherein the first location and the second location are separated.   24. The non-transitory computer readable storage medium of claim 23, wherein the physical crown is a mechanical crown. Detecting the force applied to the touch sensitive display;
24. The non-transitory computer readable storage medium of claim 23, further comprising computer executable instructions for replacing the first display based on the detected force. An electronic device,
One or more processors;
A physical crown operably coupled to the one or more processors;
A touch sensitive display operably coupled to the one or more processors;
The one or more processors comprising:
Displaying a first plurality of icons on the touch-sensitive display of the wearable electronic device;
Receiving input based on the physical crown movement of the wearable electronic device;
Responsive to the received input, replacing the first plurality of icons with a second plurality of icons in the touch-sensitive display;
An electronic device configured as described above, wherein the second plurality of icons is a subset of the first plurality of icons.   46. The device of claim 45, wherein the electronic device is a wrist watch.   46. The device of claim 45, wherein the action is pushing or pulling the physical crown.   46. The device of claim 45, wherein the movement is rotation of the physical crown.   49. The device of claim 48, wherein the rotation is in a first direction of rotation.   49. The device of claim 48, wherein the rotation exceeds a predetermined angular velocity threshold.   46. The physical crown includes a capacitive touch sensor configured to sense touch input, and the received input is further based on the touch input on the physical crown. Device described in. A first icon of the first plurality of icons is associated with an application, a second icon of the second plurality of icons is associated with the same application, and the one or more processors are ,
Displaying the second icon together with information about the application when the second plurality of icons is displayed;
Displaying the first icon together with different information about the application when the first plurality of icons are displayed;
46. The device of claim 45, further configured as follows.   46. The device of claim 45, wherein a first information density is associated with the first plurality of icons and a second information density is associated with the second plurality of icons. The received input is a first received input, and the one or more processors are:
Receiving a second input based on a second motion of the physical crown;
Responsive to the second received input, replacing the second plurality of icons with the first plurality of icons in the touch-sensitive display;
46. The device of claim 45, further configured as follows.   55. The device of claim 54, wherein the second action is a rotation of the physical crown in a second direction opposite to the first direction.   55. The device of claim 54, wherein the second action is pushing or withdrawing the physical crown. The received input is a first received input, and the one or more processors are:
Receiving a second input based on a second motion of the physical crown that is a rotation in the first rotational direction;
Responsive to the second received input, replacing the display of the second plurality of icons with a third plurality of icons;
46. The device of claim 45, further configured such that the third plurality of icons is a subset of the second plurality of icons. The received input is a first received input, and the one or more processors are:
Receiving a second input based on a second motion of the physical crown that is a rotation in the first direction;
Activating an application associated with one of the second plurality of icons in response to the second received input;
46. The device of claim 45, further configured as follows. The one or more processors are:
Receives information representing the activity state of the application corresponding to the displayed icon,
Changing the appearance of the displayed icon in response to the received information;
46. The device of claim 45, further configured as follows.   60. The device of claim 59, wherein the changing is one or more of blinking, changing color, and animating.   46. The device of claim 45, wherein an upper right icon of the first plurality of icons is not displayed in the second display.   46. The device according to claim 45, wherein an upper right icon of the first plurality of icons is a leftmost icon in a second row from the top in the second display. Replacing the display of the first plurality of icons with the second plurality of icons;
Translating an icon of the first plurality of icons from a first position of the touch-sensitive display to a second position of the touch-sensitive display;
64. The device of claim 62, wherein the entire icon is displayed on the touch-sensitive display during the translation. Replacing the display of the first plurality of icons with the second plurality of icons;
Displaying only a portion of one of the first plurality of icons at a first position of the touch-sensitive display;
Displaying the remaining portion of the one icon at a second position of the touch-sensitive display;
64. The device of claim 62, wherein the first location and the second location are separated.   46. The device of claim 45, wherein the physical crown is a mechanical crown.   46. The device of claim 45, further comprising one or more sensors that detect a force applied to the touch-sensitive display.   46. The device of claim 45, further comprising a sensor that detects a touch on the physical crown.

Images