Avatar Sticker Editor User Interface

Abstract

To provide an electronic device with a faster and more efficient method and interface for editing avatar stickers.SOLUTION: A hairstyle category 806-1 is currently selected and hairstyle options 812 are displayed for modifying a hairstyle of an avatar 805. In addition, an editing interface 804 includes color options 810, which enable hair color selection for the avatar 805 and for a slider 814. This is adjustable to modify the selected color by moving a tab 814-1 along a track 814-2.SELECTED DRAWING: Figure 8A

Description

[Technical Field]

[0001] (CROSS-REFERENCE TO RELATED APPLICATIONS) This application claims the benefit of U.S. Provisional Patent Application No. 63 / 191,864, entitled "AVATAR STICKER EDITOR USER INTERFACES," filed May 21, 2021, and U.S. Patent Application No. 17 / 746,179, entitled "AVATAR STICKER EDITOR USER INTERFACES," filed May 17, 2022, the contents of which are incorporated herein by reference in their entireties.

[0002] FIELD OF THE DISCLOSURE This disclosure relates generally to computer user interfaces, and more particularly to techniques for editing avatars. [Background technology]

[0003] Avatars are used to represent users of electronic devices. The avatar can represent the user's appearance, or it can represent an idealized or entirely fictional representation of the user. The avatar can then be associated with the user such that the avatar's appearance to other users triggers an association or link with the user. Avatars can be created and edited for such uses, including use in multimedia communications. Summary of the Invention

[0004] However, some techniques for editing avatars using electronic devices are generally cumbersome and inefficient. For example, some existing techniques use complex and time-consuming user interfaces that may involve multiple key presses or strokes. Existing techniques take more time than necessary, wasting the user's time and the device's energy. This latter consideration is particularly important on battery-operated devices.

[0005] Thus, the present technology provides electronic devices with faster, more efficient methods and interfaces for editing avatar stickers. Such methods and interfaces optionally complement or replace other methods of editing avatars. Such methods and interfaces reduce the cognitive burden on users and create a more efficient human-machine interface. For battery-operated computing devices, such methods and interfaces conserve power and extend the time between battery charges.

[0006] According to some embodiments, a method is described that is performed in a computer system in communication with a display generation component and one or more input devices. The method includes displaying, via a display generation component, an avatar editing interface including: a representation of a virtual avatar having a plurality of avatar features, the virtual avatar being associated with a set of stickers including a first avatar sticker showing the virtual avatar in a first pose and a second avatar sticker showing the virtual avatar in a second pose different from the first pose; and a first set of one or more graphical interface objects selectable to modify a first avatar feature among the plurality of avatar features visible in the representation of the virtual avatar; detecting, while displaying the avatar editing interface including the representation of the virtual avatar, an input via one or more input devices corresponding to a request to display editing options for a second avatar feature among the plurality of avatar features; and, in response to detecting the input, updating the display of the avatar editing interface, including displaying a representation of the first avatar sticker including the second avatar feature and having an appearance based on the appearance of the virtual avatar; and displaying a second set of one or more graphical interface objects selectable to modify one or more of the avatar features visible in the first avatar sticker.

[0007] According to some embodiments, a non-transitory computer-readable storage medium is described, the non-transitory computer-readable storage medium storing one or more programs configured to be executed by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs displaying, via the display generation component, a representation of a virtual avatar having a plurality of avatar features, the virtual avatar being associated with a set of stickers including a first avatar sticker illustrating the virtual avatar in a first pose and a second avatar sticker illustrating the virtual avatar in a second pose different from the first pose, and one or more graphical interface controls selectable to modify a first avatar feature of the plurality of avatar features visible in the representation of the virtual avatar. and a first set of graphical interface objects selectable to modify one or more of the avatar features visible in the first avatar sticker; and while displaying the avatar editing interface including the representation of the virtual avatar, detect input via one or more input devices corresponding to a request to display editing options for a second avatar feature of the plurality of avatar features; and, in response to detecting the input, update the display of the avatar editing interface, including displaying a representation of a first avatar sticker including the second avatar feature and having an appearance based on the appearance of the virtual avatar; and displaying a second set of one or more graphical interface objects selectable to modify one or more of the avatar features visible in the first avatar sticker.

[0008] According to some embodiments, a temporary computer-readable storage medium is described, the temporary computer-readable storage medium storing one or more programs configured to be executed by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs generating, via the display generation component, a representation of a virtual avatar having a plurality of avatar features, the virtual avatar being associated with a set of stickers including a first avatar sticker illustrating the virtual avatar in a first pose and a second avatar sticker illustrating the virtual avatar in a second pose different from the first pose, and one or more graphical interfaces selectable to modify a first avatar feature of the plurality of avatar features visible in the representation of the virtual avatar. and a first set of graphical interface objects selectable to modify one or more of the avatar features visible in the first avatar sticker. While displaying the avatar editing interface including the representation of the virtual avatar, detect, via one or more input devices, an input corresponding to a request to display editing options for a second avatar feature of the plurality of avatar features; and, in response to detecting the input, update the display of the avatar editing interface, including: displaying a representation of a first avatar sticker including the second avatar feature and having an appearance based on the appearance of the virtual avatar; and displaying a second set of one or more graphical interface objects selectable to modify one or more of the avatar features visible in the first avatar sticker.

[0009] According to some embodiments, a computer system is described, the computer system comprising: a display generation component, one or more input devices, one or more processors, and a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs generating, via the display generation component, a representation of a virtual avatar having a plurality of avatar characteristics, the virtual avatar being associated with a set of stickers including a first avatar sticker illustrating the virtual avatar in a first pose and a second avatar sticker illustrating the virtual avatar in a second pose different from the first pose; and one or more graphical interfaces selectable to modify a first avatar characteristic of the plurality of avatar characteristics visible in the representation of the virtual avatar. and a first set of graphical interface objects selectable to modify one or more of the avatar features visible in the first avatar sticker. While displaying the avatar editing interface including the representation of the virtual avatar, detect, via one or more input devices, an input corresponding to a request to display editing options for a second avatar feature of the plurality of avatar features; and, in response to detecting the input, update the display of the avatar editing interface, including: displaying a representation of a first avatar sticker including the second avatar feature and having an appearance based on the appearance of the virtual avatar; and displaying a second set of one or more graphical interface objects selectable to modify one or more of the avatar features visible in the first avatar sticker.

[0010] According to some embodiments, a computer system is described, the computer system comprising: a display generation component; one or more input devices; and means for displaying, via the display generation component, a communication request interface, the communication request interface displaying, via the display generation component, a representation of a virtual avatar having a plurality of avatar characteristics, the virtual avatar being associated with a set of stickers including a first avatar sticker illustrating the virtual avatar in a first pose and a second avatar sticker illustrating the virtual avatar in a second pose different from the first pose; and a first set of one or more graphical interface objects selectable to modify a first avatar characteristic of the plurality of avatar characteristics visible in the representation of the virtual avatar. means for displaying an avatar editing interface including a representation of the virtual avatar; means for detecting, while displaying the avatar editing interface including a representation of the virtual avatar, input via one or more input devices corresponding to a request to display editing options for a second avatar feature of the plurality of avatar features; and means for updating the display of the avatar editing interface in response to detecting the input, including displaying a representation of a first avatar sticker including the second avatar feature and having an appearance based on the appearance of the virtual avatar, and displaying a second set of one or more graphical interface objects selectable to modify one or more of the avatar features visible in the first avatar sticker.

[0011] According to some embodiments, a computer program product is described, the computer program product comprising one or more programs configured to be executed by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs generating, via the display generation component, a representation of a virtual avatar having a plurality of avatar characteristics, the virtual avatar being associated with a set of stickers including a first avatar sticker illustrating the virtual avatar in a first pose and a second avatar sticker illustrating the virtual avatar in a second pose different from the first pose, and one or more graphical interfaces selectable to modify a first avatar characteristic of the plurality of avatar characteristics visible in the representation of the virtual avatar. and a first set of objects; and while displaying the avatar editing interface including a representation of the virtual avatar, detect input via one or more input devices corresponding to a request to display editing options for a second avatar feature of the plurality of avatar features; and in response to detecting the input, update the display of the avatar editing interface including: displaying a representation of a first avatar sticker including the second avatar feature and having an appearance based on the appearance of the virtual avatar; and displaying a second set of one or more graphical interface objects selectable to modify one or more of the avatar features visible in the first avatar sticker.

[0012] According to some embodiments, a method is described that is executed on a computer system in communication with a display generation component and one or more input devices. The method includes displaying, via the display generation component, an avatar editing interface that includes: a representation of a virtual avatar, the representation of the virtual avatar including a first avatar characteristic, the first avatar characteristic including a first color; a first graphical interface object selectable to initiate a process for modifying an appearance of the first avatar characteristic to include a second color; and a plurality of selectable options for modifying a characteristic of the first avatar characteristic, the plurality of selectable options including a respective representation of the first avatar characteristic, the first avatar characteristic including the first color; and, while displaying the avatar editing interface, inputting, via the one or more input devices, a first graphical interface object selectable to initiate a process for modifying an appearance of the first avatar characteristic to include a second color. detecting input directed at the first graphical interface object; and updating the display of the avatar editing interface in response to detecting the input directed at the first graphical interface object, including displaying an updated representation of the virtual avatar, the updated representation of the virtual avatar including a first avatar characteristic, the first avatar characteristic including a first color and a second color; displaying an updated plurality of selectable options, the updated plurality of selectable options including an updated representation of each of the first avatar characteristics, the first avatar characteristic including the first color and the second color; and displaying a control for modifying the second color that was not displayed before detecting the input.

[0013] According to some embodiments, a non-transitory computer-readable storage medium is described, the non-transitory computer-readable storage medium storing one or more programs configured to be executed by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs displaying, via the display generation component, an avatar editing interface including: a representation of a virtual avatar, the representation of the virtual avatar including a first avatar characteristic, the first avatar characteristic including a first color; a first graphical interface object selectable to initiate a process for modifying an appearance of the first avatar characteristic to include a second color; and a plurality of selectable options for modifying a characteristic of the first avatar characteristic, the plurality of selectable options including a respective representation of the first avatar characteristic, the first avatar characteristic including the first color. The method includes instructions for detecting input directed at a first graphical interface object via one or more input devices while displaying the avatar editing interface, and updating the display of the avatar editing interface in response to detecting the input directed at the first graphical interface object, including: displaying an updated representation of the virtual avatar, the updated representation of the virtual avatar including a first avatar characteristic, the first avatar characteristic including a first color and a second color; displaying an updated plurality of selectable options, the updated plurality of selectable options including an updated representation of each of the first avatar characteristics, the first avatar characteristic including the first color and the second color; and displaying a control for modifying the second color that was not displayed prior to detecting the input.

[0014] According to some embodiments, a temporary computer-readable storage medium is described, the temporary computer-readable storage medium storing one or more programs configured to be executed by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs displaying, via the display generation component, an avatar editing interface including: a representation of a virtual avatar, the representation of the virtual avatar including a first avatar characteristic, the first avatar characteristic including a first color; a first graphical interface object selectable to initiate a process for modifying an appearance of the first avatar characteristic to include a second color; and a plurality of selectable options for modifying a characteristic of the first avatar characteristic, the plurality of selectable options including a respective representation of the first avatar characteristic, the first avatar characteristic including the first color. The method includes instructions for detecting input directed at a first graphical interface object via one or more input devices while displaying the avatar editing interface, and updating the display of the avatar editing interface in response to detecting the input directed at the first graphical interface object, including: displaying an updated representation of the virtual avatar, the updated representation of the virtual avatar including a first avatar characteristic, the first avatar characteristic including a first color and a second color; displaying an updated plurality of selectable options, the updated plurality of selectable options including an updated representation of each of the first avatar characteristics, the first avatar characteristic including the first color and the second color; and displaying a control for modifying the second color that was not displayed prior to detecting the input.

[0015] According to some embodiments, a computer system is described that includes a display generation component, one or more input devices, and a memory that stores one or more programs configured to be executed by one or more processors, the one or more programs being configured to display, via the display generation component, an avatar editing interface that includes: a representation of a virtual avatar, the representation of the virtual avatar including a first avatar characteristic, the first avatar characteristic including a first color; a first graphical interface object selectable to initiate a process for modifying an appearance of the first avatar characteristic to include a second color; and a plurality of selectable options for modifying characteristics of the first avatar characteristic, the plurality of selectable options including a respective representation of the first avatar characteristic, the first avatar characteristic including the first color. and detecting, while displaying the avatar editing interface, input directed at the first graphical interface object via one or more input devices; and, in response to detecting the input directed at the first graphical interface object, updating the display of the avatar editing interface, including: displaying an updated representation of the virtual avatar, the updated representation of the virtual avatar including a first avatar characteristic, the first avatar characteristic including a first color and a second color; displaying an updated plurality of selectable options, the updated plurality of selectable options including an updated representation of each of the first avatar characteristics, the first avatar characteristic including the first color and the second color; and displaying a control for modifying the second color, which was not displayed prior to detecting the input.

[0016] According to some embodiments, a computer system is described, the computer system including: a display generation component; one or more input devices; and means for displaying, via the display generation component, an avatar editing interface including: a representation of a virtual avatar, the representation of the virtual avatar including a first avatar characteristic, the first avatar characteristic including a first color; a first graphical interface object selectable to initiate a process for modifying an appearance of the first avatar characteristic to include a second color; and a plurality of selectable options for modifying a characteristic of the first avatar characteristic, the plurality of selectable options including a respective representation of the first avatar characteristic, the first avatar characteristic including the first color; and means for displaying, via the one or more input devices, an avatar editing interface while displaying the avatar editing interface. means for detecting input directed at a first graphical interface object; and means for updating a display of an avatar editing interface in response to detecting the input directed at the first graphical interface object, including: displaying an updated representation of the virtual avatar, the updated representation of the virtual avatar including a first avatar characteristic, the first avatar characteristic including a first color and a second color; displaying an updated plurality of selectable options, the updated plurality of selectable options including an updated representation of each of the first avatar characteristics, the first avatar characteristic including the first color and the second color; and displaying a control for modifying the second color that was not displayed before detecting the input.

[0017] According to some embodiments, a computer program product is described, the computer program product comprising one or more programs configured to be executed by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs displaying, via the display generation component, an avatar editing interface including: a representation of a virtual avatar, the representation of the virtual avatar including a first avatar characteristic, the first avatar characteristic including a first color; a first graphical interface object selectable to initiate a process for modifying an appearance of the first avatar characteristic to include a second color; and a plurality of selectable options for modifying characteristics of the first avatar characteristic, the plurality of selectable options including a respective representation of the first avatar characteristic, the first avatar characteristic including the first color; and detecting, while displaying the avatar editing interface, input directed at the first graphical interface object via one or more input devices; and, in response to detecting the input directed at the first graphical interface object, updating the display of the avatar editing interface, including: displaying an updated representation of the virtual avatar, the updated representation of the virtual avatar including a first avatar characteristic, the first avatar characteristic including a first color and a second color; displaying an updated plurality of selectable options, the updated plurality of selectable options including an updated representation of each of the first avatar characteristics, the first avatar characteristic including the first color and the second color; and displaying a control for modifying the second color, which was not displayed prior to detecting the input.

[0018] Executable instructions to perform these functions are optionally contained in a non-transitory computer-readable storage medium or other computer program product configured for execution by one or more processors. Executable instructions to perform these functions are optionally contained in a transitory computer-readable storage medium or other computer program product configured for execution by one or more processors.

[0019] Thus, devices are provided with faster, more efficient methods and interfaces for editing avatars, thereby increasing the effectiveness, efficiency, and user satisfaction of such devices. Such methods and interfaces may complement or replace other methods of editing avatars.

[0020] For a better understanding of the various described embodiments, reference should be made to the following Detailed Description of the Invention in conjunction with the following drawings, in which like reference numerals refer to corresponding parts throughout: [Brief explanation of the drawings]

[0021] [Figure 1A] FIG. 1 is a block diagram illustrating a portable multifunction device with a touch-sensitive display in accordance with some embodiments.

[0022] [Figure 1B] FIG. 2 is a block diagram illustrating exemplary components for event processing according to some embodiments.

[0023] [Figure 2] FIG. 1 illustrates a portable multifunction device with a touch screen in accordance with some embodiments.

[0024] [Figure 3] FIG. 1 is a block diagram of an exemplary multifunction device having a display and a touch-sensitive surface in accordance with some embodiments.

[0025] [Figure 4A] 1 illustrates an exemplary user interface for a menu of applications on a portable multifunction device in accordance with some embodiments.

[0026] [Figure 4B] 1 illustrates an exemplary user interface for a multifunction device having a touch-sensitive surface that is separate from the display in accordance with some embodiments.

[0027] [Figure 5A] 1 illustrates a personal electronic device according to some embodiments.

[0028] [Figure 5B] FIG. 1 is a block diagram illustrating a personal electronic device according to some embodiments.

[0029] [Figure 6A] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6B] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6C] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6D] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6E] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6F] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6G] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6H]1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6I] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6J] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6K] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6L] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6M] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6N] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6O] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6P] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6Q] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments. [Figure 6R] 1 illustrates an exemplary user interface for editing avatar stickers according to some embodiments.

[0030] [Figure 7] FIG. 1 is a flow diagram illustrating a method for editing avatar stickers, according to some embodiments.

[0031] [Figure 8A]1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8B] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8C] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8D] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8E] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8F] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8G] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8H] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8I] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8J] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8K] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8L] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8M] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8N] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8O]1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8P] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8Q] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8R] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8S] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8T] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments. [Figure 8U] 1 illustrates an exemplary user interface for editing an avatar, according to some embodiments.

[0032] [Figure 9] FIG. 1 is a flow diagram illustrating a method for editing an avatar, according to some embodiments. DETAILED DESCRIPTION OF THE INVENTION

[0033] The following description sets forth example methods, parameters, etc. However, it should be recognized that such description is not intended as a limitation on the scope of the present disclosure, but rather is provided as a description of example embodiments.

[0034] There is a need for electronic devices that provide efficient methods and interfaces for editing avatars. Such techniques can reduce the cognitive burden on users editing avatars, thereby increasing productivity. Furthermore, such techniques can reduce processor and battery power that is otherwise wasted on redundant user input.

[0035] Below, FIGS. 1A-1B, 2, 3, 4A-4B, and 5A-5B provide descriptions of exemplary devices for performing techniques for editing an avatar. FIGS. 6A-6R illustrate exemplary user interfaces for editing an avatar. FIG. 7 is a flow diagram illustrating a method for editing avatar stickers according to some embodiments. The user interfaces of FIGS. 6A-6R are used to illustrate processes described below, including the process of FIG. 7. FIGS. 8A-8U illustrate exemplary user interfaces for editing an avatar. FIG. 9 is a flow diagram illustrating a method for editing an avatar according to some embodiments. The user interfaces of FIGS. 8A-8U are used to illustrate processes described below, including the process of FIG. 9.

[0036] Furthermore, for methods described herein in which one or more steps are conditioned on one or more conditions being satisfied, it should be understood that the described method can be repeated in multiple iterations, such that over the course of the iterations, all of the conditions on which the method steps are conditioned are satisfied in different iterations of the method. For example, if a method requires performing a first step if a condition is satisfied and a second step if the condition is not satisfied, one skilled in the art will understand that the steps recited in the claim are repeated in a particular order until the conditions are satisfied and then no longer satisfied. Thus, a method described with one or more steps that depend on one or more conditions being satisfied can be rewritten as a method that is repeated until each condition recited in the method is satisfied. However, this is not required for system or computer-readable medium claims in which the system or computer-readable medium includes instructions for performing a conditional action based on the satisfaction of the corresponding one or more conditions, and thus can determine whether a contingency is met without explicitly repeating the method steps until all conditions on which the method steps are conditioned are satisfied. Those skilled in the art will also understand that, as with methods having conditional steps, the system or computer-readable storage medium may repeat the steps of the method as many times as necessary to ensure that all of the conditional steps have been performed.

[0037] In the following description, terms such as "first" and "second" are used to describe various elements, but these elements should not be limited by these terms. In some embodiments, these terms are used to distinguish one element from another. For example, a first touch can be referred to as a second touch, and similarly, a second touch can be referred to as a first touch, without departing from the scope of various described embodiments. In some embodiments, a first touch and a second touch are two separate references to the same touch. Although a first touch and a second touch are both touches, they are not the same touch.

[0038] The terminology used in the description of the various embodiments set forth herein is for the purpose of describing particular embodiments only and is not intended to be limiting. In the description of the various embodiments set forth and in the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly dictates otherwise. Also, as used herein, the term "and / or" should be understood to refer to and include any and all possible combinations of one or more of the associated listed items. It will be further understood that the terms "includes," "including," "comprises," and / or "comprising," as used herein, specify the presence of stated features, integers, steps, operations, elements, and / or components, but do not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof.

[0039] The term "if" is interpreted, optionally, according to the context, to mean "when" or "upon," or "in response to determining" or "in response to detecting." Similarly, the phrases "if it is determined" or "if [a stated condition or event] is detected" are interpreted, optionally, according to the context, to mean "upon determining" or "in response to determining," or "upon detecting [the stated condition or event]" or "in response to detecting [the stated condition or event]."

