Device, method, and graphical user interface for navigating through multiple viewing areas

• US 8,438,504 B2
• Filed: 05/27/2010
• Issued: 05/07/2013
• Est. Priority Date: 01/06/2010
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Cranfill, Elizabeth Caroline Furches, Lemay, Stephen O.
• Primary Examiner(s): Abdul-Ali, Omar
• Assistant Examiner(s): TANK, ANDREW L
• Application Number:
  US12/789,436
• Publication Number:
  US 20110167341A1
• Time in Patent Office: 1,076 Days
• Field of Search: 715/702, 715/790, 715/791, 715793-797, 715/802, 715/835, 715/863
• US Class Current: 715/863
• 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/0485 Scrolling or panning
• CPC Class Codes: G06F 3/0488 using a touch-screen or digitiser, e.g. input of commands through traced gestures
• CPC Class Codes: G06F 9/451 Execution arrangements for user interfaces

Abstract

A method includes: displaying a first viewing area, the first viewing area including a first plurality of selectable objects; in response to detecting activation of an object in the first plurality of selectable objects, overlaying a second viewing area on a portion of the first viewing area while maintaining display of a remaining portion of the first viewing area. The second viewing area includes a second plurality of selectable objects. The method also includes, in response to detecting activation of an object in the second plurality of selectable objects, overlaying a third viewing area on a portion of the first viewing area. The third viewing area includes a third plurality of selectable objects. The method also includes displaying a portion of the second viewing area overlaid on a portion of the first viewing area; and maintaining display of a remaining portion of the first viewing area.

Claims

1. A multifunction 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 first viewing area, the first viewing area including a first plurality of selectable objects;

detecting activation of an object in the first plurality of selectable objects;

in response to detecting activation of the object in the first plurality of selectable objects, overlaying a second viewing area on a portion of the first viewing area while maintaining display of a remaining portion of the first viewing area, wherein the second viewing area includes a second plurality of selectable objects;

detecting activation of an object in the second plurality of selectable objects;

in response to detecting activation of the object in the second plurality of selectable objects;

overlaying a third viewing area on a portion of the first viewing area, wherein the third viewing area includes a third plurality of selectable objects;

displaying a portion, less than all, of the second viewing area overlaid on a portion of the first viewing area; and

maintaining display of a remaining portion of the first viewing area; and

while displaying the third viewing area and the portion of the second viewing area;

detecting a swipe gesture on the touch-sensitive surface; and

, in response to detecting the swipe gesture on the touch-sensitive surface;

when the swipe gesture occurs in a first direction;

moving the second viewing area such that the entire second viewing area is redisplayed; and

maintaining display of a remaining portion of the first viewing area; and

,

when the swipe gesture occurs in a second direction that is perpendicular to the first direction;

maintaining display of the third viewing area, the portion of the second viewing area, and a remaining portion of the first viewing area; and

scrolling at least a portion of the third viewing area to display a new portion of the third viewing area.

2. The device of claim 1, wherein the first viewing area, the second viewing area, and the third viewing area are part of a single application.

3. The device of claim 1, including instructions for:

in response to detecting activation of the object in the first plurality of selectable objects, visually deemphasizing the remaining portion of the first viewing area.

4. The device of claim 1, including instructions for:

in response to detecting activation of the object in the second plurality of selectable objects, moving the second viewing area in a lateral direction such that a portion of the second viewing area moves off an edge of the display and a portion of the second viewing area remains on the display overlaid on a portion of the first viewing area, while concurrently moving the third viewing area in the lateral direction onto the display.

5. The device of claim 1, including instructions for:

while displaying the third viewing area and the portion of the second viewing area;

detecting a gesture at a location on the touch-sensitive surface that corresponds to the portion of the second viewing area; and

, in response to detecting the gesture at the location on the touch-sensitive surface that corresponds to the portion of the second viewing area;

ceasing to display the third viewing area;

moving the second viewing area such that the entire second viewing area is redisplayed; and

maintaining display of a remaining portion of the first viewing area.

6. The device of claim 1, including instructions:

while displaying the third viewing area and the portion of the second viewing area;

detecting a gesture at a location on the touch-sensitive surface that corresponds to the portion of the second viewing area;

in response to detecting the gesture at the location on the touch-sensitive surface that corresponds to the portion of the second viewing area;

