Transitions Among Hierarchical User-Interface Layers

• US 20130198664A1
• Filed: 06/04/2012
• Published: 08/01/2013
• 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
• Granted Patent: US 9,235,318 B2
• Time in Patent Office: Days
• US Class Current: 715/765
• 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 and displayed to a user. The user interface is presented according to the structure of the hierarchy. In response to a first user interaction with a component that has a parent, the display transitions from a first layer at which the component is presented to a second layer at which the parent of the component is presented, with the second layer being beneath the first layer. In response to a second user interaction with a component that has a child, the display transitions from the first layer at which the component is presented to a third layer at which the child of the component is presented, with the third layer being above the first layer

Claims

1. A computer-implemented method comprising:

arranging a plurality of components of 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; and

presenting the user interface according to a structure of the hierarchy, and for each component;

in response to a first user interaction with the component and when the component has a parent, transitioning from a first layer at which the component is presented to a second layer at which the parent of the component is presented, the second layer being beneath the first layer; and

in response to a second user interaction with the component and when the component has a child, transitioning from the first layer at which the component is presented to a third layer at which the child of the component is presented, the third layer being above the first layer.

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

for each layer of the hierarchy, presenting the one or more components at the layer in a strip floating on top of one or more components at a layer beneath the layer.

3. The computer-implemented method of claim 1, wherein for each component:

the first user interaction comprises a first gesture performed by one or more fingers of a user on a touch-sensitive display of a device; and

the second user interaction comprises a second gesture performed by one or more fingers of a user on a touch-sensitive display of a device.

4. The computer-implemented method of claim 3, wherein for each component,

the first gesture is pinching two or more fingers together,

the second gesture is pinching two or more fingers apart.

5. The computer-implemented method of claim 1, wherein for each component,

the first user interaction decreases the size of the component below a pre-determined threshold,

the second user interaction increases the size of the component above a pre-determined threshold.

6. The computer-implemented method of claim 1, wherein, when the component is the last component in the first layer,

the first user interaction is an operation that would otherwise navigate from the component to the next component in the layer.

7. The computer-implemented method of claim 6, wherein the operation is an input that results in scrolling the through components.

8. The computer-implemented method of claim 1, wherein the component and the parent of the component or the child of the component are the same object displayed in different states.

9. One or more computer-readable non-transitory storage media operable when executed to:

arrange a plurality of components of 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; and

present the user interface according to a structure of the hierarchy, and

for each component;

in response to a first user interaction with the component and when the component has a parent, transition from a first layer at which the component is presented to a second layer at which the parent of the component is presented, the second layer being beneath the first layer; and

in response to a second user interaction with the component and when the component has a child, transition from the first layer at which the component is presented to a third layer at which the child of the component is presented, the third layer being above the first layer.

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

for each layer of the hierarchy, present the one or more components at the layer in a strip floating on top of one or more components at a layer beneath the layer.

11. The media of claim 9, wherein for each component:

the first user interaction comprises a first gesture performed by one or more fingers of a user on a touch-sensitive display of a device; and

the second user interaction comprises a second gesture performed by one or more fingers of a user on a touch-sensitive display of a device.

12. The media of claim 11, wherein for each component,

the first gesture is pinching two or more fingers together,

the second gesture is pinching two or more fingers apart.

13. The media of claim 9, wherein for each component,

the first user interaction decreases the size of the component below a pre-determined threshold,

the second user interaction increases the size of the component above a pre-determined threshold.

14. The media of claim 9, wherein, when the component is the last component in the first layer,

the first user interaction is an operation that would otherwise navigate from the component to the next component in the layer.

15. The media of claim 14, wherein the operation is an input that results in scrolling the through components.

16. The media of claim 9, wherein the component and the parent of the component or the child of the component are the same object displayed in different states.

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

present the user interface according to a structure of the hierarchy, and

for each component;

in response to a first user interaction with the component and when the component has a parent, transition from a first layer at which the component is presented to a second layer at which the parent of the component is presented, the second layer being beneath the first layer; and

in response to a second user interaction with the component and when the component has a child, transition from the first layer at which the component is presented to a third layer at which the child of the component is presented, the third layer being above the first layer.

18. The system of claim 17, the processors operable to:

for each layer of the hierarchy, present the one or more components at the layer in a strip floating on top of one or more components at a layer beneath the layer.

19. The system of claim 17, wherein for each component:

the first user interaction comprises a first gesture performed by one or more fingers of a user on a touch-sensitive display of a device; and

the second user interaction comprises a second gesture performed by one or more fingers of a user on a touch-sensitive display of a device.

20. The system of claim 19, wherein for each component,

the first gesture is pinching two or more fingers together,

the second gesture is pinching two or more fingers apart.