Context-specific user interfaces

• US 9,547,425 B2
• Filed: 07/31/2015
• Issued: 01/17/2017
• Est. Priority Date: 05/09/2012
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Wilson, Christopher, Butcher, Gary Ian, Chen, Kevin Will, Chaudhri, Imran, Dye, Alan C., Guzman, Aurelio, Ive, Jonathan P., Karunamuni, Chanaka G., Kocienda, Kenneth, Lynch, Kevin, Mari, Pedro, Sabatelli, Alessandro, Schmitt, Brian, Wilson, Eric Lance, Yang, Lawrence Y., Souza Dos Santos, Andre
• Primary Examiner(s): PITARO, RYAN F
• Application Number:
  US14/815,907
• Publication Number:
  US 20160034166A1
• Time in Patent Office: 536 Days
• US Class Current: 1/1
• CPC Class Codes: G06F 1/163 Wearable computers, e.g. on a belt
• 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/0362 with detection of 1D translations or rotations of an operating part of the device, e.g. scroll wheels, sliders, knobs, rollers or belts
• 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/04847 Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
• 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
• CPC Class Codes: G06T 13/80 2D [Two Dimensional] animation, e.g. using sprites

Abstract

Context-specific user interfaces for use with a portable multifunction device are disclosed. The methods described herein for context-specific user interfaces provide indications of time and, optionally, a variety of additional information. Further disclosed are non-transitory computer-readable storage media, systems, and devices configured to perform the methods described herein.

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 one or more processors of an electronic device with a touch-sensitive display configured to detect intensity of contacts, cause the device to:

display on the touch-sensitive display a user interface screen including a clock face;

detect a contact on the touch-sensitive display, the contact having a characteristic intensity, and in response to detecting the contact;

determine whether the characteristic intensity is above an intensity threshold; and

in accordance with a determination that the characteristic intensity is above the intensity threshold;

enter a clock face selection mode of the electronic device;

visually distinguish the displayed clock face to indicate the clock face selection mode, wherein the displayed clock face is centered on the display; and

detect a swipe on the touch-sensitive display, and in response to detecting the swipe;

center a second clock face on the display;

after entering the clock face selection mode, detect a second swipe on the touch-sensitive display, and in response to detecting the second swipe;

center a clock face generation affordance on the display;

detect a contact on the displayed clock face generation affordance, and in response to detecting the contact;

 

generate a third clock face; and

 

display the third clock face, wherein the third clock face is centered on the display.

2. The non-transitory computer readable storage medium of claim 1, wherein the clock face includes an affordance representing an application, wherein the contact is on the affordance representing the application on the touch-sensitive display, and wherein the non-transitory computer readable storage medium further comprises instructions, which when executed by the one or more processors of the electronic device, cause the device to:

in accordance with a determination that the characteristic intensity is not above the intensity threshold;

launch the application represented by the affordance.

3. The non-transitory computer readable storage medium of claim 1, wherein visually distinguishing the displayed clock face to indicate the clock face selection mode comprises reducing size of the displayed clock face.

4. The non-transitory computer readable storage medium of claim 1, wherein the first and the second clock faces are among a plurality of clock faces, the plurality including at least the first and the second clock face.

5. The non-transitory computer readable storage medium of claim 4, wherein entering the clock face selection mode of the electronic device further comprises displaying at least the first and the second clock faces from the plurality of clock faces, wherein the displayed clock faces are shown at a reduced size and arranged in a sequence of clock faces, and wherein the clock faces in the sequence that are not currently centered are displayed in a partial view.

6. The non-transitory computer readable storage medium of claim 5, wherein the second clock face is arranged after the first clock face in the sequence of clock faces, and wherein centering the second clock face on the display comprises:

translating the first clock face on-screen; and

displaying a partial view of the first clock face.

7. The non-transitory computer readable storage medium of claim 1, wherein centering the second clock face on the display comprises:

translating the second clock face onto the displayed user interface screen; and

translating the first clock face off of the displayed user interface screen.

8. The non-transitory computer readable storage medium of claim 1, wherein centering the second clock face on the display comprises simulating a movement of the second clock face towards the user on the display.

9. The non-transitory computer readable storage medium of claim 1, wherein the non-transitory computer readable storage medium further comprises instructions, which when executed by the one or more processors of the electronic device, cause the device to:

after centering the second clock face on the display;

detect a contact on the displayed second clock face, and in response to detecting the contact;

