Device, method, and graphical user interface for navigating and displaying content in context

• US 8,698,762 B2
• Filed: 05/27/2010
• Issued: 04/15/2014
• Est. Priority Date: 01/06/2010
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Wagner, Oliver P., Matas, Michael
• Primary Examiner(s): Leiby, Christopher E
• Application Number:
  US12/789,441
• Publication Number:
  US 20110163971A1
• Time in Patent Office: 1,419 Days
• Field of Search: 345173-181
• US Class Current: 345/173
• 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/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/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

Abstract

An electronic device displays one or more thumbnails. The device detects a first multi-contact gesture that includes movement of a first contact and a second contact; and, in response to detecting the first multi-contact gesture, the device displays content associated with a respective thumbnail and enlarges the content associated with the respective thumbnail to a respective enlarged size in accordance with the first multi-contact gesture. The device detects termination of the first multi-contact gesture; and, in response to detecting termination of the first multi-contact gesture: when a resizing metric based on the first multi-contact gesture is below a predefined threshold, the device ceases to display the content at the respective enlarged size; and, when the resizing metric based on the first multi-contact gesture is above the predefined threshold, the device displays the content on the display in a predefined arrangement.

Claims

1. An electronic device, comprising:

a display and 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 arrangement of thumbnails that includes a plurality of thumbnails, wherein each respective thumbnail of the plurality of thumbnails corresponds to a respective set of content items that includes a plurality of content items;

while displaying the first arrangement of thumbnails, detecting a first contact and a second contact on the touch-sensitive surface at a location on the touch-sensitive surface that corresponds to a location of a first thumbnail of the plurality of thumbnails that corresponds to a first set of content items;

while continuing to detect the first contact and the second contact on the touch-sensitive surface;

detecting a first multi-contact gesture that includes movement of the first contact relative to the second contact; and

,

in response to detecting the first multi-contact gesture;

displaying a group of representations of content items in the first set of content items; and

enlarging the group of representations by spreading the representations of content items in the first set of content items out by an amount determined in accordance with the first multi-contact gesture;

detecting termination of the first multi-contact gesture; and

,

in response to detecting termination of the first multi-contact gesture;

in accordance with a determination that a resizing metric based on the first multi-contact gesture is below a predefined threshold;

ceasing to display the representations of the plurality of content items in the first set of content items; and

redisplaying the first arrangement of thumbnails; and

,

in accordance with a determination that the resizing metric based on the first multi-contact gesture is above the predefined threshold;

spreading the representations of content items in the first set of content items out by a predefined amount; and

displaying the representations of the plurality of content items in the first set of content items on the display in a second arrangement that is different from the first arrangement.

2. The device of claim 1, wherein the first contact and the second contact are detected at locations on the touch-sensitive surface that correspond to an initial region of the first thumbnail on the display.

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

in response to detecting the first multi-contact gesture, translating the group of representations of content items in the first set of content items across the display in accordance with the first multi-contact gesture.

4. The device of claim 1, wherein:

the first arrangement of thumbnails includes a plurality of thumbnails other than the first thumbnail; and

the device includes instructions for fading out the plurality of thumbnails in the first arrangement of thumbnails when the resizing metric based on the first multi-contact gesture reaches a predefined fading threshold.

5. The device of claim 1, wherein displaying the representations of the plurality of content items in the first set of content items on the display in the second arrangement includes displaying the representations of the plurality of content items in the first set of in a multi-row, multi-column, grid.

6. The device of claim 1, wherein:

the first thumbnail is representative of respective content that is associated with a respective geographical location;

the first thumbnail is displayed on a map in a region on the map that corresponds to the respective geographical location associated with the respective content represented by the first thumbnail; and

,

enlarging the group of representations includes displaying the group of representations overlaid on the map.

7. The device of claim 6, including instructions for, prior to displaying the respective thumbnail:

displaying a plurality of pins on the map, wherein;

each of the pins is representative of content that is associated with a geographic location; and

,

each of the pins is displayed at a respective location on the map that corresponds to the geographic location of the content represented by the pin;

detecting a pin selection input associated with a respective pin of the plurality of pins; and

,

in response to detecting the pin selection input, displaying the first thumbnail.

8. The device of claim 1, wherein:

displaying the group of representations of content items in the first set of content items includes displaying a first representation overlapping a second representation;

