Devices and Methods for Navigating Between User Interfaces

• US 20160357404A1
• Filed: 09/27/2015
• Published: 12/08/2016
• Est. Priority Date: 06/07/2015
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Alonso Ruiz, Marcos, Bauer, Sebastian J., Cato, Andrew B., Chaudhri, Imran A., DASCOLA, Jonathan R., FOSS, Christopher P., Hagedorn, Joseph A., Karunamuni, Chanaka G., Lemay, Stephen O.
• Granted Patent: US 10,303,354 B2
• Time in Patent Office: Days
• 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/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: G06F 3/0483 Interaction with page-structured environments, e.g. book metaphor
• 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/0486 Drag-and-drop
• CPC Class Codes: G06F 3/0488 using a touch-screen or digitiser, e.g. input of commands through traced gestures
• CPC Class Codes: G06F 3/04883 for inputting data by handwriting, e.g. gesture or text
• CPC Class Codes: G06F 9/451 Execution arrangements for user interfaces

Abstract

An electronic device displays a plurality of user interface representations in a stack on a display. The device detects a first drag gesture by a first contact at a location on a touch-sensitive surface that corresponds to a location of a first user interface representation on the display. While the first contact is at a location on the touch-sensitive surface that corresponds to the location of the first user interface representation on the display and is moving across the touch-sensitive surface in a direction that corresponds to a first direction on the display, the device moves the first user interface representation in the first direction on the display at a first speed in accordance with a speed of the first contact on the touch-sensitive surface and moves a second user interface representation, disposed above the first user interface representation in the stack, in the first direction at a second speed greater than the first speed.

Claims

1. A method, comprising:

at an electronic device having one or more processors, memory, a touch-sensitive surface, and a display;

displaying a plurality of user interface representations in a stack on the display, wherein;

at least a first user interface representation and a second user interface representation disposed above the first user interface representation in the stack, are visible on the display,

the second user interface representation is offset from the first user interface representation in a first direction, and

the second user interface representation partially exposes the first user interface representation;

detecting a first drag gesture by a first contact at a location on the touch-sensitive surface that corresponds to a location of the first user interface representation on the display, the first contact moving across the touch-sensitive surface in a direction that corresponds to the first direction on the display; and

,

while the first contact is at a location on the touch-sensitive surface that corresponds to the location of the first user interface representation on the display and moving across the touch-sensitive surface in a direction that corresponds to the first direction on the display;

moving the first user interface representation in the first direction on the display at a first speed in accordance with a speed of the first contact on the touch-sensitive surface; and

moving the second user interface representation, disposed above the first user interface representation, in the first direction at a second speed greater than the first speed.

2. The method of claim 1, wherein:

the stack includes at least a third user interface representation disposed below the first user interface representation,

the first user interface representation is offset from the third user interface representation in the first direction, and

the first user interface representation partially exposes the third user interface representation;

and the method includes;

while the first contact is at a location on the touch-sensitive interface that corresponds to the first user interface representation on the display and the first contact is moving across the touch-sensitive surface in a direction that corresponds to the first direction on the display;

moving the third user interface representation, disposed below the first user interface representation, in the first direction at a third speed less than the first speed.

3. The method of claim 2, wherein a difference between the second speed and the first speed maintains a first constant z-position difference between the second user interface representation and the first user interface representation, while a difference between the first speed and the third speed maintains a second constant z-position difference between the first user interface representation and the third user interface representation, wherein the first constant z-position difference is the same as the second z-position difference.

4. The method of claim 2, wherein a difference between the second speed and the first speed is equal to a difference between the first speed and the third speed.

5. The method of claim 2, wherein a ratio between the second speed and the first speed is equal to a ratio between the first speed and the third speed.

6. The method of claim 1, including:

prior to displaying the stack on the display;

displaying a first user interface on the display, wherein the first user interface corresponds to the first user interface representation of the plurality of user interface presentations;

while displaying the first user interface, detecting a predetermined input;

and,

in response to detecting the predetermined input;

entering a user interface selection mode; and

