Summary and navigation of hierarchical levels

• US 9,235,317 B2
• Filed: 06/04/2012
• Issued: 01/12/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/487,765
• Publication Number:
  US 20140013283A1
• Time in Patent Office: 1,317 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.

Claims

1. A method comprising:

by one or more computing devices, providing for display to a user a user interface that comprises a plurality of components arranged in a hierarchy, wherein;

the hierarchy comprises a first layer and a second layer;

each of the first and second layers comprises at least one of the components;

each component in the first layer has at least one child in the second layer;

each component in the second layer has one parent in the first layer; and

in a first-layer state of the user interface;

components in the second layer are displayed thumbnails in a strip across a length of the user interface that is parallel or perpendicular to a scroll direction of the first layer; and

the strip appears to overlay a visual plane that components in the first layer are displayed in, the parent components in the first layer being larger in size than corresponding ones of the thumbnails in the second layer;

when a particular component in the second layer is displayed as a thumbnail in the strip, the component in the first layer that is the parent of the particular component in the second layer is concurrently displayed in the visual plane that the strip appears to overlay;

by one or more computing devices, when the user interface is in the first-layer state and the user interacts with the user interface to scroll from a first one of the components in the first layer to a second one of the components in the first layer, automatically causing the second layer to scroll synchronously with the first layer from components in the second layer that are children of the first one of the components in the first layer to components in the second layer that are children of the second one of the components in the first layer and a last one of the first components in the first layer and a first one of the second one of the components in the first layer share a common aligned transition line with a last one of the components in the second layer that are children of the first one of the components in the first layer and a first one of the components in the second layer that are children of the second one of the components in the first layer, the first component in the first layer following the second component in the first layer in the hierarchy.

2. The method of claim 1, wherein the user interface presents a digital book.

3. The method of claim 2, wherein components in the first layer of the user interface represent chapters of the digital book and components in the second layer of the user interface represent pages within the chapters of the digital book.

4. The method of claim 1, wherein the user interface presents one or more portions of a social-networking website.

5. The method of claim 4, wherein components in the first layer of the user interface represent content sections of the social-networking website and components in the second layer of the user interface represent content items within the content sections.

6. The method of claim 1, further comprising, by one or more computing devices, when the user interface is in the first-layer state and the user interacts with the user interface to scroll from components in the second layer that are children of a third one of the components in the first layer to components in the second layer that are children of a fourth one of the components the first layer, automatically causing the first layer to scroll synchronously with the second layer from the third one of the components in the first layer to the fourth one of the components the first layer.

7. The method of claim 1, wherein the user interaction comprises the user contacting the first one of the components in the first layer displayed on a touch-sensitive display of a device with one or more fingers and moving the fingers to scroll to the second one of the components in the first layer.

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

provide for display to a user a user interface that comprises a plurality of components arranged in a hierarchy, wherein;

the hierarchy comprises a first layer and a second layer;

each of the first and second layers comprises at least one of the components;

each component in the first layer has at least one child in the second layer;

each component in the second layer has one parent in the first layer; and

in a first-layer state of the user interface;

components in the second layer are displayed as thumbnails in a strip across a length of the user interface that is parallel or perpendicular to a scroll direction of the first layer; and

the strip appears to overlay a visual plane that components in the first layer are displayed in, the parent components in the first layer being larger in size than corresponding ones of the thumbnails in the second layer;

when a particular component in the second layer is displayed as a thumbnail in the strip, the component in the first layer that is the parent of the particular component in the second layer is concurrently displayed in the visual plane that the strip appears to overlay;

when the user interface is in the first-layer state and the user interacts with the user interface to scroll from a first one of the components in the first layer to a second one of the components in the first layer, automatically cause the second layer to scroll synchronously with the first layer from components in the second layer that are children of the first one of the components in the first layer to components in the second layer that are children of the second one of the components in the first layer and a last one of the first components in the first layer and a first one of the second one of the components in the first layer share a common aligned transition line with a last one of the components in the second layer that are children of the first one of the components in the first layer and a first one of the components in the second layer that are children of the second one of the components in the first layer, the first component in the first layer following the second component in the first layer in the hierarchy.

9. The media of claim 8, wherein the user interface presents a digital book.

10. The media of claim 9, wherein components in the first layer of the user interface represent chapters of the digital book and components in the second layer of the user interface represent pages within the chapters of the digital book.

11. The media of claim 8, wherein the user interface presents one or more portions of a social-networking website.

12. The media of claim 11, wherein components in the first layer of the user interface represent content sections of the social-networking website and components in the second layer of the user interface represent content items within the content sections.

13. The media of claim 8, wherein the logic is further operable to, when the user interface is in the first-layer state and the user interacts with the user interface to scroll from components in the second layer that are children of a third one of the components in the first layer to components in the second layer that are children of a fourth one of the components the first layer, automatically cause the first layer to scroll synchronously with the second layer from the third one of the components in the first layer to the fourth one of the components the first layer.

14. The media of claim 8, wherein the user interaction comprises the user contacting the first one of the components in the first layer displayed on a touch-sensitive display of a device with one or more fingers and moving the fingers to scroll to the second one of the components in the first layer.

15. 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;

provide for display to a user a user interface that comprises a plurality of components arranged in a hierarchy, wherein;

the hierarchy comprises a first layer and a second layer;

each of the first and second layers comprises at least one of the components;

each component in the first layer has at least one child in the second layer;

each component in the second layer has one parent in the first layer; and

in a first-layer state of the user interface;

components in the second layer are displayed thumbnails in a strip across a length of the user interface that is parallel or perpendicular to a scroll direction of the first layer; and

the strip appears to overlay a visual plane that components in the first layer are displayed in, the parent components in the first layer being larger in size than corresponding ones of the thumbnails in the second layer;

when a particular component in the second layer is displayed as a thumbnail in the strip, the component in the first layer that is the parent of the particular component in the second layer is concurrently displayed in the visual plane that the strip appears to overlay; and

when the user interface is in the first-layer state and the user interacts with the user interface to scroll from a first one of the components in the first layer to a second one of the components in the first layer, automatically cause the second layer to scroll synchronously with the first layer from components in the second layer that are children of the first one of the components in the first layer to components in the second layer that are children of the second one of the components in the first layer and a last one of the first components in the first layer and a first one of the second one of the components in the first layer share a common aligned transition line with a last one of the components in the second layer that are children of the first one of the components in the first layer and a first one of the components in the second layer that are children of the second one of the components in the first layer, the first component in the first layer following the second component in the first layer in the hierarchy.

16. The system of claim 15, wherein the user interface presents a digital book.

17. The system of claim 16, wherein components in the first layer of the user interface represent chapters of the digital book and components in the second layer of the user interface represent pages within the chapters of the digital book.

18. The system of claim 15, wherein the user interface presents one or more portions of a social-networking website.

19. The system of claim 15, wherein the processors are further operable when executing the instructions to, when the user interface is in the first-layer state and the user interacts with the user interface to scroll from components in the second layer that are children of a third one of the components in the first layer to components in the second layer that are children of a fourth one of the components the first layer, automatically cause the first layer to scroll synchronously with the second layer from the third one of the components in the first layer to the fourth one of the components the first layer.

20. The system of claim 15, wherein the user interaction comprises the user contacting the first one of the components in the first layer displayed on a touch-sensitive display of a device with one or more fingers and moving the fingers to scroll to the second one of the components in the first layer.