spreading the representations of content items in the first set of content items out by an amount determined in accordance with the first multi-contact gesture includes reducing the amount by which the first representation overlaps the second representation in accordance with the first multi-contact gesture; and

displaying the representations of the plurality of content items in the first set of content items on the display in a second arrangement that is different from the first arrangement includes displaying the first representation and the second representation without overlapping the first representation and the second representation.

9. A method, comprising:

at an electronic device with a display and a touch-sensitive surface;

displaying a first arrangement of thumbnails that includes a plurality of thumbnails, wherein each respective thumbnail of the plurality of thumbnails corresponds to a respective set of content items that includes a plurality of content items;

while displaying the first arrangement of thumbnails, detecting a first contact and a second contact on the touch-sensitive surface at a location on the touch-sensitive surface that corresponds to a location of a first thumbnail of the plurality of thumbnails that corresponds to a first set of content items;

while continuing to detect the first contact and the second contact on the touch-sensitive surface;

detecting a first multi-contact gesture that includes movement of the first contact relative to the second contact; and

,

in response to detecting the first multi-contact gesture;

displaying a group of representations of content items in the first set of content items; and

enlarging the group of representations by spreading the representations of content items in the first set of content items out by an amount determined content associated in accordance with the first multi-contact gesture;

detecting termination of the first multi-contact gesture; and

,

in response to detecting termination of the first multi-contact gesture;

in accordance with a determination that a resizing metric based on the first multi-contact gesture is below a predefined threshold;

ceasing to display the representations of the plurality of content items in the first set of content items; and

redisplaying the first arrangement of thumbnails; and

,

in accordance with a determination that the resizing metric based on the first multi-contact gesture is above the predefined threshold;

spreading the representations of content items in the first set of content items out by a predefined amount; and

displaying the representations of the plurality of content items in the first set of content items on the display in a second arrangement that is different from the first arrangement.

10. The method of claim 9, wherein the first contact and the second contact are detected at locations on the touch-sensitive surface that correspond to an initial region of the first thumbnail on the display.

11. The method of claim 9, including:

in response to detecting the first multi-contact gesture, translating the group of representations of content items in the first set of content items across the display in accordance with the first multi-contact gesture.

12. The method of claim 9, wherein:

the first arrangement of thumbnails includes a plurality of thumbnails other than the first thumbnail; and

the method includes fading out the plurality of thumbnails in the first arrangement of thumbnails when the resizing metric based on the first multi-contact gesture reaches a predefined fading threshold.

13. The method of claim 9, wherein displaying the representations of the plurality of content items in the first set of content items on the display in the second arrangement includes displaying the representations of the plurality of content items in the first set of content items in a multi-row, multi-column, grid.

14. The method of claim 9, wherein:

the first thumbnail is representative of respective content that is associated with a respective geographical location;

the first thumbnail is displayed on a map in a region on the map that corresponds to the respective geographical location associated with the respective content represented by the first thumbnail; and

,

enlarging the group of representations includes displaying the group of representations overlaid on the map.

15. The method of claim 14, including, prior to displaying the respective thumbnail:

displaying a plurality of pins on the map, wherein;

each of the pins is representative of content that is associated with a geographic location; and

,

each of the pins is displayed at a respective location on the map that corresponds to the geographic location of the content represented by the pin;

detecting a pin selection input associated with a respective pin of the plurality of pins; and

,

in response to detecting the pin selection input, displaying the first thumbnail.

16. The method of claim 9, wherein:

displaying the group of representations of content items in the first set of content items includes displaying a first representation overlapping a second representation;

spreading the representations of content items in the first set of content items out by an amount determined in accordance with the first multi-contact gesture includes reducing the amount by which the first representation overlaps the second representation in accordance with the first multi-contact gesture; and

displaying the representations of the plurality of content items in the first set of content items on the display in a second arrangement that is different from the first arrangement includes displaying the first representation and the second representation without overlapping the first representation and the second representation.

17. A non-transitory 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 first arrangement of thumbnails that includes a plurality of thumbnails, wherein each respective thumbnail of the plurality of thumbnails corresponds to a respective set of content items that includes a plurality of content items;

while displaying the first arrangement of thumbnails, detect a first contact and a second contact on the touch-sensitive surface at a location on the touch-sensitive surface that corresponds to a location of a first thumbnail of the plurality of thumbnails that corresponds to a first set of content items;

while continuing to detect the first contact and the second contact on the touch-sensitive surface;