displaying the stack with at least a portion of the first user interface representation visible and at least a portion of the second user interface representation visible.

7. The method of claim 6, including:

in response to detecting the predetermined input;

ceasing to display a status bar on the display, wherein the status bar is displayed concurrently with a respective user interface prior to entering the user interface selection mode and displaying the stack.

8. The method of claim 2, including:

while moving the third user interface representation disposed below the first user interface representation at the third speed in the first direction;

revealing an increasingly larger portion of a fourth user interface representation disposed below the third user interface representation in the stack on the display; and

moving the fourth user interface representation disposed below the third user interface representation at a fourth speed that is less than the third speed in the first direction.

9. The method of claim 2, including:

after detecting the first drag gesture, detecting a second drag gesture by a second contact on the touch-sensitive surface at a location that corresponds to the first user interface representation on the display, the second contact moving across the touch-sensitive surface in a direction that corresponds to a second direction on the display opposite to the first direction on the display; and

,

while the second contact is at a location on the touch-sensitive surface that corresponds the first user interface representation on the display and the second contact is moving across the touch-sensitive surface in a direction that corresponds to the second direction on the display opposite the first direction on the display;

moving the first user interface representation in the second direction at a new first speed on the display in accordance with a speed of the second contact on the touch-sensitive surface

moving the second user interface representation, disposed above the first user interface representation, in the second direction at a new second speed greater than the new first speed; and

moving the third user interface representation, disposed below the first user interface representation, in the second direction at a new third speed less than the new first speed.

10. The method of claim 9, including:

while moving the second user interface representation in the second direction faster than moving the first user interface representation in the second direction, detecting that the second user interface representation has moved in between the first user interface representation and a location on the display that corresponds to a location of the second contact on the touch-sensitive surface; and

,

in response to detecting that the second user interface representation has moved in between the first user interface and a location on the display that corresponds to the location of the second contact on the touch-sensitive surface;

moving the second user interface representation in the second direction at a modified second speed in accordance with a current speed of the second contact; and

moving the first user interface representation, disposed below the second user interface representation, in the second direction at a modified first speed less than the modified second speed.

11. The method of claim 10, wherein a difference between the modified second speed and the modified first speed maintains a first constant z-position difference between the second user interface representation and the first user interface representation, while a difference between the modified first speed and the modified third speed maintains a second constant z-position difference between the first user interface representation and the third user interface representation, wherein the first constant z-position difference is the same as the second z-position difference.

12. The method of claim 10, wherein a difference between the modified second speed and the modified first speed is equal to a difference between the modified first speed and the modified third speed.

13. The method of claim 10, wherein a ratio between the modified second speed and the modified first speed is equal to a ratio between the modified first speed and the modified third speed.

14. The method of claim 1, wherein a respective user interface representation has a corresponding position in the stack, and the method includes:

for a respective user interface representation that is visible on the display;

determining a respective relative z-position of the respective user interface representation as compared to one or more other user interface representations that are concurrently visible on the display; and

applying a respective level of blurring to the respective user interface representation in accordance with the respective relative z-position of the respective user interface representation as compared to the one or more other user interface representations that are concurrently visible on the display.

15. The method of claim 1, wherein a respective user interface representation has a corresponding simulated absolute z-position in the stack, and the method includes:

for a respective user interface representation that is visible on the display, applying a respective level of blurring to the respective user interface representation in accordance with the corresponding simulated absolute z-position of the respective user interface representation in a z-dimension.

16. The method of claim 1, wherein a respective user interface representation is associated with a respective title area with respective title content, and the method includes:

for a respective user interface representation currently visible below an adjacent user interface representation on the display, applying a visual effect to at least a first portion of the respective title content of the respective user interface representation as the adjacent user interface representation approaches.

17. The method of claim 16, wherein applying a visual effect to at least a portion of the respective title content of the respective user interface representation as the adjacent user interface representation approaches includes:

applying the visual effect to title text in the respective title content while maintaining an original appearance of an icon in the respective title content, as the respective title area of an adjacent user interface representation or the adjacent user interface representation moves within a threshold lateral distance on the display of the respective title content.

