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

Abstract

A user interface navigation on a personal electronic device based on movement of the crown is disclosed. The device may select an appropriate level of information to be arranged along the z-axis for display based on crown movement. The navigation can be based on the angular velocity of the crown.

Description

USER INTERFACE FOR MANIPULATING USER INTERFACE OBJECTS < RTI ID = 0.0 >

Cross reference to related applications

This application is related to U.S. Provisional Patent Application No. 61 / 873,356, filed September 3, 2013, entitled " CROWN INPUT FOR WEARABLE ELECTRONIC DEVICE " U.S. Provisional Patent Application No. 61 / 873,359, filed September 3, 2013, entitled " USER INTERFACE OBJECT MANIPULATION IN A USER INTERFACE " U.S. Provisional Patent Application No. 61 / 959,851, filed September 3, 2013, entitled " USER INTERFACE FOR MANIPULATING USER INTERFACE OBJECTS " Filed September 3, 2013, entitled " USER INTERFACE FOR MANIPULATING USER INTERFACE OBJECTS WITH MAGNETIC PROPERTIES ", entitled " Magnetic Properties, 873,360; And U.S. Provisional Patent Application Serial No. 14 / 476,657, filed September 3, 2014, entitled " User interface for manipulating user interface objects using magnetic properties ". The contents of these applications are hereby incorporated by reference in their entirety for all purposes.

This application is a continuation-in-part of U.S. Provisional Patent Application, filed on September 3, 2014 under the name Nicholas Zambetti as inventors and co-pending applicant, entitled " Crown Entry for Wearable Electronic Devices " Application; Filed September 3, 2014, entitled " Manipulating User Interface Objects in the User Interface, "filed September 3, 2014, entitled " And a device, method, and graphical user interface (GUI) for operating a user interface object using visual and / or tactile feedback, the application being filed on December 29, Manipulating User Interface Objects with Visual and / or Haptic Feedback. "U.S. Provisional Patent Application No. 61 / 747,278. The contents of these applications are hereby incorporated by reference in their entirety for all purposes.

Technical field

The disclosed embodiments generally relate to user interfaces of electronic devices including, but not limited to, user interfaces for electronic watches.

The improved personal electronic devices may have small form factors. Exemplary personal electronic devices include, but are not limited to, tablets and smartphones. The use of such personal electronic devices involves manipulation of user interface objects on display screens also having small form factors that complement the design of personal electronic devices.

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

Conventional methods for manipulating user interface objects on scaled down personal electronic devices may be inefficient. Also, existing methods generally provide less precision than desired.

In some embodiments, techniques for navigating a user interface on a personal electronic device based on movement of a crown are disclosed. Systems and computer-readable storage media for performing the above-described processes are also disclosed.

1 illustrates an exemplary personal electronic device.
Figure 2 illustrates an exemplary user interface.
Figure 3 illustrates an exemplary user interface.
Figure 4 illustrates an exemplary user interface.
Figure 5 illustrates an exemplary user interface.
Figure 6 illustrates an exemplary user interface.
Figure 7 illustrates an exemplary user interface.
Figure 8 illustrates an exemplary user interface.
Figure 9 illustrates an exemplary logical structure of a user interface.
Figure 10 illustrates an exemplary user interface.
Figure 11 illustrates an exemplary user interface.
12 illustrates an exemplary user interface.
Figure 13 illustrates an exemplary user interface transition.
14 illustrates an exemplary user interface.
Figure 15 illustrates an exemplary user interface.
16 illustrates an exemplary user interface transition.
Figure 17 illustrates an exemplary user interface.
18 illustrates an exemplary user interface.
19 illustrates an exemplary user interface transition.
20 illustrates an exemplary user interface.
Figure 21 illustrates an exemplary user interface.
Figure 22 illustrates an exemplary user interface and transition.
Figure 23 illustrates an exemplary user interface.
24 illustrates an exemplary user interface and transition.
25A and 25B illustrate an exemplary user interface.
26 illustrates an exemplary user interface.
Figure 27 illustrates an exemplary user interface and transition.
28 illustrates an exemplary user interface.
29 illustrates an exemplary user interface.
Figure 30 illustrates an exemplary user interface and transition.
31 illustrates an exemplary user interface.
32 illustrates an exemplary user interface.
33 illustrates an exemplary user interface.
34 illustrates an exemplary user interface.
35 illustrates an exemplary process.
Figure 36 illustrates an exemplary computing system.
37 illustrates an exemplary personal electronic device.
38 illustrates an exemplary personal electronic device.
39 illustrates an exemplary personal electronic device.
40 illustrates an exemplary user interface.
41 illustrates an exemplary logical structure of a user interface.
Figure 42 illustrates an exemplary user interface.

