Device, Method, and Graphical User Interface for Navigating and Displaying Content in Context

• US 20110163971A1
• Filed: 05/27/2010
• Published: 07/07/2011
• Est. Priority Date: 01/06/2010
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Matas, Michael, Wagner, Oliver P.
• Granted Patent: US 8,698,762 B2
• Time in Patent Office: Days
• 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 one or more thumbnails;

detecting a first contact and a second contact on the touch-sensitive surface;

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 and the second contact; and

,

in response to detecting the first multi-contact gesture;

displaying content associated with a respective thumbnail; and

enlarging the content associated with the respective thumbnail to a respective enlarged size 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;

when a resizing metric based on the first multi-contact gesture is below a predefined threshold, ceasing 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, displaying the content on the display in a predefined arrangement.

2. The device of claim 1, wherein each respective thumbnail of the one or more thumbnails is located at a respective initial region on the display and has a respective initial size.

3. 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 respective thumbnail on the display.

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

in response to detecting the first multi-contact gesture, translating the content across the display in accordance with the first multi-contact gesture.

5. The device of claim 1, wherein enlarging the content associated with the respective thumbnail to the respective enlarged size is in accordance with the resizing metric.

6. The device of claim 1, including instructions for rotating the content in response to detecting the first multi-contact gesture.

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

in response to detecting the first multi-contact gesture, rotating the content to an arbitrary angle in accordance with the first multi-contact gesture; and

wherein displaying the content on the display in the predefined arrangement includes snapping the content to a predefined orientation.

8. The device of claim 1, wherein the content is a plurality of images and the respective thumbnail is a representation of a stack of images that displays at least one image of the plurality of images.

9. The device of claim 1, wherein the content is a single image, and the respective thumbnail is a reduced-size representation of the single image.

10. The device of claim 1, wherein displaying the content includes ceasing to display the respective thumbnail.

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

in response to detecting the first multi-contact gesture, ceasing to display the respective thumbnail in an initial region; and

,

in response to detecting termination of the first multi-contact gesture, when the resizing metric based on the first multi-contact gesture is below the predefined threshold, redisplaying the respective thumbnail in the initial region.

12. The device of claim 1, wherein the one or more thumbnails includes a plurality of thumbnails other than the respective thumbnail, the device including instructions for:

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

13. The device of claim 1, wherein the content includes a plurality of content items, and displaying the content on the display in the predefined arrangement includes displaying the content items in a multi-row grid of components.

14. The device of claim 1, wherein:

the one or more thumbnails include the respective thumbnail and a plurality of other thumbnails arranged as an initial array of thumbnails;

the content is a first image; and

displaying the content in a predefined arrangement includes displaying the first image in a slideshow mode; and

the device includes instructions for;

while in slideshow mode,

navigating from the first image to a subsequent image in the slideshow mode;

detecting a third contact and a fourth contact on the touch-sensitive surface;

detecting a second multi-contact gesture that includes the third contact and the fourth contact;

in response to detecting the second multi-contact gesture;

exiting the slideshow mode;

displaying an updated array of content thumbnails that does not include a thumbnail for the subsequent image; and

,

shrinking the subsequent image in accordance with the second multi-contact gesture;

detecting termination of the second multi-contact gesture; and

,

in response to detecting termination of the second multi-contact gesture, displaying a thumbnail for the subsequent image in the updated array.

15. The device of claim 1, wherein:

enlarging the content includes resizing the content to an arbitrary size;

displaying the content in a predefined arrangement in response to detecting termination of the first multi-contact gesture includes snapping the content to a predefined size; and

,

the device includes instructions for;

detecting a third contact and a fourth contact on the touch-sensitive surface;

detecting a second multi-contact gesture that includes the third contact and the fourth contact; and

,

in response to detecting the second multi-contact gesture, enlarging the content to an enlarged size that is larger than the predefined size in accordance with the second multi-contact gesture;

detecting termination of the second multi-contact gesture; and

after detecting termination of the second multi-contact gesture, continuing to display the content at the enlarged size.

16. The device of claim 1, wherein:

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

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

,

enlarging the content associated with the respective thumbnail includes displaying the content associated with the respective thumbnail overlaid on the map.

17. The device of claim 16, 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 respective thumbnail.

18. A method, comprising:

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

displaying one or more thumbnails;

detecting a first contact and a second contact on the touch-sensitive surface;

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 and the second contact; and

,

in response to detecting the first multi-contact gesture;

displaying content associated with a respective thumbnail; and

enlarging the content associated with the respective thumbnail to a respective enlarged size 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;

when a resizing metric based on the first multi-contact gesture is below a predefined threshold, ceasing 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, displaying the content on the display in a predefined arrangement.

19. A graphical user interface on an electronic device with a display, a touch-sensitive surface, a memory, and one or more processors to execute one or more programs stored in the memory, the graphical user interface comprising:

one or more thumbnails;

wherein;

a first contact and a second contact are detected on the touch-sensitive surface;

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

a first multi-contact gesture that includes movement of the first contact and the second contact is detected; and

,

in response to detecting the first multi-contact gesture;

content associated with a respective thumbnail is displayed; and

content associated with the respective thumbnail is enlarged to a respective enlarged size in accordance with the first multi-contact gesture;

termination of the first multi-contact gesture is detected; 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 content ceases to be displayed at the respective enlarged size; and

,

when the resizing metric based on the first multi-contact gesture is above the predefined threshold, the content is displayed on the display in a predefined arrangement.

20. 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 one or more thumbnails;

detect a first contact and a second contact on the touch-sensitive surface;

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 and the second contact; and

,

in response to detecting the first multi-contact gesture;

display content associated with a respective thumbnail; and

enlarge the content associated with the respective thumbnail to a respective enlarged size 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;

when a resizing metric based on the first multi-contact gesture is below a predefined threshold, cease 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, display the content on the display in a predefined arrangement.