moving the third viewing area such that a portion of third viewing area moves off the display and a portion of the third viewing area remains on the display overlaid on a portion of the first viewing area;

moving the second viewing area such that the entire second viewing area is redisplayed; and

maintaining display of a remaining portion of the first viewing area.

7. The device of claim 1, including instructions for:

while displaying the third viewing area and the portion of the second viewing area;

detecting activation of an object in the third plurality of selectable objects; and

,

in response to detecting activation of the object in the third plurality of selectable objects;

overlaying a fourth viewing area on a portion of the first viewing area, wherein the fourth viewing area includes a fourth plurality of selectable objects;

moving the third viewing area such that a portion of third viewing area moves off the display and a portion of the third viewing area remains on the display overlaid on a portion of the first viewing area;

ceasing to display the second viewing area; and

maintaining display of a remaining portion of the first viewing area.

8. The device of claim 7, including instructions for:

while displaying the fourth viewing area and the portion of the third viewing area;

detecting a gesture at a location on the touch-sensitive surface that corresponds to the remaining portion of the first viewing area; and

,

in response to detecting the gesture at the location on the touch-sensitive surface that corresponds to the remaining portion of the first viewing area;

closing the fourth viewing area and the third viewing area; and

displaying the entire first viewing area.

9. The device of claim 7, including instructions for:

while displaying the fourth viewing area and the portion of the third viewing area;

detecting a gesture at a location on the touch-sensitive surface that corresponds to the portion of the third viewing area; and

,

in response to detecting the gesture at the location on the touch-sensitive surface that corresponds to the portion of the third viewing area;

ceasing to display the fourth viewing area;

moving the third viewing area such that the entire third viewing area is redisplayed; and

maintaining display of a remaining portion of the first viewing area.

10. The device of claim 7, including instructions for:

while displaying the fourth viewing area and the portion of the third viewing area;

detecting a gesture at a location on the touch-sensitive surface that corresponds to the portion of the third viewing area;

in response to detecting the gesture at the location on the touch-sensitive surface that corresponds to the portion of the third viewing area;

moving the fourth viewing area such that a portion of fourth viewing area moves off the display and a portion of the fourth viewing area remains on the display overlaid on a portion of the first viewing area;

moving the third viewing area such that the entire third viewing area is redisplayed; and

maintaining display of a remaining portion of the first viewing area.

11. A method, comprising:

at a multifunction device with a display and a touch-sensitive surface;

displaying a first viewing area, the first viewing area including a first plurality of selectable objects;

detecting activation of an object in the first plurality of selectable objects;

in response to detecting activation of the object in the first plurality of selectable objects, overlaying a second viewing area on a portion of the first viewing area while maintaining display of a remaining portion of the first viewing area, wherein the second viewing area includes a second plurality of selectable objects;

detecting activation of an object in the second plurality of selectable objects;

in response to detecting activation of the object in the second plurality of selectable objects;

overlaying a third viewing area on a portion of the first viewing area, wherein the third viewing area includes a third plurality of selectable objects;

displaying a portion, less than all, of the second viewing area overlaid on a portion of the first viewing area; and

maintaining display of a remaining portion of the first viewing area; and

while displaying the third viewing area and the portion of the second viewing area;

detecting a swipe gesture on the touch-sensitive surface; and

, in response to detecting the swipe gesture on the touch-sensitive surface;

when the swipe gesture occurs in a first direction;

moving the second viewing area such that the entire second viewing area is redisplayed; and

maintaining display of a remaining portion of the first viewing area; and

,

when the swipe gesture occurs in a second direction that is perpendicular to the first direction;

maintaining display of the third viewing area, the portion of the second viewing area, and a remaining portion of the first viewing area; and

scrolling at least a portion of the third viewing area to display a new portion of the third viewing area.

12. The method of claim 11, including:

in response to detecting activation of the object in the first plurality of selectable objects, visually deemphasizing the remaining portion of the first viewing area.

13. The method of claim 11, including:

in response to detecting activation of the object in the second plurality of selectable objects, moving the second viewing area in a lateral direction such that a portion of the second viewing area moves off an edge of the display and a portion of the second viewing area remains on the display overlaid on a portion of the first viewing area, while concurrently moving the third viewing area in the lateral direction onto the display.

14. The method of claim 11, including:

while displaying the third viewing area and the portion of the second viewing area;

