Hierarchical user interface

• US 9,552,147 B2
• Filed: 06/04/2012
• Issued: 01/24/2017
• 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): IPAKCHI, MARYAM M
• Application Number:
  US13/487,805
• Publication Number:
  US 20130198663A1
• Time in Patent Office: 1,695 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 one or more first components from a first layer floating on top of a second component from a second layer beneath the first layer. The first components are children of the second components. A user may interact with components uniformly, meaning that each specific user interaction applied to each component results in similar response from each component.

Claims

1. A computer-implemented method comprising:

arranging a plurality of components on a user interface in a hierarchy, the hierarchy having one or more layers and each layer having at least one of the components of the user interface;

presenting the user interface according to a structure of the hierarchy, comprising;

presenting one or more child objects in the hierarchy as floating on top of, and covering at least a portion of, one or more parent objects, the first-level child objects being child components of at least one of the parent objects according to the structure of the hierarchy, the first-level child objects being presented in a first layer of the user interface and the parent objects being presented in a second layer of the user interface beneath the first layer,

presenting one or more second-level child objects in the hierarchy as floating on top of, and covering at least a portion of, the one or more child objects according to the structure of the hierarchy, the second-level child objects being presented in a third layer above the first layer,

wherein the first-level child objects are presented as a strip of a plurality of thumbnail versions of content that are floating across a length of a scroll direction of content across the user interface, or a length of a direction perpendicular to the scroll direction across the user interface,

wherein each of the first-level child objects is displayed with a first border surrounding the child object, and each of the parent objects is displayed with a second border surrounding the parent object different from the first border of the child object, and

wherein content of each first-level child object is linked with at least one parent object; and

enabling a user to interact with the first-level child objects and parent objects uniformly, such that when the user interacts with one of the first-level child objects using a user interaction of a group of user interactions, the user can interact with one of the parent objects using the same user interaction after interacting with the one of the first-level child objects,

enabling a user to lock the first-level child objects to their respective linked parent objects, such that movement of the child object generates corresponding movement of the linked parent object,

wherein when the user selects one of the first-level child objects by selecting one of the thumbnail versions of content, the thumbnail version expands to display content corresponding to the thumbnail version of content on the user interface, and

wherein when the user interface transitions from the second layer to the first layer, the parent objects are displayed to fade out of the user interface and the first-level child objects are displayed to fade into the user interface.

2. The computer-implemented method of claim 1, wherein the user interaction comprises a manipulation of the first-level child objects or parent objects.

3. The computer-implemented method of claim 2, wherein the manipulation comprises contacting one or more of the first-level child objects or parent objects displayed on a touch-sensitive display of a device with one or more fingers, and moving the one or more fingers to move the one or more manipulated child objects or parent objects on the display of the device.

4. The computer-implemented method of claim 3, wherein the movement of the one more fingers comprises a swiping motion on the touch-sensitive display, resulting in the manipulated child objects or parent objects scrolling across the display.

5. The computer-implemented method of claim 2, wherein the manipulation comprises contacting one or more of the first-level child objects or parent objects displayed on a touch-sensitive display of a device with one or more fingers, and moving the one or more fingers to resize the one or more manipulated child objects or parent objects on the display of the device.

6. The computer-implemented method of claim 5, wherein the movement of the one or more fingers comprises:

pinching two or more fingers together to decrease the size of the manipulated child objects or parent objects;

or

spreading two or more fingers apart to increase the size of the manipulated child objects or parent objects.

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

arrange a plurality of components on a user interface in a hierarchy, the hierarchy having one or more layers and each layer having at least one of the components of the user interface;

present the user interface according to a structure of the hierarchy, comprising;

presenting one or more child objects in the hierarchy as floating on top of, and covering at least a portion of, one or more parent objects, the one or more child objects being child components of at least one of the parent objects according to the structure of the hierarchy, the first-level child objects being presented in a first layer of the user interface and the parent objects being presented in a second layer of the user interface beneath the first layer,

presenting one or more second-level child objects in the hierarchy as floating on top of, and covering at least a portion of, the one or more child objects according to the structure of the hierarchy, the second-level child objects being presented in a third layer above the first layer,

wherein the first-level child objects are presented as a strip of a plurality of thumbnail versions of content that are floating across a length of a scroll direction of content across the user interface, or a length of a direction perpendicular to the scroll direction across the user interface,