exit the clock face selection mode; and

display on the touch-sensitive display a second user interface screen including the second clock face.

10. The non-transitory computer readable storage medium of claim 1, wherein the non-transitory computer readable storage medium further comprises instructions, which when executed by the one or more processors of the electronic device, cause the device to:

after entering the clock face selection mode, and before detecting the second swipe;

display at least a partial view of the clock face generation affordance on the user interface screen.

11. The non-transitory computer readable storage medium of claim 1, wherein the non-transitory computer readable storage medium further comprises instructions, which when executed by the one or more processors of the electronic device, cause the device to:

after entering the clock face selection mode;

detect a third swipe on the touch-sensitive display, and in response to detecting the third swipe;

center a random clock face generation affordance on the display;

detect a contact on the displayed random clock face generation affordance, and in response to detecting the contact;

generate a fourth clock face, wherein the fourth clock face is randomly generated; and

display the fourth clock face, wherein the fourth clock face is centered on the display.

12. The non-transitory computer readable storage medium of claim 11, wherein the fourth clock face is different from the first clock face, the second clock face, and the third clock face.

13. The non-transitory computer readable storage medium of claim 11, wherein the non-transitory computer readable storage medium further comprises instructions, which when executed by the one or more processors of the electronic device, cause the device to:

after entering the clock face selection mode, and before detecting the third swipe;

display at least a partial view of the random clock face generation affordance on the user interface screen.

14. The non-transitory computer readable storage medium of claim 1, wherein centering the first clock face or the second clock face further comprises visibly distinguishing an outline around the centered clock face.

15. The non-transitory computer readable storage medium of claim 14, wherein the non-transitory computer readable storage medium further comprises instructions, which when executed by the one or more processors of the electronic device, cause the device to:

animate the outline around the centered clock face to depict a rhythmic expansion and contraction of the outline.

16. The non-transitory computer readable storage medium of claim 1, wherein centering the first clock face or the second clock face further comprises animating the centered clock face to depict a rhythmic expansion and contraction of the centered clock face.

17. The non-transitory computer readable storage medium of claim 1, wherein centering the first clock face or the second clock face further comprises animating the centered clock face to depict a flashing of the centered clock face.

18. The non-transitory computer readable storage medium of claim 1, wherein the first clock face or the second clock face is centered on the display, wherein the centered clock face comprises a representation of a first image, and wherein the non-transitory computer readable storage medium further comprises instructions, which when executed by the one or more processors of the electronic device, cause the device to:

detect a contact on the displayed representation, and in response to detecting the contact on the displayed representation;

display on the display a second user interface screen, the second user interface screen comprising;

a background based on the first image;

a first user interface object indicating a date; and

a second user interface object indicating a time of day.

19. The non-transitory computer readable storage medium of claim 18, wherein the electronic device further comprises a rotatable input mechanism, and wherein the non-transitory computer readable storage medium further comprises instructions, which when executed by the one or more processors of the electronic device, cause the device to:

while displaying the second user interface screen, detect a movement of the rotatable input mechanism in a first direction of rotation, and in response to detecting the movement;

display on the display a second image, wherein the second image is a cropped image based on the first image.

20. The non-transitory computer readable storage medium of claim 19, wherein the non-transitory computer readable storage medium further comprises instructions, which when executed by the one or more processors of the electronic device, cause the device to:

detect a second contact on the touch-sensitive display, the second contact having a second characteristic intensity, and in response to detecting the second contact;

determine whether the second characteristic intensity is above a second intensity threshold; and

in accordance with a determination that the second characteristic intensity is above the second intensity threshold;

display on the display a third user interface screen, the third user interface screen comprising;

a second background based on the second image;

a third user interface object indicating a date; and

a fourth user interface object indicating a time of day.

21. The non-transitory computer readable storage medium of claim 20, wherein the non-transitory computer readable storage medium further comprises instructions, which when executed by the one or more processors of the electronic device, cause the device to:

in accordance with a determination that the second characteristic intensity is not above the second intensity threshold;

update the displayed second image, wherein the updating comprises one or more of;

translating the second image on the display;

cropping the second image;

or

zooming the second image.

22. The non-transitory computer readable storage medium of claim 19, wherein the non-transitory computer readable storage medium further comprises instructions, which when executed by the one or more processors of the electronic device, cause the device to:

