Device, method, and graphical user interface for displaying content associated with a corresponding affordance

• US 9,971,499 B2
• Filed: 11/07/2014
• Issued: 05/15/2018
• Est. Priority Date: 05/09/2012
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Bernstein, Jeffrey Traer, Khoe, May-Li, Zambetti, Nicholas
• Primary Examiner(s): To, Jennifer
• Assistant Examiner(s): LI, LIANG Y
• Application Number:
  US14/536,247
• Publication Number:
  US 20150067601A1
• Time in Patent Office: 1,285 Days
• CPC Class Codes: G06F 2203/04802 3D-info-object: information is displayed on the internal or external surface of a three dimensional manipulable object, e.g. on the faces of a cube that can be rotated by the user
• CPC Class Codes: G06F 2203/04806 Zoom, i.e. interaction techniques or interactors for controlling the zooming operation
• CPC Class Codes: G06F 3/0412 Digitisers structurally integrated in a display
• 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/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/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: G11B 27/00 Editing; Indexing; Addressing; Timing or synchronising; Monitoring; Measuring tape travel
• CPC Class Codes: G11B 27/105 of operating discs
• CPC Class Codes: G11B 27/34 Indicating arrangements indicating means incorporated in magazine or cassette G11B23/046 and G11B23/0875; indicating measured values in general G01D

Abstract

An electronic device with a display, a touch-sensitive surface, and sensors to detect intensity of contacts with the touch-sensitive surface displays, on the display, an affordance corresponding to respective content at a respective size and detects a gesture that includes an increase in intensity of a contact followed by a subsequent decrease in intensity of the contact. In response to the increase in intensity, the device decreases a size of the affordance below the respective size. In response to the subsequent decrease in intensity: when a maximum intensity of the contact is above a content-display intensity threshold, the device ceases to display the affordance and displays at least a portion of the respective content; and when a maximum intensity of the contact is below the content-display intensity threshold, the device increases the size of the affordance to the respective size and forgoes displaying the respective content.

Claims

1. 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, a touch-sensitive surface and one or more sensors to detect intensity of contacts with the touch-sensitive surface, cause the electronic device to:

display, on the display, an affordance corresponding to respective content, wherein the affordance is displayed at a respective size;

while a focus selector is over the affordance, detect a gesture that includes an increase in intensity of the contact on the touch-sensitive surface followed by a subsequent decrease in intensity of the contact on the touch-sensitive surface;

in response to detecting the increase in intensity of the contact, decrease a size of the affordance below the respective size; and

in response to detecting the subsequent decrease in intensity of the contact;

in accordance with a determination that a maximum intensity of the contact is above a content-display intensity threshold, cease to display the affordance and display at least a portion of the respective content, wherein ceasing to display the affordance and displaying at least a portion of the respective content includes displaying an animated transition that includes enlarging the affordance to a size bigger than the respective size and the affordance is dynamically enlarged to the size bigger than the respective size in accordance with the changes in the intensity of the contact over time; and

in accordance with a determination that a maximum intensity of the contact is below the content-display intensity threshold, increase the size of the affordance to the respective size without increasing the size of the affordance to the size bigger than the respective size and forgo displaying the respective content.

2. The non-transitory computer readable storage medium of claim 1, wherein detecting the subsequent decrease in intensity of the contact includes detecting liftoff of the contact from the touch-sensitive surface.

3. The non-transitory computer readable storage medium of claim 1, wherein detecting the subsequent decrease in intensity of the contact includes detecting a reduction in intensity of the contact below a respective intensity threshold while continuing to detect the contact on the touch-sensitive surface.

4. The non-transitory computer readable storage medium of claim 1, wherein ceasing to display the affordance and displaying at least a portion of the respective content includes displaying an animated transition of the affordance transforming into the portion of the respective content.

5. The non-transitory computer readable storage medium of claim 1, wherein ceasing to display the affordance and displaying at least a portion of the respective content includes displaying an animated transition that includes:

displaying an animation of the affordance rotating about an axis parallel to the display to reveal the portion of the respective content that is on a simulated back side of the affordance.

6. The non-transitory computer readable storage medium of claim 1, wherein the affordance is a thumbnail image that includes a reduced scale representation of the respective content.

7. The non-transitory computer readable storage medium of claim 1, wherein the affordance is displayed in an array of affordances.

8. The non-transitory computer readable storage medium of claim 1, wherein:

the affordance is an application icon corresponding to a respective application; and

the respective content is a newly initialized application window associated with the application.

9. The non-transitory computer readable storage medium of claim 1, wherein:

the affordance is a document icon corresponding to an electronic document; and

the respective content is the electronic document.

10. The non-transitory computer readable storage medium of claim 1, wherein:

the affordance is a representation of a cached version of a webpage; and

the respective content is the webpage.

11. The non-transitory computer readable storage medium of claim 1, wherein:

the affordance is a thumbnail of a photo; and

the respective content is the photo.

12. The non-transitory computer readable storage medium of claim 1, wherein:

the affordance is a thumbnail of a video; and

the content is the video or a frame of the video.

13. An electronic device, comprising:

a display;

a touch-sensitive surface;

one or more sensors to detect intensity of contacts with the 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, on the display, an affordance corresponding to respective content, wherein the affordance is displayed at a respective size;