wherein each of the first-level child objects is displayed with a first border surrounding the child object, and each of the parent objects is displayed with a second border surrounding the parent object different from the first border of the child object, and

wherein content of each first-level child object is linked with at least one parent object; and

enable a user to interact with the first-level child objects and parent objects uniformly, such that when the user interacts with one of the first-level child objects using a user interaction of a group of user interactions, the user can interact with one of the parent objects using the same user interaction after interacting with the one of the first-level child objects,

enable a user to lock the first-level child objects to their respective linked parent objects, such that movement of the child object generates corresponding movement of the linked parent object,

wherein when the user selects one of the first-level child objects by selecting one of the thumbnail versions of content, the thumbnail version expands to display content corresponding to the thumbnail version of content on the user interface,

wherein when the user interface transitions from the second layer to the first layer, the parent objects are displayed to fade out of the user interface and the first-level child objects are displayed to fade into the user interface.

8. The media of claim 7, wherein the user interaction comprises a manipulation of the first-level child objects or parent objects.

9. The media of claim 8, wherein the manipulation comprises contacting one or more of the first-level child objects or parent objects displayed on a touch-sensitive display of a device with one or more fingers, and moving the one or more fingers to move the one or more manipulated child objects or parent objects on the display of the device.

10. The media of claim 9, wherein the movement of the one more fingers comprises a swiping motion on the touch-sensitive display, resulting in the manipulated child objects or parent objects scrolling across the display.

11. The media of claim 8, wherein the manipulation comprises contacting one or more of the first-level child objects or parent objects displayed on a touch-sensitive display of a device with one or more fingers, and moving the one or more fingers to resize the one or more manipulated child objects or parent objects on the display of the device.

12. The media of claim 11, wherein the movement of the one or more fingers comprises:

pinching two or more fingers together to decrease the size of the manipulated child objects or parent objects;

or

spreading two or more fingers apart to increase the size of the manipulated child objects or parent objects.

13. 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 on a user interface in a hierarchy, the hierarchy having one or more layers and each layer having at least one of the components of the user interface;

present the user interface according to a structure of the hierarchy, comprising;

presenting one or more child objects in the hierarchy as floating on top of, and covering at least a portion of, one or more parent objects, the one or more child objects being child components of at least one of the parent objects according to the structure of the hierarchy, the first-level child objects being presented in a first layer of the user interface and the parent objects being presented in a second layer of the user interface beneath the first layer,

presenting one or more second-level child objects in the hierarchy as floating on top of, and covering at least a portion of, the one or more child objects according to the structure of the hierarchy, the second-level child objects being presented in a third layer above the first layer,

wherein the first-level child objects are presented as a strip of a plurality of thumbnail versions of content that are floating across a length of a scroll direction of content across the user interface, or a length of a direction perpendicular to the scroll direction across the user interface,

wherein each of the first-level child objects is displayed with a first border surrounding the child object, and each of the parent objects is displayed with a second border surrounding the parent object different from the first border of the child object, and

wherein content of each first-level child object is linked with at least one parent object; and

enable a user to interact with the first-level child objects and parent objects uniformly, such that when the user interacts with one of the first-level child objects using a user interaction of a group of user interactions, the user can interact with one of the parent objects using the same user interaction after interacting with the one of the first-level child objects,

enable a user to lock the first-level child objects to their respective linked parent objects, such that movement of the child object generates corresponding movement of the linked parent object,

wherein when the user selects one of the first-level child objects by selecting one of the thumbnail versions of content, the thumbnail version expands to display content corresponding to the thumbnail version of content on the user interface,

wherein when the user interface transitions from the second layer to the first layer, the parent objects are displayed to fade out of the user interface and the first-level child objects are displayed to fade into the user interface.

14. The system of claim 13, wherein the user interaction comprises a manipulation of the first-level child objects or parent objects.

15. The system of claim 13, wherein the manipulation comprises contacting one or more of the first-level child objects or parent objects displayed on a touch-sensitive display of a device with one or more fingers, and moving the one or more fingers to move the one or more manipulated child objects or parent objects on the display of the device.

16. The system of claim 13, wherein the movement of the one more fingers comprises a swiping motion on the touch-sensitive display, resulting in the manipulated child objects or parent objects scrolling across the display.

17. The system of claim 13, wherein the manipulation comprises contacting one or more of the first-level child objects or parent objects displayed on a touch-sensitive display of a device with one or more fingers, and moving the one or more fingers to resize the one or more manipulated child objects or parent objects on the display of the device.