Multi-layer user interface with flexible parallel and orthogonal movement

• US 8,473,860 B2
• Filed: 06/25/2010
• Issued: 06/25/2013
• Est. Priority Date: 02/12/2010
• Status: Active Grant

• Current Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Original Assignee: Microsoft Corporation
• Inventors: Fong, Jeffrey Cheng-Yao, Hull, Eric J., Chub, Sergey
• Primary Examiner(s): Pesin, Boris
• Assistant Examiner(s): Hur, Ece
• Application Number:
  US12/824,049
• Publication Number:
  US 20110202837A1
• Time in Patent Office: 1,096 Days
• Field of Search: 715/863, 715/902, 715/760, 715/768, 715/784, 715/790, 463 1- 69, 273371-461
• US Class Current: 715/784
• 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, second, and third layers, wherein the third layer describes a content category, the second layer describes a content subcategory, and the first layer comprises content items included within the content subcategory, 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 section operable to move in a second direction substantially orthogonal to a first direction and a first-layer lock point at an edge of the section;

receiving a 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;

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, and wherein the second layer comprises a second-layer lock point;

calculating a third movement substantially parallel to the first and second movements based at least in part on the first user input, the third movement comprising a movement of visual information in the third layer from an initial third-layer position to a current third-layer position, wherein the third movement is in the first direction at a third movement rate, wherein the third layer comprises a third-layer lock point, and wherein the first movement rate is different from at least one of the second and third movement rates;

performing a locking animation based at least in part on the lock points and the current first-layer position, wherein the locking animation comprises moving the first, second, and third layers from their respective current positions to post-locking-animation positions in which the layers have stopped moving and the edge of the section is aligned with a corresponding edge of the display area;

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

calculating a substantially orthogonal sectional movement of visual information in the second portion of visual information in the first layer that is within the display area as a result of the performed locking animation, the movement being independent from other visual information in the first, second, and third layers based at least in part on the second user input, wherein the substantially orthogonal sectional movement comprises a movement of the visual information in the second portion of visual information in the first layer from an initial section position to a current section position.

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, 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 third layer is a title layer above the section header layer in the display area, wherein the content layer, the section header layer, and the title layer overlap the background layer,

and wherein the second and third movement rates differ proportionally to a difference between a length of the title layer and a length of the section header 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 section comprises 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 sectional movement comprises:

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

16. The method of claim 1, wherein the other visual information is adjacent in the first direction and adjacent in the second direction to the visual information in the section, wherein a portion of visual information in the section is outside the display area when the section is in the initial section position, and wherein the portion of the visual information in the section is within the display area when the section is in the current section position.

17. The method of claim 1 further comprising rendering the first movement, the second movement and the substantially orthogonal sectional 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 section having a first portion of visual information in the display area and a second portion of visual information outside of the display area;

receiving a 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, wherein the content layer further comprises a content-layer lock point at an edge of the scrollable section;

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, wherein the section-header layer comprises a section header and a section-header-layer lock point at an edge of the section header;

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, wherein the title layer comprises a title and a title-layer lock point at an edge of the title;

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

performing a locking animation based at least in part on the lock points and the current content-layer position, wherein the locking animation comprises moving the content layer, the section-header layer and the title layer from their respective current positions to post-locking-animation positions in which the respective layers have stopped moving and the edge of the scrollable section, the edge of the section header, and the edge of the title are aligned with a corresponding edge of the display area;

receiving a second user input via the touchscreen;

calculating a scrollable-section movement of visual information in the scrollable section 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-section movement comprising a movement of visual information in the scrollable section from (g) an initial scrollable-section position in which the second portion of visual information in the scrollable section is outside of the display area, to (h) a current scrollable-section position in which the second portion of visual information in the scrollable section is within the display area; and

animating the movement from (g) to (h), wherein the scrollable-section movement is in the second 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 memory devices 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 section having a first portion of visual information in the display area and a second portion of visual information outside of the display area;

receiving a 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, wherein the content layer further comprises a content-layer lock point at an edge of the scrollable section;

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, wherein the section-header layer further comprises a section header and a section-header-layer lock point at an edge of the section header;

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, wherein the title layer further comprises a title and a title-layer lock point at an edge of the title;

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;

performing a locking animation based at least in part on the lock points and the current content-layer position, wherein the locking animation comprises moving the content layer, the section-header layer and the title layer from their respective current positions to post-locking-animation positions in which the respective layers have stopped moving and the edge of the scrollable section, the edge of the section header, and the edge of the title are aligned with a corresponding edge of the display area;

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

calculating a scrollable-section movement of visual information in the scrollable section 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-section movement comprising a movement of visual information in the scrollable section from (i) an initial scrollable-section position in which the second portion of visual information in the scrollable section is outside of the display area, to (j) a current scrollable-section position in which the second portion of visual information in the scrollable section is within the display area; and

animating the movement from (i) to (j), wherein the scrollable-section movement is in the second 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.