while displaying the second user interface screen, detect a second movement of the rotatable input mechanism in a second direction of rotation, the second direction of rotation being different from the first direction of rotation, and in response to detecting the second movement;

replace the second user interface screen with a third user interface screen, the third user interface screen including two or more images.

23. The non-transitory computer readable storage medium of claim 1, wherein the non-transitory computer readable storage medium further comprises instructions, which when executed by the one or more processors of the electronic device, cause the device to:

display a paging affordance on the first user interface screen, wherein the paging affordance indicates the currently centered clock face, a position of the centered clock face within a sequence of clock faces, and a total number of clock faces within the sequence of clock faces.

24. A method, comprising:

at an electronic device with a touch-sensitive display configured to detect intensity of contacts;

displaying on the touch-sensitive display a user interface screen including a clock face;

detecting a contact on the touch-sensitive display, the contact having a characteristic intensity, and in response to detecting the contact;

determining whether the characteristic intensity is above an intensity threshold; and

in accordance with a determination that the characteristic intensity is above the intensity threshold;

entering a clock face selection mode of the electronic device;

visually distinguishing the displayed clock face to indicate the clock face selection mode, wherein the displayed clock face is centered on the display; and

detecting a swipe on the touch-sensitive display, and in response to detecting the swipe;

centering a second clock face on the display;

after entering the clock face selection mode, detecting a second swipe on the touch-sensitive display, and in response to detecting the second swipe;

centering a clock face generation affordance on the display;

detecting a contact on the displayed clock face generation affordance, and in response to detecting the contact;

 

generating a third clock face; and

 

displaying the third clock face, wherein the third clock face is centered on the display.

25. The method of claim 24, wherein the clock face includes an affordance representing an application, wherein the contact is on the affordance representing the application on the touch-sensitive display, and wherein the method further comprises:

in accordance with a determination that the characteristic intensity is not above the intensity threshold;

launching the application represented by the affordance.

26. The method of claim 24, wherein visually distinguishing the displayed clock face to indicate the clock face selection mode comprises reducing size of the displayed clock face.

27. The method of claim 24, wherein the first and the second clock faces are among a plurality of clock faces, the plurality including at least the first and the second clock face.

28. The method of claim 27, wherein entering the clock face selection mode of the electronic device further comprises displaying at least the first and the second clock faces from the plurality of clock faces, wherein the displayed clock faces are shown at a reduced size and arranged in a sequence of clock faces, and wherein the clock faces in the sequence that are not currently centered are displayed in a partial view.

29. The method of claim 28, wherein the second clock face is arranged after the first clock face in the sequence of clock faces, and wherein centering the second clock face on the display comprises:

translating the first clock face on-screen; and

displaying a partial view of the first clock face.

30. The method of claim 24, wherein centering the second clock face on the display comprises:

translating the second clock face onto the displayed user interface screen; and

translating the first clock face off of the displayed user interface screen.

31. The method of claim 24, wherein centering the second clock face on the display comprises simulating a movement of the second clock face towards the user on the display.

32. The method of claim 24, wherein the method further comprises:

after centering the second clock face on the display;

detecting a contact on the displayed second clock face, and in response to detecting the contact;

exiting the clock face selection mode; and

displaying on the touch-sensitive display a second user interface screen including the second clock face.

33. The method of claim 24, wherein the method further comprises:

after entering the clock face selection mode, and before detecting the second swipe;

displaying at least a partial view of the clock face generation affordance on the user interface screen.

34. The method of claim 24, wherein the method further comprises:

after entering the clock face selection mode;

detecting a third swipe on the touch-sensitive display, and in response to detecting the third swipe;

centering a random clock face generation affordance on the display;

detecting a contact on the displayed random clock face generation affordance, and in response to detecting the contact;

generating a fourth clock face, wherein the fourth clock face is randomly generated; and

displaying the fourth clock face, wherein the fourth clock face is centered on the display.

35. The method of claim 34, wherein the fourth clock face is different from the first clock face, the second clock face, and the third clock face.

36. The method of claim 34, wherein the method further comprises:

after entering the clock face selection mode, and before detecting the third swipe;

displaying at least a partial view of the random clock face generation affordance on the user interface screen.

37. The method of claim 24, wherein centering the first clock face or the second clock face further comprises visibly distinguishing an outline around the centered clock face.

38. The method of claim 37, wherein the method further comprises:

animating the outline around the centered clock face to depict a rhythmic expansion and contraction of the outline.

