Transitions among hierarchical user interface components

• US 9,229,613 B2
• Filed: 06/04/2012
• Issued: 01/05/2016
• Est. Priority Date: 02/01/2012
• Status: Active Grant

• Current Assignee: Meta Platforms, Inc. (f/k/a Facebook, Inc.)
• Original Assignee: Meta Platforms, Inc. (f/k/a Facebook, Inc.)
• Inventors: Matas, Michael, Tsinteris, Kimon, Sarner, Austin, Melcher, Charles
• Primary Examiner(s): Kim, Matt
• Assistant Examiner(s): IPAKCHI, MARYAM M
• Application Number:
  US13/488,039
• Publication Number:
  US 20130198681A1
• Time in Patent Office: 1,310 Days
• Field of Search: None
• US Class Current: 1/1
• CPC Class Codes: G06F 2203/04808 Several contacts: gestures triggering a specific function, e.g. scrolling, zooming, right-click, when the user establishes several contacts with the surface simultaneously; e.g. using several fingers or a combination of fingers and pen
• CPC Class Codes: G06F 3/017 Gesture based interaction, e.g. based on a set of recognized hand gestures interaction based on gestures traced on a digitiser G06F3/04883
• CPC Class Codes: G06F 3/0481 based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
• CPC Class Codes: G06F 3/04815 Interaction with a metaphor-based environment or interaction object displayed as three-dimensional, e.g. changing the user viewpoint with respect to the environment or object
• CPC Class Codes: G06F 3/04817 using icons graphical or visual programming using iconic symbols G06F8/34
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: G06F 3/0484 for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
• CPC Class Codes: G06F 3/04842 Selection of displayed objects or displayed text elements G06F3/0482 takes precedence
• CPC Class Codes: G06F 3/04845 for image manipulation, e.g. dragging, rotation, expansion or change of colour
• CPC Class Codes: G06F 3/04847 Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
• 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
• CPC Class Codes: G06F 40/103 Formatting, i.e. changing of presentation of documents automatic justification G06F40/189; automatic line break hyphenation G06F40/191
• CPC Class Codes: G06F 40/137 Hierarchical processing, e.g. outlines
• CPC Class Codes: G06F 8/34 Graphical or visual programming
• CPC Class Codes: G06T 11/60 Editing figures and text; Combining figures or text
• CPC Class Codes: G06T 15/60 Shadow generation
• CPC Class Codes: H04L 67/06 specially adapted for file transfer, e.g. file transfer protocol [FTP]
• CPC Class Codes: H04L 67/52 specially adapted for the location of the user terminal

Abstract

In one embodiment, one or more components of a user interface are arranged in a hierarchy of layers. The user interface is presented according to the structure of the hierarchy, with a first component of the user interface presented at a first layer. One or more second component are presented at a second layer, the second components being one or more children of the first component and the second layer being one layer above the first layer. Each child component of a parent component is locked to their respective parent component.

Claims

1. A computer-implemented method comprising:

arranging a plurality of components of a user interface in a predetermined automatically-maintained hierarchy, wherein the user interface comprises one or more content layers, and wherein each of the content layers comprises at least one of the components;

displaying the one or more content layers concurrently with a set of thumbnails overlaying the one or more content layers at a first location,

wherein each of the displayed thumbnails is a child of at least one of the one or more concurrently displayed content layers,

wherein each of the thumbnails is a first size and comprises at least one component of the plurality of components, and

wherein movement of the content layers and movement of the thumbnails are connected;

determining whether a received input comprises one or more of a scrolling input, a movement input, and a resizing input;

in response to determining that the received input is the scrolling input, concurrently scrolling the content layers and the thumbnails at two different greater than zero speeds, wherein the thumbnails and the one or more content layers that are concurrently displayed are concurrently moving relative to the first location and when a last one of the child thumbnails corresponding to the currently displayed one or more content layers in the hierarchy is reached along a direction of the scrolling input and additional scrolling input is provided in the same direction with respect to the currently displayed child thumbnails, the concurrent scrolling results in displaying only the one or more of the content layers corresponding to the last child thumbnail or a content layer of the one or more content layers that is next in the hierarchy;

in response to determining that the received input is the movement input, moving the set of thumbnails from the first location to a second location overlaying the one or more content layers without scrolling the thumbnails, the second location being different from the first location; and

in response to determining that the received input is the resizing input, resizing the set of thumbnails from the first size to a second size without scrolling the thumbnails, the second size being different from the first size,

wherein when the content layers and the thumbnails are being concurrently scrolled, the thumbnails scroll at a faster speed relative to a predetermined location on the user interface than the content layers, and

wherein the components of the thumbnails are displayed at a lower resolution than the components of the content layers.

2. The computer-implemented method of claim 1, further comprising:

presenting the thumbnails in a strip floating on top and across the content layers.

3. The computer-implemented method of claim 2, further comprising:

in response to a user scrolling the content layers in a direction, scrolling the thumbnails in the same direction.

4. The computer-implemented method of claim 2, further comprising:

in response to a user scrolling the thumbnails in a direction, scrolling the content layers in the same direction.

5. The computer-implemented method of claim 2, further comprising:

when a user scrolls from the content layers to a group of one or more second content layers having a set of second thumbnails different from the thumbnails of the content layers, the floating strip scrolls from the thumbnails of the content layers to the set of second thumbnails that represents one of the second content layers; and

when a user scrolls from the thumbnails in the strip to the set of second thumbnails representing second content layers, the display scrolls from the content layers to the second content layers that are associated with the set of second thumbnails.

6. One or more computer-readable non-transitory storage media embodying logic that is operable when executed to:

arrange a plurality of components of a user interface in a predetermined automatically -maintained hierarchy, wherein the user interface comprises one or more content layers, and wherein each of the content layers comprises at least one of the components;

display the one or more content layers concurrently with a set of thumbnails overlaying the one or more content layers at a first location,

wherein each of the displayed thumbnails is a child of at least one of the one or more concurrently displayed content layers,

wherein each of the thumbnails is a first size and comprises at least one component of the plurality of components, and

wherein movement of the content layers and movement of the thumbnails are connected;

determine whether a received input comprises one or more of a scrolling input, a movement input, and a resizing input;

in response to determining that the received input is the scrolling input, concurrently scroll the content layers and the thumbnails at two different greater than zero speeds, wherein the thumbnails and the one or more content layers that are concurrently displayed are concurrently moving relative to the first location and when a last one of the child thumbnails corresponding to the currently displayed one or more content layers in the hierarchy is reached along a direction of the scrolling input and additional scrolling input is provided in the same direction with respect to the currently displayed child thumbnails, the concurrent scrolling results in displaying only the one or more of the content layers corresponding to the last child thumbnail or a content layer of the one or more content layers that is next in the hierarchy;

in response to determining that the received input is the movement input, move the set of thumbnails from the first location to a second location overlaying the one or more content layers without scrolling the thumbnails, the second location being different from the first location; and

in response to determining that the received input is the resizing input, resize the set of thumbnails from the first size to a second size without scrolling the thumbnails, the second size being different from the first size,

wherein when the content layers and the thumbnails are being concurrently scrolled, the thumbnails scroll at a faster speed relative to a predetermined location on the user interface than the content layers, and

wherein the components of the thumbnails are displayed at a lower resolution than the components of the content layers.

7. The media of claim 6, further comprising:

presenting the thumbnails in a strip floating on top and across the content layers.

8. The media of claim 7 further embodying logic operable to scroll the thumbnails in the same direction that a user scrolls the content layers.

9. The media of claim 7 further embodying logic operable to scroll the content layers in the same direction that a user scrolls the thumbnails.

10. The media of claim 7 further embodying logic operable to:

when a user scrolls from the content layers to a group of one or more second content layers having a set of second thumbnails different from the thumbnails of the content layers, scroll the floating strip from the thumbnails of the content layers to the set of second thumbnails that represents one of the second content layers; and

when a user scrolls from thumbnails in the strip to the set of second thumbnails representing second content layers, the display scrolls from the content layers to the second content layers that are associated with the set of second thumbnails.

11. A system comprising:

a memory comprising instructions executable by one or more processors; and

the one or more processors coupled to the memory and operable to execute the instructions, the one or more processors being operable when executing the instructions to;

arrange a plurality of components of a user interface in a predetermined automatically-maintained hierarchy, wherein the user interface comprises one or more content layers, and wherein each of the content layers comprises at least one of the components;

display the one or more content layers concurrently with a set of thumbnails overlaying the one or more content layers at a first location,

wherein each of the displayed thumbnails is a child of at least one of the one or more concurrently displayed content layers,

wherein each of the thumbnails is a first size and comprises at least one component of the plurality of components, and

wherein movement of the content layers and movement of the thumbnails are connected;

determine whether a received input comprises one or more of a scrolling input, a movement input, and a resizing input;

in response determining that the received input is the scrolling input, concurrently scroll the content layers and the thumbnails at two different greater than zero speeds, wherein the thumbnails and the one or more content layers that are concurrently displayed are concurrently moving relative to the first location and when a last one of the child thumbnails corresponding to the currently displayed one or more content layers in the hierarchy is reached along a direction of the scrolling input and additional scrolling input is provided in the same direction with respect to the currently displayed child thumbnails, the concurrent scrolling results in displaying only the one or more of the content layers corresponding to the last child thumbnail or a content layer of the one or more content layers that is next in the hierarchy;

in response to determining that the received input is the movement input, move the set of thumbnails from the first location to a second location overlaying the one or more content layers without scrolling the thumbnails, the second location being different from the first location; and

in response to determining that the received input is the resizing input, resize the set of thumbnails from the first size to a second size without scrolling the thumbnails, the second size being different from the first size,

wherein when the content layers and the thumbnails are being concurrently scrolled, the thumbnails scroll at a faster speed relative to a predetermined location on the user interface than the content layers, and

wherein the components of the thumbnails are displayed at a lower resolution than the components of the content layers.

12. The system of claim 11, further comprising:

presenting the thumbnails in a strip floating on top and across the content layers.

13. The system of claim 12, wherein the processors are further operable to scroll the thumbnails in the same direction that a user scrolls the content layers.

14. The system of claim 12, wherein the processors are further operable to scroll the content layers in the same direction that a user scrolls the thumbnails.