Configuring context-specific user interfaces

• US 11,073,799 B2
• Filed: 07/01/2020
• Issued: 07/27/2021
• Est. Priority Date: 06/11/2016
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Wilson, Eric Lance, Broughton, Lee S., Wilson, Christopher
• Primary Examiner(s): Weng, Pei Yong
• Application Number:
  US16/918,855
• Publication Number:
  US 20200333945A1
• Time in Patent Office: 391 Days
• CPC Class Codes: G04G 21/04 using radio waves radio-controlled time-pieces G04R
• CPC Class Codes: G04G 21/08 Touch switches specially adapted for time-pieces
• CPC Class Codes: G06F 16/00 Information retrieval; Database structures therefor; File system structures therefor
• CPC Class Codes: G06F 16/904 Browsing; Visualisation therefor for navigating the web G06F16/954; browsing optimisation for the web G06F16/957
• CPC Class Codes: G06F 2203/04105 Pressure sensors for measuring the pressure or force exerted on the touch surface without providing the touch position
• CPC Class Codes: G06F 2203/04804 Transparency, e.g. transparent or translucent windows
• CPC Class Codes: G06F 2203/04808 Several contacts: gestures triggering a specific function, e.g. scrolling, zooming, right-click, when the user establishes several contacts with the surface simultaneously; e.g. using several fingers or a combination of fingers and pen
• CPC Class Codes: G06F 3/016 Input arrangements with force or tactile feedback as computer generated output to the user
• CPC Class Codes: G06F 3/0414 using force sensing means to determine a position
• CPC Class Codes: G06F 3/04812 Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
• 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/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 3/04883 for inputting data by handwriting, e.g. gesture or text
• CPC Class Codes: G06F 3/04886 by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
• CPC Class Codes: G06F 9/451 Execution arrangements for user interfaces
• CPC Class Codes: G06T 13/00 : Animation

Abstract

Techniques for configuring context-specific user interfaces for use with a portable multifunction device are disclosed. The context-specific user interfaces provide indications of time and, optionally, a variety of additional information. The methods provided herein allow for configuring such user interfaces, e.g., at a first electronic device coupled via wireless communication to a second electronic device. Further disclosed are non-transitory computer-readable storage media, systems, and devices configured to perform the methods described herein.

Claims

1. A first electronic device, comprising:

a touch-sensitive display;

one or more processors;

memory storing one or more programs configured to be executed by the one or more processors, wherein the first electronic device is coupled via wireless communication to a second electronic device with a display, one or more processors, and memory, and wherein a library of two or more user interfaces for display on the second electronic device is stored in the memory of the second electronic device, the one or more programs including instructions for;

displaying on the display of the first electronic device a first user interface screen comprising at least a first and a second user interface preview image, the first and the second user interface preview images representing a first and a second user interface for display on the second electronic device, wherein the first and the second user interfaces are configured according to a watch face type and comprise a clock, and wherein the first and the second user interfaces are part of the stored library of user interfaces for display on the second electronic device;

receiving a first user input corresponding to a user request to reorder the stored library of user interfaces;

in response to receiving the first user input;

ceasing to display the first user interface screen; and

displaying a second user interface screen, wherein the second user interface screen comprises the first and the second user interface preview images, and wherein relative positions of the first and the second user interface preview images on the second user interface screen reflect an order of the first and the second user interfaces in the stored library;

receiving a second user input corresponding to a user request to re-order the second user interface before the first user interface in the stored library; and

in response to receiving the second user input;

sending instructions to the second electronic device for re-ordering the second user interface before the first user interface in the stored library.

2. The first electronic device of claim 1, the one or more programs further including instructions for, in response to receiving the second user input:

re-displaying the second user interface screen, wherein the relative positions of the first user interface preview image and the second user interface preview image on the re-displayed second user interface screen reflect the re-ordering of the second user interface before the first user interface in the stored library.

3. The first electronic device of claim 1, the one or more programs further including instructions for:

displaying an affordance for editing the stored library of user interfaces as part of the first user interface screen, wherein receiving the first user input comprises detecting a contact at the displayed affordance for editing the stored library of user interfaces.

4. The first electronic device of claim 1, the one or more programs further including instructions for:

displaying an affordance for completing editing of the stored library of user interfaces as part of the second user interface screen;

after receiving the second user input, detecting a contact on the display at the affordance for completing editing of the stored library of user interfaces; and

in response to detecting the contact at the affordance for completing editing of the stored library of user interfaces;

ceasing to display the second user interface screen; and

re-displaying the first user interface screen, wherein the position of the second user interface preview image on the first user interface screen has shifted relative to the position of the first user interface preview image.

5. The first electronic device of claim 1, the one or more programs further including instructions for:

displaying a re-ordering affordance in association with the second user interface preview image as part of the second user interface screen.

6. The first electronic device of claim 5, wherein receiving the second user input corresponding to a user request to order the second user interface before the first user interface comprises:

detecting a contact at a first position on the display at the re-ordering affordance;

while continuing to detect the contact, detecting movement of the contact from the first position to a second position on the display without a break in the contact on the display, wherein the second position on the display is on an opposite side of the displayed first user interface preview image relative to the first position; and

in response to detecting the contact at the second position;

translating the second user interface preview image on-screen in a direction of the movement of the contact; and

translating the first user interface preview image on-screen in a direction opposite the movement of the contact, wherein after the translation of the first and the second user interface preview images, the relative positions of the first and the second user interface preview images reflect the re-ordering of the second user interface before the first user interface in the stored library.

7. The first electronic device of claim 1, the one or more programs further including instructions for:

displaying a delete affordance in association with the first user interface preview image as part of the second user interface screen.

8. The first electronic device of claim 1, the one or more programs further including instructions for:

displaying an affordance for revealing an edit option, the affordance for revealing an edit option being displayed in association with the first user interface preview image as part of the second user interface screen;

detecting a contact on the display at the affordance for revealing an edit option; and

in response to detecting the contact at the affordance for revealing an edit option;

displaying a delete affordance in association with the first user interface preview image as part of the second user interface screen.

9. The first electronic device of claim 8, wherein displaying the delete affordance comprises translating the first user interface preview image on-screen.

10. The first electronic device of claim 7, the one or more programs further including instructions for, after displaying the delete affordance as part of the second user interface screen:

detecting a contact on the display at the delete affordance displayed in association with the first user interface preview image; and

in response to detecting the contact at the delete affordance;

removing the displayed first user interface preview image from the second user interface screen; and

sending instructions to the second electronic device for removing the first user interface from the stored library.

11. The first electronic device of claim 10, the one or more programs further including instructions for:

displaying an affordance for completing editing of the stored library of user interfaces as part of the second user interface screen;

after detecting the contact at the delete affordance, detecting a contact on the display at the affordance for completing editing of the stored library of user interfaces; and

in response to detecting the contact at the affordance for completing editing of the stored library of user interfaces;

ceasing to display the second user interface screen;

re-displaying the first user interface screen, wherein the first user interface screen comprises the first and the second user interface preview images;

animating the first user interface preview image to disappear from the display; and

after animating the first user interface preview image to disappear from the display, translating the second user interface preview image on-screen to occupy the position of the first user interface preview image before the animation.

12. The first electronic device of claim 1, the one or more programs further including instructions for, while displaying the first user interface screen:

detecting a swipe on the display at the first or the second user interface preview image; and

in response to detecting the swipe;

scrolling the first and the second user interface preview images to reveal a third user interface preview image, wherein the third user interface preview image represents a third user interface for display on the second electronic device, and wherein the third user interface is part of the stored library.

13. The first electronic device of claim 12, the one or more programs further including instructions for, prior to revealing the third user interface preview image:

displaying as part of the first user interface screen a partial view of the third user interface preview image.

14. The first electronic device of claim 1, the one or more programs further including instructions for:

displaying, as part of the second user interface screen, text indications of the watch face types of the first and the second user interfaces, wherein the indications are displayed in association with the first and the second user interface preview images.

15. A non-transitory computer-readable storage medium comprising one or more programs configured to be executed by the one or more processors of a first electronic device with a touch-sensitive display, the one or more processors, and memory, wherein the first electronic device is coupled via wireless communication to a second electronic device with a display, one or more processors, memory, and access to a library of one or more user interfaces for display on the second electronic device, the one or more programs including instructions for:

displaying on the display of the first electronic device a first user interface screen comprising at least a first and a second user interface preview image, the first and the second user interface preview images representing a first and a second user interface for display on the second electronic device, wherein the first and the second user interfaces are configured according to a watch face type and comprise a clock, and wherein the first and the second user interfaces are part of the stored library of user interfaces for display on the second electronic device;

receiving a first user input corresponding to a user request to reorder the stored library of user interfaces;

in response to receiving the first user input;

ceasing to display the first user interface screen; and

displaying a second user interface screen, wherein the second user interface screen comprises the first and the second user interface preview images, and wherein relative positions of the first and the second user interface preview images on the second user interface screen reflect an order of the first and the second user interfaces in the stored library;

receiving a second user input corresponding to a user request to re-order the second user interface before the first user interface in the stored library; and

in response to receiving the second user input;

sending instructions to the second electronic device for re-ordering the second user interface before the first user interface in the stored library.

17. The non-transitory computer-readable storage medium of claim 15, the one or more programs further including instructions for, in response to receiving the second user input:

re-displaying the second user interface screen, wherein the relative positions of the first user interface preview image and the second user interface preview image on the re-displayed second user interface screen reflect the re-ordering of the second user interface before the first user interface in the stored library.

18. The non-transitory computer-readable storage medium of claim 15, the one or more programs further including instructions for:

displaying an affordance for editing the stored library of user interfaces as part of the first user interface screen, wherein receiving the first user input comprises detecting a contact at the displayed affordance for editing the stored library of user interfaces.

19. The non-transitory computer-readable storage medium of claim 15, the one or more programs further including instructions for:

displaying an affordance for completing editing of the stored library of user interfaces as part of the second user interface screen;

after receiving the second user input, detecting a contact on the display at the affordance for completing editing of the stored library of user interfaces; and

in response to detecting the contact at the affordance for completing editing of the stored library of user interfaces;

ceasing to display the second user interface screen; and

re-displaying the first user interface screen, wherein the position of the second user interface preview image on the first user interface screen has shifted relative to the position of the first user interface preview image.

20. The non-transitory computer-readable storage medium of claim 15, the one or more programs further including instructions for:

displaying a re-ordering affordance in association with the second user interface preview image as part of the second user interface screen.

21. The non-transitory computer-readable storage medium of claim 20, wherein receiving the second user input corresponding to a user request to order the second user interface before the first user interface comprises:

detecting a contact at a first position on the display at the re-ordering affordance;

while continuing to detect the contact, detecting movement of the contact from the first position to a second position on the display without a break in the contact on the display, wherein the second position on the display is on an opposite side of the displayed first user interface preview image relative to the first position; and

in response to detecting the contact at the second position;

translating the second user interface preview image on-screen in a direction of the movement of the contact; and

translating the first user interface preview image on-screen in a direction opposite the movement of the contact, wherein after the translation of the first and the second user interface preview images, the relative positions of the first and the second user interface preview images reflect the re-ordering of the second user interface before the first user interface in the stored library.

22. The non-transitory computer-readable storage medium of claim 15, the one or more programs further including instructions for:

displaying a delete affordance in association with the first user interface preview image as part of the second user interface screen.

23. The non-transitory computer-readable storage medium of claim 15, the one or more programs further including instructions for:

displaying an affordance for revealing an edit option, the affordance for revealing an edit option being displayed in association with the first user interface preview image as part of the second user interface screen;

