MULTI-LAYER USER INTERFACE WITH FLEXIBLE PARALLEL AND ORTHOGONAL MOVEMENT

• US 20110202837A1
• Filed: 06/25/2010
• Published: 08/18/2011
• Est. Priority Date: 02/12/2010
• Status: Active Grant

• Current Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Original Assignee: Microsoft Corporation
• Inventors: Hull, Eric J., Fong, Jeffrey Cheng-Yao, Chub, Sergey
• Granted Patent: US 8,473,860 B2
• Time in Patent Office: Days
• US Class Current: 715/702
• CPC Class Codes: G06F 2203/04803 Split screen, i.e. subdividing the display area or the window area into separate subareas
• CPC Class Codes: G06F 3/04842 Selection of displayed objects or displayed text elements G06F3/0482 takes precedence
• CPC Class Codes: G06F 3/0485 Scrolling or panning
• CPC Class Codes: G06F 3/04883 for inputting data by handwriting, e.g. gesture or text

Abstract

A user interface (UI) system calculates movements in a multi-layer graphical user interface. The UI system receives user input corresponding to gestures on a touchscreen. The UI system calculates a movement of a first layer in a first direction (e.g., a horizontal direction) at a first movement rate. The UI system calculates a movement of a second layer substantially parallel to the movement of the first layer, at a second movement rate that differs from the first movement rate. The UI system calculates a movement (e.g., a vertical movement) in a direction substantially orthogonal to the first direction, in a UI element of one of the layers.

Claims

1. In a computer system, a method comprising:

displaying a graphical user interface comprising at least first and second layers, wherein a first portion of visual information in the first layer is within a display area of a touchscreen, and wherein the first layer comprises a user interface element operable to move in a second direction substantially orthogonal to a first direction;

receiving first user input corresponding to a first gesture on the touchscreen;

calculating a first movement based at least in part on the first user input, the first movement comprising a movement of the first layer from an initial first-layer position in which a second portion of visual information in the first layer is outside the display area to a current first-layer position in which the second portion of visual information in the first layer is within the display area, wherein the first movement is in a first direction at a first movement rate; and

calculating a second movement substantially parallel to the first movement based at least in part on the first user input, the second movement comprising a movement of visual information in the second layer from an initial second-layer position to a current second-layer position, wherein the second movement is in the first direction at a second movement rate;

receiving second user input corresponding to a second gesture on the touchscreen; and

calculating a substantially orthogonal movement of visual information in the user interface element of the first layer independent from other visual information in the first layer based at least in part on the second user input, the substantially orthogonal movement comprising a movement of visual information in the user interface element from an initial element position to a current element position;

wherein the second movement rate differs from the first movement rate.

2. The method of claim 1, the first gesture having a gesture movement rate, wherein the first movement rate is based on the gesture movement rate.

3. The method of claim 2 wherein the first movement rate is substantially equal to the gesture movement rate.

4. The method of claim 1 wherein calculating the first movement comprises calculating the current first-layer position based at least in part on the initial first-layer position, the first direction, and a velocity of the first gesture, and wherein calculating the second movement comprises calculating the current second-layer position based at least in part on the calculated current first-layer position.

5. The method of claim 1 wherein a direction indicated by the first gesture differs from the first direction, wherein the direction indicated by the first gesture is a diagonal direction, and wherein the first direction is a horizontal direction.

6. The method of claim 1 wherein the first movement rate is greater than the second movement rate.

7. The method of claim 1 wherein a portion of visual information in the second layer is outside the display area when the second layer is in the initial second-layer position, and wherein the portion of the visual information in the second layer is within the display area when the second layer is in the current second-layer position.

8. The method of claim 1 wherein the graphical user interface further comprises a background layer and a title layer substantially parallel to the first and second layers, wherein the first layer is a content layer, wherein the second layer is a section header layer above the content layer in the display area, wherein the title layer is above the section header layer in the display area, and wherein the content layer, the section header layer and the title layer overlap the background layer, the method further comprising:

calculating a third movement based at least in part on the first user input, the third movement comprising a movement of visual information in the title layer, wherein the third movement is in the first direction at a third movement rate, and wherein the third movement rate differs from the first movement rate;

wherein a difference between the third movement rate and the second movement rate is proportional to a difference between a length of the title layer and a length of the second layer.

9. The method of claim 1 wherein the first direction is a horizontal direction, and wherein the second direction is a vertical direction.

10. The method of claim 9 wherein the user interface element is a vertically scrollable element.

11. The method of claim 10 wherein a direction of the second gesture differs from the vertical direction, and wherein the direction indicated by the second gesture is a diagonal direction.

12. The method of claim 10 further comprising:

performing a vertical locking animation in the vertically scrollable element, wherein the vertical locking animation comprises moving the vertically scrollable element such that a lock point in the vertically scrollable element is vertically aligned with a part of the display area.

13. The method of claim 12 wherein the vertically scrollable element is a list of items, and wherein the lock point is associated with an item in the list.

14. The method of claim 13 wherein the list of items is a list of links, and wherein the lock point is associated with a link in the list.

15. The method of claim 1 wherein calculating the substantially orthogonal movement comprises:

calculating the current element position based at least in part on the initial element position and a velocity of the second gesture.

16. The method of claim 1 wherein a portion of visual information in the user interface element is outside the display area when the user interface element is in the initial element position, and wherein the portion of the visual information in the user interface element is within the display area when the user interface element is in the current element position.

17. The method of claim 1 further comprising rendering the first movement, the second movement and the substantially orthogonal movement for display on a mobile phone comprising the touchscreen.

18. A computing device comprising:

one or more processors;

a touchscreen having a display area; and