[0040] Embodiments of electronic devices, user interfaces for such devices, and associated processes for using such devices are described. In some embodiments, the device is a portable communication device, such as a mobile phone, that also includes other functions, such as PDA and / or music player functions. Exemplary embodiments of portable multifunction devices include, but are not limited to, the iPhone®, iPod Touch®, and iPad® devices from Apple Inc. of Cupertino, California. Optionally, other portable electronic devices, such as a laptop computer or tablet computer having a touch-sensitive surface (e.g., a touchscreen display and / or touchpad), are also used. It should also be understood that in some embodiments, the device is not a portable communication device, but rather a desktop computer having a touch-sensitive surface (e.g., a touchscreen display and / or touchpad). In some embodiments, the electronic device is a computer system in communication (e.g., via wired communication, via wireless communication) with a display generation component. The display generation component is configured to provide a visual output, such as a display via a CRT display, a display via an LED display, or a display via image projection. In some embodiments, the display generation component is integrated with the computer system. In some embodiments, the display generation component is separate from the computer system. As used herein, "displaying" content includes displaying content (e.g., video data rendered or decoded by display controller 156) by transmitting data (e.g., image data or video data) over a wired or wireless connection to an integrated or external display generation component to visually generate the content.

[0041] In the following discussion, electronic devices are described that include a display and a touch-sensitive surface. However, it should be understood that the electronic device optionally includes one or more other physical user-interface devices, such as a physical keyboard, a mouse, and / or a joystick.

[0042] The device typically supports a variety of applications such as one or more of a drawing application, a presentation application, a word processing application, a website creation application, a disc authoring application, a spreadsheet application, a gaming application, a telephone application, a video conferencing application, an email application, an instant messaging application, a training support application, a photo management application, a digital camera application, a digital video camera application, a web browsing application, a digital music player application, and / or a digital video player application.

[0043] Various applications running on the device optionally use at least one common physical user-interface device, such as a touch-sensitive surface. One or more features of the touch-sensitive surface and corresponding information displayed on the device are optionally adjusted and / or changed for each application and / or within individual applications. In this way, the common physical architecture of the device (such as the touch-sensitive surface) optionally supports various applications with user interfaces that are intuitive and transparent to the user.

[0044] Attention now turns to embodiments of portable devices with touch-sensitive displays. FIG. 1A is a block diagram illustrating portable multifunction device 100 having touch-sensitive display system 112, according to some embodiments. Touch-sensitive display 112 may conveniently be referred to as a "touch screen" and may also be known or referred to as a "touch-sensitive display system." Device 100 includes memory 102 (optionally including one or more computer-readable storage media), memory controller 122, one or more processing units (CPUs) 120, peripherals interface 118, RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, input / output (I / O) subsystem 106, other input control devices 116, and external port 124. Device 100 optionally includes one or more optical sensors 164. Device 100 optionally includes one or more contact intensity sensors 165 that detect the intensity of a contact on device 100 (e.g., a touch-sensitive surface, such as touch-sensitive display system 112 of device 100). Device 100 optionally includes one or more tactile output generators 167 that generate tactile output on device 100 (e.g., generate tactile output on a touch-sensitive surface such as touch-sensitive display system 112 of device 100 or touchpad 355 of device 300). These components optionally communicate via one or more communication buses or signal lines 103.

[0045] As used herein and in the claims, the term “intensity” of a contact on a touch-sensitive surface refers to the force or pressure (force per unit area) of a contact (e.g., a finger contact) on the touch-sensitive surface, or a proxy for the force or pressure of a contact on the touch-sensitive surface. The intensity of a contact has a range of values ​​that includes at least four distinct values ​​and more typically includes hundreds (e.g., at least 256) distinct values. The intensity of a contact is optionally determined (or measured) using various techniques and various sensors or combinations of sensors. For example, one or more force sensors under or adjacent to the touch-sensitive surface are optionally used to measure force at various points on the touch-sensitive surface. In some implementations, force measurements from multiple force sensors are combined (e.g., weighted averaged) to determine an estimated force of the contact. Similarly, a pressure-sensitive tip of a stylus is optionally used to determine the pressure of the stylus on the touch-sensitive surface. Alternatively, the size and / or change in the contact area detected on the touch-sensitive surface, the capacitance and / or change in the capacitance of the touch-sensitive surface proximate the contact, and / or the resistance and / or change in the capacitance of the touch-sensitive surface proximate the contact are optionally used as a surrogate for the force or pressure of the contact on the touch-sensitive surface. In some implementations, the surrogate measure of the force or pressure of the contact is used directly to determine whether an intensity threshold is exceeded (e.g., the intensity threshold is described in units corresponding to the surrogate measure). In some implementations, the surrogate measure of the contact force or pressure is converted to an estimate of the force or pressure, and the estimate of the force or pressure is used to determine whether an intensity threshold is exceeded (e.g., the intensity threshold is a pressure threshold measured in units of pressure). Using contact intensity as an attribute of user input allows users to access additional device functionality (e.g., on a touch-sensitive display) and / or receive user input (e.g., via a touch-sensitive display, touch-sensitive surface, or physical / mechanical controls such as knobs or buttons) that may not otherwise be accessible to users on devices of reduced size that have limited footprint for displaying affordances.

[0046] As used herein and in the claims, the term “tactile output” refers to a physical displacement of a device relative to a previous position of the device, a physical displacement of a component of the device (e.g., a touch-sensitive surface) relative to another component of the device (e.g., a housing), or a displacement of a component relative to the center of mass of the device, that will be detected by a user with the user's sense of touch. For example, in a situation where a device or a component of a device is in contact with a touch-sensitive surface of a user (e.g., the fingers, palm, or other part of the user's hand), the tactile output produced by the physical displacement will be interpreted by the user as a tactile sensation corresponding to a perceived change in a physical property of the device or a component of the device. For example, movement of a touch-sensitive surface (e.g., a touch-sensitive display or trackpad) is optionally interpreted by the user as a “downclick” or “upclick” of a physical actuator button. In some cases, a user feels a tactile sensation such as a “downclick” or “upclick” even when there is no movement of a physical actuator button associated with the touch-sensitive surface that is physically pressed (e.g., displaced) by the user's action. As another example, movement of a touch-sensitive surface is optionally interpreted or perceived by a user as "roughness" of the touch-sensitive surface, even if there is no change in the smoothness of the touch-sensitive surface. While such user interpretation of touch depends on the user's personal sensory perception, there are many sensory perceptions of touch that are common to the majority of users. Thus, when a tactile output is described as corresponding to a particular sensory perception of a user (e.g., "upclick," "downclick," "roughness"), unless otherwise specified, the generated tactile output corresponds to a physical displacement of the device, or a component of the device, that produces the described sensory perception for a typical (or average) user.

[0047] It should be understood that device 100 is only one example of a portable multifunction device, and that device 100 optionally has more or fewer components than those shown, optionally combines two or more components, or optionally has a different configuration or arrangement of its components. The various components shown in Figure 1A are implemented in hardware, software, or a combination of both hardware and software, including one or more signal processing circuits and / or application specific integrated circuits.

[0048] Memory 102 optionally includes high-speed random access memory, and optionally includes non-volatile memory, such as one or more magnetic disk storage devices, flash memory devices, or other non-volatile solid-state memory devices. Memory controller 122 optionally controls access to memory 102 by other components of device 100.

[0049] Peripheral interface 118 may be used to couple input and output peripherals of the device to CPU 120 and memory 102. One or more processors 120 operate or execute various software programs (e.g., computer programs (e.g., including instructions)) and / or instruction sets stored in memory 102 to perform various functions and process data for device 100. In some embodiments, peripheral interface 118, CPU 120, and memory controller 122 are optionally implemented on a single chip, such as chip 104. In some other embodiments, they are optionally implemented on separate chips.

[0050] RF (radio frequency) circuitry 108 transmits and receives RF signals, also called electromagnetic signals. RF circuitry 108 converts electrical signals to electromagnetic signals or electromagnetic signals to electrical signals and communicates with communication networks and other communication devices via electromagnetic signals. RF circuitry 108 optionally includes well-known circuitry for performing these functions, including, but not limited to, an antenna system, an RF transceiver, one or more amplifiers, a tuner, one or more oscillators, a digital signal processor, a CODEC chipset, a subscriber identity module (SIM) card, memory, etc. RF circuitry 108 optionally communicates via wireless communication with networks, such as the Internet, also called the World Wide Web (WWW), an intranet, and / or wireless networks, such as cellular telephone networks, wireless local area networks (LANs) and / or metropolitan area networks (MANs), and with other devices. RF circuitry 108 optionally includes well-known circuitry for detecting near field communication (NFC) fields, such as by short-range radios. Wireless communication optionally includes, but is not limited to, Global System for Mobile Communications (GSM), Enhanced Data GSM Environment (EDGE), high-speed downlink packet access (HSDPA), high-speed uplink packet access (HSUPA), Evolution, Data-Only (EV-DO), HSPA, HSPA+, Dual-Cell HSPA (DC-HSPA), Long Term Evolution (LTE), and other standards.evolution (LTE), near field communications (NFC), wideband code division multiple access (W-CDMA), code division multiple access (CDMA), time division multiple access (TDMA), Bluetooth, Bluetooth Low Energy (BTLE), Wireless Fidelity (Wi-Fi) (e.g., IEEE 802.11a, IEEE 802.11b, IEEE 802.11g, IEEE 802.11n, and / or IEEE 802.11ac), voice over Internet Protocol (VoIP), Wi-MAX, protocols for email (e.g., Internet message access protocol (IMAP) and / or post office protocol (POP)), instant messaging (e.g., extensible messaging and presence protocol), The present invention may use any of a number of communication standards, protocols, and technologies, including the Session Initiation Protocol for Instant Messaging and Presence Leveraging Extensions (XMPP), the Session Initiation Protocol for Instant Messaging and Presence Leveraging Extensions (SIMPLE), the Instant Messaging and Presence Service (IMPS), and / or the Short Message Service (SMS), or any other suitable communication protocol, including communication protocols not yet developed as of the filing date of this application.

[0051] Audio circuit 110, speaker 111, and microphone 113 provide an audio interface between a user and device 100. Audio circuit 110 receives audio data from peripherals interface 118, converts the audio data into electrical signals, and transmits the electrical signals to speaker 111. Speaker 111 converts the electrical signals into sound waves audible to humans. Audio circuit 110 also receives electrical signals converted from sound waves by microphone 113. Audio circuit 110 converts the electrical signals into audio data and transmits the audio data to peripherals interface 118 for processing. The audio data is optionally retrieved from and / or transmitted to memory 102 and / or RF circuit 108 by peripherals interface 118. In some embodiments, audio circuit 110 also includes a headset jack (e.g., 212 in FIG. 2 ). The headset jack provides an interface between audio circuitry 110 and a detachable audio input / output peripheral, such as an output-only headphone or a headset with both an output (e.g., single or double ear headphones) and an input (e.g., a microphone).

[0052] I / O subsystem 106 couples input / output peripherals on device 100, such as touchscreen 112 and other input control devices 116, to peripheral interface 118. I / O subsystem 106 optionally includes display controller 156, optical sensor controller 158, depth camera controller 169, intensity sensor controller 159, haptic feedback controller 161, and one or more input controllers 160 for other input or control devices. One or more input controllers 160 receive / send electrical signals from / to other input control devices 116. Other input control devices 116 optionally include physical buttons (e.g., push buttons, rocker buttons, etc.), dials, slider switches, joysticks, click wheels, etc. In some embodiments, input controller(s) 160 are optionally coupled to any (or none) of a keyboard, an infrared port, a USB port, and a pointer device such as a mouse. The one or more buttons (e.g., 208 in FIG. 2 ) optionally include up / down buttons for volume control of speaker 111 and / or microphone 113. The one or more buttons optionally include push buttons (e.g., 206 in FIG. 2 ). In some embodiments, the electronic device is a computer system in communication with one or more input devices (e.g., via wireless communication over wired communication). In some embodiments, the one or more input devices include a touch-sensitive surface (e.g., a trackpad as part of a touch-sensitive display). In some embodiments, the one or more input devices include one or more camera sensors (e.g., one or more optical sensors 164 and / or one or more depth camera sensors 175), such as for tracking user gestures (e.g., hand gestures and / or air gestures) as input. In some embodiments, the one or more input devices are integrated with the computer system. In some embodiments, the one or more input devices are separate from the computer system.In some embodiments, an air gesture is a gesture that is detected without the user touching an input element that is part of the device (or independent of an input element that is part of the device) and is based on detected movement of a part of the user's body, including movement of the user's body relative to an absolute reference (e.g., the angle of the user's arm relative to the ground, or the distance of the user's hand relative to the ground), movement of the user's body relative to another part of the user's body (e.g., movement of the user's hand relative to the user's shoulder, movement of the user's other hand relative to one of the user's hands, and / or movement of the user's fingers relative to another finger or part of the user's hand), and / or absolute movement of a part of the user's body (e.g., a tap gesture that includes movement of the hand in a predetermined pose by a predetermined amount and / or speed, or a shake gesture that includes rotation of a part of the user's body at a predetermined speed or amount).

[0053] A quick press of a push button optionally unlocks the touchscreen 112 or optionally initiates the process of unlocking the device using gestures on the touchscreen, as described in U.S. Patent Application Serial No. 11 / 322,549, filed December 23, 2005, "Unlocking a Device by Performing Gestures on an Unlock Image," U.S. Patent No. 7,657,849, which is incorporated herein by reference in its entirety. A longer press of a push button (e.g., 206) optionally turns power on or off to the device 100. The functionality of one or more of the buttons is optionally customizable by the user. The touchscreen 112 is used to implement virtual or soft buttons and one or more soft keyboards.

[0054] Touch-sensitive display 112 provides an input and output interface between the device and a user. Display controller 156 receives and / or sends electrical signals to touchscreen 112. Touchscreen 112 displays visual output to the user. This visual output optionally includes graphics, text, icons, animation, and any combination thereof (collectively "graphics"). In some embodiments, some or all of the visual output optionally corresponds to user interface objects.

[0055] Touchscreen 112 has a touch-sensitive surface, sensor, or set of sensors that accepts input from a user based on haptic and / or tactile contact. Touchscreen 112 and display controller 156 (along with any associated modules and / or instruction sets in memory 102) detects contacts (and any movement or cessation of contact) on touchscreen 112 and translates the detected contacts into interactions with user interface objects (e.g., one or more softkeys, icons, web pages, or images) displayed on touchscreen 112. In an exemplary embodiment, the point of contact between touchscreen 112 and the user corresponds to the user's finger.

[0056] Touchscreen 112 optionally uses LCD (liquid crystal display), LPD (light emitting polymer display), or LED (light emitting diode) technology, although other display technologies are used in other embodiments. Touchscreen 112 and display controller 156 optionally use any of a number of now known or later developed touch sensing technologies to detect contact and any movement or disruption thereof, including, but not limited to, capacitive, resistive, infrared, and surface acoustic wave technologies, as well as other proximity sensor arrays or other elements that determine one or more points of contact with touchscreen 112. In an exemplary embodiment, projected mutual capacitance sensing technology is used, such as that found in the iPhone® and iPod Touch® from Apple Inc. of Cupertino, California.

[0057] The touch-sensitive display in some embodiments of touchscreen 112 is optionally similar to the multi-touch-sensing touchpad described in U.S. Patent Nos. 6,323,846 (Westerman et al.), 6,570,557 (Westerman et al.), and / or 6,677,932 (Westerman), and / or U.S. Patent Application Publication No. 2002 / 0015024 A1, each of which is incorporated by reference herein in its entirety. However, touchscreen 112 displays visual output from device 100, whereas touch-sensitive touchpads do not provide visual output.

[0058] The touch-sensitive display in some embodiments of touch screen 112 is described in the following applications: (1) U.S. patent application Ser. No. 11 / 381,313, filed May 2, 2006, entitled "Multipoint Touch Surface Controller," (2) U.S. patent application Ser. No. 10 / 840,862, filed May 6, 2004, entitled "Multipoint Touchscreen," (3) U.S. patent application Ser. No. 10 / 903,964, filed July 30, 2004, entitled "Gestures For Touch Sensitive Input Devices," (4) U.S. patent application Ser. No. 11 / 048,264, filed January 31, 2005, entitled "Gestures For Touch Sensitive Input Devices," and (5) U.S. patent application Ser. No. 11 / 038,590, filed January 18, 2005, entitled "Mode-Based Graphical User Interfaces For Touch Sensitive Input Devices." No. 11 / 228,758, filed September 16, 2005, entitled "Virtual Input Device Placement On A Touch Screen User Interface," (7) U.S. Patent Application No. 11 / 228,700, filed September 16, 2005, entitled "Operation Of A Computer With A Touch Screen Interface," (8) U.S. Patent Application No. 11 / 228,737, filed September 16, 2005, entitled "Activating Virtual Keys Of A Touch-Screen Virtual Keyboard," and (9) U.S. Patent Application No. 11 / 367,749, filed March 3, 2006, entitled "Multi-Functional Hand-Held Device," all of which are incorporated herein by reference in their entireties.

[0059] Touchscreen 112 optionally has a video resolution greater than 100 dpi. In some embodiments, the touchscreen has a video resolution of approximately 160 dpi. A user optionally contacts touchscreen 112 using any suitable object or accessory, such as a stylus, a finger, or the like. In some embodiments, the user interface is designed to operate primarily using finger-based contact and gestures, which may not be as precise as stylus-based input due to the larger contact area of ​​a finger on the touchscreen. In some embodiments, the device translates the coarse finger input into precise pointer / cursor positions or commands to perform the action desired by the user.

[0060] In some embodiments, in addition to the touchscreen, device 100 optionally includes a touchpad for activating or deactivating certain functions. In some embodiments, the touchpad is a touch-sensitive area of ​​the device that, unlike the touchscreen, does not display visual output. The touchpad is optionally a touch-sensitive surface separate from touchscreen 112 or an extension of the touch-sensitive surface formed by the touchscreen.

[0061] Device 100 also includes a power system 162 that provides power to the various components. Power system 162 optionally includes a power management system, one or more power sources (e.g., battery, alternating current (AC)), a recharging system, power failure detection circuitry, power converters or inverters, power status indicators (e.g., light emitting diodes (LEDs)), and any other components associated with generating, managing, and distributing electrical power within a portable device.

[0062] Device 100 also optionally includes one or more optical sensors 164. FIG. 1A shows an optical sensor coupled to optical sensor controller 158 in I / O subsystem 106. Optical sensor 164 optionally includes a charge-coupled device (CCD) or a complementary metal-oxide semiconductor (CMOS) phototransistor. Optical sensor 164 receives light from the environment projected through one or more lenses and converts the light into data representing an image. Optical sensor 164 optionally works in conjunction with imaging module 143 (also called a camera module) to capture still images or video. In some embodiments, the optical sensor is located on the back side of device 100 opposite touchscreen display 112 on the front of the device, so that the touchscreen display can be used as a viewfinder for capturing still images and / or video. In some embodiments, the optical sensor is located on the front of the device so that an image of a user is optionally captured for video conferencing while the user views other video conference participants on the touchscreen display. In some embodiments, the position of the optical sensor 164 can be changed by the user (e.g., by rotating the lens and sensor within the device housing), so that a single optical sensor 164 is used for both video conferencing and capturing still images and / or video, along with a touchscreen display.

[0063] Device 100 also optionally includes one or more depth camera sensors 175. FIG. 1A shows a depth camera sensor coupled to depth camera controller 169 in I / O subsystem 106. Depth camera sensor 175 receives data from the environment and creates a three-dimensional model of an object (e.g., a face) in a scene from a viewpoint (e.g., the depth camera sensor). In some embodiments, in conjunction with imaging module 143 (also referred to as a camera module), depth camera sensor 175 is optionally used to determine a depth map of different portions of an image captured by imaging module 143. In some embodiments, a depth camera sensor is located on the front of device 100 to obtain images of the user with depth information for videoconferences and to capture selfie images with depth map data while the user views other videoconference participants on a touchscreen display. In some embodiments, depth camera sensor 175 is located on the back of the device, or on the back and front of device 100. In some embodiments, the position of the depth camera sensor 175 can be changed by the user (e.g., by rotating the lens and sensor within the device housing), so that the depth camera sensor 175 is used for both video conferencing and capturing still images and / or video, in conjunction with a touchscreen display.