In the following description of the disclosure and examples, reference is made to the accompanying drawings, in which specific examples that may be practiced are shown by way of example in the figures. It will be appreciated that other examples may be practiced and structural changes may be made without departing from the scope of the 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 for attaching the device 100 to a user's body. That is, the device 100 is wearable. The body 102 can be designed to be connected to the straps 104. The device 100 may have a touch sensitive display screen (hereinafter, a touch screen) 106 and a crown 108. In some embodiments, the device 100 may have one or more buttons 110, 112, 114. In some embodiments, the device 100 does not have any buttons 110, 112, or 114.

Typically, in the context of a watch, the term "crown " refers to the cap on the stem for winding the watch's hand. In the context of personal electronic devices, a crown may be a physical component of an electronic device rather than a virtual crown on a touch sensitive display. The crown 108 may be mechanical, which means that the crown can be connected to a sensor for converting the physical movement of the crown into electrical signals. The crown 108 may rotate in two rotational directions (e.g., forward and backward). The crown 108 may also be pushed inward toward the body of the device 100 and / or pulled away from the device 100. The crown 108 may be touch-sensitive, e.g., using capacitive touch technologies to detect whether the user is touching the crown. The crown 108 may also be rocked in one or more directions or may be moved along a track along or at least partially around the periphery of the body 102. In some instances, more than one crown 108 may be used. The visual appearance of the crown 108 may be similar to, but not necessarily similar to, the crown of conventional watches. These examples described herein refer to crown rotation, pushing, pulling, and / or touch, each of which constitutes the physical state of the crown.

The buttons 110, 112 and 114, if included, may be physical buttons or touch sensitive buttons, respectively. That is, the buttons may be, for example, physical buttons or capacitive buttons. In addition, the body 102, which may include a bezel, may have predetermined areas that act as buttons on the bezel.

The touch screen 106 may be located behind or in front of a touch sensor panel implemented using any desired touch sensing technology, such as mutual capacitive touch sensing, capacitive touch sensing, resistive touch sensing, projection scan touch sensing, Such as a liquid crystal display (LCD), a light emitting diode (LED) display, an organic light emitting diode (OLED) display, or the like, The touch screen 106 may allow a user to perform various functions by hovering around a touch sensor panel using one or more fingers or other objects.

In some instances, the device 100 may further include one or more pressure sensors (not shown) for detecting the force or pressure exerted on the display. The force or pressure exerted on the touch screen 106 may be used as an input to the device 100 to perform any desired action, such as making a selection, entering a menu or exiting a menu, Causing the display of a plurality of pixels. In some instances, different operations may be performed based on the amount of force or pressure being applied to the touch screen 106. The one or more pressure sensors may further be used to determine the position at which force is being applied to the touch screen 106.

One. Crown-based user interface control