detecting a gesture at a location on the touch-sensitive surface that corresponds to the portion of the second viewing area; and

, in response to detecting the gesture at the location on the touch-sensitive surface that corresponds to the portion of the second viewing area;

ceasing to display the third viewing area;

moving the second viewing area such that the entire second viewing area is redisplayed; and

maintaining display of a remaining portion of the first viewing area.

15. The method of claim 11, including:

while displaying the third viewing area and the portion of the second viewing area;

detecting a gesture at a location on the touch-sensitive surface that corresponds to the portion of the second viewing area;

in response to detecting the gesture at the location on the touch-sensitive surface that corresponds to the portion of the second viewing area;

moving the third viewing area such that a portion of third viewing area moves off the display and a portion of the third viewing area remains on the display overlaid on a portion of the first viewing area;

moving the second viewing area such that the entire second viewing area is redisplayed; and

maintaining display of a remaining portion of the first viewing area.

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

display a first viewing area, the first viewing area including a first plurality of selectable objects;

detect activation of an object in the first plurality of selectable objects;

in response to detecting activation of the object in the first plurality of selectable objects, overlay a second viewing area on a portion of the first viewing area while maintaining display of a remaining portion of the first viewing area, wherein the second viewing area includes a second plurality of selectable objects;

detect activation of an object in the second plurality of selectable objects;

in response to detecting activation of the object in the second plurality of selectable objects;

overlay a third viewing area on a portion of the first viewing area, wherein the third viewing area includes a third plurality of selectable objects;

display a portion, less than all, of the second viewing area overlaid on a portion of the first viewing area; and

maintain display of a remaining portion of the first viewing area; and

while displaying the third viewing area and the portion of the second viewing area;

detect a swipe gesture on the touch-sensitive surface; and

, in response to detecting the swipe gesture on the touch-sensitive surface;

when the swipe gesture occurs in a first direction;

move the second viewing area such that the entire second viewing area is redisplayed; and

maintain display of a remaining portion of the first viewing area; and

,

when the swipe gesture occurs in a second direction that is perpendicular to the first direction;

maintain display of the third viewing area, the portion of the second viewing area, and a remaining portion of the first viewing area; and

scroll at least a portion of the third viewing area to display a new portion of the third viewing area.

17. The computer readable storage medium of claim 16, including instructions that cause the device to:

in response to detecting activation of the object in the first plurality of selectable objects, visually deemphasize the remaining portion of the first viewing area.

18. The computer readable storage medium of claim 16, including instructions that cause the device to:

in response to detecting activation of the object in the second plurality of selectable objects, move the second viewing area in a lateral direction such that a portion of the second viewing area moves off an edge of the display and a portion of the second viewing area remains on the display overlaid on a portion of the first viewing area, while concurrently moving the third viewing area in the lateral direction onto the display.

19. The computer readable storage medium of claim 16, including instructions that cause the device to:

while displaying the third viewing area and the portion of the second viewing area;

detect a gesture at a location on the touch-sensitive surface that corresponds to the portion of the second viewing area; and

, in response to detecting the gesture at the location on the touch-sensitive surface that corresponds to the portion of the second viewing area;

cease to display the third viewing area;

move the second viewing area such that the entire second viewing area is redisplayed; and

maintain display of a remaining portion of the first viewing area.

20. The computer readable storage medium of claim 16, including instructions that cause the device to:

while displaying the third viewing area and the portion of the second viewing area;

detect a gesture at a location on the touch-sensitive surface that corresponds to the portion of the second viewing area;

in response to detecting the gesture at the location on the touch-sensitive surface that corresponds to the portion of the second viewing area;

move the third viewing area such that a portion of third viewing area moves off the display and a portion of the third viewing area remains on the display overlaid on a portion of the first viewing area;

move the second viewing area such that the entire second viewing area is redisplayed; and

maintain display of a remaining portion of the first viewing area.

21. A multifunction 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 first viewing area, the first viewing area including a first plurality of selectable objects;

detecting activation of an object in the first plurality of selectable objects;

in response to detecting activation of the object in the first plurality of selectable objects, overlaying a second viewing area on a portion of the first viewing area while maintaining display of a remaining portion of the first viewing area, wherein the second viewing area includes a second plurality of selectable objects;

detecting activation of an object in the second plurality of selectable objects;

in response to detecting activation of the object in the second plurality of selectable objects;