detecting a contact on the display at the affordance for revealing an edit option; and

in response to detecting the contact at the affordance for revealing an edit option;

displaying a delete affordance in association with the first user interface preview image as part of the second user interface screen.

24. The non-transitory computer-readable storage medium of claim 23, wherein displaying the delete affordance comprises translating the first user interface preview image on- screen.

25. The non-transitory computer-readable storage medium of claim 22, the one or more programs further including instructions for, after displaying the delete affordance as part of the second user interface screen:

detecting a contact on the display at the delete affordance displayed in association with the first user interface preview image; and

in response to detecting the contact at the delete affordance;

removing the displayed first user interface preview image from the second user interface screen; and

sending instructions to the second electronic device for removing the first user interface from the stored library.

26. The non-transitory computer-readable storage medium of claim 25, the one or more programs further including instructions for:

displaying an affordance for completing editing of the stored library of user interfaces as part of the second user interface screen;

after detecting the contact at the delete affordance, detecting a contact on the display at the affordance for completing editing of the stored library of user interfaces; and

in response to detecting the contact at the affordance for completing editing of the stored library of user interfaces;

ceasing to display the second user interface screen;

re-displaying the first user interface screen, wherein the first user interface screen comprises the first and the second user interface preview images;

animating the first user interface preview image to disappear from the display; and

after animating the first user interface preview image to disappear from the display, translating the second user interface preview image on-screen to occupy the position of the first user interface preview image before the animation.

27. The non-transitory computer-readable storage medium of claim 15, the one or more programs further including instructions for, while displaying the first user interface screen:

detecting a swipe on the display at the first or the second user interface preview image; and

in response to detecting the swipe;

scrolling the first and the second user interface preview images to reveal a third user interface preview image, wherein the third user interface preview image represents a third user interface for display on the second electronic device, and wherein the third user interface is part of the stored library.

28. The non-transitory computer-readable storage medium of claim 27, the one or more programs further including instructions for, prior to revealing the third user interface preview image:

displaying as part of the first user interface screen a partial view of the third user interface preview image.

29. The non-transitory computer-readable storage medium of claim 15, the one or more programs further including instructions for:

displaying, as part of the second user interface screen, text indications of the watch face types of the first and the second user interfaces, wherein the indications are displayed in association with the first and the second user interface preview images.

16. A method, comprising:

at a first electronic device with a touch-sensitive display, one or more processors, and memory, wherein the first electronic device is coupled via wireless communication to a second electronic device with a display, one or more processors, and memory, and wherein a library of two or more user interfaces for display on the second electronic device is stored in the memory of the second electronic device;

displaying on the display of the first electronic device a first user interface screen comprising at least a first and a second user interface preview image, the first and the second user interface preview images representing a first and a second user interface for display on the second electronic device, wherein the first and the second user interfaces are configured according to a watch face type and comprise a clock, and wherein the first and the second user interfaces are part of the stored library of user interfaces for display on the second electronic device;

receiving a first user input corresponding to a user request to reorder the stored library of user interfaces;

in response to receiving the first user input;

ceasing to display the first user interface screen; and

displaying a second user interface screen, wherein the second user interface screen comprises the first and the second user interface preview images, and wherein relative positions of the first and the second user interface preview images on the second user interface screen reflect an order of the first and the second user interfaces in the stored library;

receiving a second user input corresponding to a user request to re-order the second user interface before the first user interface in the stored library; and

in response to receiving the second user input;

sending instructions to the second electronic device for re-ordering the second user interface before the first user interface in the stored library.

30. The method of claim 16, the one or more programs further including instructions for, in response to receiving the second user input:

re-displaying the second user interface screen, wherein the relative positions of the first user interface preview image and the second user interface preview image on the re-displayed second user interface screen reflect the re-ordering of the second user interface before the first user interface in the stored library.

31. The method of claim 16, the one or more programs further including instructions for:

displaying an affordance for editing the stored library of user interfaces as part of the first user interface screen, wherein receiving the first user input comprises detecting a contact at the displayed affordance for editing the stored library of user interfaces.

32. The method of claim 16, the one or more programs further including instructions for:

displaying an affordance for completing editing of the stored library of user interfaces as part of the second user interface screen;

after receiving the second user input, detecting a contact on the display at the affordance for completing editing of the stored library of user interfaces; and

in response to detecting the contact at the affordance for completing editing of the stored library of user interfaces;

ceasing to display the second user interface screen; and

re-displaying the first user interface screen, wherein the position of the second user interface preview image on the first user interface screen has shifted relative to the position of the first user interface preview image.

33. The method of claim 16, the one or more programs further including instructions for:

displaying a re-ordering affordance in association with the second user interface preview image as part of the second user interface screen.

34. The method of claim 33, wherein receiving the second user input corresponding to a user request to order the second user interface before the first user interface comprises:

detecting a contact at a first position on the display at the re-ordering affordance;

while continuing to detect the contact, detecting movement of the contact from the first position to a second position on the display without a break in the contact on the display, wherein the second position on the display is on an opposite side of the displayed first user interface preview image relative to the first position; and

in response to detecting the contact at the second position;

translating the second user interface preview image on-screen in a direction of the movement of the contact; and

translating the first user interface preview image on-screen in a direction opposite the movement of the contact, wherein after the translation of the first and the second user interface preview images, the relative positions of the first and the second user interface preview images reflect the re-ordering of the second user interface before the first user interface in the stored library.

35. The method of claim 16, the one or more programs further including instructions for:

displaying a delete affordance in association with the first user interface preview image as part of the second user interface screen.

36. The method of claim 16, the one or more programs further including instructions for:

displaying an affordance for revealing an edit option, the affordance for revealing an edit option being displayed in association with the first user interface preview image as part of the second user interface screen;

detecting a contact on the display at the affordance for revealing an edit option; and

in response to detecting the contact at the affordance for revealing an edit option;

displaying a delete affordance in association with the first user interface preview image as part of the second user interface screen.

37. The method of claim 36, wherein displaying the delete affordance comprises translating the first user interface preview image on-screen.

38. The method of claim 35, the one or more programs further including instructions for, after displaying the delete affordance as part of the second user interface screen:

detecting a contact on the display at the delete affordance displayed in association with the first user interface preview image; and

in response to detecting the contact at the delete affordance;

removing the displayed first user interface preview image from the second user interface screen; and

sending instructions to the second electronic device for removing the first user interface from the stored library.

39. The method of claim 38, the one or more programs further including instructions for:

displaying an affordance for completing editing of the stored library of user interfaces as part of the second user interface screen;

after detecting the contact at the delete affordance, detecting a contact on the display at the affordance for completing editing of the stored library of user interfaces; and

in response to detecting the contact at the affordance for completing editing of the stored library of user interfaces;

ceasing to display the second user interface screen;

re-displaying the first user interface screen, wherein the first user interface screen comprises the first and the second user interface preview images;

animating the first user interface preview image to disappear from the display; and

after animating the first user interface preview image to disappear from the display, translating the second user interface preview image on-screen to occupy the position of the first user interface preview image before the animation.

40. The method of claim 16, the one or more programs further including instructions for, while displaying the first user interface screen:

detecting a swipe on the display at the first or the second user interface preview image; and

in response to detecting the swipe;

scrolling the first and the second user interface preview images to reveal a third user interface preview image, wherein the third user interface preview image represents a third user interface for display on the second electronic device, and wherein the third user interface is part of the stored library.

41. The method of claim 40, the one or more programs further including instructions for, prior to revealing the third user interface preview image:

displaying as part of the first user interface screen a partial view of the third user interface preview image.

42. The method of claim 16, the one or more programs further including instructions for:

displaying, as part of the second user interface screen, text indications of the watch face types of the first and the second user interfaces, wherein the indications are displayed in association with the first and the second user interface preview images.