FIGS. 2-7 illustrate exemplary user interfaces in response to movement of the crown 108 (FIG. 1). FIG. 2 illustrates an exemplary screen 200 that may be displayed by device 100. The screen 200 may be used to indicate a sleep state that appears initially, for example, when powering on the device 100 or when the touch screen display of the device 100 is powered on ) ≪ / RTI > home screen). The icons 204, 206, 208 may be displayed on the screen 200. [ In some embodiments, the icons may correspond to applications that are operable on the device 100, meaning that the applications may be installed on the device 100 and / or run as a service on the device 100 do. The corresponding application launches a touch on the icon (e.g., a finger tap), 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 may correspond to text documents, media items, web pages, email messages, and the like.

The device 100 may select the icons 204, 206, 208 from a larger set of icons available for display on the screen 200 because these icons have information relating to the user at the current time Because. For example, the icon 204 may correspond to a messaging application that the user has just received an incoming message, and the icon 206 may correspond to a calendar application where the user has an upcoming calendar appointment input.

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

4 illustrates an exemplary screen 400 that may 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 may, for example, show icons corresponding to all of the applications that are operable on the device 100. Because multiple applications may be operable on the device 100, the screen 400 may include multiple icons. When a number of icons are displayed, the icons may be sized accordingly to fit within the touch screen 106, or at least a representative number or a predetermined percentage of the icons may fit within the touch screen 106 The size can be fixed.

5 illustrates an exemplary screen 500 that may 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 may, for example, show icons corresponding to a subset of applications that are operable on the device 100. The icons 504 displayed on the screen 500 may be larger and the number of icons on the screen 400 may be greater than the number of icons on the screen 400. For example, You can have additional fidelity compared to the display. For example, icons on the screen 500 may have indicia in the form of text and / or images identifying its corresponding application. As shown, the icon 504 uses the letter "c" to imply that the name of the corresponding application starts with "c " as in a clock. In some embodiments, a touch on the icon (e.g., a finger tap) causes the corresponding application to initiate.

Figure 6 illustrates an exemplary screen 600 that may be displayed by the device 100 in response to rotation of the crown 108 in a direction 602. [ The screen 600 may show a further winnowed subset of icons corresponding to applications that are operable on the device 100, for example, as compared to the screen 500. The icons to be displayed (e.g., icon 604) may be further magnified and the screens 200, 604 may be further enlarged since much fewer icons are displayed on screen 600 as compared to screen 500 (FIG. 5) 300, 400, < RTI ID = 0.0 > 500). ≪ / RTI > For example, the icon 604 may have an image of a clock that displays the current time. In some embodiments, a touch on the icon (e.g., a finger tap) causes the corresponding application to initiate.

7 and 8 illustrate exemplary screens (not shown) that may be displayed by device 100 in response to rotation of crown 108 in direction 702 while screen 600 (Fig. 6) 700, and 800, respectively.

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

Returning to Fig. 8, in some embodiments, the screen 800 may be displayed in response to a crown rotation in a direction 802 when the screen 600 (Fig. 6) is displayed. The screen 800 shows the application 804 corresponding to the icon 704 (Fig. 7) operating in the foreground of the device 100. Fig. That is, an application 804 initiated in response to a crown rotation in direction 802. The exemplary application 804 may be a clock application that provides an alarm function. Also, in some embodiments, the screen 800 is displayed in response to a crown rotation in the direction 802 when the screen 700 (Fig. 7) is displayed.

The above-described screens 200 to 700 (Figs. 2 to 7) can be logically organized as the planes of information along the axis. Under such an organization, a given screen of icons can be thought of as a plane, defined by two axes (e.g., x and y axes) with spatially positioned icons thereon. a plurality of planes may be organized along a third axis - the z axis - orthogonal to at least one of the x or y axes. (the z-axis may be perpendicular to the plane formed by the x-axis and the y-axis).

This logical organization is illustrated by Fig. 9, where 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) The axis 906 is perpendicular to the x / y plane defined by the axes 902, 904. The plane 908 may correspond to the screen 200 (FIG. 2). The plane 910 may correspond to the screen 300 (FIG. 3). Plane 912 may represent a collection of icons representing applications that are operable in a personal electronic device. Accordingly, different views of the plane 912 may correspond to the screens 400 to 700 (Figs. 4-7). The planes 908 and 910 may be related to the plane 912 in that the planes 908 and 910 may each include a subset of the icons available on the plane 912. The plane of the particular information displayed on the personal electronic device (i.e., the screen of the icons) can be selected through crown movement such as crown rotation. That is, crown movement may be used to traverse the planes of information that intersect the z-axis 906 or to provide alternative views of a given plane (e.g., plane 912).

In some embodiments, when the end of the z-axis (e.g., the top or bottom plane) is reached through crown movement, the displayed information (e.g., the screen of icons) may have a rubberband effect to indicate that the end has been reached, . Consider the situation where the user reaches the bottom plane of information through the crown input. As the user provides additional crown input in the same direction, the displayed set of icons is shrunk (to the extent possible) until movement ceases in response to crown movement. When the crown movement stops, the displayed icons return from their reduced size back to their normal size through on-screen animation on the screen, thereby creating a visual effect of rubber banding.

One prominent benefit of this logical organization is that the different planes of information do not have to be zoomed subsets of each other (but may be the zoned subset of one another). That is, for example, the planes 908 and 910 may include all of the different icons among those icons available on the personal electronic device, but still the different planes of information may be efficiently accessed by the user.

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

This logical arrangement is illustrated by Fig. As shown, planes 4102 and 4104 may correspond to screen 200 (FIG. 2) and screen 300 (FIG. 3), respectively. Plane 4106 may represent a collection of icons representing applications that are operable on a personal electronic device. Thus, different aspects of the plane 4106 may correspond to the screens 400 to 700 (Figs. 4-7). The particular plane of information displayed on the personal electronic device (i.e., the screen of icons) can be selected through crown movement, such as crown pushing.

2. Speed-based crown control

The device 100 (FIG. 1) may consider the angular velocity of rotation of the crown 108 (FIG. 1) when determining whether one screen of icons should be replaced with another screen of icons. Specifically, the device 100 may require the crown 108 to rotate beyond a predetermined angular velocity before changing the display of one screen of icons to another. In this manner, a slow rotation of the crown 108, which is not intended by the user, may cause the device 100 to still receive a crown input indicative of an angular displacement, It need not be interpreted as having sufficient speed to cause updates. The selection of predetermined angular speeds for this purpose may depend on a number of factors, such as the density of currently displayed icons, the visual arrangement of currently displayed icons, and the like.