18. The method of claim 1, wherein the stack includes user interface representations for a home screen, zero or more transient application user interface representations, and one or more open application user interface representations.

19. The method of claim 18, wherein the transient application user interface representations include a telephony interface representation for an active call or a missed call, a continuity interface representation for a suggested application, a continuity interface representation for a hand-off from another device, and a printer interface representation for an active print job.

20. The method of claim 1, including:

while displaying, in the stack, at least the first user interface representation and the second user interface representation above the first user interface representation;

detecting activation of a transient application at the device; and

,

in response to detecting activation of the transient application, inserting a user interface representation for the transient application in the stack between the first user interface representation and the second user interface representation.

21. The method of claim 1, including:

while displaying, in the stack, at least the first user interface representation and the second user interface representation above the first user interface representation;

detecting a deletion input directed to the first user interface representation; and

,

in response to detecting the deletion input directed to the first user interface representation;

removing the first user interface representation from a first position in the stack; and

moving a respective user interface representation disposed immediately below the first user interface representation into the first position in the stack.

22. The method of claim 1, including:

after detecting termination of the first drag gesture, displaying at least two of the user interface representations in the stack on the display;

while displaying at least two of the plurality of user interface representations in the stack, detecting a selection input directed to one of the at least two user interface representations in the stack; and

,

in response to detecting the selection input;

ceasing to display the stack; and

displaying a user interface that corresponds to the selected one of the at least two user interface representations.

23. The method of claim 1, including:

while at least the first user interface representation and the second user interface representation, disposed above the first user interface representation in the stack, are stationary on the display;

detecting a first flick gesture by a second contact at a location on the touch-sensitive surface that corresponds to one of the first user interface representation or the second user interface representation on the display, wherein the flick gesture moves across the touch-sensitive surface in a direction that corresponds to the first direction on the display; and

,

in response to detecting the first flick gesture by the second contact, moving the second user interface representation with a simulated inertia that is based on whether the second contact was detected at a location on the touch-sensitive surface that corresponds to the first user interface representation or to the second user interface representation on the display.

24. An electronic device, comprising:

a display;

a touch-sensitive surface;

one or more processors;

memory; and

one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for;

displaying a plurality of user interface representations in a stack on the display, wherein;

at least a first user interface representation and a second user interface representation disposed above the first user interface representation in the stack, are visible on the display,

the second user interface representation is offset from the first user interface representation in a first direction, and

the second user interface representation partially exposes the first user interface representation;

detecting a first drag gesture by a first contact at a location on the touch-sensitive surface that corresponds to a location of the first user interface representation on the display, the first contact moving across the touch-sensitive surface in a direction that corresponds to the first direction on the display; and

,

while the first contact is at a location on the touch-sensitive surface that corresponds to the location of the first user interface representation on the display and moving across the touch-sensitive surface in a direction that corresponds to the first direction on the display;

moving the first user interface representation in the first direction on the display at a first speed in accordance with a speed of the first contact on the touch-sensitive surface; and

moving the second user interface representation, disposed above the first user interface representation, in the first direction at a second speed greater than the first speed.

25. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by an electronic device with a display, and a touch-sensitive surface, cause the device to:

display a plurality of user interface representations in a stack on the display, wherein;

at least a first user interface representation and a second user interface representation disposed above the first user interface representation in the stack, are visible on the display,

the second user interface representation is offset from the first user interface representation in a first direction, and

the second user interface representation partially exposes the first user interface representation;

detect a first drag gesture by a first contact at a location on the touch-sensitive surface that corresponds to a location of the first user interface representation on the display, the first contact moving across the touch-sensitive surface in a direction that corresponds to the first direction on the display; and

,

while the first contact is at a location on the touch-sensitive surface that corresponds to the location of the first user interface representation on the display and moving across the touch-sensitive surface in a direction that corresponds to the first direction on the display;

move the first user interface representation in the first direction on the display at a first speed in accordance with a speed of the first contact on the touch-sensitive surface; and

move the second user interface representation, disposed above the first user interface representation, in the first direction at a second speed greater than the first speed.