[0064] In some embodiments, a depth map (e.g., a depth map image) contains information (e.g., values) about the distance of objects in a scene from a viewpoint (e.g., a camera, light sensor, depth camera sensor). In one embodiment of a depth map, each depth pixel defines a position on the Z axis of the viewpoint where its corresponding two-dimensional pixel is located. In some embodiments, a depth map is made up of pixels, each defined by a value (e.g., 0 to 255). For example, a value of "0" represents a pixel located furthest in a "3D" scene, and a value of "255" represents a pixel located closest to the viewpoint (e.g., a camera, light sensor, depth camera sensor) in the "3D" scene. In other embodiments, a depth map represents the distance between objects in a scene and the plane of the viewpoint. In some embodiments, a depth map contains information about the relative depth of various features of an object of interest as seen by a depth camera (e.g., the relative depth of the eyes, nose, mouth, and ears on a user's face). In some embodiments, the depth map contains information that allows the device to determine the contours of the target object in the z direction.

[0065] Device 100 also optionally includes one or more contact intensity sensors 165. FIG. 1A shows a contact intensity sensor coupled to intensity sensor controller 159 in I / O subsystem 106. Contact intensity sensor 165 optionally includes one or more piezoresistive strain gauges, capacitive force sensors, electric force sensors, piezoelectric force sensors, optical force sensors, capacitive touch-sensitive surfaces, or other intensity sensors (e.g., sensors used to measure the force (or pressure) of a contact on a touch-sensitive surface). Contact intensity sensor 165 receives contact intensity information (e.g., pressure information, or a proxy for pressure information) from the environment. In some embodiments, at least one contact intensity sensor is juxtaposed with or proximate to the touch-sensitive surface (e.g., touch-sensitive display system 112). In some embodiments, at least one contact intensity sensor is located on the back of device 100, opposite touchscreen display 112, which is located on the front of device 100.

[0066] Device 100 also optionally includes one or more proximity sensors 166. Figure 1A shows proximity sensor 166 coupled to peripherals interface 118. Alternatively, proximity sensor 166 is optionally coupled to input controller 160 within I / O subsystem 106. Proximity sensor 166 optionally functions as described in U.S. patent application Ser. Nos. 11 / 241,839, "Proximity Detector In Handheld Device," 11 / 240,788, "Proximity Detector In Handheld Device," 11 / 620,702, "Using Ambient Light Sensor To Augment Proximity Sensor Output," 11 / 586,862, "Automated Response To And Sensing Of User Activity In Portable Devices," and 11 / 638,251, "Methods And Systems For Automatic Configuration Of Peripherals," which are incorporated herein by reference in their entireties. In some embodiments, the proximity sensor turns off and disables touchscreen 112 when the multifunction device is placed near the user's ear (e.g., when the user is making a phone call).

[0067] Device 100 also optionally includes one or more tactile output generators 167. FIG. 1A shows tactile output generators coupled to haptic feedback controller 161 in I / O subsystem 106. Tactile output generator 167 optionally includes one or more electroacoustic devices, such as speakers or other audio components, and / or electromechanical devices that convert energy into linear motion, such as motors, solenoids, electroactive polymers, piezoelectric actuators, electrostatic actuators, or other tactile output generating components (e.g., components that convert electrical signals into tactile output on the device). Contact intensity sensor 165 receives tactile feedback generation instructions from haptic feedback module 133 and generates a tactile output on device 100 that can be sensed by a user of device 100. In some embodiments, at least one tactile output generator is juxtaposed with or proximate to a touch-sensitive surface (e.g., touch-sensitive display system 112) and generates a tactile output, optionally by moving the touch-sensitive surface vertically (e.g., in / out of the surface of device 100) or horizontally (e.g., back and forth in the same plane as the surface of device 100). In some embodiments, at least one tactile output generator sensor is located on the back of device 100, opposite touchscreen display 112, which is located on the front of device 100.

[0068] Device 100 also optionally includes one or more accelerometers 168. FIG. 1A shows accelerometer 168 coupled to peripherals interface 118. Alternatively, accelerometer 168 is optionally coupled to input controller 160 in I / O subsystem 106. Accelerometer 168 optionally functions as described in U.S. Patent Application Publication No. 20050190059, "Acceleration-based Theft Detection System for Portable Electronic Devices," and U.S. Patent Application Publication No. 20060017692, "Methods And Apparatuses For Operating A Portable Device Based On An Accelerometer," both of which are incorporated herein by reference in their entireties. In some embodiments, information is displayed on the touchscreen display in portrait or landscape orientation based on an analysis of data received from the one or more accelerometers. In addition to accelerometer(s) 168, device 100 optionally includes a magnetometer and a GPS (or GLONASS or other global navigation system) receiver for obtaining information about the location and orientation (e.g., vertical or horizontal) of device 100.

[0069] In some embodiments, software components stored in memory 102 include operating system 126, communication module (or instruction set) 128, touch / motion module (or instruction set) 130, graphics module (or instruction set) 132, text input module (or instruction set) 134, Global Positioning System (GPS) module (or instruction set) 135, and applications (or instruction set) 136. Additionally, in some embodiments, memory 102 (FIG. 1A) or 370 (FIG. 3) stores device / global internal state 157, as shown in FIGS. 1A and 3. Device / global internal state 157 includes one or more of: active application state indicating which applications, if any, are currently active; display state indicating which applications, views, or other information occupy various regions of touchscreen display 112; sensor state including information obtained from the device's various sensors and input control devices 116; and location information regarding the device's location and / or orientation.

[0070] Operating system 126 (e.g., Darwin, RTXC, LINUX, UNIX, OS X, iOS, WINDOWS, or an embedded operating system such as VxWorks) includes various software components and / or drivers that control and manage general system tasks (e.g., memory management, storage device control, power management, etc.) and facilitate communication between various hardware and software components.

[0071] Communications module 128 facilitates communication with other devices via one or more external ports 124 and also includes various software components for processing data received by RF circuitry 108 and / or external port 124. External port 124 (e.g., Universal Serial Bus (USB), FIREWIRE, etc.) is adapted to couple to other devices directly or indirectly via a network (e.g., the Internet, wireless LAN, etc.). In some embodiments, the external port is a multi-pin (e.g., 30-pin) connector that is the same as, similar to, and / or compatible with the 30-pin connector used on iPod® (trademark of Apple Inc.) devices.

[0072] Contact / motion module 130, optionally in conjunction with display controller 156, detects contact with touchscreen 112 and other touch-sensing devices (e.g., a touchpad or physical click wheel). Contact / motion module 130 includes various software components for performing various operations related to contact detection, such as determining whether contact occurs (e.g., detecting a finger-down event), determining the intensity of the contact (e.g., the force or pressure of the contact, or a surrogate for the force or pressure of the contact), determining whether there is contact movement and tracking the movement across the touch-sensitive surface (e.g., detecting one or more finger-drag events), and determining whether the contact has ceased (e.g., detecting a finger-up event or an interruption of the contact). Contact / motion module 130 receives contact data from the touch-sensitive surface. Determining the movement of the contact, as represented by the series of contact data, optionally includes determining the speed (magnitude), velocity (magnitude and direction), and / or acceleration (change in magnitude and / or direction) of the contact. These actions are optionally applied to a single contact (e.g., a single finger contact) or multiple simultaneous contacts (e.g., "multi-touch" / multiple finger contacts). In some embodiments, contact / motion module 130 and display controller 156 detect contacts on the touchpad.

[0073] In some embodiments, contact / motion module 130 uses a set of one or more intensity thresholds to determine whether an action has been performed by a user (e.g., to determine whether a user has “clicked” on an icon). In some embodiments, at least a subset of the intensity thresholds are determined according to software parameters (e.g., the intensity thresholds are not determined by the activation threshold of a particular physical actuator, but can be adjusted without modifying the physical hardware of device 100). For example, the mouse “click” threshold of a trackpad or touchscreen display can be set to any of a wide range of predefined thresholds without modifying the trackpad or touchscreen display hardware. Additionally, in some implementations, a user of the device is provided with a software setting to adjust one or more of the set of intensity thresholds (e.g., by adjusting individual intensity thresholds and / or by adjusting multiple intensity thresholds at once via a system-level click “intensity” parameter).

[0074] Contact / motion module 130 optionally detects gesture input by a user. Different gestures on the touch-sensitive surface have different contact patterns (e.g., different movements, timing, and / or intensities of detected contacts). Thus, gestures are optionally detected by detecting particular contact patterns. For example, detecting a finger tap gesture includes detecting a finger down event, followed by detecting a finger up (lift off) event at the same position (or substantially the same position) as the finger down event (e.g., the position of an icon). As another example, detecting a finger swipe gesture on the touch-sensitive surface includes detecting a finger down event, followed by one or more finger drag events, followed by detecting a finger up (lift off) event.

[0075] Graphics module 132 includes various known software components that render and display graphics on touchscreen 112 or other display, including components that modify the visual impact (e.g., brightness, transparency, saturation, contrast, or other visual properties) of the displayed graphics. As used herein, the term "graphic" includes any object that can be displayed to a user, including, but not limited to, text, web pages, icons (such as user interface objects including soft keys), digital images, video, animation, etc.

[0076] In some embodiments, graphics module 132 stores data representing graphics to be used. Each graphic is optionally assigned a corresponding code. Graphics module 132 receives one or more codes specifying the graphics to be displayed, including coordinate data and other graphic property data, as needed, from an application or the like, and then generates screen image data to output to display controller 156.

[0077] The tactile feedback module 133 includes various software components for generating instructions used by the tactile output generator(s) 167 to generate tactile outputs at one or more locations on the device 100 in response to a user's interaction with the device 100.

[0078] Text input module 134 is optionally a component of graphics module 132 and provides a soft keyboard for entering text in various applications (e.g., contacts 137, email 140, IM 141, browser 147, and any other application requiring text input).

[0079] The GPS module 135 determines the location of the device and provides this information for use within various applications (e.g., to the phone 138 for use in location-based dialing, to the camera 143 as picture / video metadata, and to applications that provide location-based services such as a weather widget, a local yellow pages widget, and a maps / navigation widget).

[0080] Application 136 optionally includes the following modules (or sets of instructions), or a subset or superset thereof: • a contacts module 137 (sometimes called an address book or contact list); ●Telephone module 138, ●Videoconferencing module 139, ● an email client module 140; ● Instant messaging (IM) module 141, ●Training support module 142, camera module 143 for still images and / or video; ● Image management module 144; ●Video player module, ●Music player module, ● Browser module 147, ●Calendar module 148, • A widget module 149 optionally including one or more of a weather widget 149-1, a stock price widget 149-2, a calculator widget 149-3, an alarm clock widget 149-4, a dictionary widget 149-5, and other widgets obtained by the user, and a user-created widget 149-6; a widget creator module 150 for creating user-created widgets 149-6; ● Search module 151, A video and music player module 152 that integrates a video player module and a music player module; ● Memo module 153, Map module 154, and / or ●Online video module 155.

[0081] Examples of other applications 136 optionally stored in memory 102 include other word processing applications, other image editing applications, drawing applications, presentation applications, JAVA-enabled applications, encryption, digital rights management, voice recognition, and voice duplication.

[0082] Contacts module 137, along with touch screen 112, display controller 156, contact / motion module 130, graphics module 132, and text input module 134, is optionally used to manage an address book or contact list (e.g., stored in memory 102 or in the application internal state 192 of contacts module 137 in memory 370), including adding name(s) to the address book, deleting name(s) from the address book, associating phone number(s), email address(es), street address(es), or other information with names, associating images with names, categorizing and sorting names, providing phone numbers or email addresses to initiate and / or facilitate communication by phone 138, videoconferencing module 139, email 140, or IM 141, etc. used to manage the address book or contact list.

[0083] Telephone module 138, in conjunction with RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, and text input module 134, is optionally used to enter a series of characters corresponding to a telephone number, access one or more telephone numbers in contacts module 137, modify entered telephone numbers, dial individual telephone numbers, place calls, and disconnect and hang up when the call is complete. As previously mentioned, wireless communication optionally uses any of a number of communication standards, protocols, and technologies.

[0084] Videoconferencing module 139 includes executable instructions to cooperate with RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, touchscreen 112, display controller 156, optical sensor 164, optical sensor controller 158, touch / motion module 130, graphics module 132, text input module 134, contacts module 137, and telephone module 138 to initiate, conduct, and end a videoconference between a user and one or more other participants according to the user's commands.

[0085] Email client module 140, in conjunction with RF circuitry 108, touch screen 112, display controller 156, contact / motion module 130, graphics module 132, and text input module 134, contains executable instructions for composing, sending, receiving, and managing emails in response to user commands. In conjunction with image management module 144, email client module 140 greatly facilitates the creation and sending of emails with still or video images captured by camera module 143.

[0086] Instant messaging module 141 includes executable instructions, in conjunction with RF circuitry 108, touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, and text input module 134, to enter a series of characters corresponding to an instant message, modify previously entered characters, send individual instant messages (e.g., using Short Message Service (SMS) or Multimedia Message Service (MMS) protocols for telephony-based instant messaging, or XMPP, SIMPLE, or IMPS for Internet-based instant messaging), receive instant messages, and view received instant messages. In some embodiments, sent and / or received instant messages optionally include graphics, photos, audio files, video files, and / or other attachments, such as those supported by MMS and / or Enhanced Messaging Service (EMS). As used herein, "instant messaging" refers to both telephony-based messages (e.g., messages sent using SMS or MMS) and Internet-based messages (e.g., messages sent using XMPP, SIMPLE, or IMPS).

[0087] In conjunction with the RF circuitry 108, touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, text input module 134, GPS module 135, map module 154, and music player module, the training support module 142 includes executable instructions to create workouts (e.g., with time, distance, and / or calorie burn goals), communicate with training sensors (sports devices), receive training sensor data, calibrate sensors used to monitor workouts, select and play music for workouts, and display, store, and transmit workout data.

[0088] Camera module 143, in conjunction with touchscreen 112, display controller 156, optical sensor(s) 164, optical sensor controller 158, contact / motion module 130, graphics module 132, and image management module 144, includes executable instructions to capture and store still images or video (including video streams) in memory 102, modify characteristics of still images or video, or delete still images or video from memory 102.

[0089] Image management module 144 includes executable instructions for arranging, modifying (e.g., editing), or otherwise manipulating, labeling, deleting, presenting (e.g., in a digital slideshow or album), and storing still and / or video images in conjunction with touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, text input module 134, and camera module 143.

[0090] Browser module 147, in conjunction with RF circuitry 108, touch screen 112, display controller 156, contact / motion module 130, graphics module 132, and text input module 134, contains executable instructions for browsing the Internet according to user commands, including retrieving, linking to, receiving, and displaying web pages or portions thereof, as well as attachments and other files linked to web pages.

[0091] The calendar module 148 includes executable instructions to cooperate with the RF circuitry 108, the touch screen 112, the display controller 156, the contact / motion module 130, the graphics module 132, the text input module 134, the email client module 140, and the browser module 147 to create, display, modify, and store calendars and data associated with the calendars (e.g., calendar items, to-do lists, etc.) according to user instructions.

[0092] Widget module 149, in conjunction with RF circuitry 108, touchscreen 112, display controller 156, touch / motion module 130, graphics module 132, text input module 134, and browser module 147, optionally provides mini-applications (e.g., weather widget 149-1, stock price widget 149-2, calculator widget 149-3, alarm clock widget 149-4, and dictionary widget 149-5) downloaded and used by a user, or mini-applications created by a user (e.g., user-created widget 149-6). In some embodiments, a widget includes an HTML (Hypertext Markup Language) file, a CSS (Cascading Style Sheets) file, and a JavaScript file. In some embodiments, a widget includes an XML (Extensible Markup Language) file and a JavaScript file (e.g., Yahoo! Widgets).

[0093] The widget creator module 150, in conjunction with the RF circuitry 108, the touch screen 112, the display controller 156, the contact / motion module 130, the graphics module 132, the text input module 134, and the browser module 147, is optionally used by a user to create a widget (e.g., turn a user-specified portion of a web page into a widget).

[0094] The search module 151 includes executable instructions for working in conjunction with the touch screen 112, the display controller 156, the contact / motion module 130, the graphics module 132, and the text input module 134 to search for text, music, sound, images, video, and / or other files in the memory 102 that match one or more search criteria (e.g., one or more user-specified search terms) in accordance with a user's commands.

[0095] Video and music player module 152 includes executable instructions that, in conjunction with touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, audio circuitry 110, speaker 111, RF circuitry 108, and browser module 147, enable a user to download and play pre-recorded music and other sound files stored in one or more file formats, such as MP3 or AAC files, as well as executable instructions for displaying, presenting, or otherwise playing videos (e.g., on touchscreen 112 or on an external display connected via external port 124). In some embodiments, device 100 optionally includes the functionality of an MP3 player, such as an iPod (a trademark of Apple Inc.).

[0096] The notes module 153 includes executable instructions for working with the touch screen 112, the display controller 156, the contact / motion module 130, the graphics module 132, and the text input module 134 to create and manage notes, to-do lists, and the like according to user commands.

[0097] Map module 154, in conjunction with RF circuitry 108, touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, text input module 134, GPS module 135, and browser module 147, is used to receive, display, modify, and store maps and data associated with maps (e.g., driving directions, data regarding businesses and other points of interest at or near a particular location, and other location-based data), optionally in accordance with user instructions.

[0098] Online video module 155, in conjunction with touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, audio circuitry 110, speaker 111, RF circuitry 108, text input module 134, email client module 140, and browser module 147, contains instructions that enable a user to access, browse for, receive (e.g., by streaming and / or downloading), and play (e.g., on the touchscreen or on an external display connected via external port 124) particular online videos, send emails with links to particular online videos, and otherwise manage online videos in one or more file formats, such as H.264. In some embodiments, instant messaging module 141 is used to send links to particular online videos, rather than email client module 140. For additional description of online video applications, see U.S. Provisional Patent Application No. 60 / 936,562, filed June 20, 2007, entitled "Portable Multifunction Device, Method, and Graphical User Interface for Playing Online Videos," and U.S. Patent Application No. 11 / 968,067, filed December 31, 2007, entitled "Portable Multifunction Device, Method, and Graphical User Interface for Playing Online Videos," the contents of which are incorporated herein by reference in their entireties.

[0099] The above-identified modules and applications each correspond to sets of executable instructions that perform one or more of the functions and methods described herein (e.g., the computer-implemented methods and other information processing methods described herein). These modules (e.g., sets of instructions) need not be implemented as respective software programs (e.g., computer programs (e.g., including instructions)), procedures, or modules; thus, in various embodiments, various subsets of these modules are optionally combined or otherwise rearranged. For example, a video player module is optionally combined with a music player module into a single module (e.g., video and music player module 152 of FIG. 1A). In some embodiments, memory 102 optionally stores a subset of the above-identified modules and data structures. Additionally, memory 102 optionally stores additional modules and data structures not described above.

[0100] In some embodiments, device 100 is a device in which operation of a predetermined set of functions on the device is performed solely via a touchscreen and / or touchpad. Using the touchscreen and / or touchpad as the primary input control device for operation of device 100 optionally reduces the number of physical input control devices (push buttons, dials, etc.) on device 100.

[0101] The set of predefined functions performed only through the touchscreen and / or touchpad optionally includes navigation between user interfaces. In some embodiments, the touchpad, when touched by a user, navigates device 100 to a main menu, home menu, or root menu from any user interface displayed on device 100. In such embodiments, a "menu button" is implemented using the touchpad. In some other embodiments, the menu button is a physical push button or other physical input control device rather than a touchpad.

[0102] 1B is a block diagram illustrating exemplary components for event processing, according to some embodiments. In some embodiments, memory 102 (FIG. 1A) or 370 (FIG. 3) includes an event sorter 170 (e.g., within operating system 126) and a separate application 136-1 (e.g., any of applications 137-151, 155, 380-390 described above).

[0103] Event sorter 170 receives the event information and determines which application 136-1 to deliver the event information to and application view 191 for application 136-1. Event sorter 170 includes event monitor 171 and event dispatcher module 174. In some embodiments, application 136-1 includes application internal state 192 that indicates the current application view(s) that are displayed on touch-sensitive display 112 when the application is active or running. In some embodiments, device / global internal state 157 is used by event sorter 170 to determine which application(s) are currently active, and application internal state 192 is used by event sorter 170 to determine which application(s) are currently active, and application internal state 192 is used by event sorter 170 to determine which application view(s) to deliver the event information to.

[0104] In some embodiments, application internal state 192 includes additional information such as one or more of resume information to be used when application 136-1 resumes execution, user interface state information indicating or ready to display information being displayed by application 136-1, state cues that allow the user to return to a previous state or view of application 136-1, and redo / undo cues of previous actions taken by the user.

[0105] Event monitor 171 receives event information from peripherals interface 118. The event information includes information about sub-events (e.g., a user touch as part of a multi-touch gesture on touch-sensitive display 112). Peripherals interface 118 transmits information it receives from I / O subsystem 106 or sensors such as proximity sensor 166, accelerometer(s) 168, and / or microphone 113 (via audio circuitry 110). Information that peripherals interface 118 receives from I / O subsystem 106 includes information from touch-sensitive display 112 or a touch-sensitive surface.

[0106] In some embodiments, event monitor 171 sends requests to peripherals interface 118 at predetermined intervals. In response, peripherals interface 118 transmits event information. In other embodiments, peripherals interface 118 transmits event information only when there is a significant event (e.g., receipt of an input above a predetermined noise threshold and / or for more than a predetermined duration).

[0107] In some embodiments, the event sorter 170 also includes a hit view determination module 172 and / or an active event recognizer determination module 173 .

[0108] Hit view determination module 172 provides software procedures that determine where a sub-event occurred within one or more views when touch-sensitive display 112 displays more than one view. A view consists of the controls and other elements that a user can see on the display.

[0109] Another aspect of a user interface associated with an application is the set of views, sometimes referred to herein as application views or user interface windows, in which information is displayed and touch-based gestures occur. The application views (of individual applications) in which touches are detected optionally correspond to programmatic levels within the application's programmatic or view hierarchy. For example, the lowest-level view in which a touch is detected is optionally referred to as the hit view, and the set of events that are recognized as appropriate inputs is optionally determined based at least in part on the hit view of the initial touch that initiates the touch gesture.

[0110] Hit view determination module 172 receives information related to sub-events of a touch-based gesture. When an application has multiple views organized in a hierarchy, hit view determination module 172 identifies the hit view as the lowest view in the hierarchy that should process the sub-events. In most situations, the hit view is the lowest-level view in which an initiating sub-event occurs (e.g., the first sub-event in a series of sub-events that form an event or potential event). Once a hit view is identified by hit view determination module 172, the hit view typically receives all sub-events related to the same touch or input source as the touch or input source identified as the hit view.

[0111] Active event recognizer determination module 173 determines which view(s) in the view hierarchy should receive a particular sequence of sub-events. In some embodiments, active event recognizer determination module 173 determines that only the hit view should receive a particular sequence of sub-events. In other embodiments, active event recognizer determination module 173 determines that all views that contain the physical location of the sub-events are actively participating views, and therefore determines that all actively participating views should receive a particular sequence of sub-events. In other embodiments, even if a touch sub-event is completely confined to the area associated with one particular view, views higher in the hierarchy still remain actively participating views.

[0112] Event dispatcher module 174 dispatches event information to event recognizers (e.g., event recognizer 180). In embodiments that include active event recognizer determination module 173, event dispatcher module 174 delivers event information to the event recognizers determined by active event recognizer determination module 173. In some embodiments, event dispatcher module 174 stores event information in an event queue, which is retrieved by individual event receivers 182.

[0113] In some embodiments, operating system 126 includes event sorter 170. Alternatively, application 136-1 includes event sorter 170. In still other embodiments, event sorter 170 is a stand-alone module or is part of another module stored in memory 102, such as contact / motion module 130.

[0114] In some embodiments, application 136-1 includes multiple event handlers 190 and one or more application views 191, each containing instructions for processing touch events that occur within a separate view of the application's user interface. Each application view 191 of application 136-1 includes one or more event recognizers 180. Typically, an individual application view 191 includes multiple event recognizers 180. In other embodiments, one or more of the event recognizers 180 are part of a separate module, such as a user interface kit or a higher-level object from which application 136-1 inherits methods and other properties. In some embodiments, individual event handlers 190 include one or more of data updater 176, object updater 177, GUI updater 178, and / or event data 179 received from event sorter 170. Event handler 190 optionally utilizes or invokes data updater 176, object updater 177, or GUI updater 178 to update application internal state 192. Alternatively, one or more of the application views 191 include one or more respective event handlers 190. Also, in some embodiments, one or more of the data updater 176, the object updater 177, and the GUI updater 178 are included in individual application views 191.

[0115] A separate event recognizer 180 receives event information (e.g., event data 179) from event sorter 170 and identifies events from the event information. Event recognizer 180 includes an event receiver 182 and an event comparator 184. In some embodiments, event recognizer 180 also includes metadata 183 and at least a subset of event delivery instructions 188 (optionally including sub-event delivery instructions).

[0116] The event receiver 182 receives event information from the event sorter 170. The event information includes information about a sub-event, e.g., a touch or a movement of a touch. Depending on the sub-event, the event information also includes additional information, such as the location of the sub-event. When the sub-event involves a movement of a touch, the event information also optionally includes the speed and direction of the sub-event. In some embodiments, the event includes a rotation of the device from one orientation to another (e.g., from portrait to landscape or vice versa), and the event information includes corresponding information about the current orientation of the device (also called the device's posture).

[0117] The event comparator 184 compares the event information with predefined event or sub-event definitions and determines the event or sub-event, or determines or updates the state of the event or sub-event, based on the comparison. In some embodiments, the event comparator 184 includes an event definition 186. The event definition 186 includes definitions of events (e.g., a predefined set of sub-events), such as Event 1 (187-1) and Event 2 (187-2). In some embodiments, sub-events within Events (187-1 and / or 187-2) include, for example, touch start, touch end, touch movement, touch cancellation, and multiple touches. In one example, the definition for Event 1 (187-1) is a double tap on a displayed object. The double tap includes, for example, a first touch on a displayed object relative to a predetermined phase (touch start), a first lift-off (touch end) relative to the predetermined phase, a second touch on a displayed object relative to the predetermined phase (touch start), and a second lift-off (touch end) relative to the predetermined phase. In another example, a definition of event 2 (187-2) is a drag on a displayed object. Drag includes, for example, a touch (or contact) on the displayed object to a predetermined stage, a movement of the touch across the touch-sensitive display 112, and a lift-off of the touch (touch end). In some embodiments, the event also includes information about one or more associated event handlers 190.

[0118] In some embodiments, event definition 186 includes definitions of events for individual user interface objects. In some embodiments, event comparator 184 performs a hit test to determine which user interface objects are associated with the sub-event. For example, if a touch is detected on touch-sensitive display 112 in an application view in which three user interface objects are displayed on touch-sensitive display 112, event comparator 184 performs a hit test to determine which of the three user interface objects is associated with the touch (sub-event). If each displayed object is associated with a separate event handler 190, event comparator 184 uses the results of the hit test to determine which event handler 190 to activate. For example, event comparator 184 selects the event handler associated with the sub-event and object that triggers the hit test.

[0119] In some embodiments, the definition of an individual event 187 also includes a delay action that delays delivery of the event information until it is determined whether a set of sub-events corresponds to the event recognizer's event type.

[0120] If the individual event recognizer 180 determines that the sequence of sub-events does not match any of the events in the event definition 186, the individual event recognizer 180 enters an event disabled, event failed, or event finished state, after which it ignores the next sub-event of the touch-based gesture. In this situation, any other event recognizers that remain active for the hit view continue to track and process sub-events of the ongoing touch gesture.

[0121] In some embodiments, individual event recognizers 180 include metadata 183 with configurable properties, flags, and / or lists that indicate to actively participating event recognizers how the event delivery system should perform sub-event delivery. In some embodiments, metadata 183 includes configurable properties, flags, and / or lists that indicate how event recognizers interact with each other or how event recognizers are allowed to interact with each other. In some embodiments, metadata 183 includes configurable properties, flags, and / or lists that indicate how sub-events are delivered to various levels in the view or programmatic hierarchy.

[0122] In some embodiments, an individual event recognizer 180 activates an event handler 190 associated with an event when one or more specific sub-events of the event are recognized. In some embodiments, the individual event recognizer 180 delivers event information associated with the event to the event handler 190. Activating the event handler 190 is separate from sending (and postponing sending) sub-events to the individual hit view. In some embodiments, the event recognizer 180 pops a flag associated with the recognized event, and the event handler 190 associated with the flag catches the flag and performs a predetermined process.

[0123] In some embodiments, the event delivery instructions 188 include sub-event delivery instructions that deliver event information about a sub-event without activating an event handler. Instead, the sub-event delivery instructions deliver the event information to an event handler associated with a set of sub-events or to an actively participating view. The event handler associated with the set of sub-events or the actively participating view receives the event information and performs a predetermined process.

[0124] In some embodiments, data updater 176 creates and updates data used by application 136-1. For example, data updater 176 updates phone numbers used by contacts module 137 or stores video files used by a video player module. In some embodiments, object updater 177 creates and updates objects used by application 136-1. For example, object updater 177 creates new user interface objects or updates the positions of user interface objects. GUI updater 178 updates the GUI. For example, GUI updater 178 prepares display information and sends the display information to graphics module 132 for display on the touch-sensitive display.

[0125] In some embodiments, event handler(s) 190 include or have access to data updater 176, object updater 177, and GUI updater 178. In some embodiments, data updater 176, object updater 177, and GUI updater 178 are included in a single module of an individual application 136-1 or application view 191. In other embodiments, they are included in two or more software modules.

[0126] It should be understood that the foregoing description of event processing of a user's touch on a touch-sensitive display also applies to other forms of user input for operating multifunction device 100 using input devices, although not all of them are initiated on a touchscreen. For example, mouse movements and mouse button presses, contact movements such as tapping, dragging, scrolling on a touchpad, optionally coordinated with single or multiple keyboard presses or holds, pen stylus input, device movement, verbal commands, detected eye movements, biometric input, and / or any combination thereof, optionally utilize as inputs corresponding to sub-events that define the event to be recognized.

[0127] FIG. 2 illustrates portable multifunction device 100 having touchscreen 112, according to some embodiments. The touchscreen optionally displays one or more graphics within user interface (UI) 200. In this embodiment, as well as other embodiments described below, a user may select one or more of the graphics by performing a gesture on the graphics, for example, using one or more fingers 202 (not drawn to scale) or one or more styluses 203 (not drawn to scale). In some embodiments, selection of one or more graphics is performed when the user breaks contact with the one or more graphics. In some embodiments, the gesture optionally includes one or more taps, one or more swipes (left to right, right to left, upward and / or downward), and / or rolling (right to left, left to right, upward and / or downward) of a finger in contact with device 100. In some implementations or situations, accidental contact with a graphic does not select the graphic, for example, if the gesture corresponding to selection is a tap, a swipe gesture sweeping over an application icon optionally does not select the corresponding application.

[0128] Device 100 also optionally includes one or more physical buttons, such as a "home" button or menu button 204. As previously mentioned, menu button 204 is optionally used to navigate to any application 136 within a set of applications running on device 100. Alternatively, in some embodiments, the menu button is implemented as a soft key within a GUI displayed on touchscreen 112.

[0129] In some embodiments, device 100 includes touchscreen 112, menu button 204, pushbutton 206 for powering the device on / off and locking the device, volume control button(s) 208, subscriber identity module (SIM) card slot 210, headset jack 212, and external docking / charging port 124. Pushbutton 206 is optionally used to power the device on / off by pressing and holding the button down for a predetermined period of time, to lock the device by pressing and releasing the button before the predetermined time has elapsed, and / or to unlock the device or initiate the unlocking process. In alternative embodiments, device 100 also accepts verbal input via microphone 113 to activate or deactivate certain functions. Device 100 also optionally includes one or more contact intensity sensors 165 for detecting the intensity of a contact on touchscreen 112 and / or one or more tactile output generators 167 for generating a tactile output for a user of device 100.

[0130] FIG. 3 is a block diagram of an exemplary multifunction device having a display and a touch-sensitive surface, according to some embodiments. Device 300 need not be portable. In some embodiments, device 300 is a laptop computer, a desktop computer, a tablet computer, a multimedia player device, a navigation device, an educational device (such as a child's learning toy), a gaming system, or a control device (e.g., a home or commercial controller). Device 300 typically includes one or more processing units (CPUs) 310, one or more network or other communication interfaces 360, memory 370, and one or more communication buses 320 interconnecting these components. Communication bus 320 optionally includes circuitry (sometimes called a chipset) that interconnects and controls communication between system components. Device 300 includes input / output (I / O) interface 330, including display 340, which is typically a touchscreen display. I / O interface 330 also optionally includes a keyboard and / or mouse (or other pointing device) 350 and a touchpad 355, a tactile output generator 357 that generates tactile output on device 300 (e.g., similar to tactile output generator(s) 167 described above with reference to FIG. 1A ), and sensors 359 (e.g., light, acceleration, proximity, touch-sensing, and / or contact intensity sensors similar to contact intensity sensor(s) 165 described above with reference to FIG. 1A ). Memory 370 includes high-speed random-access memory such as DRAM, SRAM, DDR RAM, or other random-access solid-state memory devices, and optionally includes non-volatile memory such as one or more magnetic disk storage devices, optical disk storage devices, flash memory devices, or other non-volatile solid-state storage devices. Memory 370 optionally includes one or more storage devices located remotely from CPU(s) 310.In some embodiments, memory 370 stores programs, modules, and data structures similar to, or a subset of, programs, modules, and data structures stored in memory 102 of portable multifunction device 100 (FIG. 1A). Additionally, memory 370 optionally stores additional programs, modules, and data structures not present in memory 102 of portable multifunction device 100. For example, memory 370 of device 300 optionally stores drawing module 380, presentation module 382, ​​word processing module 384, website creation module 386, disk authoring module 388, and / or spreadsheet module 390, whereas memory 102 of portable multifunction device 100 (FIG. 1A) optionally does not store these modules.

[0131] Each of the above-identified elements of FIG. 3 is optionally stored in one or more of the memory devices mentioned above. Each of the above-identified modules corresponds to an instruction set that performs the functions described above. The above-identified modules or computer programs (e.g., including an instruction set or instructions) need not be implemented as separate software programs (e.g., computer programs (e.g., including instructions)), procedures, or modules; thus, in various embodiments, various subsets of these modules are optionally combined or otherwise reconfigured. In some embodiments, memory 370 optionally stores a subset of the above-identified modules and data structures. Additionally, memory 370 optionally stores additional modules and data structures not described above.

[0132] Attention is now optionally directed to user interface embodiments, for example, as implemented on portable multifunction device 100.

[0133] 4A shows an exemplary user interface for a menu of applications on portable multifunction device 100, according to some embodiments. A similar user interface is optionally implemented on device 300. In some embodiments, user interface 400 includes the following elements, or a subset or superset thereof: signal strength indicator(s) 402 for wireless communication(s), such as cellular and Wi-Fi signals; ●Time 404, ●Bluetooth indicator 405, ● Battery status indicator 406, Tray 408 with icons of frequently used applications, such as: An icon 416 for the phone module 138, labeled "Phone," optionally including an indicator 414 of the number of missed calls or voicemail messages; icon 418 of the email client module 140, labeled "Mail," optionally including an indicator 410 of the number of unread emails; ○ An icon 420 for the browser module 147, labeled "Browser"; and ○ An icon 422 for the video and music player module 152, also called the iPod (trademark of Apple Inc.) module 152, labeled "iPod"; and ● Icons of other applications, such as: ○ Icon 424 of IM module 141, labeled "Messages"; ○ Icon 426 of the calendar module 148, labeled "Calendar" ○ Icon 428 of the image management module 144, labeled "Photos" ○ An icon 430 of the camera module 143, labeled "camera"; ○ Icon 432 of the online video module 155, labeled "Online Video"; Icon 434 of Stock Price Widget 149-2, labeled "Stock Price" ○ Icon 436 of the map module 154, labeled "Map"; Icon 438 of weather widget 149-1, labeled "Weather" ○ Icon 440 of alarm clock widget 149-4, labeled "Clock" ○ Icon 442 of Training Support Module 142, labeled "Training Support"; ○ An icon 444 of the Notes module 153 labeled "Notes," and A settings application or module icon 446 labeled "Settings" that provides access to settings for the device 100 and its various applications 136.

[0134] Note that the icon labels shown in FIG. 4A are merely exemplary. For example, icon 422 of video and music player module 152 is labeled "Music" or "Music Player." Other labels are optionally used for various application icons. In some embodiments, the label for an individual application icon includes the name of the application that corresponds to the individual application icon. In some embodiments, the label of a particular application icon is different from the name of the application that corresponds to that particular application icon.

[0135] 4B shows an example user interface on a device (e.g., device 300 of FIG. 3 ) that has touch-sensitive surface 451 (e.g., tablet or touchpad 355 of FIG. 3 ) that is separate from display 450 (e.g., touchscreen display 112). Device 300 also optionally includes one or more contact intensity sensors (e.g., one or more of sensors 359) that detect the intensity of a contact on touch-sensitive surface 451, and / or one or more tactile output generators 357 that generate a tactile output for a user of device 300.

[0136] Although some of the following examples are given with reference to input on touchscreen display 112 (which combines a touch-sensitive surface and a display), in some embodiments, the device detects input on a touch-sensitive surface that is separate from the display, as shown in FIG. 4B . In some embodiments, the touch-sensitive surface (e.g., 451 in FIG. 4B ) has a primary axis (e.g., 452 in FIG. 4B ) that corresponds to a primary axis (e.g., 453 in FIG. 4B ) on the display (e.g., 450). According to these embodiments, the device detects contact with touch-sensitive surface 451 (e.g., 460 and 462 in FIG. 4B ) at locations that correspond to respective locations on the display (e.g., in FIG. 4B , 460 corresponds to 468 and 462 corresponds to 470). In this way, user input (e.g., contacts 460 and 462 and their movement) detected by the device on the touch-sensitive surface (e.g., 451 in FIG. 4B ) is used by the device to operate a user interface on the display (e.g., 450 in FIG. 4B ) of the multifunction device when the touch-sensitive surface is separate from the display. It should be understood that similar methods are optionally used for the other user interfaces described herein.

[0137] Additionally, while the following examples are given primarily with reference to finger input (e.g., finger contact, finger tap gesture, finger swipe gesture), it should be understood that in some embodiments, one or more of the finger inputs are replaced with input from another input device (e.g., mouse-based input or stylus input). For example, a swipe gesture is optionally replaced by a mouse click (e.g., instead of a contact) followed by movement of a cursor along the path of the swipe (e.g., instead of movement of the contact). As another example, a tap gesture is optionally replaced by a mouse click (e.g., instead of detecting a contact and then ceasing contact detection) while the cursor is positioned over the location of the tap gesture. Similarly, it should be understood that when multiple user inputs are detected simultaneously, multiple computer mice are optionally used simultaneously, or a mouse and finger contacts are optionally used simultaneously.

[0138] FIG. 5A shows an exemplary personal electronic device 500. Device 500 includes a main body 502. In some embodiments, device 500 can include some or all of the functionality described with respect to devices 100 and 300 (e.g., FIGS. 1A-4B ). In some embodiments, device 500 has a touch-sensitive display screen 504, hereafter touchscreen 504. Alternatively, or in addition to touchscreen 504, device 500 has a display and a touch-sensitive surface. Similar to devices 100 and 300, in some embodiments, touchscreen 504 (or the touch-sensitive surface) optionally includes one or more intensity sensors that detect the intensity of contact (e.g., touches) being applied. The one or more intensity sensors of touchscreen 504 (or the touch-sensitive surface) can provide output data representing the intensity of the touch. The user interface of device 500 can respond to touches based on their intensity, meaning that touches of different intensities can invoke different user interface actions on device 500.

[0139] For exemplary techniques for detecting and processing touch intensity, see, for example, related applications International Patent Application No. PCT / US2013 / 040061, filed May 8, 2013, published as WO 2013 / 169849, entitled "Device, Method, and Graphical User Interface for Displaying User Interface Objects Corresponding to an Application," and International Patent Application No. PCT / US2013 / 069483, filed November 11, 2013, published as WO 2014 / 105276, entitled "Device, Method, and Graphical User Interface for Transitioning Between Touch Input to Display Output Relationships," each of which is incorporated herein by reference in its entirety.

[0140] In some embodiments, device 500 has one or more input mechanisms 506 and 508. Input mechanisms 506 and 508, if included, may be physical. Examples of physical input mechanisms include push buttons and rotatable mechanisms. In some embodiments, device 500 has one or more attachment mechanisms. Such attachment mechanisms, if included, may allow device 500 to be attached to, for example, hats, eyewear, earrings, necklaces, shirts, jackets, bracelets, watch bands, chains, pants, belts, shoes, wallets, backpacks, etc. These attachment mechanisms allow device 500 to be worn by a user.

[0141] FIG. 5B illustrates an exemplary personal electronic device 500. In some embodiments, device 500 can include some or all of the components described with respect to FIGS. 1A, 1B, and 3. Device 500 has a bus 512 operably coupling an I / O section 514 to one or more computer processors 516 and memory 518. I / O section 514 can be connected to a display 504, which can have touch-sensing components 522 and, optionally, an intensity sensor 524 (e.g., a contact intensity sensor). Additionally, I / O section 514 can be connected to a communication unit 530 that receives application and operating system data using Wi-Fi, Bluetooth, near field communication (NFC), cellular, and / or other wireless communication technologies. Device 500 can include input mechanisms 506 and / or 508. Input mechanism 506 is optionally, for example, a rotatable input device or a depressible and rotatable input device. In some embodiments, input mechanism 508 is optionally a button.

[0142] In some embodiments, input mechanism 508 is optionally a microphone. Personal electronic device 500 optionally includes various sensors, such as a GPS sensor 532, an accelerometer 534, an orientation sensor 540 (e.g., a compass), a gyroscope 536, a motion sensor 538, and / or combinations thereof, all of which may be operably connected to I / O section 514.

[0143] The memory 518 of the personal electronic device 500 may include one or more non-transitory computer-readable storage media for storing computer-executable instructions that, when executed by one or more computer processors 516, may cause the computer processors to perform the techniques described below, including, for example, process 700 and process 900 (FIGS. 7 and 9). A computer-readable storage medium may be any medium that can tangibly contain or store computer-executable instructions used by or in connection with an instruction execution system, apparatus, or device. In some embodiments, the storage medium is a transient computer-readable storage medium. In some embodiments, the storage medium is a non-transitory computer-readable storage medium. Non-transitory computer-readable storage media may include, but are not limited to, magnetic storage devices, optical storage devices, and / or semiconductor storage devices. Examples of such storage devices include magnetic disks, optical disks based on CDs, DVDs, or Blu-ray technology, and persistent solid-state memory such as flash, solid-state drives, and the like. Personal electronic device 500 is not limited to the components and configuration of FIG. 5B and may include other or additional components in multiple configurations.

[0144] As used herein, the term "affordance" refers to a user-interactive graphical user interface object, optionally displayed on a display screen of device 100, 300, and / or 500 (FIGS. 1A, 3, and 5A-5B). For example, images (e.g., icons), buttons, and text (e.g., hyperlinks) each, optionally, constitute an affordance.

[0145] As used herein, the term “focus selector” refers to an input element that indicates the current portion of the user interface with which the user is interacting. In some implementations involving a cursor or other location marker, the cursor acts as the “focus selector,” such that when input (e.g., a press input) is detected on a touch-sensitive surface (e.g., touchpad 355 of FIG. 3 or touch-sensitive surface 451 of FIG. 4B) while the cursor is positioned over a particular user interface element (e.g., a button, window, slider, or other user interface element), the particular user interface element is adjusted according to the detected input. In some implementations involving a touchscreen display that allows direct interaction with user interface elements on the touchscreen display (e.g., touch-sensitive display system 112 of FIG. 1A or touchscreen 112 of FIG. 4A), a detected contact on the touchscreen acts as the “focus selector,” such that when input (e.g., a press input by contact) is detected at the location of a particular user interface element (e.g., a button, window, slider, or other user interface element) on the touchscreen display, the particular user interface element is adjusted according to the detected input. In some implementations, focus is moved from one region of the user interface to another region of the user interface without a corresponding cursor movement or contact movement on the touchscreen display (e.g., by using the tab key or arrow keys to move focus from one button to another), and in these implementations, the focus selector moves to follow the movement of focus between various regions of the user interface. Regardless of the specific form the focus selector takes, the focus selector is generally a user interface element (or contact on a touchscreen display) that is controlled by the user to communicate the user's intended interaction with the user interface (e.g., by indicating to the device the element of the user interface through which the user intends to interact).For example, the position of a focus selector (e.g., cursor, touch, or selection box) over an individual button while a press input is detected on a touch-sensitive surface (e.g., a touchpad or touchscreen) indicates that the user intends to activate that individual button (and not other user interface elements shown on the device's display).

[0146] As used herein and in the claims, the term "characteristic intensity" of a contact refers to a characteristic of that contact based on one or more intensities of the contact. In some embodiments, the characteristic intensity is based on a plurality of intensity samples. The characteristic intensity is optionally based on a predetermined number of intensity samples, i.e., a set of intensity samples collected during a predetermined time period (e.g., 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10 seconds) associated with a predetermined event (e.g., after detecting the contact, before detecting lift-off of the contact, before or after detecting the start of contact movement, before detecting the end of the contact, before or after detecting an increase in the intensity of the contact, and / or before or after detecting a decrease in the intensity of the contact). The characteristic intensity of the contact is optionally based on one or more of the maximum intensity of the contact, the mean intensity of the contact, the average intensity of the contact, the top 10 percentile intensity of the contact, half the maximum intensity of the contact, 90 percent of the maximum intensity of the contact, etc. In some embodiments, the duration of the contact is used in determining the characteristic intensity (e.g., when the characteristic intensity is an average of the intensity of the contact over time). In some embodiments, the characteristic intensity is compared to a set of one or more intensity thresholds to determine whether an action is performed by the user. For example, the set of one or more intensity thresholds optionally includes a first intensity threshold and a second intensity threshold. In this example, a contact having a characteristic intensity that does not exceed the first threshold results in a first action, a contact having a characteristic intensity above the first intensity threshold but not above the second intensity threshold results in a second action, and a contact having a characteristic intensity above the second threshold results in a third action. In some embodiments, the comparison between the characteristic intensity and the one or more thresholds is not used to determine whether to perform the first action or the second action, but rather to determine whether to perform one or more actions (e.g., whether to perform an individual action or to refrain from performing an individual action).

[0147] Attention is now directed to embodiments of user interfaces (“UIs”) and related processes implemented on an electronic device such as portable multifunction device 100, device 300, or device 500.

[0148] 6A-6R show exemplary user interfaces for editing avatar stickers, according to some embodiments. The user interfaces in these figures are used to explain processes described below, including the process in FIG.

[0149] 6A shows device 600 displaying, via display 601 (e.g., a touch-sensitive display), editing interface 604, which is an interface for editing the appearance of an avatar (e.g., a virtual avatar) and / or avatar stickers. Device 600 includes camera 602 for detecting the appearance of user 615, which in some embodiments is used to control or modify the displayed pose or appearance of the displayed avatar and track the user's face. For example, as user 615 moves their head and makes different facial expressions, device 600 uses camera 602 to detect the user's movements, pose, and facial expressions and modify the appearance of avatar 605 in real time to replicate the movements, pose, and facial expressions of user 615. Device 600 includes one or more elements of devices 100, 300, or 500.

[0150] In FIG. 6A , editing interface 604 includes avatar 605. The appearance of avatar 605 is edited by selecting different avatar feature options from various avatar feature categories 606. For example, in FIG. 6A , hat category 606-1 is currently selected (as indicated by the center bold appearance of "hat"), and different hat options 610 are displayed for modifying the hat of avatar 605. Color option 608 can be selected to modify the color of the selected hat option. In FIG. 6A , hat option 610-1 is currently selected. Hat option 610-1 corresponds to the no-hat option, and thus avatar 605 is displayed without a hat.

[0151] In Figure 6A, device 600 detects input 612 selecting hats option 610-2 and input 614 selecting eyewear category 606-2 and updates editing interface 604 accordingly, as shown in Figure 6B. In response to input 612, device 600 updates the appearance of avatar 605 to include hat 616, which corresponds to hat option 610-2. In response to input 614, device 600 selects eyewear category 606-2 and displays eyewear option 618.

[0152] In Figure 6B, user 615 sticks out their tongue and tilts their head. Device 600 detects the change in pose using camera 602 and accordingly modifies the appearance of avatar 605 to tilt the avatar's head and stick out its tongue. Device 600 detects the selection of glasses option 618-1 via input 620 and detects a swipe gesture 622 on the features category. In response, device 600 updates the avatar to have glasses 626 corresponding to glasses option 618-1 and selects outfit category 606-3, as shown in Figure 6C.

[0153] In some embodiments, when a particular avatar feature is selected for editing, device 600 replaces the displayed dynamic avatar with a static avatar sticker showing a representation of the avatar with one or more features selected for editing. For example, in FIG. 6C , outfit category 606-3 is a category for editing the avatar's outfit and is not displayed with avatar 605. Thus, device 600 transitions from displaying avatar 605 to displaying avatar stickers showing the avatar's outfit (and optionally other associated features, such as the arms, hands, and neck) so that the user can see the outfit on the avatar and any changes the user has made to the outfit. In some embodiments, the transition includes an animation of the avatar changing into a sticker. For example, FIG. 6C shows an intermediate representation 624 of the avatar transitioning from a dynamic avatar to an avatar sticker. This representation shows the avatar's updated appearance with hat 616 and glasses 626, and shows a zoom-out effect to begin to reveal the avatar's body. Additionally, the avatar stops tracking the user's face when the avatar's head and facial features transition into the sticker pose shown in Figure 6D. As shown in Figure 6C, the avatar is shown with its eyes closed and its mouth closed (tongue retracted) as the avatar's head moves to an upright position, while the user 615 maintains a head-tilted, tongue-out pose. In some embodiments, the transition is depicted as a cross-fade from the avatar to the avatar sticker, with the avatar sticker fading in as the avatar fades out.

[0154] FIG. 6D illustrates the completed transition from avatar 605 to avatar sticker 625. Avatar sticker 625 represents the current appearance of the avatar edited in FIGS. 6A and 6B. Thus, sticker 625 includes hat 616 and glasses 626. Sticker 625 includes avatar head 625-1, torso 625-2, and arms 625-3, and is shown with outfit 632 corresponding to outfit option 630-1. In contrast to avatar 605, avatar sticker 625 is static. Thus, device 600 does not modify the appearance of the avatar sticker to track the user's face. For example, in FIG. 6D, user 615 is looking ahead with their eyes open and smiling, yet sticker 625 shows the avatar in a praying pose with their eyes closed, rather than smiling.

[0155] When outfit category 606-3 is selected, editing interface 604 is updated to include outfit options 630 for selecting an outfit for the avatar (shown on the avatar sticker) and color options 628 for selecting a color for the selected outfit. In Figure 6D, device 600 detects input 634 selecting outfit option 630-2. In response, device 600 updates sticker 625 to display outfit 636 corresponding to outfit option 630-2, as shown in Figure 6E.

[0156] In some embodiments, a user can interact with device 600 to change the stickers displayed in editing interface 604. For example, in FIG. 6E , device 600 displays prompt 628 prompting the user to swipe the displayed stickers to display different stickers. In some embodiments, the stickers displayed by device 600 are a subset of a larger collection of stickers, and the stickers in the subset include stickers that depict the avatar feature currently selected for editing and do not include stickers that do not depict the avatar feature currently selected for editing. Because the user is currently editing the avatar's outfit, the stickers currently available for display by device 600 are stickers that depict the avatar's outfit. For example, in response to input 638, device 600 replaces sticker 625 with sticker 627, a different sticker that depicts the avatar's outfit with the avatar in a hands-up pose. Sticker 627 shows the avatar's head 627-1, torso 627-2, and arms 627-3 while wearing outfit 636 corresponding to selected avatar option 630-2.

[0157] In FIG. 6F , device 600 detects input 640 selecting outfit option 630-3 and accordingly updates avatar sticker 627 to include outfit 642, as shown in FIG. 6G . In FIG. 6G , device 600 detects input 644 selecting arms category 606-4. In FIG. 6H , device 600 updates editing interface 604 to display arms option 648 and color option 646. Avatar arms option 648-1 is currently selected. Device 600 detects input 650 selecting arms option 648-2. In some embodiments, a selection of an arms option can apply to both arms of the avatar. In some embodiments, a selection of an arms option can apply to the left or right arm of the avatar. In some embodiments, editing interface 604 includes an option that can be selected to determine whether a selected arms option applies to the avatar's left arm, right arm, or both. In FIG. 6I, device 600 shows sticker 627 with avatar arms 652 corresponding to selected avatar arms option 648-2.

[0158] In some embodiments, editing interface 804 can be accessed from a messaging application, and in some embodiments, sticker editing using editing interface 804 can be used in a messaging application. For example, in FIG. 6I, device 600 detects input 654 and, in response, displays messaging interface 656, as shown in FIG. 6J. Message interface 656 includes message display area 656-1 that shows messages sent to participants in a group messaging conversation. Messaging interface 656 also includes sticker area 656-3 that displays stickers 658 that can be selected to be added to the message conversation. For example, sticker 658-1 can be selected, and in response, device 600 displays sticker 658-1 in message composition area 656-2 and / or message display area 656-1. Stickers 658 include stickers that were included in the subset available for display while editing the avatar's clothing or arms (e.g., stickers 658-1, 658-2, and 658-3), and stickers that were not included in the subset because they do not include representations of the avatar's clothing or arms (e.g., stickers 658-4, 658-5, and 658-6).

[0159] 6K-6R show an example embodiment of an avatar editing interface displayed on device 650. Device 650 includes a display 651 (e.g., a touch-sensitive display) and an input mechanism 652. Device 650 includes one or more elements of device 100, 300, 500, or 600.

[0160] 6K, device 650 displays an editing interface 670 that includes avatar 660 (similar to avatar 605) and avatar feature category options 662, 664, and 666 that can be selected to edit the features of avatar 660. In some embodiments, avatar 660 can be selected to display the avatar with different facial expressions. For example, in response to input 668, device 650 displays avatar 660 sticking out its tongue, as shown in FIG. 6L. In some embodiments, device 650 displays the avatar with different facial expressions in response to an input using input mechanism 652 (e.g., a rotation and / or depression of the input mechanism).

[0161] In Figure 6M, device 650 displays outfit editing interface 676 in response to input 674 on outfit option 664 of Figure 6L. Outfit editing interface 676 is an interface for editing the outfit of avatar 660, for example, similar to that shown in Figure 6D. When outfit editing interface 676 is displayed, additional features of the avatar, such as the avatar's arms 678 and outfit 680, are displayed to indicate changes to the avatar's outfit. In some embodiments, the avatar's outfit is modified using input mechanism 652. In some embodiments, the avatar's outfit is modified using touch input on display 651.

[0162] In some embodiments, device 650 cycles through displaying various stickers corresponding to the avatar feature currently selected for editing. For example, in response to input 682 or input 684 (or, in some embodiments, after a predetermined amount of time), device 650 displays sticker 685, as shown in FIG. 6N. Sticker 685 is similar to sticker 625, but is updated to reflect the feature selected in FIGS. 6F and 6H. Thus, sticker 685 shows the avatar with hat 686 (similar to hat 616), glasses 688 (similar to glasses 626), avatar arms 678 (similar to arms 652), and outfit 680 (similar to outfit 642). In response to input 681, input 683, or after a predetermined amount of time, device 650 cycles to sticker 690, shown in FIG. 6O. In the embodiment shown in FIGS. 6M-6O, device 650 is editing the avatar's outfit and therefore cycles through stickers that show the avatar's outfit and does not cycle through stickers that do not show the avatar's outfit.

[0163] In FIG. 6P, device 650 displays skin editing interface 692 in response to input 672 on skin option 662 of FIG. 6L. Skin editing interface 692 is an interface for editing the skin of avatar 660. When skin editing interface 692 is displayed, the avatar's arms and clothing are not displayed. In some embodiments, the avatar's skin is modified using input mechanism 652. In some embodiments, the avatar's skin is modified using touch input on display 651.

[0164] As shown in Figures 6Q and 6R, device 650 cycles between displaying stickers showing the avatar's skin, but not displaying stickers including the avatar's clothing or arms. For example, in response to input 691, input 693, or after a predetermined amount of time, device 650 displays sticker 694, as shown in Figure 6Q. In response to input 695, input 697, or after a predetermined amount of time, device 650 displays sticker 696, as shown in Figure 6R.

[0165] 7 is a flow diagram illustrating a method for editing avatar stickers using a computer system, according to some embodiments. Method 700 is performed in a computer system (e.g., a smartphone, tablet, smartwatch) in communication with a display generation component (e.g., a display controller, a touch-sensitive display system) and one or more input devices (e.g., a touch-sensitive surface). Some operations of method 700 are optionally combined, the order of some operations is optionally changed, and some operations are optionally omitted.

[0166] As described below, method 700 provides an intuitive way to edit avatar stickers. This method reduces the cognitive burden on a user when editing avatar stickers, thereby creating a more efficient human-machine interface. For battery-operated computing devices, enabling users to edit avatar stickers more quickly and efficiently conserves power and extends the time between battery charges.

[0167] The computer system (e.g., 600 or 650), via a display generation component (e.g., 601 or 651), displays (702) an avatar editing interface (e.g., 604 or 670) (e.g., an interface for editing one or more characteristics of an avatar character), which displays (704) a representation of a virtual avatar (e.g., 605 or 660) (e.g., an avatar that may be customized and optionally created by a user of the computer system) (e.g., a live preview of the virtual avatar that tracks the user's facial movements) having a plurality of avatar characteristics (e.g., 616 and / or 626), where the virtual avatar displays a first pose, and a second avatar sticker (e.g., 627 or 690) depicting the virtual avatar in a second pose (e.g., user-customizable (e.g., selectable or configurable) avatar feature) different from the first pose (706); and a first set of one or more graphical interface objects (e.g., 610 or 618) selectable to modify a first avatar feature among a plurality of avatar features (e.g., different clothing options, different arm options, different hat options, different eye color options) visible in the representation of the virtual avatar. In some embodiments, the virtual avatar is modeled to represent a human character, and the avatar features generally correspond to human physical characteristics. For example, such an avatar may include a representation of an individual having various physical human features or characteristics (e.g., an elderly woman with dark skin color and long, straight brown hair). Such avatars also include representations of individuals with various non-human characteristics typically associated with a human appearance (e.g., decorative extensions, hats, glasses, sunglasses, etc.) In some embodiments, the representation of a virtual avatar includes the avatar's head and avatar features located on or directly adjacent to the avatar's head, such as facial features, the avatar's neck, hats, glasses, etc.In some embodiments, the representation of the virtual avatar does not include portions of the avatar, such as the avatar's body or avatar features that are not located on or directly adjacent to the avatar's head.

[0168] While displaying the avatar editing interface including a representation of the virtual avatar, the computer system (e.g., 600 or 650) detects (708) an input via one or more input devices (e.g., 601, 602, 651, and / or 652) corresponding to a request to display editing options for a second avatar feature (e.g., a physical feature of the avatar (e.g., the avatar's clothing (e.g., shirt) or the avatar's arms)) of the plurality of avatar features (e.g., 622 or 674).

[0169] In response to detecting the input (e.g., 622) (in some embodiments, after detecting the input (e.g., 674)), the computer system (e.g., 600 or 650) displays (712) (e.g., in an area of ​​the avatar editing interface previously occupied by at least a portion of the representation of the virtual avatar) a representation of the first avatar sticker (e.g., 625 or 685) having an appearance based on the appearance of the virtual avatar including the second avatar features (e.g., 632, 636, 642, 652, 678, and / or 680) (e.g., a static representation of the avatar having a static pose and appearance based on the avatar including the second avatar features and, optionally, features used to create and / or modify the avatar's appearance (e.g., hat, sunglasses, hairstyle / color, skin tone, etc.)), and the computer system: and updating (710) the display of the avatar editing interface (e.g., 604 or 670), including displaying (714) a second set of one or more graphical interface objects (e.g., 630 or 648) (e.g., different clothing options, different arm options, different hat options, different eye color options) selectable to modify one or more of the avatar features (e.g., second avatar features) visible in the first avatar sticker (in some embodiments, replacing the first set of one or more graphical interface objects with the second set of one or more graphical interface objects) (in some embodiments, one or more avatar features modified using the second set of one or more graphical interface objects are also visible in the second avatar sticker). Displaying a representation of the first avatar sticker that includes the second avatar features and has an appearance based on the appearance of the virtual avatar reduces the number of inputs in the computer system (e.g., 600 or 650) by automatically adjusting the displayed appearance of the virtual avatar to emphasize the avatar features being edited without requiring additional input from the user.Improves operability of the computer system by reducing the number of inputs required to perform operations, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and reduces power usage and improves battery life of the computer system by allowing the user to use the system more quickly and efficiently.

[0170] In some embodiments, the particular avatar sticker displayed in response to the input is automatically selected (e.g., without further user input) by a computer system (e.g., 600 or 650) and is selected to emphasize a second avatar feature. In some embodiments, the avatar sticker includes one or more avatar features that are not located on or directly adjacent to the avatar's head, such as, for example, a shirt, arms, and / or hands. In some embodiments, the avatar sticker includes features (e.g., additional features compared to the virtual avatar's representation) that are displayed to modify the avatar's appearance to convey a particular expression, emotion, mood, etc. For example, a sticker may include hearts over the avatar's eyes to convey love or tears under the avatar's eye(s) to convey sadness. In some embodiments, the avatar sticker includes subtle changes to the avatar's appearance, such as altering a portion of the avatar while still retaining the avatar's overall recognizable expression. One example of such a change is a "surprised" sticker, which is a representation of the avatar with the top of the avatar's head removed and displaying the avatar's brain exploding.

[0171] In some embodiments, a first avatar sticker (e.g., 625 or 685) depicting the virtual avatar in a first pose includes a first portion (e.g., the avatar's arm(s)) of the virtual avatar (e.g., 625-2 or 625-3) that is not visible in the representation of the virtual avatar (e.g., 605) displayed in the avatar editing interface (e.g., 604) (e.g., the first portion of the virtual avatar is not displayed in the representation of the virtual avatar). In some embodiments, a second avatar sticker (e.g., 627 or 690) depicting the virtual avatar in a second pose includes a second portion (e.g., the avatar's torso) of the virtual avatar (e.g., 627-2 or 605-3) that is not visible in the representation of the virtual avatar (e.g., 627) displayed in the avatar editing interface (e.g., 604) (e.g., the second portion of the virtual avatar is the same as the first portion). Showing the virtual avatar in a first pose and displaying a first avatar sticker including a first portion of the virtual avatar that is not visible in the representation of the virtual avatar, and displaying a second avatar sticker showing the virtual avatar in a second pose and including a second portion of the virtual avatar that is not visible in the representation of the virtual avatar, provides feedback to a user of a computer system (e.g., 600 or 650) that the first or second portion of the virtual avatar has been edited (or at least related to the feature of the avatar that is being edited) and reduces the number of inputs in the computer system by automatically adjusting the display of the virtual avatar to emphasize the feature being edited without requiring additional input from the user. Providing improved feedback and reducing the number of inputs required to perform actions improves operability of the computer system, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and also reduces power usage and improves the battery life of the computer system by allowing the user to use the system more quickly and efficiently.

[0172] In some embodiments, while displaying a representation of the first avatar sticker (e.g., 625), the computer system (e.g., 600 or 650) detects a second input (e.g., 638) (e.g., a tap or swipe gesture on the representation of the first avatar sticker) via one or more input devices (e.g., 601, 602, 651, 652). In response to detecting the second input, the computer system displays (e.g., in an area of ​​the avatar editing interface previously occupied by at least a portion of the representation of the first avatar sticker) a representation of a second avatar sticker (e.g., 627) that includes second avatar features (e.g., 627-2 or 627-3) and has an appearance based on the appearance of the virtual avatar. In some embodiments, the computer system continues to display a second set of one or more graphical interface objects selectable to modify one or more of the avatar features visible in the first avatar sticker (and / or the second avatar sticker). In some embodiments, the computer system displays a set of one or more graphical interface objects selectable to modify one or more of the avatar features visible in the second avatar sticker (in some embodiments, replacing the second set of one or more graphical interface objects with a different set of one or more graphical interface objects). Displaying a representation of the second avatar sticker that includes the second avatar features and has an appearance based on the appearance of the virtual avatar reduces the number of inputs in the computer system by automatically adjusting the displayed appearance of the virtual avatar to emphasize the avatar features being edited without requiring additional input from the user.Improves operability of the computer system by reducing the number of inputs required to perform operations, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and reduces power usage and improves battery life of the computer system by allowing the user to use the system more quickly and efficiently.

[0173] In some embodiments, while displaying a representation of a second avatar sticker (e.g., 627) having a first appearance (e.g., the second avatar sticker shows a virtual avatar wearing a first outfit), the computer system (e.g., 600 or 650) detects, via one or more input devices (e.g., 601, 602, 651, and / or 652), a set of one or more inputs including an input (e.g., selecting a different outfit for the virtual avatar) corresponding to a request to change the appearance of the virtual avatar (e.g., 640) (e.g., selecting one of the graphical interface objects in the second set of one or more graphical interface objects). In response to detecting the set of one or more inputs, the computer system displays a representation of the second avatar sticker (e.g., 627 of FIG. 6I) having a second appearance different from the first appearance and based on the request to change the appearance of the virtual avatar (e.g., displaying the second avatar sticker with the different outfit selected for the virtual avatar). The present invention provides a computer system user with feedback that a virtual avatar feature has been edited by displaying a representation of a second avatar sticker having a second appearance different from the first appearance and based on the request to change the virtual avatar's appearance, and reduces the number of inputs in the computer system by automatically adjusting the displayed appearance of the virtual avatar to emphasize the avatar feature being edited without requiring additional input from the user. By providing improved feedback and reducing the number of inputs required to perform operations, the present invention improves usability of the computer system, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and also reduces power usage and improves the battery life of the computer system by allowing the user to use the system more quickly and efficiently.

[0174] In some embodiments, while displaying an avatar editing interface (e.g., 604) including a representation of a virtual avatar (e.g., 605), a computer system (e.g., 600, 650) detects, via one or more input devices (e.g., 601, 602, 651, and / or 652), an input (e.g., 614) corresponding to a request to display editing options for a third avatar feature (e.g., avatar eyewear) among the plurality of avatar features. In response to detecting the input corresponding to the request to display editing options for the third avatar feature among the plurality of avatar features, the computer system displays a third set of one or more graphical interface objects (e.g., 618) (e.g., avatar eyewear options) selectable to modify the third avatar feature (in some embodiments, replacing the first set of one or more graphical interface objects with the third set of one or more graphical interface objects). While displaying an avatar editing interface including a representation of the virtual avatar, displaying a third set of one or more graphical interface objects selectable for modifying a third avatar characteristic provides feedback to a user of the computer system that the third avatar characteristic has been selected for editing, and automatically adjusts the displayed appearance of the virtual avatar to emphasize the avatar characteristic being edited without requiring additional input from the user, thereby reducing the number of inputs in the computer system. By providing improved feedback and reducing the number of inputs required to perform operations, the computer system improves operability, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and additionally reduces power usage and improves battery life of the computer system by allowing the user to use the system more quickly and efficiently.

[0175] In some embodiments, while displaying an avatar editing interface (e.g., 604) including a representation of the first avatar sticker (e.g., 625), the computer system (e.g., 600, 650) detects, via one or more input devices (e.g., 601, 602, 651, and / or 652), an input (e.g., 644) corresponding to a request to display editing options for a fourth avatar feature (e.g., avatar arms) among the plurality of avatar features. In response to detecting the input corresponding to the request to display editing options for the fourth avatar feature among the plurality of avatar features, the computer system displays a fourth set of one or more graphical interface objects (e.g., 648) (e.g., avatar arms options) selectable to modify the fourth avatar feature (in some embodiments, replacing the second set of one or more graphical interface objects with the fourth set of one or more graphical interface objects). While displaying an avatar editing interface including a representation of the first avatar sticker, displaying a fourth set of one or more graphical interface objects selectable to modify a fourth avatar feature provides improved feedback to a user of the computer system that the fourth avatar feature has been selected for editing, and automatically adjusts the displayed appearance of the virtual avatar to emphasize the avatar feature being edited without requiring additional input from the user, thereby reducing the number of inputs in the computer system. By providing improved feedback and reducing the number of inputs required to perform operations, the computer system improves operability, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and additionally reduces power usage and improves the battery life of the computer system by allowing the user to use the system more quickly and efficiently.

[0176] In some embodiments, while displaying an avatar editing interface (e.g., 604) including a representation of a virtual avatar (e.g., 605) having a first appearance of a first avatar characteristic (e.g., before displaying a representation of a first avatar sticker), a computer system (e.g., 600 or 650) detects, via one or more input devices (e.g., 601, 602, 651, and / or 652), a selection (e.g., 612) of one of the graphical interface objects (e.g., 610-2) in a first set of one or more graphical interface objects (e.g., 610) (e.g., selecting a hat for the virtual avatar). In response to detecting the selection of one of the graphical interface objects in the first set of one or more graphical interface objects, the computer system displays a representation of the virtual avatar having a second appearance of the first avatar characteristic that differs from the first appearance and is based on the selected graphical interface object (e.g., 605 of FIG. 6B ) in the first set of one or more graphical interface objects (e.g., displaying a representation of the virtual avatar with the selected hat). Displaying a representation of the virtual avatar having a second appearance of the first avatar feature that is different from the first appearance and that is based on a selected graphical interface object in the first set of one or more graphical interface objects while displaying an avatar editing interface including the representation of the virtual avatar provides feedback to a user of the computer system that the appearance of the virtual avatar has been edited, and reduces the number of inputs in the computer system by automatically adjusting the displayed appearance of the virtual avatar to emphasize the avatar feature being edited without requiring additional input from the user.Improves usability of the computer system by providing improved feedback and reducing the number of inputs required to perform an action, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and reduces power usage and improves battery life of the computer system by allowing the user to use the system more quickly and efficiently.

[0177] In some embodiments, while displaying an avatar editing interface (e.g., 604) including a representation of a first avatar sticker (e.g., 625) having a first appearance of a second avatar feature (e.g., 625-2 or 625-3), the computer system (e.g., 600, 650) detects a selection (e.g., 634) of one of the graphical interface objects (e.g., 630-2) in a second set of one or more graphical interface objects (e.g., 630) via one or more input devices (e.g., 601, 602, 651, and / or 652) (e.g., selecting a different outfit for the virtual avatar, selecting a different arm for the virtual avatar). In response to detecting the selection, the computer system displays a representation of the first avatar sticker having a second appearance of the second avatar feature that differs from the first appearance and that is based on the selected graphical interface object in the second set of one or more graphical interface objects (e.g., 625 of FIG. 6E ) (e.g., displaying a representation of the first avatar sticker with a different outfit selected for the virtual avatar, displaying a representation of the first avatar sticker with a different arm selected for the virtual avatar). Displaying a representation of the first avatar sticker having a second appearance of the second avatar feature that differs from the first appearance and that is based on the selected graphical interface object in the second set of one or more graphical interface objects provides feedback to a user of the computer system that the appearance of the virtual avatar has been edited and reduces the number of inputs in the computer system by automatically adjusting the displayed appearance of the virtual avatar to emphasize the avatar feature being edited without requiring additional input from the user.Improves usability of the computer system by providing improved feedback and reducing the number of inputs required to perform an action, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and reduces power usage and improves battery life of the computer system by allowing the user to use the system more quickly and efficiently.

[0178] In some embodiments, the second avatar characteristic includes the avatar's clothing (e.g., 616, 626, 632, 636, or 642) (e.g., a hat or outfit). In some embodiments, the second avatar characteristic includes the avatar's arms (e.g., 625-3, 627-3, or 652) (e.g., the style or type of the avatar's arms).

[0179] In some embodiments, displaying the avatar editing interface (e.g., 604) including a representation of the virtual avatar (e.g., 605) includes displaying an animation of the representation of the virtual avatar (e.g., 605 in FIG. 6B ) (e.g., the virtual avatar changes its pose and / or facial expression). In some embodiments, the animation of the representation of the virtual avatar is based on a face (e.g., the face of the user 615) (e.g., one or more facial features of a user of the computer system) detected by one or more cameras (e.g., 602) (e.g., visible light cameras, depth cameras, and / or infrared cameras) associated with (e.g., in communication with) the computer system (e.g., 600 or 650) (e.g., the representation of the virtual avatar changes in response to detecting one or more changes (e.g., changes in pose, position, and / or orientation) of a face located within the field of view of the one or more cameras (e.g., one or more cameras in communication with the computer system)). Animating the representation of a virtual avatar based on a face detected by one or more cameras associated with a computer system provides additional controls for viewing different features of the virtual avatar without cluttering the user interface with additional displayed controls. Providing additional control options for a computer system without cluttering the user interface with additional displayed controls improves usability of the computer system, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the computer system and reducing user errors), and additionally reduces power usage and improves battery life of the computer system by allowing the user to use the system more quickly and efficiently.

[0180] In some embodiments, the representation of the first avatar sticker (e.g., 625, 627, 685, or 690) is static (e.g., the virtual avatar does not change its pose and / or facial expression over time) (e.g., the appearance of the first avatar sticker does not respond to changes in the user's face). Displaying a static representation of the first avatar sticker improves the user experience by allowing the user to modify the appearance of the virtual avatar and see the corresponding changes without having to maintain a particular pose to see the avatar features being modified, and reduces the number of inputs in the computer system (e.g., 600, 650) by eliminating the need to track the user's face while the user is editing the virtual avatar. The improved user experience and reduced number of inputs required to perform actions improves operability of the computer system, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and also reduces power usage and improves the battery life of the computer system by allowing the user to use the system more quickly and efficiently.

[0181] In some embodiments, displaying an avatar editing interface (e.g., 670) including a representation of a virtual avatar (e.g., 660) includes displaying a representation of the virtual avatar having a first facial pose (e.g., 660 of FIG. 6K) (and, in some embodiments, a first avatar characteristic) of the virtual avatar (e.g., the representation of the virtual avatar has a first facial expression (e.g., a surprised expression)). While displaying the avatar editing interface including the representation of the virtual avatar having the first facial pose of the virtual avatar, the computer system (e.g., 600, 650) detects a first input (e.g., 668) (e.g., a tap gesture, a swipe gesture) (e.g., an input directed at the representation of the virtual avatar) via one or more input devices (e.g., 601, 602, 651, 652). In response to detecting the first input, the computer system transitions the representation of the virtual avatar from a first facial pose of the virtual avatar to a second facial pose of the virtual avatar (e.g., 660 of FIG. 6L) that is different from the first facial pose (and, in some embodiments, the first avatar characteristic) (e.g., the virtual avatar's representation changes to a second facial expression (e.g., sticking out a tongue, winking)). Transitioning the representation of the virtual avatar from the first facial pose of the virtual avatar to a second facial pose of the virtual avatar that is different from the first facial pose provides a control for adjusting the view of the avatar to display a different pose indicative of the first avatar characteristic without cluttering the user interface with additional displayed controls. Providing additional control options for the computer system without cluttering the user interface with additional displayed controls improves usability of the computer system (e.g., 600, 650), makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the computer system and reducing user errors), and additionally reduces power usage and improves battery life of the computer system by allowing the user to use the system more quickly and efficiently.In some embodiments (e.g., when the virtual avatar's representation does not respond to changes in the user's face), the computer system changes the facial pose (e.g., facial expression) of the virtual avatar's representation in response to detecting input to the virtual avatar's representation.

[0182] In some embodiments, while displaying an avatar editing interface (e.g., 670) that includes a representation of an individual avatar sticker in a set of stickers (e.g., 685), a computer system (e.g., 600 or 650) detects the expiration of a predetermined amount of time. In response to detecting the expiration of the predetermined amount of time, the computer system displays a representation of a subsequent avatar sticker (e.g., 690) in the set of stickers that is different from the individual avatar sticker (e.g., automatically (e.g., without user input) from displaying a first sticker in the set of stickers to a second sticker in the set of stickers). In response to detecting the expiration of the predetermined amount of time, displaying a representation of a subsequent avatar sticker in the set of stickers that is different from the individual avatar sticker automatically adjusts the view of the avatar to display a different pose indicative of the individual avatar feature being edited, without requiring additional user input. Automatically performing an action when a set of conditions is met reduces the number of inputs in a computer system (e.g., 600 or 650), enhances the usability of the computer system, makes the user-device interface more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the device and reducing user errors), and also reduces power usage and improves battery life of the device by allowing the user to use the system more quickly and efficiently.

[0183] In some embodiments, the set of stickers includes one or more avatar stickers (e.g., 625, 627, 658-1, 658-2, 658-3, 685, or 690) that indicate an individual avatar feature currently selected for editing (e.g., a second avatar feature) and one or more avatar stickers (e.g., 658-4, 658-5, 658-6, 694, or 696) that do not indicate an individual avatar feature currently selected for editing. In some embodiments, the individual avatar sticker (e.g., 625 or 685) and subsequent avatar stickers (e.g., 627 or 690) are selected from a first subset of avatar stickers that includes stickers that indicate individual avatar features and does not include stickers that do not indicate individual avatar features. Displaying stickers selected from a first subset of avatar stickers, including stickers that show individual avatar features and that do not include stickers that do not show individual avatar features, conserves computational resources by displaying only avatar stickers that show the feature being edited and eliminating the display of stickers that are not relevant to the user. Conserving computational resources improves usability of the computer system (e.g., 600 or 650), makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and also reduces power usage and improves the battery life of the computer system by allowing the user to use the system more quickly and efficiently. In some embodiments, when the computer system cycles through the avatar stickers, the computer system displays avatar stickers that correspond to (e.g., show or depict) the avatar feature currently selected for editing and does not display (e.g., skips displaying) avatar stickers that do not correspond to the avatar feature currently selected for editing.

[0184] In some embodiments, while displaying a representation of a sticker (e.g., 685 or 690) from a set of stickers (e.g., an individual avatar sticker or a subsequent avatar sticker), a computer system (e.g., 600 or 650) detects an input (e.g., 672) corresponding to a request to display edit options for a fifth avatar feature of the plurality of avatar features. In response to (and, in some embodiments, after) detecting the input corresponding to the request to display edit options for the fifth avatar feature, the computer system displays a representation of a first sticker (e.g., 694 or 696) selected from a second subset of avatar stickers that includes a plurality of stickers that indicate the fifth avatar feature and that does not include any stickers that do not indicate the fifth avatar feature. Displaying a representation of a first sticker selected from a second subset of avatar stickers that includes a plurality of stickers that indicate the fifth avatar feature and that does not include any stickers that do not indicate the fifth avatar feature conserves computational resources by displaying only the avatar sticker that indicates the feature being edited and eliminating the display of stickers that are not relevant to the user. The conserving of computational resources improves the usability of the computer system, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and reduces power usage and improves the battery life of the computer system by allowing the user to use the system more quickly and efficiently. In some embodiments, the computer system transitions from displaying a first sticker selected from the second subset of avatar stickers to displaying a second sticker selected from the second subset of avatar stickers. In some embodiments, the transition from the first sticker in the second subset to the second sticker in the second subset occurs automatically (e.g., after the expiration of a predetermined amount of time) or manually (e.g., in response to an input (e.g., an input to the first sticker in the second subset)).

[0185] In some embodiments, updating the display of the avatar editing interface (e.g., 604 or 670) includes displaying an animation (e.g., 624) (e.g., an ordered graphical transition) of a representation of the virtual avatar (e.g., 605) transitioning to a representation of the first avatar sticker (e.g., 625). Displaying an animation of the virtual avatar's representation transitioning to a representation of the first avatar sticker provides feedback to a user of the computer system (e.g., 600 or 650) that a different avatar feature has been selected for editing. Providing improved feedback improves usability of the computer system, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and additionally reduces power usage and improves battery life of the computer system by allowing the user to use the system more quickly and efficiently. In some embodiments, the transition is shown as an animation of the virtual avatar's representation transitioning to a representation of the first avatar sticker.

[0186] In some embodiments, the animation (e.g., 624) of the representation of the virtual avatar (e.g., 605) transitioning to a representation of the first avatar sticker (e.g., 625) includes adjusting the zoom level of the representation of the virtual avatar (e.g., zooming out) and displaying the representation of the first avatar sticker after adjusting the zoom level of the representation of the virtual avatar. Displaying the animation, including adjusting the zoom level of the representation of the virtual avatar and then displaying the representation of the first avatar sticker, provides feedback to a user of the computer system (e.g., 600 or 650) indicating that the avatar feature selected for editing is highlighted or displayed in the representation of the first avatar sticker. Providing improved feedback improves usability of the computer system, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and also reduces power usage and improves the battery life of the computer system by allowing the user to use the system more quickly and efficiently. In some embodiments, the animation includes a cross-fade effect in which a representation of the first avatar sticker gradually fades into view while a representation of the virtual avatar gradually fades out.

[0187] In some embodiments, the animation (e.g., 624) of the representation of the virtual avatar (e.g., 605) transitioning to a representation of a first avatar sticker (e.g., 625) includes displaying facial features of the representation of the virtual avatar moving to a first pose shown in the representation of the first avatar sticker. Displaying facial features of the representation of the virtual avatar moving to a first pose shown in the representation of the first avatar sticker provides feedback to a user of the computer system (e.g., 600 or 650) indicating that the avatar features selected for editing are highlighted or displayed in the pose shown in the representation of the first avatar sticker. Providing improved feedback improves usability of the computer system, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and additionally reduces power usage and improves the battery life of the computer system by allowing the user to use the system more quickly and efficiently.

[0188] In some embodiments, a computer system (e.g., 600 or 650), via a display generation component (e.g., 601 or 651), displays a messaging interface (e.g., 656) for a conversation between a first participant and a second participant, the messaging interface including a sticker display area (e.g., 656-3) including one or more avatar stickers (e.g., 658) in a set of stickers (e.g., a first avatar sticker and / or a second avatar sticker), which avatar stickers are selectable to initiate a process of adding an individual avatar sticker (e.g., 658-2) (e.g., a representation of the avatar sticker) to the conversation (e.g., 656-1). Displaying a messaging interface including a sticker display area including an avatar sticker in a set of stickers provides additional controls for adding avatar stickers to the conversation without cluttering the user interface with additional displayed controls. Providing additional control options for the computer system without cluttering the user interface with additional displayed controls improves usability of the computer system, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the computer system and reducing user errors), and reduces power usage and improves battery life of the computer system by allowing the user to use the system more quickly and efficiently. In some embodiments, the messaging interface includes a message display area (e.g., an area containing messages received or sent by participants in a conversation, an area containing messages being created for a conversation). In some embodiments, selecting an individual avatar sticker adds the avatar sticker to the message display area.

[0189] In some embodiments, sticker display area 656-3 includes one or more stickers (e.g., 658-4, 658-5, or 658-6) from a second set of stickers based on the virtual avatar that includes one or more stickers that are different from the stickers in the set of stickers that includes the first avatar sticker (e.g., 658-2) and the second avatar sticker (e.g., 658-1). In some embodiments, the second set of stickers is not accessible in the avatar editing interface. For example, such stickers may include stickers that do not include portions of the virtual avatar that can be edited using the avatar editing interface (e.g., stickers that do not include the avatar's arms / hands / torso).

[0190] It should be noted that the process details described above with respect to method 700 (e.g., FIG. 7) are also applicable in a similar manner to the methods described below. For example, method 900 optionally includes one or more of the features of the various methods described above with reference to method 700. For example, the display of avatar stickers for editing can be used in combination with the avatar editing shown in FIGS. 8A-8U and described with respect to method 900. For the sake of brevity, these details are not repeated.

[0191] 8A-8U show exemplary user interfaces for editing an avatar, according to some embodiments. The user interfaces in these figures are used to explain processes described below, including the process in FIG.

[0192] FIG. 8A shows device 600 displaying editing interface 804 (similar to editing interface 604), which is an interface for editing the appearance of an avatar and / or avatar stickers. Editing interface 804 includes avatar 805 (similar to avatar 605). The appearance of avatar 805 is edited by selecting different avatar feature options from various avatar feature categories 806 (similar to feature categories 606). For example, in FIG. 8A, hairstyle category 806-1 is currently selected (as indicated by the central, bold appearance of "Hairstyle"), and hairstyle options 812 are displayed for modifying the hairstyle of avatar 805. Additionally, editing interface 804 includes color options 810 for selecting the hair color of avatar 805 and slider 814, which is adjustable to modify the selected color by moving tab 814-1 along track 814-2. In FIG. 8A, color option 810-1 is currently selected, and the avatar's hair 805-1 (and the hair in hairstyle option 812) has the color corresponding to the selected color option 810-1.

[0193] In some embodiments, editing interface 804 includes selectable tabs for adding and toggling between color options displayed for individual avatar features. In FIG. 8A , editing interface 804 includes a Hair tab 816 and a Highlights tab 818. As shown in FIG. 8A , Hair tab 816 is selected by the tab's expanded and, optionally, bold appearance. When Hair tab 816 is selected, device 600 displays color options 810 for modifying the color of the avatar's hair. Hair tab 816 includes text 816-1 indicating the feature modified by color options 810 and, in some embodiments, a color indicator 816-2 indicating the currently selected color for the avatar's hair. Thus, in FIG. 8A , color indicator 816-2 is the same color as color option 810-1. Highlights tab 818 is shown with a shading effect indicating that highlights are currently disabled for the avatar's hair.

[0194] The highlights tab 818 can be selected to enable highlights for the avatar's hair. For example, in FIG. 8A , the device 600 detects input 820 on the highlights tab 818 and, in response, replaces color option 810 with color option 822, as shown in FIG. 8B . The device 600 automatically selects a color option for the highlights, as indicated by selected color option 822-1. Thus, the avatar's hair 805-1 is modified to include highlights 805-2 having a color corresponding to selected color option 822-1. The selected highlight color is also applied to hairstyle options 812. The highlights tab 818 is modified to have a selected appearance, as indicated by the tab's enlarged and bold appearance. Additionally, shading is removed from the tab 818, text 818-1 appears, and a color indicator 818-2 is displayed to indicate the current color selected for the highlights. A remove affordance 826 appears on the highlights tab 826 and is selectable to remove the highlights from the avatar.

[0195] When highlights tab 818 is selected, device 600 displays selectable highlight style options 824 for changing the highlight style of the avatar's hair. In Figure 8B, modern style 824-1 is currently selected. Device 600 detects input 828 selecting gradient style 824-2 and responsively updates highlights 805-2 and the highlights shown on hairstyle options 812 to the gradient style, as shown in Figure 8C.

[0196] In Figure 8C, device 600 detects input 830 selecting highlight color 822-2 and responsively updates highlights 805-2, color indicator 818-2, and the highlights shown in hairstyle options 812 and highlight style options 824 to the selected color of color option 822-2, as shown in Figure 8D. Device 600 detects input 832 selecting hair tab 816 and responsively updates editing interface 804 to display color option 810, as shown in Figure 8E.

[0197] In Figure 8E, device 600 detects input 834 selecting hair color option 810-2 and, in response, updates avatar's hair 805-1, color indicator 816-2, and hairstyle options 812 to have the selected hair color option 810-2 while continuing to display the highlights, as shown in Figure 8F. In Figure 8F, device 600 detects input 836 selecting remove affordance 826. In response, device 600 updates editing interface 804 by removing the highlights from avatar's hair 805-1 and hairstyle options 812 and returning highlights tab 818 to a disabled state, as shown in Figure 8G. Device 600 detects input 838 for features category 806 and, in response, changes to avatar's eyes category 806-2, as shown in Figure 8H.

[0198] 8H-8L show an exemplary embodiment for selecting eye color. In FIG. 8H, device 600 displays editing interface 804 having eye color option 840, eye style option 842, and eye color tabs 844 and 846. When tab 846 is disabled, tab 846 includes text 846-1 indicating that selection of tab 846 enables selection of a second eye color, and tab 844 includes text 844-1 indicating that color option 840 is selectable to change the color of both avatar's eyes 805-3a and 805-3b. Eye color 840-1 is currently selected for both avatar's eyes, as indicated in avatar's eyes 805-3a and 805-3b, eye style option 842, and color indicator 844-2. Device 600 detects input 848 selecting eye color option 840-2 and updates the avatar's eye color accordingly, as shown in FIG. 8I.

[0199] In FIG. 8I , device 600 detects input 850 selecting tab 846 and, in response, updates editing interface 804 to enable a mode in which colors can be selected separately for individual avatar eyes 805-3a and 805-3b, as shown in FIG. 8J . Accordingly, tab 846 is updated to display color indicator 846-2 and text 846-3 indicating that color option 852 is selectable to select the right eye color for avatar's right eye 805-3a. Similarly, tab 844 is updated to display text 844-3 indicating that color option 840 is selectable to select the left eye color for avatar's left eye 805-3b when tab 844 is selected and separate eye colors are enabled. Tab 846 also includes a remove affordance 854, which is selectable to remove the separate eye color for avatar's right eye 805-3a, returning to a mode in which a single eye color is selected for both avatar's eyes together, similar to that shown in FIG. 8I . In FIG. 8J, device 600 detects input 856 on color options 852-2 to change the color of the avatar's right eye 805-3a and input 858 to select tab 844 to return to the color options to select the color of the left eye.

[0200] FIG. 8K shows editing interface 804 in response to inputs 856 and 858. Specifically, device 600 displays color option 840 (here selectable to select a left eye color) and displays avatar right eye 805-3a, color indicator 846-2, and the avatar's right eye within avatar eye style options 842 with a color corresponding to selected color option 852-2. Device 600 detects input 860 selecting color option 844-2 for left eye 805-3b. Accordingly, device 600 displays avatar left eye 805-3b, color indicator 844-2, and the avatar's left eye within avatar eye style options 842 with a color corresponding to selected color option 840-3, as shown in FIG. 8L. In FIG. 8L, device 600 detects input 862 on avatar features category 806 and, in response, changes to avatar hats category 806-3, as shown in FIG. 8M.

[0201] 8M-8U show an example embodiment for selecting a color for an avatar accessory. In FIG. 8M, hat category 806-3 is selected, and editing interface 804 includes hat color option 864, hat option 866, and hat color tabs 868 and 870. When tab 868 is selected, device 600 displays color option 864 for modifying the main color of the avatar's hat. Tab 868 includes color indicator 868-2 and text 868-1 indicating that the main portion of the hat is modified by the color option associated with tab 868. Tab 870 is currently disabled and includes text 870-1 indicating that tab 870 can be used to add color to the avatar's hat. Hat option 866-1 is selected, and avatar 805 is shown with hat 805-4, which corresponds to hat option 866-1. Because tab 868 is currently selected, color option 864 is selectable to select the color of the selected hat option (e.g., hat 805-4). Color option 864-1 is currently selected, and avatar hat 805-4, color indicator 868-2, and avatar hat option 866 have a color corresponding to the selected color option 864-1.

[0202] In FIG. 8M, device 600 detects input 872 on tab 870 to add a second color to hat 805-4, as shown in FIG. 8N. Device 600 updates editing interface 804 to display a first accent color option 876, selectable to select an accent color for the avatar's hat. Accent color option 876-1 is selected, and hat 805-4 is shown with main portion 873 having main color option 864-1 and accent portion 875 having accent color option 876-1. Hat option 866 is similarly updated to include two colors, and color indicator 870-2 is shown with the selected color on accent tab 870.

[0203] In some embodiments, once a color is added to an avatar feature, additional options for adding subsequent colors to the avatar feature are displayed. For example, in FIG. 8N, after adding a second color to the avatar's hat, device 600 displays tab 874 selectable to add a third color to the avatar's hat. Tab 874 includes text 874-1 indicating that tab 874 can be used to add an additional accent color. Device 600 detects input 878 selecting tab 874 and, in response, adds a third color (e.g., a second accent color) to the avatar's hat, as shown in FIG. 8O.

[0204] In FIG. 8O, with option 880-1 selected, device 600 updates editing interface 804 to display second accent color option 880. Accordingly, device 600 displays avatar hat 805-4 updated to include second accent portion 877 (hat option 866 is similarly updated to include a third color). As shown in FIG. 8O, second accent portion 877, color indicator 874-2, and avatar hat option 866 include the color corresponding to option 880-1. The text shown on tabs 870 and 874 is updated based on the addition of the second accent color. Specifically, text 870-1 indicates that tab 870 corresponds to the first accent color, and text 874-1 indicates that tab 874 corresponds to the second accent color. Tab 870 includes a selectable remove affordance 881 for removing a first accent color, and tab 874 includes a selectable remove affordance 883 for removing a second accent color. Device 600 detects input 882 for selecting main color tab 868 and, in response, displays selectable color options 864 for selecting a main color for the avatar's hat.

[0205] In some embodiments, slider 814 can be used to modify one or more visual characteristics of a selected color option, such as shading, highlights, brightness, hue, contrast, or other visual characteristics. For example, in FIGS. 8P-8U, slider 814 is used to modify the shading of a selected color option. In FIG. 8P, device 600 detects input 884 of dragging tab 814-1 to the far end of slider track 814-2 to reduce the shading of the color corresponding to main color option 864-1. In FIG. 8Q, main color portion 873 of avatar hat 805-4 is shown without shading, and hat option 866 is similarly updated. In some embodiments, adjusting the slider also adjusts the corresponding color option (e.g., 864-1) and color indicator (e.g., 868-2) displayed in editing interface 804. In FIG. 8Q, device 600 detects input 886 selecting second accent color tab 874 and, in response, displays color options 880, as shown in FIG. 8R.

[0206] In some embodiments, when adjusting a secondary color (e.g., a first accent color or a second accent color) using slider 814, the slider is biased to achieve a position along track 814-2 that matches the main accessory color. Thus, when a user positions tab 814-1 within a threshold distance of a position on track 814-2 that matches the main accessory color, device 600 automatically snaps the tab to the matching position so that the accessory color matches the main color, thereby allowing a user to easily and accurately match the accessory color to the main color. Figures 8R-8U show an example of such an embodiment.

[0207] In FIG. 8R, device 600 detects input 888 selecting second accessory color option 880-2, which is the same color as main color option 864-1. Device 600 updates editing interface 804 in response to the selection, as shown in FIG. 8S. Thus, main color portion 873 and second accent portion 877 are shown to have the same color (as indicated by the same hatching pattern) on avatar's hat 805-4 and hat option 866. Device 600 detects input 890, which is a drag gesture that moves tab 814-1 to the right but not to the end of track 814-2, as shown in FIG. 8T. In FIG. 8T, input 890 is maintained, and device 600 updates the shading of the second accent color, as indicated by second accent portion 877 having a lighter shading on hat 805-4 and hat option 866. The user then releases the gesture in the position shown in FIG. 8T. If the position of tab 814-1 is not within a threshold distance of the location of the corresponding shading of the color of main portion 873, device 600 maintains tab 814-1 in the same position when the input is released. However, in the embodiments shown in FIGS. 8T and 8U, the location of tab 814-1 is within a threshold distance of the location in track 814-2 that corresponds to the shading of the color of main portion 873. Thus, when input 890 is terminated while tab 814-1 is in the position shown in FIG. 8T, device 600 snaps tab 814-1 to the far end of track 814-2 that corresponds to the shading of the color of main portion 873, as shown in FIG. 8U. In some embodiments, device 600 generates a haptic response 892 when tab 814-1 snaps into a position (e.g., the end of track 814-2), as shown in FIG. 8U.

[0208] 9 is a flow diagram illustrating a method for editing an avatar using a computer system, according to some embodiments. Method 900 is performed in a computer system (e.g., a smartphone, tablet, smartwatch) in communication with a display generation component (e.g., a display controller, a touch-sensitive display system) and one or more input devices (e.g., a touch-sensitive surface). Some operations of method 900 are optionally combined, the order of some operations is optionally changed, and some operations are optionally omitted.

[0209] As described below, method 900 provides an intuitive way to edit an avatar. This method reduces the cognitive burden on the user when editing avatar stickers, thereby creating a more efficient human-machine interface. For battery-operated computing devices, enabling users to edit avatars more quickly and efficiently conserves power and extends the time between battery charges.

[0210] A computer system (e.g., 600 or 650), via a display generation component (e.g., 601 or 651), displays (902) an avatar editing interface (e.g., 804) (e.g., an interface for editing one or more characteristics of an avatar character), which in turn displays (904) a virtual avatar (e.g., 805) (e.g., an avatar that may be customized and optionally created by a user of the computer system) (e.g., a virtual avatar that tracks the user's facial movements). a representation of a virtual avatar (a live preview of a virtual avatar), the representation of the virtual avatar including a first avatar feature (e.g., 805-1, 805-3, or 805-4), the first avatar feature including a first color (e.g., 810-1, 840-1, or 864-1) (and optionally not including a second color) (e.g., avatar hairstyle feature, avatar clothing feature (e.g., shirt), avatar arm feature, hat feature, avatar eye feature), and (906) a second color (e.g., a second eye feature displayed with the first color). The display includes a first graphical interface object (e.g., 818, 846, or 870) selectable to initiate a process for modifying the appearance of the first avatar feature (e.g., to add a second color, i.e., a color different from the first color) (e.g., an "add color" affordance); and (908) a plurality of selectable options (e.g., 812, 842, or 866) for modifying a characteristic of the first avatar feature (e.g., different hairstyle options, different outfit options, different arm options, different hat options, different eye color options) (e.g., each selectable option represents a value of the characteristic: a first outfit option, a second outfit option, a third outfit option, etc.), the plurality of selectable options including respective representations of the first avatar feature, the first avatar feature including a first color (e.g., each avatar outfit option includes a representation of the first avatar feature (e.g., avatar outfit or shirt) having the first color).

[0211] While displaying the avatar editing interface, the computer system (e.g., 600 or 650) detects (910) input (e.g., 820, 850, or 872) directed to a first graphical interface object (e.g., 818, 846, or 870) via one or more input devices (e.g., 601, 602, 651, or 652). In response to detecting the input (e.g., 820, 850, or 872) directed to the first graphical interface object (e.g., 818, 846, or 870), the computer system (e.g., 600, 650) updates (912) the display of the avatar editing interface (e.g., 804), including displaying (914) an updated representation of the virtual avatar (e.g., 805). The updated representation of the virtual avatar includes a first avatar feature (e.g., 805-1, 805-3, or 805-4), the first avatar feature including a first color (e.g., 810-1, 840-1, or 864-1) and a second color (e.g., 822-1, 852-1, or 876-1) (e.g., the avatar is updated so that the first avatar feature (e.g., outfit or shirt) has the first color and the second color). In response to detecting input directed at the first graphical interface object, the computer system displays (916) an updated plurality of selectable options (e.g., 812 of FIG. 8B, 842 of FIG. 8J, or 866 of FIG. 8N). The updated plurality of selectable options includes an updated representation of each of the first avatar characteristics, the first avatar characteristics including a first color and a second color (e.g., for each avatar clothing option, the representation of the first avatar characteristic (e.g., the avatar's clothing or shirt) is updated to have a first color and a second color).In response to detecting input directed at the first graphical interface object, the computer system displays (918) a control (e.g., 822, 852, or 876) (e.g., a different set of color options for selecting a second color) for modifying a second color that was not displayed prior to detecting the input (e.g., replacing the display of a first set of color options for selecting a first color with a second set of color options for selecting a second color). Displaying a control for modifying a second color that was not displayed prior to detecting the input provides additional control options without cluttering the user interface until the additional displayed controls are desired, and prevents accidental input while the additional control options are not displayed. Providing additional control options for the computer system without cluttering the user interface with additional displayed controls and preventing accidental input improves operability of the computer system, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate input when operating / interacting with the computer system and reducing user errors), and also reduces power usage and improves battery life of the computer system by allowing the user to use the system more quickly and efficiently.

[0212] In some embodiments, the second color (e.g., 822-1, 852-1, or 876-1) is selected (e.g., automatically, without further input from a user of the computer system) from a set of color options (e.g., 822, 852, or 876) (e.g., color options selectable via a control to modify the second color) in response to detecting input (e.g., 820, 850, or 872) directed at the first graphical interface object (e.g., 818, 846, or 870). Selecting the second color from the set of color options in response to detecting input directed at the first graphical interface object automatically applies the second color to the representation of the virtual avatar and the multiple selectable options without requiring additional user input. Automatically performing an action when a set of conditions is met reduces the number of inputs in a computer system (e.g., 600, 650), enhances the usability of the computer system, makes the user-device interface more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the device and reducing user errors), and also reduces power usage and improves battery life of the device by allowing the user to use the system more quickly and efficiently.

[0213] In some embodiments, updating the display of the avatar editing interface (e.g., 804) includes displaying a second graphical interface object (e.g., 874) (e.g., a second “add color” affordance) selectable to initiate a process for modifying the appearance of the first avatar feature (e.g., 805-4) to include a third color (e.g., 880-1) (e.g., adding a third color to be displayed along with the first and second colors). Displaying a second graphical interface object selectable to initiate a process for modifying the appearance of the first avatar feature to include a third color provides an additional control option for adding color to the first avatar feature without cluttering the user interface until the additional displayed control is desired, and avoids accidental input while the additional control option is not displayed. Improves usability of a computer system by providing additional control options for the computer system and avoiding accidental input without cluttering the user interface with additional displayed controls, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate input when operating / interacting with the computer system and reducing user errors), and reduces power usage and improves battery life of the computer system by allowing the user to use the system more quickly and efficiently.

[0214] In some embodiments, after updating the display of the avatar editing interface (e.g., 804) (e.g., after modifying the appearance of the first avatar feature to include a second color), the avatar editing interface includes a first selectable object (e.g., 868) (e.g., a primary color tab (e.g., a "main" color tab)) associated with a first portion (e.g., 873) (e.g., a crown portion of the avatar hat) of the first avatar feature (e.g., 805-4) and a second selectable object (e.g., 870 or 874) (e.g., a secondary color tab (e.g., an "accent" color tab)) associated with a second portion (e.g., 875) (e.g., a brim portion of the avatar hat) of the first avatar feature. In some embodiments, a computer system (e.g., 600, 650) receives a set of one or more inputs (e.g., 882, 884, 886, 888, or 890) including a selection (e.g., 884, 888, or 890) of a fourth color (e.g., from the second set of colors). In some embodiments, the one or more inputs include a selection of the first selectable object and / or a second selectable object. In some embodiments, selectable options corresponding to the second set of colors are displayed as part of a control for modifying the second color. In some embodiments, selectable options corresponding to the second set of colors are displayed as at least part of a control for modifying the first color.In response to receiving a set of one or more inputs including a selection of a fourth color, displaying a first avatar feature (e.g., 805-4) with the fourth color (e.g., 864-1 or 880-2) may include, in accordance with a determination that a first selectable object (e.g., 868) is in a selected state (e.g., the first selectable object is highlighted, bolded, outlined, or otherwise visually emphasized relative to a second selectable object) when the fourth color is selected, displaying a first portion of the avatar feature (e.g., portion 873 of 805-4 has the color of 864-1 in FIG. 8Q) with the fourth color (e.g., changing the color of the first portion of the avatar feature to the fourth color) (in some embodiments, forgoing changing the color of a second portion of the avatar feature (e.g., changing the color of a previously selected object)). 8S) (e.g., continuing to display the second portion of the avatar features with the previously selected color (e.g., the second color)); and, when the fourth color is selected, pursuant to a determination that the second selectable object (e.g., 874) is selected (e.g., the second selectable object is highlighted, bolded, outlined, or otherwise visually emphasized relative to the first selectable object), displaying the second portion of the avatar features (e.g., portion 877 of 805-4 has the color of 880-2 of FIG. 8S) with the fourth color (e.g., changing the color of the second portion of the avatar features to the fourth color) (in some embodiments, forgoing changing the color of the first portion of the avatar features (e.g., continuing to display the first portion of the avatar features with the previously selected color (e.g., the first color)).Displaying a first portion of the avatar feature having a fourth color when a first selectable object is selected if the fourth color is selected, and displaying a second portion of the avatar feature having a fourth color when a second selectable object is selected if the fourth color is selected, provides an enhanced control scheme for adjusting the color of avatar features, providing an additional control option for applying the fourth color to the first or second portion of the first avatar feature without cluttering the user interface with an additional control that moves the multiple selectable options off-screen when displayed, thereby preventing the user from seeing changes to the avatar feature shown in the multiple selectable options while adjusting the color. Providing additional control options for the computer system without cluttering the user interface with additional displayed controls improves usability of the computer system (e.g., 600 or 650), makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the computer system and reducing user errors), and also reduces power usage and improves the battery life of the computer system by allowing the user to use the system more quickly and efficiently. In some embodiments, one of the first or second selectable objects is in a selected state by default (and the other selectable object is in an unselected or deselected state). In some embodiments, the first or second selectable object transitions to a selected state (e.g., becomes selected) in response to input directed at the respective selectable object (when the respective selectable object is not currently selected (e.g., deselected)). In some embodiments, selecting a first selectable object deselects a second selectable object, and vice versa.

[0215] In some embodiments, displaying the plurality of selectable options (e.g., 812, 842, or 866) includes displaying the plurality of selectable options in a first position (e.g., the position shown in FIG. 8H or the position shown in FIG. 8M) relative to a display generating component (e.g., 601 or 651) (e.g., a position corresponding to a position on the display generating component). Displaying the updated plurality of selectable options includes displaying the updated plurality of selectable options in a first region of the user interface (e.g., in the first position relative to the display generating component). After updating the display of the avatar editing interface (e.g., 804) (e.g., after modifying the appearance of the first avatar feature to include a second color), the computer system (e.g., 600 or 651) receives a set of one or more inputs (e.g., 848, 856, 860) (e.g., while displaying the plurality of selectable options in the first position, while displaying the updated plurality of selectable options in the first position).In response to receiving the set of one or more inputs, the computer system updates a representation of the virtual avatar (e.g., 805) to change the first color of the first avatar feature (e.g., changing the avatar's eyes 805-3b to color 844-2 of FIG. 8L ) while displaying multiple selectable options in a first region of the user interface in accordance with a determination that the set of one or more inputs includes an input (e.g., 860) corresponding to a request to change the first color of the first avatar feature (in some embodiments, when a user selects / changes the first color of the avatar feature, the multiple selectable options (e.g., changing the avatar's eyes 805-3b to color 844-2 of FIG. 8L )). , different hairstyle options, different clothing options, different arm options, different hat options, different eye color options (e.g., different hairstyle options, different clothing options, different arm options, different hat options, different eye color options) remain displayed in a fixed position, and, in accordance with a determination that the set of one or more inputs includes an input (e.g., 856) corresponding to a request to change the second color of the first avatar feature while displaying the updated plurality of selectable options in the first region of the user interface (e.g., avatar's eyes 805-3a change to color 852-2 of FIG. 8K and eye style option 842 remains displayed in the same position). Changing the first color of the first avatar feature while displaying the multiple selectable options in the first region of the user interface and changing the second color of the first avatar feature while displaying the updated multiple selectable options in the first region of the user interface provides feedback to a user of the computer system (e.g., 600 or 650) indicating the change in color of the first avatar feature while maintaining a fixed position of the selectable option indicating the changed color so that the user can more easily observe the color change.Providing improved feedback improves usability of the computer system, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and reduces power usage and improves battery life of the computer system by allowing the user to use the system more quickly and efficiently. In some embodiments, the updated multiple selectable options (e.g., different hairstyle options, different clothing options, different arm options, different hat options, different eye color options) remain displayed in a fixed position even when the user selects / changes a second color of the avatar feature.

[0216] In some embodiments, displaying controls for modifying the second color that were not displayed before detecting the input includes displaying a selectable option (e.g., 826, 854, 881, or 883) to initiate a process for removing the second color (e.g., a highlight color) from a first avatar feature (e.g., 805-1, 805-3, or 805-4) (e.g., the avatar's hair). In some embodiments, the selectable option for initiating the process for removing the second color from the first avatar feature is displayed while the first avatar feature (e.g., 805-1, 805-3, or 805-4) includes the second color (e.g., while the second color is applied to the first avatar feature). Displaying a selectable option for initiating the process for removing the second color from the first avatar feature while the first avatar feature includes the second color provides an additional control option for removing the second color without cluttering the user interface until additional displayed controls are desired, and avoids accidental input while the additional control option is not displayed. Improves usability of a computer system (e.g., 600 or 650) by providing additional control options for the computer system and avoiding accidental input without cluttering the user interface with additional displayed controls, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate input when operating / interacting with the computer system and reducing user errors), and also reduces power usage and improves battery life of the computer system by allowing the user to use the system more quickly and efficiently.In some embodiments, in response to detecting input directed to the option, the computer system removes the second color from the first avatar feature and updates the display of the avatar editing interface, including displaying a representation of the virtual avatar including the first avatar feature without the second color (and with the first color), displaying a plurality of selectable options including respective representations of the first avatar feature without the second color (and with the first color), and displaying controls for modifying the first color (and ceasing to display controls for modifying the second color). In some embodiments, the option to remove the second color is displayed for some avatar features and not for other avatar features. For example, in some embodiments, an option to remove color from a body part of the avatar (e.g., the avatar's hair highlight color, eye color, and / or skin color) is displayed, but an option to remove color from an accessory of the avatar (e.g., clothing such as a hat, shirt, and / or glasses) is not displayed.

[0217] In some embodiments, the first avatar feature is an accessory (e.g., 805-4) (e.g., an item of clothing such as a hat, shirt, glasses, etc.) of the virtual avatar (e.g., 805). In some embodiments, the first avatar feature is a part of the virtual avatar's body (e.g., 805-1, 805-3) (e.g., a part of the avatar's body such as the avatar's eyes, hair, etc.).

[0218] In some embodiments, displaying an avatar editing interface (e.g., 804) including a first graphical interface object (e.g., 818, 846, or 870) includes, in accordance with a determination that the first avatar feature is a first type of avatar feature (e.g., 805-1) (e.g., avatar hair), displaying the first graphical interface object includes first text (e.g., 818-1) based on the first type of avatar feature (e.g., having text that reads "highlights") (e.g., having text that indicates how a second color is applied to the first avatar feature, or having text that indicates which of the first avatar feature is highlighted). and, in accordance with a determination that the first avatar feature is a second type of avatar feature (e.g., 805-4) (e.g., avatar clothing) that is different from the first type of avatar feature, the first graphical interface object includes second text (e.g., 870-1) that is different from the first text and is based on the second type of avatar feature (e.g., has text that reads "accent") (e.g., has text that indicates how the second color is applied to the first avatar feature or indicates which portions of the first avatar feature receive the second color). When the first avatar feature is of a first type, a first graphical interface object including first text based on the avatar feature of the first type is displayed, and when the first avatar feature is of a second type, a first graphical interface object including second text different from the first text and based on the avatar feature of the second type is displayed, thereby providing feedback to a user of the computer system (e.g., 600 or 650) regarding the functionality of a control associated with the first graphical interface object depending on the type of the first avatar feature.Providing improved feedback improves usability of the computer system, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and reduces power usage and improves battery life of the computer system by allowing the user to use the system more quickly and efficiently. In some embodiments, the text displayed on the first graphical interface object changes depending on which avatar feature is being modified to add a second color. For example, if the first avatar feature is the avatar's hair, the text may read "highlights." As another example, if the first avatar feature is the avatar's clothing, the text may read "accents." As yet another example, if the first avatar feature is the avatar's eyes, the text may read "color."

[0219] In some embodiments, prior to detecting input directed at the first graphical interface object (e.g., 818, 846, or 870), the avatar editing interface (e.g., 804) includes a control (e.g., 844) for modifying the first color (e.g., an eye color tab), the control for modifying the first color includes third text (e.g., 844-1) (e.g., "Eye Color"), and updating the display of the avatar editing interface includes displaying the control for modifying the first color with fourth text (e.g., 844-3) (e.g., "Left") that is different from the third text. Displaying the control for modifying the first color with fourth text that is different from the third text provides feedback to a user of the computer system (e.g., 600 or 650) regarding the functionality of the control for modifying the first color after the second color has been added to the first avatar feature. Providing improved feedback improves operability of the computer system, makes the user-system interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the computer system), and reduces power usage and improves battery life of the computer system by allowing the user to use the system more quickly and efficiently. In some embodiments, the first graphical interface object includes fifth text (e.g., "add color") before the computer system detects input directed at the first graphical interface object. In some embodiments, updating the display of the avatar editing interface includes displaying the first graphical interface object with sixth text (e.g., "right") that is different from the fifth text.

[0220] In some embodiments, the first avatar feature includes avatar hair (e.g., 805-4). In some embodiments, displaying controls for modifying a second color that was not displayed before detecting the input includes displaying one or more avatar hair highlight style options (e.g., 824) selectable to change the avatar's hair highlight style (e.g., an avatar hair highlight style displayed in the plurality of avatar hairstyle options) from a first highlight style (e.g., 824-1) (e.g., a default style or a user-customized style) to a second highlight style (e.g., 824-2) (e.g., a pre-defined style) that is different from the first style (and, optionally, a slider for adjusting a gradient of the avatar's hair highlight color, where the highlight style options are displayed adjacent to (e.g., below and / or above) the slider). Displaying one or more avatar hair highlight style options provides additional control options for changing the avatar's hair highlight style without cluttering the user interface with additional displayed controls until input is detected, and avoids accidental input while the additional control options are not displayed. In some embodiments, the method includes detecting a selection of a second avatar hair highlight style option while a first avatar hair highlight style option is selected and a plurality of avatar hairstyle options having a first highlight style and a second color are displayed, and in response to detecting the selection of the second avatar hair highlight style option, modifying the plurality of avatar hairstyle options from one having the first highlight style and the second color to one having the second highlight style and the second color. In some embodiments, the avatar hair highlight style option corresponds to a pre-defined highlight style (e.g., hair length, curl, straight, etc.) for which the user must provide one or more additional inputs directed to one or more additional controls and / or options to create.

[0221] In some embodiments, displaying one or more avatar hair highlight style options (e.g., 824) includes displaying a first representation (e.g., a preview of the avatar with the first hair highlight style and the second color) of a virtual avatar having a second color and a first hair highlight style corresponding to a first avatar hair highlight style option among the one or more avatar hair highlight style options (e.g., 824-1), and displaying a second representation (e.g., a preview of the avatar with the second hair highlight style and the second color) of a virtual avatar having the second color and a second hair highlight style corresponding to a second avatar hair highlight style option among the one or more avatar hair highlight style options (e.g., 824-2).

[0222] In some embodiments, displaying one or more avatar hair highlight style options (e.g., 824) includes displaying a first hair highlight style instruction (e.g., 824-1) (e.g., text or a label describing the highlight style (e.g., modern, classic, and / or gradient)) and displaying a second hair highlight style instruction (e.g., 824-2) (e.g., text or a label describing the highlight style (e.g., modern, classic, and / or gradient)).

[0223] In some embodiments, displaying a control for modifying the second color that was not displayed before detecting the input includes displaying a color slider (e.g., 814) having a selectable element (e.g., 814-1) adjustable to modify the second color (e.g., 880-2). In some embodiments, the computer system (e.g., 600, 650) receives input (e.g., input that moves the selectable element to the first position on the color slider to modify the second color) (e.g., 890) corresponding to a request to adjust the selectable element to a first position on the color slider (e.g., the position shown in FIG. 8T). In response to receiving the input corresponding to the request to adjust the selectable element to the first position on the color slider, the computer system performs the following items: In accordance with a determination that the first set of criteria is met (e.g., the first position is within a threshold distance from a color value on the color slider that matches the first color), the computer system adjusts the selectable element to a second position on the color slider that is different from the first position and corresponds to the first color (e.g., the right-most position on track 814-2 shown in FIG. 8U) (e.g., snaps the selectable element to a color value on the color slider that matches the first color and updates the second color to have the first color) (e.g., optionally generates a haptic and / or audio output). In accordance with a determination that the first set of criteria is not met (e.g., the first position is not within a threshold distance from a color value on the color slider that matches the first color), the computer system adjusts the selectable element to the first position on the color slider (e.g., moves the selectable element to a color value that corresponds to the first position on the color slider and updates the second color to have a color value that corresponds to the first position on the color slider). By adjusting the selectable element to a second position on the color slider that is different from the first position and corresponds to the first color in accordance with a determination that the first set of criteria is met, a user can easily and conveniently select a second color that matches the first color without having to match the colors using trial and error methods.Taking action when a set of conditions is met without requiring further user input enhances the usability of the device, makes the user-device interface more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the device and reducing user errors), and additionally reduces power usage and improves the device's battery life by allowing the user to use the device more quickly and efficiently.

[0224] It should be noted that the details of the process (e.g., FIG. 9) described above with respect to method 900 are also applicable in a similar manner to the methods described above. For example, method 700 optionally includes one or more of the features of the various methods described above with reference to method 900. For example, a color editing function may be used to edit the avatar sticker. For the sake of brevity, these details are not repeated.

[0225] The foregoing has been described with reference to specific embodiments for purposes of explanation. However, the exemplary discussion above is not intended to be exhaustive or to limit the invention to the precise form disclosed. Many modifications and variations are possible in light of the above teachings. The embodiments have been chosen and described to best explain the principles of the technology and its practical applications so that others skilled in the art can best utilize the technology and various embodiments with various modifications as suited to the particular applications intended.

[0226] Although the present disclosure and examples have been fully described with reference to the accompanying drawings, it should be noted that various changes and modifications will be apparent to those skilled in the art, and such changes and modifications are to be understood as being included within the scope of the present disclosure and examples, as defined by the claims.

[0227] As mentioned above, one aspect of the present technology is the collection and use of data available from various sources to display and / or edit an avatar. This disclosure contemplates that, in some cases, this collected data may include personal information data that uniquely identifies a particular person or that can be used to contact or locate a particular person. Such personal information data may include demographic data, location-based data, phone numbers, email addresses, social network IDs, home addresses, data or records regarding a user's health or fitness level (e.g., vital sign measurements, medication information, exercise information), birth date, or any other identifying or personal information.

[0228] This disclosure recognizes that the use of such personal information data in the present technology can be used to the benefit of the user. For example, personal information data can be used to deliver an avatar with a particular appearance or characteristics that the user is more interested in. Thus, the use of such personal information data allows for calculated control of the content delivered by the user. Furthermore, other uses of personal information data that benefit the user are also contemplated by this disclosure. For example, health and fitness data can be used to provide insight into the user's overall wellness, or can be used as proactive feedback to individuals using the technology in pursuit of wellness goals.

[0229] This disclosure contemplates that entities involved in the collection, analysis, disclosure, transmission, storage, or other use of such personal information data will adhere to robust privacy policies and / or privacy practices. Specifically, such entities should implement and consistently use privacy policies and practices that are generally recognized as meeting or exceeding industry or government requirements for maintaining the strict confidentiality of personal information data. Such policies should be easily accessible to users and should be updated as data collection and / or use changes. Personal information from users should be collected for the entity's lawful and legitimate use and should not be shared or sold except for those lawful uses. Furthermore, such collection / sharing should be carried out only after the user's informed consent is obtained. Furthermore, such entities should consider taking all necessary measures to protect and secure access to such personal information data and to ensure that others with access to the personal information data adhere to their privacy policies and procedures. Furthermore, such entities may be able to undergo third-party assessments to demonstrate their adherence to widely accepted privacy policies and practices. Furthermore, policies and practices should be tailored to the specific types of personal data collected and / or accessed and should comply with applicable laws and standards, including jurisdiction-specific considerations. For example, in the United States, collection of or access to certain health data may be governed by federal and / or state laws, such as the Health Insurance Portability and Accountability Act (HIPAA). Meanwhile, health data in other countries may be subject to other regulations and policies and should be addressed accordingly. Therefore, different privacy practices should be maintained in each country with respect to different types of personal data.

[0230] Notwithstanding the foregoing, the present disclosure also contemplates embodiments in which a user selectively blocks use of or access to personal information data. That is, the present disclosure contemplates that hardware and / or software elements may be provided to prevent or block access to such personal information data. For example, the present technology may be configured to allow a user to select to "opt in" or "opt out" of participating in the collection of personal information data. In addition to providing "opt-in" and "opt-out" options, the present disclosure contemplates providing notice regarding the access or use of personal information. For example, the user may be informed upon downloading an app that will access the user's personal information data, and then again immediately before the app accesses the user's personal information data.

[0231] Furthermore, it is the intent of this disclosure that personal information data should be managed and processed in a manner that minimizes the risk of unintentional or unauthorized access or use. Risk can be minimized by limiting data collection and deleting data when it is no longer needed. Additionally, where applicable in certain health-related applications, data anonymization can be used to protect user privacy. De-identification can be facilitated by removing certain identifiers (e.g., date of birth, etc.) where appropriate, controlling the amount or specificity of data stored (e.g., collecting location data at a city level rather than an address level), controlling how data is stored (e.g., aggregating data across users), and / or other methods.

[0232] Thus, while this disclosure broadly encompasses the use of personal information data to implement one or more various disclosed embodiments, this disclosure also contemplates that the various embodiments may be implemented without requiring access to such personal information data. That is, various embodiments of the present technology are not rendered inoperable by the absence of all or part of such personal information data. For example, avatar content may be selected and delivered to a user by inferring preferences based on non-personal information or minimal personal information, such as content requested by a device associated with the user, other non-personal information available to the device, or publicly available information.

Claims

1. 1. A method comprising: A computer system in communication with a display generation component and one or more input devices, comprising: via the display generation component, an avatar editing interface, a representation of a virtual avatar, the representation of the virtual avatar including a first avatar characteristic, the first avatar characteristic including a first color; a first graphical interface object selectable to initiate a process for modifying the appearance of the first avatar characteristic to include a second color; a plurality of selectable options for modifying a characteristic of the first avatar characteristic, the plurality of selectable options including respective representations of the first avatar characteristic, the first avatar characteristic including the first color; displaying an avatar editing interface, detecting input directed at the first graphical interface object via the one or more input devices while displaying the avatar editing interface; In response to detecting the input directed to the first graphical interface object, displaying an updated representation of the virtual avatar, the updated representation of the virtual avatar including the first avatar characteristics, the first avatar characteristics including the first color and the second color; displaying an updated plurality of selectable options, the updated plurality of selectable options including an updated representation of each of the first avatar characteristics, the first avatar characteristics including the first color and the second color; displaying a control for modifying the second color that was not displayed before detecting the input; and displaying a first option that, when selected, causes the computer system to remove the second color from the first avatar characteristic, the first option not being displayed before detecting the input, and the first option being displayed while the first avatar characteristic includes the second color; updating a display of the avatar editing interface; A method comprising:

2. The method of claim 1 , wherein the second color is selected from a set of color options in response to detecting the input directed at the first graphical interface object.

3. 2. The method of claim 1, wherein updating the display of the avatar editing interface includes displaying a second graphical interface object selectable to initiate a process for modifying the appearance of the first avatar feature to include a third color.

4. After updating the display of the avatar editing interface, the avatar editing interface includes a first selectable object associated with a first portion of the first avatar characteristic and a second selectable object associated with a second portion of the first avatar characteristic, and the method further comprises: receiving a set of one or more inputs including a fourth color selection; displaying the first avatar characteristic having the fourth color in response to receiving the set of one or more inputs including a selection of the fourth color; displaying the first portion of the first avatar feature having the fourth color in accordance with a determination that the first selectable object is in a selected state when the fourth color is selected; and displaying the second portion of the first avatar feature having the fourth color in accordance with a determination that the second selectable object is in a selected state when the fourth color is selected; and and displaying the The method of claim 1 further comprising:

5. wherein displaying the plurality of selectable options includes displaying the plurality of selectable options in a first location relative to the display generation component, and displaying the updated plurality of selectable options includes displaying the updated plurality of selectable options in a first region of the avatar editing interface, the method further comprising: receiving a set of one or more inputs after updating a display of the avatar editing interface; updating the representation of the virtual avatar in response to receiving the set of one or more inputs; pursuant to determining that the set of one or more inputs includes an input corresponding to a request to change the first color of the first avatar characteristic, changing the first color of the first avatar characteristic while displaying the plurality of selectable options in the first region of the avatar editing interface; changing the second color of the first avatar feature while displaying the updated plurality of selectable options in the first region of the avatar editing interface in accordance with a determination that the set of one or more inputs includes an input corresponding to a request to change the second color of the first avatar feature; and updating the The method of claim 1 further comprising:

6. The method of claim 1 , wherein the first avatar characteristic is an accessory of the virtual avatar.

7. The method of claim 1 , wherein the first avatar feature is a body part of the virtual avatar.

8. displaying the avatar editing interface including the first graphical interface object; In response to determining that the first avatar feature is a first type of avatar feature, the first graphical interface object includes first text based on the first type of avatar feature; In response to a determination that the first avatar characteristic is a second type of avatar characteristic different from the first type of avatar characteristic, the first graphical interface object includes second text different from the first text and based on the second type of avatar characteristic. The method of claim 1 , comprising:

9. before detecting the input directed to the first graphical interface object; the avatar editing interface includes a control for modifying the first color; the control for modifying the first color includes third text; updating the display of the avatar editing interface includes displaying the control for modifying the first color with fourth text different from the third text. The method of claim 1.

10. the first avatar characteristic includes avatar hair; displaying the control for modifying the second color that was not displayed before detecting the input includes displaying one or more avatar hair highlight style options selectable for changing an avatar's hair highlight style from a first highlight style to a second highlight style that is different from the first highlight style. The method of claim 1.

11. displaying hair highlight style options for the one or more avatars; displaying a first representation of the virtual avatar having the second color and a first hair highlight style corresponding to a first avatar hair highlight style option of the one or more avatar hair highlight style options; displaying a second representation of the virtual avatar having the second color and a second hair highlight style corresponding to a second avatar hair highlight style option among the one or more avatar hair highlight style options; The method of claim 10, comprising:

12. You can display one or more avatar hair highlight style options. displaying instructions for the first hair highlight style; displaying instructions for the second hair highlight style; and The method of claim 11 , comprising:

13. and displaying the control for modifying the second color that was not displayed before detecting the input includes displaying a color slider having a selectable element that is adjustable to modify the second color, the method comprising: receiving an input corresponding to a request to adjust the selectable element to a first position on the color slider; in response to receiving the input corresponding to a request to adjust the selectable element to the first position on the color slider; adjusting the selectable element to a second position on the color slider that is different from the first position and that corresponds to the first color in accordance with a determination that a first set of criteria is satisfied; adjusting the selectable element to the first position on the color slider according to a determination that the first set of criteria is not met; The method of claim 1 further comprising:

14. While displaying the updated representation of the virtual avatar, where the first avatar characteristic includes the first color and the second color, and while displaying the first option within the avatar editing interface, detecting a second input via the one or more input devices, the second input corresponding to a selection of the first option; In response to detecting the second input corresponding to selection of the first option, updating a display of the updated representation of the virtual avatar so that the first avatar characteristic includes the first color and excludes the second color; ceasing to display the first option; and The method of claim 1 further comprising:

15. A computer program product that, when run on a computer, causes the computer to carry out the method according to any one of claims 1 to 14.

16. 1. A computer system comprising: a memory for storing the computer program according to claim 15; one or more processors capable of executing the computer programs stored in the memory; wherein the computer system is configured to communicate with a display generation component and one or more input devices.

17. 1. A computer system in communication with a display generation component and one or more input devices, comprising: Means for carrying out the method according to any one of claims 1 to 14 A computer system comprising:

Images