In some embodiments, the minimum angular velocity of the crown rotation that needs to switch between the screens of icons directly corresponds to the instantaneous angular velocity of the crown 108 (FIG. 1) Quot; means that the crown 108 essentially responds when it reaches a sufficient angular velocity. In some embodiments, the minimum angular velocity of the crown rotation required to switch between the screens of the icons is a calculated velocity based on the instantaneous ("current") angular velocity of the crown 108 but not directly equivalent thereto. In these embodiments, the device 100 may maintain the calculated crown (angular) velocity V at discrete moments in time T according to equation (1): < EMI ID =

V _T = V _(T-1) +? V _CROWN -? V _DRAG . (1)

In equation 1, V _T is the time represents a crown velocity (speed and direction), calculated from _T, V _(T-1) denotes a previous speed (speed and direction) at time T-1, ΔV _CROWN is time T represents the change in velocity caused by the force applied through the rotation of the crown, and DELTA V _DRAG represents the change in velocity due to the drag force. The applied force reflected through the ΔV _CROWN can depend on the current speed of the angular rotation of the crown. Thus, [Delta] V _CROWN can also depend on the current angular velocity of the crown. In this manner, the device 100 is not only based on instantaneous crown speed, but also provides user interface interactions based on user input in the form of crown movement over a number of such time intervals, even if the time intervals are finely divided. can do. Of Typically, in the absence of user input in the form of a ΔV _CROWN, V _T is though to be close to zero on the basis of the ΔV _DRAG according to the equation 1 (and will be a 0), V _T is the crown rotation (ΔV _CROWN) Will not change the codes without user input of the form.

Typically, the greater the speed of each rotation of the crown, the greater the value of DELTA V _CROWN . However, the actual mapping between the speed of each rotation of the crown and? V _CROWN may vary depending on the desired user interface effect. For example, various linear or nonlinear mappings between the speed of each rotation of the crown and? V _CROWN can be used. In another example, the mapping may depend on the number of icons and / or the icon arrangement currently being displayed.

In addition, [Delta] V _DRAG can take various values. For example, at higher speeds, the ΔV _DRAG may depend on the speed of the crown rotation so that a larger opposing change (ΔV _DRAG ) of speed can be generated. In another example _,? V _DRAG may have a constant value. In another example _,? V _DRAG may be based on the number of currently displayed icons and / or the currently displayed icon array. It should be appreciated that the aforementioned requirements of? V _CROWN and? V _DRAG can be varied to produce desirable user interface effects.

As can be seen in Equation (1), the held velocity (V _T ) can continue to increase as long as? V _CROWN is greater than? V _DRAG . In addition, V _T may have non-zero values even when the DELTA V _CROWN input is not being received, which means that the user interface screens may continue to change without the user rotating the crown. When this occurs, the screens can stop changing based on the maintained velocity and the DELTA V _DRAG component when the user stops rotating the crown.

In some embodiments, when the crown is rotated in the direction of the current corresponding to the rotational direction opposite to the user interface changes, V _(T-1) component is to be able to be reset to a value of 0, the user is offset V _T So as to quickly change the direction of the screen changes without having to provide sufficient force to hold the screen.

In other embodiments, different physical crown states other than the rotation of the crown are used to navigate through the displayed icons.

3. User interface appearance

Icons can take a variety of visual appearances. For example, as shown in FIG. 10, the icons may be in a rectangular shape. As another example, the icons may be circular, as shown in Figures 2-7. Icons can also take various spatial arrangements, which means that the icons can be arranged along rows and columns of the invisible grid. The gratings may be symmetrical or asymmetric. In Fig. 10, for example, a symmetric grating is used. In Figure 5, for example, an asymmetric grid with x icons arranged on the first row and y icons arranged along the second row is used.

FIG. 11 shows a radial icon arrangement scheme in which circular icons are aligned along the circumference of different diameters of invisible circles 1102, 1104. The invisible circles 1102 and 1104 are concentric, but not necessarily. 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 icons of the radial array may be arranged along more than two invisible circles.

The distance that a particular icon is located from the center of the radial icon array may depend on different factors. For example, the distance may be proportional to the frequency of use of the icon; 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 (corresponding application). As another example, the distance may be user-defined or otherwise determined (i.e., curated) by the device 100.