while a focus selector is over the affordance, detecting a gesture that includes an increase in intensity of the contact on the touch-sensitive surface followed by a subsequent decrease in intensity of the contact on the touch-sensitive surface;

in response to detecting the increase in intensity of the contact, decreasing a size of the affordance below the respective size; and

in response to detecting the subsequent decrease in intensity of the contact;

in accordance with a determination that a maximum intensity of the contact is above a content-display intensity threshold, ceasing to display the affordance and displaying at least a portion of the respective content, wherein ceasing to display the affordance and displaying at least a portion of the respective content includes displaying an animated transition that includes enlarging the affordance to a size bigger than the respective size and the affordance is dynamically enlarged to the size bigger than the respective size in accordance with the changes in the intensity of the contact over time; and

in accordance with a determination that a maximum intensity of the contact is below the content-display intensity threshold, increasing the size of the affordance to the respective size without increasing the size of the affordance to the size bigger than the respective size and forgoing displaying the respective content.

14. The electronic device of claim 13, wherein detecting the subsequent decrease in intensity of the contact includes detecting liftoff of the contact from the touch-sensitive surface.

15. The electronic device of claim 13, wherein detecting the subsequent decrease in intensity of the contact includes detecting a reduction in intensity of the contact below a respective intensity threshold while continuing to detect the contact on the touch-sensitive surface.

16. The electronic device of claim 13, wherein ceasing to display the affordance and displaying at least a portion of the respective content includes displaying an animated transition of the affordance transforming into the portion of the respective content.

17. The electronic device of claim 13, wherein ceasing to display the affordance and displaying at least a portion of the respective content includes displaying an animated transition that includes:

displaying an animation of the affordance rotating about an axis parallel to the display to reveal the portion of the respective content that is on a simulated back side of the affordance.

18. The electronic device of claim 13, wherein the affordance is a thumbnail image that includes a reduced scale representation of the respective content.

19. The electronic device of claim 13, wherein the affordance is displayed in an array of affordances.

20. The electronic device of claim 13, wherein:

the affordance is an application icon corresponding to a respective application; and

the respective content is a newly initialized application window associated with the application.

21. The electronic device of claim 13, wherein:

the affordance is a document icon corresponding to an electronic document; and

the respective content is the electronic document.

22. The electronic device of claim 13, wherein:

the affordance is a representation of a cached version of a webpage; and

the respective content is the webpage.

23. The electronic device of claim 13, wherein:

the affordance is a thumbnail of a photo; and

the respective content is the photo.

24. The electronic device of claim 13, wherein:

the affordance is a thumbnail of a video; and

the content is the video or a frame of the video.

25. A method, comprising:

at an electronic device with a touch-sensitive surface and a display, wherein the device includes one or more sensors to detect intensity of contacts with the touch-sensitive surface;

displaying, on the display, an affordance corresponding to respective content, wherein the affordance is displayed at a respective size;

while a focus selector is over the affordance, detecting a gesture that includes an increase in intensity of the contact on the touch-sensitive surface followed by a subsequent decrease in intensity of the contact on the touch-sensitive surface;

in response to detecting the increase in intensity of the contact, decreasing a size of the affordance below the respective size; and

in response to detecting the subsequent decrease in intensity of the contact;

in accordance with a determination that a maximum intensity of the contact is above a content-display intensity threshold, ceasing to display the affordance and displaying at least a portion of the respective content, wherein ceasing to display the affordance and displaying at least a portion of the respective content includes displaying an animated transition that includes enlarging the affordance to a size bigger than the respective size and the affordance is dynamically enlarged to the size bigger than the respective size in accordance with the changes in the intensity of the contact over time; and

in accordance with a determination that a maximum intensity of the contact is below the content-display intensity threshold, increasing the size of the affordance to the respective size without increasing the size of the affordance to the size bigger than the respective size and forgoing displaying the respective content.

26. The method of claim 25, wherein detecting the subsequent decrease in intensity of the contact includes detecting liftoff of the contact from the touch-sensitive surface.

27. The method of claim 25, wherein detecting the subsequent decrease in intensity of the contact includes detecting a reduction in intensity of the contact below a respective intensity threshold while continuing to detect the contact on the touch-sensitive surface.

28. The method of claim 25, wherein ceasing to display the affordance and displaying at least a portion of the respective content includes displaying an animated transition of the affordance transforming into the portion of the respective content.

29. The method of claim 25, wherein ceasing to display the affordance and displaying at least a portion of the respective content includes displaying an animated transition that includes:

displaying an animation of the affordance rotating about an axis parallel to the display to reveal the portion of the respective content that is on a simulated back side of the affordance.

30. The method of claim 25, wherein the affordance is a thumbnail image that includes a reduced scale representation of the respective content.

31. The method of claim 25, wherein the affordance is displayed in an array of affordances.

32. The method of claim 25, wherein:

the affordance is an application icon corresponding to a respective application; and

the respective content is a newly initialized application window associated with the application.

33. The method of claim 25, wherein:

the affordance is a document icon corresponding to an electronic document; and

the respective content is the electronic document.

34. The method of claim 25, wherein:

the affordance is a representation of a cached version of a webpage; and

the respective content is the webpage.

35. The method of claim 25, wherein:

the affordance is a thumbnail of a photo; and

the respective content is the photo.

36. The method of claim 25, wherein:

the affordance is a thumbnail of a video; and

the content is the video or a frame of the video.