detect a first multi-contact gesture that includes movement of the first contact relative to the second contact; and

,

in response to detecting the first multi-contact gesture;

display a group of representations of content items in the first set of content items; and

enlarge the group of representations by spreading the representations of content items in the first set of content items out by an amount determined in accordance with the first multi-contact gesture;

detect termination of the first multi-contact gesture; and

,

in response to detecting termination of the first multi-contact gesture;

in accordance with a determination that a resizing metric based on the first multi-contact gesture is below a predefined threshold;

cease to display the representations of the plurality of content items in the first set of content items; and

redisplay the first arrangement of thumbnails; and

,

in accordance with a determination that the resizing metric based on the first multi-contact gesture is above the predefined threshold;

spread the representations of content items in the first set of content items out by a predefined amount; and

display the representations of the plurality of content items in the first set of content items on the display in a second arrangement that is different from the first arrangement.

18. The computer readable storage medium of claim 17, wherein the first contact and the second contact are detected at locations on the touch-sensitive surface that correspond to an initial region of the first thumbnail on the display.

19. The computer readable storage medium of claim 17, including instructions for:

in response to detecting the first multi-contact gesture, translating the group of representations of content items in the first set of content items across the display in accordance with the first multi-contact gesture.

20. The computer readable storage medium of claim 17, wherein:

the first arrangement of thumbnails includes a plurality of thumbnails other than the first thumbnail; and

the computer readable storage medium includes instructions for fading out the plurality of thumbnails in the first arrangement of thumbnails when the resizing metric based on the first multi-contact gesture reaches a predefined fading threshold.

21. The computer readable storage medium of claim 17, wherein displaying the representations of the plurality of content items in the first set of content items on the display in the second arrangement includes displaying the representations of the plurality of content items in the first set of content items in a multi-row, multi-column, grid.

22. The computer readable storage medium of claim 17, wherein:

the first thumbnail is representative of respective content that is associated with a respective geographical location;

the first thumbnail is displayed on a map in a region on the map that corresponds to the respective geographical location associated with the respective content represented by the first thumbnail; and

,

enlarging the group of representations includes displaying the group of representations overlaid on the map.

23. The computer readable storage medium of claim 22, including instructions for, prior to displaying the respective thumbnail:

displaying a plurality of pins on the map, wherein;

each of the pins is representative of content that is associated with a geographic location; and

,

each of the pins is displayed at a respective location on the map that corresponds to the geographic location of the content represented by the pin;

detecting a pin selection input associated with a respective pin of the plurality of pins; and

,

in response to detecting the pin selection input, displaying the first thumbnail.

24. The computer readable storage medium of claim 17, wherein:

displaying the group of representations of content items in the first set of content items includes displaying a first representation overlapping a second representation;

spreading the representations of content items in the first set of content items out by an amount determined in accordance with the first multi-contact gesture includes reducing the amount by which the first representation overlaps the second representation in accordance with the first multi-contact gesture; and

displaying the representations of the plurality of content items in the first set of content items on the display in a second arrangement that is different from the first arrangement includes displaying the first representation and the second representation without overlapping the first representation and the second representation.

25. An electronic device, comprising:

a display and 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 arrangement of thumbnails that includes a plurality of thumbnails, wherein a first thumbnail in the first arrangement of thumbnails corresponds to first content;

while displaying the first arrangement of thumbnails, detecting a first contact and a second contact on the touch-sensitive surface at a location on the touch-sensitive surface that corresponds to a location of the first thumbnail;

while continuing to detect the first contact and the second contact on the touch-sensitive surface;

detecting a first multi-contact gesture that includes movement of the first contact relative to the second contact; and

,

in response to detecting the first multi-contact gesture;

displaying a representation of the first content;

enlarging the representation of the first content to a respective enlarged size in accordance with the first multi-contact gesture; and

rotating the representation of the first content to a respective arbitrary orientation in accordance with the first multi-contact gesture;

detecting termination of the first multi-contact gesture; and

,

in response to detecting termination of the first multi-contact gesture;

in accordance with a determination that a resizing metric based on the first multi-contact gesture is below a predefined threshold, ceasing to display the first content at the respective enlarged size and at the respective arbitrary orientation and redisplaying the first arrangement of thumbnails; and

,

in accordance with a determination that the resizing metric based on the first multi-contact gesture is above the predefined threshold, displaying the content on the display at a predefined size and a predefined rotation.