Figure 25A shows an arrangement of icons into groups of icons. On the grid 2502, four groups of icons, including icon group 2512, are displayed. In response to a touch input, such as a finger tap 2514 at the touch screen location on the group 2512, the icons in the group 2512 may be displayed in an enlarged form. In grid 2506, icons in group 2512, including icon 2516, are displayed in an enlarged form. Figure 25B shows an arrangement into groups of application functions. On the grid 2508, the four icons of the icon group 2512, as described above, are displayed on the grid 2506. The selection of the icon 2516 (e.g., via the finger tap 2518) may cause a group of the functions 2520 provided by the application 2510 (corresponding to the icon 2508) to be displayed.

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

30 illustrates an icon arrangement scheme in which icons are arranged similarly to pages of a rolodex. Pages of an exemplary Rolodex 3002 may be flipped quickly in response to crown rotation. For example, the page (icon) 3004 may quickly flip down on the page (icon) 3006 in response to the crown rotation.

31 shows an icon arrangement manner in which icons are arranged on the outer periphery of a spinning dial. An exemplary spinning dial 3102 may be pivoted in response to crown rotation. For example, crown rotation in direction 3104 may cause dial 3102 to pivot in the same direction 3106. In addition, the crown pushing (or pulling) can change the number of columns at 3102, so that the icons of the remaining columns can be enlarged and / or have increased fidelity.