overlaying a third viewing area on a portion of the first viewing area, wherein the third viewing area includes a third plurality of selectable objects; and

maintaining display of a remaining portion of the first viewing area;

while displaying the third viewing area and a portion of the second viewing area;

detecting a swipe gesture on the touch-sensitive surface; and

, in response to detecting the swipe gesture on the touch-sensitive surface;

when the swipe gesture occurs in a first direction;

moving the second viewing area such that the entire second viewing area is redisplayed; and

maintaining display of a remaining portion of the first viewing area; and

,

when the swipe gesture occurs in a second direction that is perpendicular to the first direction;

maintaining display of the third viewing area, the portion of the second viewing area, and a remaining portion of the first viewing area; and

scrolling at least a portion of the third viewing area to display a new portion of the third viewing area; and

while displaying the third viewing area;

detecting a gesture at a location on the touch-sensitive surface that corresponds to the remaining portion of the first viewing area; and

,

in response to detecting the gesture at the location on the touch-sensitive surface that corresponds to the remaining portion of the first viewing area;

closing the second viewing area and the third viewing area; and

displaying the entire first viewing area.

22. A method, comprising:

at a multifunction device with a display and a touch-sensitive surface;

displaying a first viewing area, the first viewing area including a first plurality of selectable objects;

detecting activation of an object in the first plurality of selectable objects;

in response to detecting activation of the object in the first plurality of selectable objects, overlaying a second viewing area on a portion of the first viewing area while maintaining display of a remaining portion of the first viewing area, wherein the second viewing area includes a second plurality of selectable objects;

detecting activation of an object in the second plurality of selectable objects;

in response to detecting activation of the object in the second plurality of selectable objects;

overlaying a third viewing area on a portion of the first viewing area, wherein the third viewing area includes a third plurality of selectable objects; and

maintaining display of a remaining portion of the first viewing area;

while displaying the third viewing area and a portion of the second viewing area;

detecting a swipe gesture on the touch-sensitive surface; and

, in response to detecting the swipe gesture on the touch-sensitive surface;

when the swipe gesture occurs in a first direction;

moving the second viewing area such that the entire second viewing area is redisplayed; and

maintaining display of a remaining portion of the first viewing area; and

,

when the swipe gesture occurs in a second direction that is perpendicular to the first direction;

maintaining display of the third viewing area, the portion of the second viewing area, and a remaining portion of the first viewing area; and

scrolling at least a portion of the third viewing area to display a new portion of the third viewing area; and

while displaying the third viewing area;

detecting a gesture at a location on the touch-sensitive surface that corresponds to the remaining portion of the first viewing area; and

,

in response to detecting the gesture at the location on the touch-sensitive surface that corresponds to the remaining portion of the first viewing area;

closing the second viewing area and the third viewing area; and

displaying the entire first viewing area.

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

display a first viewing area, the first viewing area including a first plurality of selectable objects;

detect activation of an object in the first plurality of selectable objects;

in response to detecting activation of the object in the first plurality of selectable objects, overlay a second viewing area on a portion of the first viewing area while maintaining display of a remaining portion of the first viewing area, wherein the second viewing area includes a second plurality of selectable objects;

detect activation of an object in the second plurality of selectable objects; and

,

in response to detecting activation of the object in the second plurality of selectable objects;

overlay a third viewing area on a portion of the first viewing area, wherein the third viewing area includes a third plurality of selectable objects; and

maintain display of a remaining portion of the first viewing area;

while displaying the third viewing area and a portion of the second viewing area;

detect a swipe gesture on the touch-sensitive surface; and

, in response to detecting the swipe gesture on the touch-sensitive surface;

when the swipe gesture occurs in a first direction;

move the second viewing area such that the entire second viewing area is redisplayed; and

maintain display of a remaining portion of the first viewing area; and

,

when the swipe gesture occurs in a second direction that is perpendicular to the first direction;

maintain display of the third viewing area, the portion of the second viewing area, and a remaining portion of the first viewing area; and

scroll at least a portion of the third viewing area to display a new portion of the third viewing area; and

while displaying the third viewing area;

detect a gesture at a location on the touch-sensitive surface that corresponds to the remaining portion of the first viewing area; and

,

in response to detecting the gesture at the location on the touch-sensitive surface that corresponds to the remaining portion of the first viewing area;

close the second viewing area and the third viewing area; and

display the entire first viewing area.