one or more computer readable storage media having stored therein computer-executable instructions for performing a method comprising;

displaying a graphical user interface comprising a content layer, a section header layer, and a title layer, wherein each layer comprises at least first and second portions of visual information in the respective layer, wherein the first portion of visual information in the respective layer is in the display area, wherein the second portion of visual information in the respective layer is outside of the display area, and wherein the content layer comprises at least one scrollable element having a first portion of visual information in the display area and a second portion of visual information outside of the display area;

receiving first user input via the touchscreen;

calculating a content-layer movement based at least in part on the first user input, the content-layer movement comprising a movement of the content layer from (a) an initial content-layer position in which the second portion of visual information in the content layer is outside the display area, to (b) a current content-layer position in which the second portion of visual information in the content layer is within the display area;

animating the movement from (a) to (b), wherein the content-layer movement is in a first direction at a content-layer movement rate;

calculating a section-header-layer movement based at least in part on the first user input, the section-header-layer movement comprising a movement of the section header layer from (c) an initial section-header-layer position in which the second portion of visual information in the section header layer is outside the display area, to (d) a current section-header-layer position in which the second portion of visual information in the section header layer is within the display area;

animating the movement from (c) to (d), wherein the section-header-layer movement is in the first direction at a section-header-layer movement rate;

calculating a title-layer movement based at least in part on the first user input, the title-layer movement comprising a movement of the title layer from (e) an initial title-layer position in which the second portion of visual information in the title layer is outside the display area, to (f) a current title-layer position in which the second portion of visual information in the title layer is within the display area;

animating the movement from (e) to (f), wherein the title-layer movement is in the first direction at a title-layer movement rate;

receiving second user input via the touchscreen;

calculating a scrollable-element movement of visual information in the scrollable element of the content layer independent from other visual information in the content layer based at least in part on the second user input, the scrollable-element movement comprising a movement of visual information in the scrollable element from (g) an initial scrollable-element position in which the second portion of visual information in the scrollable element is outside of the display area, to (h) a current scrollable-element position in which the second portion of visual information in the scrollable element is within the display area; and

animating the movement from (g) to (h), wherein the scrollable-element movement is in a second direction substantially orthogonal to the first direction;

wherein the title-layer movement rate differs from the content-layer movement rate and from the section-header-layer movement rate, and wherein the content layer, the section header layer and the title layer are substantially parallel to each other and non-overlapping with respect to each other.

19. The computing device of claim 18 wherein the first user input corresponds to a first gesture on the touchscreen, and wherein the second user input corresponds to a second gesture on the touchscreen.

20. One or more computer-readable media not consisting of a signal, the computer-readable media having stored thereon computer-executable instructions for performing a method comprising:

displaying a graphical user interface on a touchscreen operable to receive user input via gestures on the touchscreen, the graphical user interface comprising a content layer, a section header layer, a title layer and a background layer, wherein each layer comprises at least first and second portions of visual information in the respective layer, wherein the first portion of visual information in the respective layer is in a display area of the touchscreen, wherein the second portion of visual information in the respective layer is outside of the display area, and wherein the content layer comprises at least one scrollable element having a first portion of visual information in the display area and a second portion of visual information outside of the display area;

receiving first user input corresponding to a gesture on the touchscreen;

calculating a content-layer movement based at least in part on the first user input, the content-layer movement comprising a movement of the content layer from (a) an initial content-layer position in which the second portion of visual information in the content layer is outside the display area, to (b) a current content-layer position in which the second portion of visual information in the content layer is within the display area;

animating the movement from (a) to (b), wherein the content-layer movement is in a first direction at a content-layer movement rate;

calculating a section-header-layer movement based at least in part on the first user input, the section-header-layer movement comprising a movement of the section header layer from (c) an initial section-header-layer position in which the second portion of visual information in the section header layer is outside the display area, to (d) a current section-header-layer position in which the second portion of visual information in the section header layer is within the display area;

animating the movement from (c) to (d), wherein the section-header-layer movement is in the first direction at a section-header-layer movement rate;

calculating a title-layer movement based at least in part on the first user input, the title-layer movement comprising a movement of the title layer from (e) an initial title-layer position in which the second portion of visual information in the title layer is outside the display area, to (f) a current title-layer position in which the second portion of visual information in the title layer is within the display area;

animating the movement from (e) to (f), wherein the title-layer movement is in the first direction at a title-layer movement rate;

calculating a background-layer movement based at least in part on the first user input, the background-layer movement comprising a movement of the background layer from (g) an initial background-layer position in which the second portion of visual information in the background layer is outside the display area, to (h) a current background-layer position in which the second portion of visual information in the background layer is within the display area;

animating the movement from (g) to (h), wherein the background-layer movement is in the first direction at a background-layer movement rate;

receiving second user input corresponding to a second gesture on the touchscreen;

calculating a scrollable-element movement of visual information in the scrollable element of the content layer independent from other visual information in the content layer based at least in part on the second user input, the scrollable-element movement comprising a movement of visual information in the scrollable element from (i) an initial scrollable-element position in which the second portion of visual information in the scrollable element is outside of the display area, to (j) a current scrollable-element position in which the second portion of visual information in the scrollable element is within the display area; and

animating the movement from (i) to (j), wherein the scrollable-element movement is in a second direction substantially orthogonal to the first direction;

wherein the content-layer movement rate is equal to the section-header-layer movement rate, wherein the title-layer movement rate differs from the content-layer movement rate and from the section-header-layer movement rate, wherein the content layer, the section header layer and the title layer are substantially parallel to each other and non-overlapping with respect to each other, and wherein each of the content layer, the section header layer and the title layer overlaps the background layer.