32 shows an icon arrangement scheme in the form of a thumbnailed list 202. FIG. The icon 3204 in the exemplary thumbnail list 3202 may have a corresponding thumbnail 3206. Icons in the thumbnail list 3202 may be traversed through crown rotation. Certain icons, such as icon 3204, can be directly selected for display by touching the corresponding thumbnail 3206. [

Figure 33 shows an arrangement in which the icons are aligned with the surface of a spherical or polyhedral invisible. Icons on the foreground surface of the invisible sphere, such as icon 3302, may be displayed. The icons on the far side of the surface of the invisible sphere are not displayed. The invisible sphere may rotate in response to crown rotation and / or touch screen input, thereby changing certain icons displayed.

During operation, the device 100 (FIG. 1) may utilize one or more of the icon arrangement schemes described above. The particular arrangement (s) used by the device 10 may be user-selectable and / or system-selectable. That is, the user may be allowed to identify one or more preferred arrangements for display. Arrangements may also 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.

In addition, the specific ordering and placement of icons within a particular icon arrangement scheme may be user-selectable and / or system-selectable. For example, a user may be allowed to specify the location of an icon on a given screen. The icon placement may also be determined (i.e., curated) by the device 100 based on criteria such as frequency of use, calculated relevance, etc. of the particular icons.

4. Responses to user input

The displayed icons may respond to user input. Figures 12-14 illustrate rearrangement of the displayed icons in response to crown rotation. In FIG. 12, nine icons are displayed along the 3 × 3 symmetric grid 1202. The icon 1204 is displayed at the upper right position of the grid 1202. As described above with respect to Figures 4-7, rotation of the crown 108 may cause the device 100 to reduce the number of icons displayed. For example, rotation of the crown 108 may cause the device 100 to display a 2x2 grid, thereby reducing the number of icons displayed. FIG. 13 illustrates an exemplary transition to a 2x2 grid in response to crown rotation in direction 1302. FIG. As shown, in response to the crown rotation 1302, the icon 1204 is moved from its upper right position in the 3x3 grid of Figure 12 to its new position in the 2x2 grid to be displayed, Loses. Specifically, icon 1204 is moved to the lower left corner of 2x2 grid 1402, as shown in Fig. In addition, the icons that remain displayed on the 2x2 grid after the transition from grid 1202 are magnified and located within the 2x2 grid 1402.

Figures 15-17 illustrate another rearrangement of the icons in response to crown rotation. In FIG. 15, nine icons are displayed along a 3 × 3 symmetrical 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 moved from its position in grid 1502 (FIG. 15) to its new position in the 2x2 grid to be displayed Moved out of the screen. In other words, during the transition illustrated by FIG. 16, the icon 1504 may be divided into two portions that are displayed in two distinct non-contiguous locations of the touch screen of the device 100. [ More specifically, as the icon 1504 is moved out of the screen, a portion of the icon 1504 remains partially displayed in the upper right corner, while the remainder of 1504, as it is moved over the screen, It is partially displayed in the corner. As shown in FIG. 17, the icon 1504 is moved to the lower left corner of the 2 × 2 grid 1702. In addition, icons that remain displayed on the 2x2 grid after transition from grid 1502 are magnified and positioned within the 2x2 grid 1702. [

Figures 18-20 illustrate another re-arrangement of icons in response to crown rotation. In FIG. 18, nine icons are displayed along the 3 × 3 symmetric 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 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 Figures 12-20, the icon displayed on the corner in the upper left corner (i. E. Labeled "A ") is fixed because the transitions described above cause the icon to move from the upper left corner It should be noted that this means that it does not move away. However, it is possible not to pin such icons through user input, as described below.

Figure 21 shows a rearrangement of icons in response to a touch screen input. As shown, an icon 2106 is displayed in the bottom row of the 4x4 grid 2012. In response to the finger tap 2104 on the icon 2106, a 3x3 grid 2108 is displayed with the icon 2106 magnified to the center. In particular, an icon labeled "A " displayed on grid 2012 is no longer displayed in grid 2108. [ Figure 21 also shows an update of the displayed icons in response to crown rotation. Specifically, in response to crown rotation 2110, icon 2106 is further magnified and becomes the only icon displayed on the screen.

22 illustrates rearrangement of icons in response to movement of the device 100. FIG. Device movement may be detected using one or more sensors, for example, a gyroscope. As shown, various icons are displayed in the grid 2202. In response to the tilt of the device 100 in the direction 2204, the displayed icons are shifted in the direction 2206, resulting in the display of different icons in the grid 2208. [ Specifically, in response to the leftward tilt of the device 100 in the direction 2204, the icons of the grid 2202 are shifted in the left direction 2206. In some embodiments, the transfer may be incremental such that a single row or column is dislodged and transferred, and a single row or column transitions onto the display. Alternatively, as a completely new set of icons transitions onto the display, the entire screen of icons may transition and disappear.

Figure 23 shows the change in icon appearance in response to touch screen input. As shown, in response to a touch at location 2304, the icon 2306 is enlarged. In particular, icon 2306 is not located at position 2304; rather, icon 2306 (in the unexpanded state) is displayed in row 2310 above touch location 2304 along row 2312, . In this manner, the user visibility of the icon 2306 is improved because the icon is magnified and because the icon is not blocked in view by a potentially opaque object touching the device 100. [ It should be noted that more than one icon may be magnified in response to a neighboring touch. The plurality of icons may be magnified with different magnifications of the levels in inverse proportion to the distance between each icon being magnified and the touch position.

Figure 40 shows icon moves that are responsible for the physical interaction between nearby icons. As shown, the grating 4002 includes a plurality of icons arranged in a radial array. In response to the touch input at location 4010, the plurality of icons are magnified at different levels of magnification. In particular, enlargement of the icon 4004 may cause adjacent icons 4006 and 4008 to move away from the icon 4004 such that the icons do not block each other in view.

Figure 24 shows icon moves that are responsible for 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 rightward gesture to direction 2404, icons from the left side of grid 2402 are displayed on the right side of grid 2402 to be displayed in an enlarged or non- Icons on the border can be compressed with compressed icons 2406. [ Icons on the left border of the grid 2402 are also displayed on the right side of the grid 2402 so that the icons from the right side of the grid 2402 are displayed more compressed icons 2412 in response to the touch gesture in the left direction 2406. [ Lt; / RTI > The foregoing interaction allows all or substantially all of the icons to be displayed simultaneously while allowing the user to easily view and select the icons. It should be noted that although not shown, such compression may occur in a symmetric lattice.

Figure 34 illustrates icon moves that are responsible for the interaction between grid boundaries and neighboring icons. In the radial arrangement of Figure 34, the icons are arranged between an invisible inner circle 3402 and an invisible outer boundary circle 3400. The outer circle 3400 can be sized based on the physical size of the touch screen of the device 100. Inner circle 3402 may be sized based on design and / or user preferences. Inner circle 3402 may also be sized based on user input, such as crown rotation. Inner circle 3402 may respond to touch screen input within its surface area. For example, the touchdown and subsequent touch movements that occur within the surface area of the inner circle 3402 can be interpreted as the panning of the inner circle 3402. Icons 3404 and 3408 arranged between the inner circle 3402 and the outer circle 3400 when the inner circle 3402 is panned include the inner circle 3402 and the outer circle 3400, , The number of icons displayed, and the sizes of adjacent icons. For example, in response to panning towards the right of the circle 3402, the icon 3404 may be increased in size and the enlargement of the icon 3404 may cause the icon 3408 to be reduced in size.

Note that when there is no user input, the displayed icons may be programmed to move on the screen to prevent screen burn-in. Also, the icon arrays may be responsive to multi-touch gestures. For example, a two-finger downward gesture on the touch screen of the device 100 (FIG. 1) may cause display of system information, such as a status bar. As another example, a two finger gesture in which two fingers move in opposite directions may constitute device 100 (Fig. 1) for left-handed or right-handed use.

5. Additional features

Returning to FIG. 2, the home screen 200 may display system-generated information such as an alert. For example, the home screen 200 may display a reminder that the user has been sitting for a long period of time and is to be exercised. In addition, the screen 200 may display a suggestion for a rest because the user has a busy calendar for the next morning. Again, returning to FIG. 3, the screen 300 may be displayed when the device 100 is connected to a dock.

Figure 26 illustrates the use of a wallpaper 2602 to assist user navigation in the grid of icons. As shown, the grid 2600 has a relatively large number of icons. In response to the crown rotation 2604, a subset of the icons from the grid 2600 are magnified and displayed in the grid 2606. In addition, a corresponding portion of the desktop 2602 displayed in the background of the subset is also displayed, for example, if icons from the upper left quadrant of the grid 2600 are displayed in the grid 2606, The upper left quadrant of the desktop 2602 is also displayed in the grid 2606. [ As also shown, in response to a touch gesture in the left direction 2608, the device 100 may display a different subset of the icons from the grid 2600. For example, in the grid 2610, icons from the upper right quadrant of the grid 2600 are displayed along with the upper right quadrant of the desktop 2600. In this manner, the user can determine the relationship between the currently displayed set of icons with respect to all of the icons available for display on the device 100.

Figure 27 shows an exemplary arrangement of icons, which provides information to the user, e.g., current time information. The arrangement can be displayed in response to crown movement. Also, this arrangement can be displayed after a predetermined period of user input deactivation. For example, after a predetermined period of user input inactivity, a screen 2702 showing current time using icons of small size may be displayed. In addition, in response to the crown rotation, the screen 2702 may transition over the screens 2704 and 2706 to a screen 2708 showing a grid of icons.

28 shows an exemplary arrangement (icons 2802) of icons whose color and / or intensity of displayed icons may change in response to incoming information. For example, an icon 2804 corresponding to a messaging application may blink or shine when a new message arrives. In some embodiments, flicker or flicker may correspond to the popularity of an application in an application store or the frequency of use of an application in a larger ecosystem of users. In addition, the icons of the grid 2802 may show icons representing a larger set of applications available at the application store than those installed applications.

29 shows an exemplary display of a status message. The status message may be displayed in response to detection of the user's crown 108 touch. The context message represents the current functionality of the crown 108, which may take on different functions depending on the application currently running in the foreground of the device 100. [ For example, when a music application is operating in the foreground of the device 100, a touch to the crown 108 may cause a display of a status message 2902 in the form of a volume indicator, It is possible to indicate to the user that the current function is volume control.

35 illustrates an exemplary process 3500 for providing the user interface techniques described above. At block 3510, an input based on crown movement and / or crown touch is received. The crown movement may be rotation, pushing, and / or pulling. At block 3520, a determination is made based on the type of crown movement represented by the received input. If the received input indicates a crown rotation, processing proceeds to block 3530. [ If the received input indicates a crown push or pull, processing proceeds to block 3550. [ If the received input indicates a crown touch (without rotating 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) may be determined. In addition, adjacent levels of information along the z-axis 906 can be determined. The adjacent level may be determined based on the direction of the crown rotation represented by the received input. A corresponding grid of icons, such as those shown by each of Figures 4-7, may be displayed. At block 3550, a home screen, such as the exemplary screen 200 of FIG. 2, may be displayed. In an alternative embodiment, a user-preferred screen, such as the exemplary screen 300 of FIG. 3, may be displayed. At block 3560, a status message, such as the example status message 2902 of FIG. 29, may be displayed.

36 illustrates an exemplary computing system 3600 for providing the user interface techniques described above. In some embodiments, the computing system 3600 may form the device 100. As shown, the computing system 3600 may have a bus 3602 connecting the I / O section 3604, one or more computer processors 3606, and a memory section 3608 together. Memory section 3608 may include computer-executable instructions and / or data for implementing the techniques described above, including process 3500 (Fig. 35). I / O section 3604 may be connected to display 3610, which may have touch sensitive component 3612. The I / O section 3604 may be connected to the crown 3614. The I / O section 3604 may be connected to an input device 3616, which may include buttons. I / O section 3604 may be connected to communication unit 3618, which may, for example, provide Wi-Fi, Bluetooth and / or cellular features. The I / O section 3604 may be connected to a sensor pack 3620 that may have a gyroscope, a GPS sensor, a light sensor, a gyroscope, an accelerometer, and / or a combination thereof. It should be noted that one or more of the above-described components may be part of a system-on-a-chip.

The memory section 3608 of the computing system 3600 may be a non-volatile computer-readable storage medium for storing computer-executable instructions, which may include, for example, one or more computer processors 3606 When executed by the processor 3500, to cause the computer processors to perform the above-described user interface techniques, including process 3500 (Fig. 35). The computer-executable instructions may also be executed by an instruction execution system, device, or device, such as a computer-based system, processor embedded system, or other system capable of fetching instructions and executing instructions from the instruction execution system, May be stored and / or transmitted in any non-transitory computer readable storage medium for use in connection with < / RTI > For the purposes of this specification, "non-volatile computer readable storage medium" refers to any medium capable of containing or storing computer-executable instructions for use by or in connection with an instruction execution system, have. Non-volatile computer-readable storage media may include, but are not limited to, magnetic, optical, and / or semiconductor storage. Examples of such storage include RAM, ROM, EPROM, flash memory and solid-state memory as well as optical disks based on magnetic disks, CD, DVD or Blu-ray technologies.

The computing system 3600 is not limited to the components and configurations of FIG. 36, but may include other or additional components in multiple configurations. In some embodiments, the system 3600 may form a personal electronic device 3700, which is a tablet, as shown in Fig. In some embodiments, the computing system 3600 may form a personal electronic device 3800, which is a cellular telephone, as shown in Fig. In some embodiments, the computing system 3600 may form a personal electronic device 3900, which is a portal music device, as shown in Fig.

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

Claims (15)

As a computer implemented method,
Displaying a plurality of icons on a touch sensitive display of a wearable electronic device;
Receiving an input based on a movement of a physical crown of the wearable electronic device, the movement being a rotation in a first direction, the rotation exceeding a predetermined angular velocity threshold; And
Responsive to the received input, launching an application associated with a first one of the plurality of icons
Lt; / RTI > The method according to claim 1,
Wherein the first one of the plurality of icons is displayed at a size greater than a second one of the plurality of icons. 3. The method according to claim 1 or 2,
Wherein a first one of the plurality of icons is displayed centrally for the remaining ones of the plurality of icons. 3. The method according to claim 1 or 2,
Wherein launching the application comprises progressively removing all icons visible from the touch sensitive display while progressively displaying an application associated with the first one of the plurality of icons on the touch sensitive display , A computer implemented method. 3. The method according to claim 1 or 2,
Receiving an input based on a movement of a physical crown of the wearable electronic device, the movement being a rotation in a second direction opposite to the first direction;
And in response to the received input, minimizing an application associated with the first one of the plurality of icons, the minimizing the application further comprising: associating the application associated with the first icon of the plurality of icons Progressively displaying at least the first icon of the plurality of icons on the touch sensitive display while progressively removing it from the touch sensitive display,
Lt; / RTI > 3. The method according to claim 1 or 2,
Wherein the plurality of icons correspond to a plurality of applications stored on the wearable electronic device. 3. The method according to claim 1 or 2,
Wherein the plurality of icons correspond to a plurality of open applications on the wearable electronic device. 3. The method according to claim 1 or 2,
Wherein the plurality of icons correspond to a user creation-set of applications on the wearable electronic device. 3. The method according to claim 1 or 2,
Wherein the wearable electronic device is a watch. 3. The method according to claim 1 or 2,
Receiving information indicative of activity in an application, the application corresponding to a displayed icon; And
And in response to the received information, modifying the appearance of the displayed icon. 11. The computer-implemented method of claim 10, wherein the changing is at least one of flicker, color change, and animating. 3. The method according to claim 1 or 2,
Wherein the physical crown is a mechanical crown. 3. The method according to claim 1 or 2,
Detecting a force applied to the touch sensitive display; And
And replacing the information displayed on the touch sensitive display based on the detected force. 17. A non-transitory computer readable storage medium having computer-executable instructions, the computer-executable instructions, when executed by one or more computer processors,
Causing a plurality of icons to be displayed on a touch sensitive display of the wearable electronic device,
Cause the wearer to receive an input based on movement of a physical crown of the wearable electronic device, the movement being a rotation in a first direction, the rotation exceeding a predetermined angular velocity threshold,
And responsive to the received input, to launch an application associated with a first one of the plurality of icons. As an electronic device,
One or more processors;
A physical crown operably connected to the one or more processors; And
A touch sensitive display < RTI ID = 0.0 > operatively < / RTI &
Lt; / RTI >
Wherein the one or more processors comprise:
Displaying a plurality of icons on a touch sensitive display of the wearable electronic device,
Receiving an input based on a movement of a physical crown of the wearable electronic device, the movement being a rotation in a first direction, the rotation exceeding a predetermined angular velocity threshold, and
And in response to the received input, initiate an application associated with a first one of the plurality of icons.

Images