39. The method of claim 24, wherein centering the first clock face or the second clock face further comprises animating the centered clock face to depict a rhythmic expansion and contraction of the centered clock face.

40. The method of claim 24, wherein centering the first clock face or the second clock face further comprises animating the centered clock face to depict a flashing of the centered clock face.

41. The method of claim 24, wherein the first clock face or the second clock face is centered on the display, wherein the centered clock face comprises a representation of a first image, and wherein the method further comprises:

detecting a contact on the displayed representation, and in response to detecting the contact on the displayed representation;

displaying on the display a second user interface screen, the second user interface screen comprising;

a background based on the first image;

a first user interface object indicating a date; and

a second user interface object indicating a time of day.

42. The method of claim 41, wherein the electronic device further comprises a rotatable input mechanism, and wherein the method further comprises:

while displaying the second user interface screen, detecting a movement of the rotatable input mechanism in a first direction of rotation, and in response to detecting the movement;

displaying on the display a second image, wherein the second image is a cropped image based on the first image.

43. The method of claim 42, wherein the method further comprises:

detecting a second contact on the touch-sensitive display, the second contact having a second characteristic intensity, and in response to detecting the second contact;

determining whether the second characteristic intensity is above a second intensity threshold; and

in accordance with a determination that the second characteristic intensity is above the second intensity threshold;

displaying on the display a third user interface screen, the third user interface screen comprising;

a second background based on the second image;

a third user interface object indicating a date; and

a fourth user interface object indicating a time of day.

44. The method of claim 43, wherein the method further comprises:

in accordance with a determination that the second characteristic intensity is not above the second intensity threshold;

updating the displayed second image, wherein the updating comprises one or more of;

translating the second image on the display;

cropping the second image;

or

zooming the second image.

45. The method of claim 42, wherein the method further comprises:

while displaying the second user interface screen, detecting a second movement of the rotatable input mechanism in a second direction of rotation, the second direction of rotation being different from the first direction of rotation, and in response to detecting the second movement;

replacing the second user interface screen with a third user interface screen, the third user interface screen including two or more images.

46. The method of claim 24, wherein the method further comprises:

displaying a paging affordance on the first user interface screen, wherein the paging affordance indicates the currently centered clock face, a position of the centered clock face within a sequence of clock faces, and a total number of clock faces within the sequence of clock faces.

47. An electronic device, comprising:

a touch-sensitive display configured to detect intensity of contacts;

one or more processors;

a 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 touch-sensitive display a user interface screen including a clock face;

detecting a contact on the touch-sensitive display, the contact having a characteristic intensity, and in response to detecting the contact;

determining whether the characteristic intensity is above an intensity threshold; and

in accordance with a determination that the characteristic intensity is above the intensity threshold;

entering a clock face selection mode of the electronic device;

visually distinguishing the displayed clock face to indicate the clock face selection mode, wherein the displayed clock face is centered on the display; and

detecting a swipe on the touch-sensitive display, and in response to detecting the swipe;

 

centering a second clock face on the display;

after entering the clock face selection mode, detecting a second swipe on the touch-sensitive display, and in response to detecting the second swipe;

centering a clock face generation affordance on the display;

detecting a contact on the displayed clock face generation affordance, and in response to detecting the contact;

 

generating a third clock face; and

 

displaying the third clock face, wherein the third clock face is centered on the display.

48. The electronic device of claim 47, wherein visually distinguishing the displayed clock face to indicate the clock face selection mode comprises reducing size of the displayed clock face.

49. The electronic device of claim 47, wherein the clock face includes an affordance representing an application, wherein the contact is on the affordance representing the application on the touch-sensitive display, and wherein the one or more programs further include instructions for:

in accordance with a determination that the characteristic intensity is not above the intensity threshold;

launching the application represented by the affordance.

50. The electronic device of claim 47, wherein the first and the second clock faces are among a plurality of clock faces, the plurality including at least the first and the second clock face.

51. The electronic device of claim 50, wherein entering the clock face selection mode of the electronic device further comprises displaying at least the first and the second clock faces from the plurality of clock faces, wherein the displayed clock faces are shown at a reduced size and arranged in a sequence of clock faces, and wherein the clock faces in the sequence that are not currently centered are displayed in a partial view.

52. The electronic device of claim 51, wherein the second clock face is arranged after the first clock face in the sequence of clock faces, and wherein centering the second clock face on the display comprises:

translating the first clock face on-screen; and

displaying a partial view of the first clock face.

53. The electronic device of claim 47, wherein centering the second clock face on the display comprises:

translating the second clock face onto the displayed user interface screen; and

translating the first clock face off of the displayed user interface screen.

54. The electronic device of claim 47, wherein centering the second clock face on the display comprises simulating a movement of the second clock face towards the user on the display.

55. The electronic device of claim 47, wherein the one or more programs further include instructions for:

after centering the second clock face on the display;

detecting a contact on the displayed second clock face, and in response to detecting the contact;

exiting the clock face selection mode; and

displaying on the touch-sensitive display a second user interface screen including the second clock face.

56. The electronic device of claim 47, wherein the one or more programs further include instructions for:

after entering the clock face selection mode, and before detecting the second swipe;

displaying at least a partial view of the clock face generation affordance on the user interface screen.

57. The electronic device of claim 47, wherein the one or more programs further include instructions for:

after entering the clock face selection mode;

detecting a third swipe on the touch-sensitive display, and in response to detecting the third swipe;

centering a random clock face generation affordance on the display;

detecting a contact on the displayed random clock face generation affordance, and in response to detecting the contact;

generating a fourth clock face, wherein the fourth clock face is randomly generated; and

displaying the fourth clock face, wherein the fourth clock face is centered on the display.

58. The electronic device of claim 57, wherein the fourth clock face is different from the first clock face, the second clock face, and the third clock face.

59. The electronic device of claim 57, wherein the one or more programs further include instructions for:

after entering the clock face selection mode, and before detecting the third swipe;

displaying at least a partial view of the random clock face generation affordance on the user interface screen.

60. The electronic device of claim 47, wherein centering the first clock face or the second clock face further comprises visibly distinguishing an outline around the centered clock face.

61. The electronic device of claim 60, wherein the one or more programs further include instructions for:

animating the outline around the centered clock face to depict a rhythmic expansion and contraction of the outline.

62. The electronic device of claim 47, wherein centering the first clock face or the second clock face further comprises animating the centered clock face to depict a rhythmic expansion and contraction of the centered clock face.

63. The electronic device of claim 47, wherein centering the first clock face or the second clock face further comprises animating the centered clock face to depict a flashing of the centered clock face.

64. The electronic device of claim 47, wherein the first clock face or the second clock face is centered on the display, wherein the centered clock face comprises a representation of a first image, and wherein the one or more programs further include instructions for:

detecting a contact on the displayed representation, and in response to detecting the contact on the displayed representation;

displaying on the display a second user interface screen, the second user interface screen comprising;

a background based on the first image;

a first user interface object indicating a date; and

a second user interface object indicating a time of day.

65. The electronic device of claim 64, wherein the electronic device further comprises a rotatable input mechanism, and wherein the one or more programs further include instructions for:

while displaying the second user interface screen, detecting a movement of the rotatable input mechanism in a first direction of rotation, and in response to detecting the movement;

displaying on the display a second image, wherein the second image is a cropped image based on the first image.

66. The electronic device of claim 65, wherein the one or more programs further include instructions for:

detecting a second contact on the touch-sensitive display, the second contact having a second characteristic intensity, and in response to detecting the second contact;

determining whether the second characteristic intensity is above a second intensity threshold; and

in accordance with a determination that the second characteristic intensity is above the second intensity threshold;

displaying on the display a third user interface screen, the third user interface screen comprising;

a second background based on the second image;

a third user interface object indicating a date; and

a fourth user interface object indicating a time of day.

67. The electronic device of claim 66, wherein the one or more programs further include instructions for:

in accordance with a determination that the second characteristic intensity is not above the second intensity threshold;

updating the displayed second image, wherein the updating comprises one or more of;

translating the second image on the display;

cropping the second image;

or

zooming the second image.

68. The electronic device of claim 65, wherein the one or more programs further include instructions for:

while displaying the second user interface screen, detecting a second movement of the rotatable input mechanism in a second direction of rotation, the second direction of rotation being different from the first direction of rotation, and in response to detecting the second movement;

replacing the second user interface screen with a third user interface screen, the third user interface screen including two or more images.

69. The electronic device of claim 47, wherein the one or more programs further include instructions for:

displaying a paging affordance on the first user interface screen, wherein the paging affordance indicates the currently centered clock face, a position of the centered clock face within a sequence of clock faces, and a total number of clock faces within the sequence of clock faces.