A user interface for messaging conversations
Patent Information
- Application Number
- JP2023575411
- Authority / Receiving Office
- JP · JP
- Patent Type
- Applications
- Current Assignee / Owner
- Priority Date
- 2021-09-25
- Filing Date
- 2022-06-02
- Publication Date
- 2025-06-11
AI Technical Summary
Existing messaging interfaces struggle to efficiently display and interact with multiple content items, leading to increased user interaction time and potential battery power wastage, particularly in battery-operated devices, while also requiring redundant user inputs.
The implementation of methods to efficiently display and interact with multiple content items in a messaging conversation by using distinct presentation methods based on criteria, such as the number of content items, and allowing separate user interfaces for adding messaging activities, thereby reducing cognitive burden and processor/battery usage.
This approach enhances user experience by minimizing redundant user interactions and conserving battery power, while ensuring efficient handling of multiple content items in messaging conversations.
Smart Images

Figure 00000000_0000_ABST
Abstract
Description
[Technical field]
[0001] CROSS-REFERENCE TO RELATED APPLICATIONS This application claims the benefit of U.S. Provisional Patent Application No. 63 / 197,478, filed June 6, 2021, U.S. Patent Application No. 17 / 448,878, filed September 25, 2021, and U.S. Patent Application No. 17 / 485,354, filed September 25, 2021, the contents of which are incorporated by reference in their entirety herein for all purposes.
[0002] FIELD OF THE DISCLOSURE This disclosure relates generally to electronic devices that present messaging user interfaces and user interaction with such user interfaces. [Background technology]
[0003] In recent years, user interaction with electronic devices has increased significantly. These devices can be computers, tablet computers, televisions, multimedia devices, mobile devices, and other devices.
[0004] In some situations, a user may wish to use an electronic device to send and receive messages that include multiple content items (e.g., photos, videos, etc.) The electronic device may present a messaging user interface to facilitate the sending and receiving of such messages. Summary of the Invention
[0005] Some embodiments described in this disclosure are directed to a method of displaying multiple content items in a messaging user interface. Some embodiments described in this disclosure are directed to a method of adding a messaging activity associated with one or more content items included in a messaging conversation. Enhancing messaging interaction improves the user experience with the device and reduces user interaction time, which is particularly important when the input device is battery operated.
[0006] It is well understood that use of personal information should comply with privacy policies and practices generally recognized as meeting or exceeding industry or governmental requirements for maintaining user privacy. In particular, personal information data should be managed and handled in a manner that minimizes the risk of unintended or unauthorized access or use, and the nature of authorized uses should be clearly indicated to users.
[0007] A full description of these embodiments is provided in the Detailed Description section, and it should be understood that the above Summary of the Invention does not limit the scope of the present disclosure in any way.
[0008] For a better understanding of the various described embodiments, please refer to the following detailed description in conjunction with the following drawings, in which like reference numerals refer to corresponding parts throughout: [Brief description of the drawings]
[0009] [Figure 1A] FIG. 1 is a block diagram illustrating a portable multifunction device with a touch-sensitive display in accordance with some embodiments.
[0010] [Figure 1B] FIG. 2 is a block diagram illustrating example components for event processing according to some embodiments.
[0011] [Diagram 2] FIG. 1 illustrates a portable multifunction device having a touch screen according to some embodiments.
[0012] [Diagram 3] 1 is a block diagram of an exemplary multifunction device with a display and a touch-sensitive surface in accordance with some embodiments.
[0013] [Figure 4A] 1 illustrates an exemplary user interface for a menu of applications on a portable multifunction device according to some embodiments.
[0014] [Figure 4B] 1 illustrates an exemplary user interface for a multifunction device with a touch-sensitive surface that is separate from a display in accordance with some embodiments.
[0015] [Figure 5A] FIG. 1 illustrates a personal electronic device according to some embodiments.
[0016] [Figure 5B] FIG. 1 is a block diagram illustrating a personal electronic device according to some embodiments.
[0017] [Figure 5C] FIG. 1 illustrates example components of a personal electronic device having a touch-sensitive display and intensity sensor in accordance with some embodiments. [Figure 5D] FIG. 1 illustrates example components of a personal electronic device having a touch-sensitive display and intensity sensor in accordance with some embodiments.
[0018] [Figure 5E] 1 illustrates example components and a user interface of a personal electronic device according to some embodiments. [Figure 5F] 1 illustrates example components and a user interface of a personal electronic device according to some embodiments. [Figure 5G] 1 illustrates example components and a user interface of a personal electronic device according to some embodiments. [Figure 5H] 1 illustrates example components and a user interface of a personal electronic device according to some embodiments.
[0019] [Figure 6A] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6B] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6C] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6D] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6E] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6F] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6G] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6H] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6I] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6J] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6K] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6L] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6M] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6N] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6O] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6P] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6Q] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6R] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6S] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6T] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6U] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6V] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6W] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6X] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6Y] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6Z] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6AA] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6BB] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6CC] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6DD] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6EE] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6FF] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6GG] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6HH]1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6II] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 6JJ] 1 illustrates various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure.
[0020] [Figure 7] 1 is a flow diagram illustrating a method for displaying multiple content items in a messaging conversation according to some embodiments.
[0021] [Figure 8A] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8B] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8C] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8D] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8E] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8F] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8G] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8H] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8I] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8J] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8K] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8L] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8M] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8N] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8O] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8P] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8Q] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8R] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8S]1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8T] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8U] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8V] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8V-1] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8W] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8X] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8Y] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8Z] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8AA] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8BB] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8CC] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8DD] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8EE] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8FF] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8GG] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8HH] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8II] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8JJ] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8KK] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8LL] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8MM] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8NN] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8OO]1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8PP] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8QQ] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8RR] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8SS] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8TT] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8UU] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8VV] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8WW] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8XX] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8YY] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8ZZ] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8AAA] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8BBB] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8CCC] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8DDD] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8EEE] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8FFF] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8GGG] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8HHH] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8III] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8JJJ] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8KKK] 1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. [Figure 8LLL]1 illustrates various methods of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure.
[0022] [Figure 9] 1 is a flow diagram illustrating a method for interacting with multiple content items in a messaging conversation according to some embodiments. DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS
[0023] 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.
[0024] There is a need for an electronic device that provides an efficient way to display and interact with multiple content items in a messaging conversation. In some implementations, an electronic device receives an indication that an individual message including multiple content items has been added to a messaging conversation. In some implementations, the electronic device presents a representation of the multiple content items in a first manner if one or more criteria are met (e.g., if the individual message includes more than a respective number of content items). In some implementations, the electronic device presents a representation of the content items in a second manner, different from the first manner, if one or more criteria are not met (e.g., if the individual message does not include more than a respective number of content items). Such techniques can reduce the cognitive burden on a user using such a device while presenting a messaging user interface. Additionally, such techniques can reduce processor and battery power that would otherwise be wasted on redundant user input.
[0025] There is also a need for electronic devices that provide an efficient way of adding messaging activities associated with one or more content items to a messaging conversation. In some implementations, messaging activities are added to individual content items in a messaging conversation from a user interface that is separate from the messaging user interface. Such techniques can reduce the cognitive burden on a user who wishes to add messaging activities to individual content items in a messaging conversation. Furthermore, such techniques can reduce processor and battery power that would otherwise be wasted on redundant user input.
[0026] 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. These terms are only used to distinguish one element from another element. For example, a first touch can be called a second touch, and a second touch can be called a first touch, without departing from the scope of various embodiments described. Although a first touch and a second touch are both touches, they are not the same touch.
[0027] The terminology used in the description of the various embodiments described herein is for the purpose of describing particular embodiments only and is not intended to be limiting. In the description of the various embodiments described 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. It should also be understood that as used herein, the term "and / or" refers to and includes 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.
[0028] The term "if" is, optionally, interpreted as meaning "when" or "upon" or "in response to determining" or "in response to detecting," depending on the context. Similarly, the phrase "if it is determined" or "if [a stated condition or event] is detected" is, optionally, interpreted as meaning "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]," depending on the context.
[0029] 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, iPhone®, iPod Touch®, and iPad® devices from Apple Inc. of Cupertino, Calif. Optionally, other portable electronic devices, such as laptop or tablet computers having a touch-sensitive surface (e.g., a touchscreen display and / or a 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 a touchpad).
[0030] In some embodiments, device 100 is a portable 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 display via a CRT display, display via an LED display, or display via image projection. In some embodiments, the display generation component (e.g., an integrated display, touch screen 112, etc.) is integrated with the computer system. In some embodiments, the display generation component (e.g., an external monitor, a projection system, etc.) is separate from the computer system. As used herein, "displaying" content includes causing content (e.g., video data rendered or decoded by display controller 156) to be displayed 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.
[0031] 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.
[0032] The device typically supports a variety of applications, such as one or more of drawing applications, presentation applications, word processing applications, website creation applications, disc authoring applications, spreadsheet applications, gaming applications, telephony applications, video conferencing applications, email applications, instant messaging applications, training support applications, photo management applications, digital camera applications, digital video camera applications, web browsing applications, digital music player applications, and / or digital video player applications.
[0033] The 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 a variety of applications with user interfaces that are intuitive and transparent to the user.
[0034] Attention is now directed to embodiments of portable devices with touch-sensitive displays. FIG. 1A is a block diagram illustrating a portable multifunction device 100 having a touch-sensitive display system 112, according to some embodiments. Touch-sensitive display 112 may be conveniently 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 over one or more communication buses or signal lines 103.
[0035] 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 including at least four distinct values, and more typically including 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 the 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 that correspond 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 the intensity of contact as an attribute of user input may enable a user 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 on devices of reduced size that have limited footprint for displaying affordances.
[0036] 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 a user's hand), the tactile output generated 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 "down-click" or "up-click" of a physical actuator button. In some cases, a user feels a tactile sensation such as a "down-click" or "up-click" 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 the touch-sensitive surface is optionally interpreted or sensed by a user as "roughness" of the touch-sensitive surface, even when there is no change in the smoothness of the touch-sensitive surface. Such user interpretation of touch depends on the user's personal sensory perception, but there are many sensory perceptions of touch that are common to a majority of users. Thus, when a tactile output is described as corresponding to a particular sensory perception of a user (e.g., an "up click," a "down click," "roughness"), unless otherwise noted, 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.
[0037] It is 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 FIG. 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.
[0038] 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. A memory controller 122 optionally controls access to memory 102 by other components of device 100.
[0039] The peripherals interface 118 may be used to couple input and output peripherals of the device to the CPU 120 and memory 102. The one or more processors 120 operate or execute various software programs and / or instruction sets stored in the memory 102 to perform various functions and process data for the device 100. In some embodiments, the peripherals interface 118, the CPU 120, and the memory controller 122 are optionally implemented on a single chip, such as the chip 104. In some other embodiments, they are optionally implemented on separate chips.
[0040] The radio frequency (RF) circuitry 108 transmits and receives RF signals, also referred to as electromagnetic signals. The 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. The RF circuitry 108 optionally includes well-known circuits 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. The RF circuitry 108 optionally communicates by wireless communication with networks, such as the Internet, also referred to as 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 (EV-DO), and other related technologies.Wireless technology includes, but is not limited to, wireless technology such as wireless LAN, wireless technology such as wireless technology with a cellular network (WAN), wireless technology such as wireless technology with a cellular network (WAN-CDMA), wireless technology such as wireless technology with a cellular network (WAN-SWAN ... The present invention may use any of a number of communications standards, protocols, and technologies, including Session Initiation Protocol for Instant Messaging and Presence Leveraging Extensions (XMPP), Session Initiation Protocol for Instant Messaging and Presence Leveraging Extensions (SIMPLE), Instant Messaging and Presence Service (IMPS), and / or Short Message Service (SMS), or any other suitable communications protocol, including communications protocols not yet developed as of the filing date of this application.
[0041] The audio circuit 110, speaker 111, and microphone 113 provide an audio interface between a user and the device 100. The audio circuit 110 receives audio data from the peripherals interface 118, converts the audio data into an electrical signal, and transmits the electrical signal to the speaker 111. The speaker 111 converts the electrical signal into human audible sound waves. The audio circuit 110 also receives an electrical signal converted from the sound waves by the microphone 113. The audio circuit 110 converts the electrical signal into audio data, and transmits the audio data to the peripherals interface 118 for processing. The audio data is optionally retrieved from and / or transmitted to the memory 102 and / or the RF circuit 108 by the peripherals interface 118. In some embodiments, the 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., one-ear or binaural headphones) and an input (e.g., a microphone).
[0042] The I / O subsystem 106 couples input / output peripherals on the device 100, such as the touch screen 112 and other input control devices 116, to a peripheral interface 118. The I / O subsystem 106 optionally includes a display controller 156, a light sensor controller 158, an intensity sensor controller 159, a haptic feedback controller 161, and one or more input controllers 160 for other input or control devices. The one or more input controllers 160 receive / send electrical signals from / to the other input control devices 116. The 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 alternative embodiments, the 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 (e.g., via wireless communication over wired communication) with one or more input devices. 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 a user's gestures (e.g., hand 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.
[0043] A quick press of the push button optionally unlocks the touch screen 112 or optionally initiates a process of unlocking the device using gestures on the touch screen, 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 the 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 touch screen 112 is used to implement virtual or soft buttons and one or more soft keyboards.
[0044] Touch-sensitive display 112 provides an input and output interface between the device and a user. Display controller 156 receives and / or transmits electrical signals from 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.
[0045] 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 breaking of contact) on touchscreen 112 and translates the detected contacts into interactions with user interface objects (e.g., one or more soft keys, 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.
[0046] 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 detect contact and any movement or interruption thereof using any of a number of now known or later developed touch sensing technologies, 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, Calif.
[0047] The touch-sensitive display in some embodiments of touchscreen 112 is optionally similar to a multi-touch-sensing touchpad as 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 in its entirety. However, whereas touchscreen 112 displays visual output from device 100, a touch-sensitive touchpad does not provide visual output.
[0048] The touch-sensitive display in some embodiments of the 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 No. 11 / 228,758, filed Sep. 16, 2005, entitled "Virtual Input Device Placement On A Touch Screen User Interface," (7) U.S. patent application Ser. No. 11 / 228,700, filed Sep. 16, 2005, entitled "Operation Of A Computer With A Touch Screen Interface," (8) U.S. patent application Ser. No. 11 / 228,737, filed Sep. 16, 2005, entitled "Activating Virtual Keys Of A Touch-Screen Virtual Keyboard," and (9) U.S. patent application Ser. No. 11 / 367,749, filed Mar. 3, 2006, entitled "Multi-Functional Hand-Held Device," all of which are incorporated herein by reference in their entirety.
[0049] Touchscreen 112 optionally has a video resolution of 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 appendage, such as a stylus, finger, etc. In some embodiments, the user interface is designed to operate primarily using finger-based contacts 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 rough finger input into precise pointer / cursor positions or commands to perform the action desired by the user.
[0050] In some embodiments, in addition to a touchscreen, device 100 optionally includes a touchpad (not shown) 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.
[0051] 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., batteries, alternating current (AC)), a recharging system, power outage detection circuitry, power converters or inverters, power status indicators (e.g., light emitting diodes (LEDs)), and any other components associated with the generation, management, and distribution of power within a portable device.
[0052] 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 or video images. In some embodiments, the optical sensor is located on the back side of device 100 opposite touchscreen display 112 on the front side of the device, so that the touchscreen display can be used as a viewfinder for still and / or video capture. In some embodiments, the optical sensor is located on the front side of the device such that an image of the user is optionally captured for video conferencing while the user views other video conferencing 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), such that a single optical sensor 164 is used for both video conferencing and still image and / or video capture, along with a touchscreen display.
[0053] 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, electrical 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 a 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 located on the front of device 100.
[0054] 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 an input controller 160 within I / O subsystem 106. The proximity sensor 166 optionally functions as described in U.S. patent application Ser. No. 11 / 241,839, "Proximity Detector In Handheld Device," Ser. No. 11 / 240,788, "Proximity Detector In Handheld Device," Ser. No. 11 / 620,702, "Using Ambient Light Sensor To Augment Proximity Sensor Output," Ser. No. 11 / 586,862, "Automated Response To And Sensing Of User Activity In Portable Devices," and Ser. No. 11 / 638,251, "Methods And Systems For Automatic Configuration Of Peripherals," all of which are incorporated herein by reference in their entireties. In some embodiments, the proximity sensor turns off and disables the touchscreen 112 when the multifunction device is placed near the user's ear (e.g., when the user is making a phone call).
[0055] Device 100 also optionally includes one or more tactile output generators 167. FIG. 1A shows a tactile output generator 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 commands 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, the 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.
[0056] 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. Device 100 optionally includes a magnetometer (not shown), in addition to accelerometer(s) 168, and a GPS (or GLONASS or other global navigation system) receiver (not shown) for obtaining information regarding the location and orientation (e.g., portrait or landscape) of device 100.
[0057] In some embodiments, the software components stored in memory 102 include an operating system 126, a communication module (or instruction set) 128, a touch / motion module (or instruction set) 130, a graphics module (or instruction set) 132, a text input module (or instruction set) 134, a Global Positioning System (GPS) module (or instruction set) 135, and applications (or instruction sets) 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 an active application state indicating which applications, if any, are currently active, a display state indicating which applications, views, or other information are occupying various regions of touchscreen display 112, a sensor state including information obtained from various sensors and input control devices 116 of the device, and location information regarding the location and / or orientation of the device.
[0058] 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.
[0059] The communications module 128 also includes various software components for facilitating communication with other devices via one or more external ports 124 and for processing data received by the RF circuitry 108 and / or the external ports 124. The external ports 124 (e.g., Universal Serial Bus (USB), FIREWIRE, etc.) are adapted to couple to other devices directly or indirectly via a network (e.g., the Internet, wireless LAN, etc.). In some embodiments, the external ports are multi-pin (e.g., 30-pin) connectors that are the same as or similar to and / or compatible with the 30-pin connector used on iPod® (a trademark of Apple Inc.) devices.
[0060] Contact / motion module 130, optionally in conjunction with display controller 156, detects contact with touch screen 112 and other touch-sensing devices (e.g., a touchpad or a physical click wheel). Contact / motion module 130 includes various software components for performing various operations related to detecting contact, such as determining whether contact occurs (e.g., detecting a finger-down event), determining the strength 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 movement of the contact and tracking the movement across the touch-sensitive surface (e.g., detecting one or more finger-dragging 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., one 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 a touchpad.
[0061] In some embodiments, the 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 thresholds of a particular physical actuator, but can be adjusted without modifying the physical hardware of the 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).
[0062] Contact / motion module 130 optionally detects gesture input by a user. Different gestures on a touch-sensitive surface have different contact patterns (e.g., different movements, timing, and / or strength of detected contacts). Thus, gestures are optionally detected by detecting a particular contact pattern. 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., at 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.
[0063] 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 "graphics" includes any object that can be displayed to a user, including, but not limited to, characters, web pages, icons (such as user interface objects including soft keys), digital images, video, animations, and the like.
[0064] In some embodiments, graphics module 132 stores data representing the 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, as appropriate, coordinate data and other graphic property data, from an application or the like, and then generates screen image data for output to display controller 156.
[0065] 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.
[0066] 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).
[0067] 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).
[0068] 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, A 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, as well as user-created widgets 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.
[0069] 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.
[0070] The contacts module 137, along with the touch screen 112, the display controller 156, the contact / motion module 130, the graphics module 132, and the text input module 134, are optionally used to manage an address book or contact list (e.g., stored in the memory 102 or in the application internal state 192 of the contacts module 137 in the memory 370), including adding a name(s) to the address book, deleting a name(s) from the address book, associating a phone number(s), email address(es), address(es), or other information with a name, associating a picture with a name, 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.
[0071] Telephone module 138, in conjunction with RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, touch screen 112, display controller 156, contact / motion module 130, graphics module 132, and text input module 134, is optionally used to enter sequences of characters corresponding to telephone numbers, 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 a call is completed. As previously mentioned, wireless communication optionally uses any of a number of communication standards, protocols, and technologies.
[0072] Video conferencing module 139 includes executable instructions to cooperate with RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, touch screen 112, display controller 156, optical sensor 164, optical sensor controller 158, contact / motion module 130, graphics module 132, text input module 134, contact module 137, and telephone module 138 to initiate, conduct, and end a video conference between a user and one or more other participants according to the user's commands.
[0073] The email client module 140, in conjunction with the RF circuitry 108, the touch screen 112, the display controller 156, the contact / motion module 130, the graphics module 132, and the text input module 134, contains executable instructions for composing, sending, receiving, and managing emails in response to user commands. In conjunction with the image management module 144, the email client module 140 greatly facilitates the creation and sending of emails with still or video images captured by the camera module 143.
[0074] Instant messaging module 141 includes executable instructions in cooperation with RF circuitry 108, touch screen 112, display controller 156, contact / motion module 130, graphics module 132, and text input module 134 for entering sequences of characters corresponding to instant messages, modifying previously entered characters, sending 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), receiving instant messages, and viewing received instant messages. In some embodiments, sent and / or received instant messages optionally include graphics, photos, audio files, video files, and / or other attachments as 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).
[0075] In conjunction with the RF circuitry 108, touch screen 112, display controller 156, touch / 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., having time, distance, and / or calorie burn goals), communicate with training sensors (sports devices), receive training sensor data, calibrate sensors used to monitor the workouts, select and play music for the workouts, and display, store, and transmit training data.
[0076] Camera module 143, in conjunction with touch screen 112, display controller 156, optical sensor(s) 164, optical sensor controller 158, contact / motion module 130, graphics module 132, and image management module 144, contains executable instructions to capture and store still images or video (including video streams) in memory 102, modify characteristics of the still images or video, or delete still images or video from memory 102.
[0077] Image management module 144, in conjunction with touch screen 112, display controller 156, contact / motion module 130, graphics module 132, text input module 134, and camera module 143, contains executable instructions for arranging, modifying (e.g., editing), or otherwise manipulating, labeling, deleting, presenting (e.g., in a digital slide show or album), and storing still and / or video images.
[0078] 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.
[0079] 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 a calendar and data associated with the calendar (e.g., calendar items, to-do lists, etc.) according to a user's instructions.
[0080] Widget module 149, in conjunction with RF circuitry 108, touch screen 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 (e.g., user-created widget 149-6) created by a user. In some embodiments, a widget includes a Hypertext Markup Language (HTML) file, a Cascading Style Sheets (CSS) file, and a JavaScript file. In some embodiments, a widget includes an Extensible Markup Language (XML) file and a JavaScript file (e.g., Yahoo! Widget).
[0081] 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).
[0082] The search module 151, in cooperation with the touch screen 112, the display controller 156, the contact / motion module 130, the graphics module 132, and the text input module 134, includes executable instructions for searching 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.
[0083] Video and music player module 152 includes executable instructions that cooperate 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 to 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.).
[0084] The note module 153 includes executable instructions for cooperating 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 instructions.
[0085] Map module 154, in conjunction with RF circuitry 108, touch screen 112, display controller 156, touch / 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 the 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 a user's instructions.
[0086] 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, includes 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, entitled "Portable Multifunction Device, Method, and Graphical User Interface for Playing Online Videos," filed June 20, 2007, and U.S. Patent Application No. 11 / 968,067, entitled "Portable Multifunction Device, Method, and Graphical User Interface for Playing Online Videos," filed December 31, 2007, the contents of which are incorporated herein by reference in their entireties.
[0087] The above-identified modules and applications each correspond to a set of executable instructions that perform one or more of the functions previously described and methods described in this application (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 separate software programs, procedures, or modules, and thus, in various embodiments, various subsets of these modules are optionally combined or otherwise reconfigured. 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.
[0088] In some embodiments, device 100 is a device in which operation of a predefined set of functions on the device is performed exclusively 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.
[0089] 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, a home menu, or a 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.
[0090] 1B is a block diagram illustrating example 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., in operating system 126) and a separate application 136-1 (e.g., any of applications 137-151, 155, 380-390 described above).
[0091] Event sorter 170 receives the event information and determines which application 136-1 to deliver the event information to and application view 191 of application 136-1. Event sorter 170 includes an event monitor 171 and an 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) is currently active, and application internal state 192 is used by event sorter 170 to determine which application view 191 the event information is delivered to.
[0092] 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 a user to return to a previous state or view of application 136-1, and redo / undo cues of previous actions taken by the user.
[0093] Event monitor 171 receives event information from peripherals interface 118. The event information includes information about a sub-event (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.
[0094] 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 a predetermined duration).
[0095] In some embodiments, the event sorter 170 also includes a hit view determination module 172 and / or an active event recognizer determination module 173 .
[0096] 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.
[0097] 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 a particular application) in which the touch is detected optionally correspond to programmatic levels within the application's programmatic or view hierarchy. For example, the lowest level view in which the touch is detected is optionally referred to as the hit view, and the set of events that are recognized as suitable inputs is optionally determined based at least in part on the hit view of the initial touch that initiates the touch gesture.
[0098] 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 hierarchical manner, 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 sequence 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.
[0099] Active event recognizer determination module 173 determines which view or views 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 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.
[0100] 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 the 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 picked up by individual event receivers 182.
[0101] In some embodiments, operating system 126 includes event sorter 170. Alternatively, application 136-1 includes event sorter 170. In yet 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.
[0102] In some embodiments, application 136-1 includes multiple event handlers 190 and one or more application views 191, each including instructions for handling touch events occurring 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, a separate 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 (not shown) or a higher level object from which application 136-1 inherits methods and other properties. In some embodiments, a separate event handler 190 includes one or more of a data updater 176, an object updater 177, a 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.
[0103] 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 at least a subset of metadata 183 and event delivery instructions 188 (optionally including sub-event delivery instructions).
[0104] 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 referred to as the device's attitude).
[0105] The event comparator 184 compares the event information to 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 sequence of predefined sub-events), such as event 1 (187-1) and event 2 (187-2). In some embodiments, sub-events within an event (187) include, for example, touch start, touch end, touch move, touch cancel, 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 for a given phase (touch start), a first lift off (touch end) for a given phase, a second touch on a displayed object for a given phase (touch start), and a second lift off (touch end) for a given phase. In another example, a definition of event 2 (187-2) is a drag on a displayed object. A drag includes, for example, a touch (or contact) on a displayed object to a predetermined stage, a movement of the touch across the touch-sensitive display 112, and a lift-off of the touch (end of the touch). In some embodiments, the event also includes information regarding one or more associated event handlers 190.
[0106] In some embodiments, event definition 187 includes definitions of events for individual user interface objects. In some embodiments, event comparator 184 performs a hit test to determine which user interface object is associated with a sub-event. For example, when 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.
[0107] 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 the sequence of sub-events corresponds to the event type of the event recognizer.
[0108] 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 and thereafter 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.
[0109] 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 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 a view or programmatic hierarchy.
[0110] In some embodiments, the individual event recognizer 180 activates an event handler 190 associated with an event when one or more particular 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) the 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 predefined process.
[0111] 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.
[0112] 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.
[0113] In some embodiments, event handler(s) 190 includes or has 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.
[0114] 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, not all of which are initiated on a touch screen. For example, mouse movements and mouse button presses, contact movements such as tapping, dragging, scrolling on a touchpad, optionally coordinated with single or multiple presses or holds of a keyboard, pen stylus input, device movements, verbal commands, detected eye movements, biometric input, and / or any combination thereof, are optionally utilized as inputs corresponding to sub-events that define the event to be recognized.
[0115] FIG. 2 illustrates portable multifunction device 100 having touch screen 112, according to some embodiments. The touch screen optionally displays one or more graphics in 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, upwards and / or downwards), and / or rolling (right to left, left to right, upwards and / or downwards) 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, a swipe gesture sweeping over an application icon optionally does not select the corresponding application when the gesture corresponding to selection is a tap.
[0116] In some embodiments, the stylus 203 is an active device and includes one or more electronic circuits. For example, the stylus 203 includes one or more sensors and one or more communication circuits (such as the communication module 128 and / or the RF circuitry 108). In some embodiments, the stylus 203 includes one or more processors and a power system (e.g., similar to the power system 162). In some embodiments, the stylus 203 includes an accelerometer (such as the accelerometer 168), a magnetometer, and / or a gyroscope that can determine the position, angle, location, and / or other physical characteristics of the stylus 203 (e.g., whether the stylus is positioned downward, tilted toward or away from the device, and / or positioned near or far from the device). In some embodiments, the stylus 203 communicates with the electronic device (e.g., via the communication circuitry, via a wireless communication protocol such as Bluetooth) and transmits sensor data to the electronic device. In some embodiments, the stylus 203 can determine whether the user is holding the device (e.g., via the accelerometer or other sensors). In some embodiments, the stylus 203 can accept tap input (e.g., a single tap or a double tap) on the stylus 203 (e.g., received by an accelerometer or other sensor) from a user and can interpret the input as a command or request to perform a function or to change to a different input mode.
[0117] 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 executing on device 100. Alternatively, in some embodiments, the menu button is implemented as a soft key within a GUI displayed on touch screen 112.
[0118] In some embodiments, device 100 includes touch screen 112, menu button 204, push button 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 port 124 for docking / charging. Push button 206 is optionally used to power the device on / off by pressing and holding the button down for a predefined period of time, to lock the device by pressing and releasing the button before the predefined time has elapsed, and / or to unlock the device or initiate an unlocking process. In an alternative embodiment, device 100 also accepts verbal input via microphone 113 to activate or deactivate some functions. Device 100 also optionally includes one or more contact intensity sensors 165 for detecting the intensity of a contact on touch screen 112 and / or one or more tactile output generators 167 for generating a tactile output to a user of device 100.
[0119] 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 that interconnect these components. Communication bus 320 optionally includes circuitry (sometimes referred to as 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 (e.g., similar to tactile output generator(s) 167 described above with reference to FIG. 1A) for generating tactile output on device 300, 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.
[0120] 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 programs (e.g., instruction sets) need not be implemented as separate software programs, procedures, or modules, and 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.
[0121] Attention is now optionally directed to embodiments of user interfaces implemented, for example, on portable multifunction device 100.
[0122] 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; ○ An 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,” which provides access to settings for the device 100 and its various applications 136 .
[0123] 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 the 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.
[0124] 4B shows an example user interface on a device (e.g., device 300 of FIG. 3) that has a 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 to a user of device 300.
[0125] Although some of the following examples are given with reference to input on touch screen display 112 (wherein the touch-sensitive surface and display are combined), 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 manner, 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 is to be understood that similar methods are optionally used for the other user interfaces described herein.
[0126] In addition, 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 moving 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 to detect the contact) while the cursor is located 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 mice and finger contacts are optionally used simultaneously.
[0127] FIG. 5A illustrates an exemplary personal electronic device 500. Device 500 includes a 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 touch screen 504. Alternatively, or in addition to touch screen 504, device 500 has a display and a touch-sensitive surface. Similar to devices 100 and 300, in some embodiments, touch screen 504 (or touch-sensitive surface) optionally includes one or more intensity sensors that detect the intensity of a contact (e.g., a touch) being applied. The one or more intensity sensors of touch screen 504 (or touch-sensitive surface) can provide output data that represents the intensity of the touch. A user interface of device 500 can respond to touch(s) based on their intensity, meaning that touches of different intensities can invoke different user interface actions on device 500.
[0128] 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, entitled "Device, Method, and Graphical User Interface for Displaying User Interface Objects Corresponding to an Application," published as International Publication No. WO / 2013 / 169849, and International Patent Application No. PCT / US2013 / 069483, filed November 11, 2013, published as International Publication No. 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.
[0129] In some embodiments, device 500 has one or more input mechanisms 506 and 508. Input mechanisms 506 and 508, if included, can 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, can 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 a user to wear device 500.
[0130] FIG. 5B illustrates an exemplary personal electronic device 500. In some embodiments, the device 500 can include some or all of the components described with respect to FIGS. 1A, 1B, and 3. The device 500 has a bus 512 that operably couples an I / O section 514 to one or more computer processors 516 and a memory 518. The I / O section 514 can be connected to a display 504, which can have a touch-sensing component 522 and, optionally, an intensity sensor 524 (e.g., a contact intensity sensor). In addition, the 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. The device 500 can include input mechanisms 506 and / or 508. The 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.
[0131] In some embodiments, the input mechanism 508 is optionally a microphone. The 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 operatively connected to the I / O section 514.
[0132] 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 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 for use 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, as well as persistent solid-state memory such as flash, solid-state drives, and the like. The 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.
[0133] Furthermore, in methods described herein in which one or more steps are contingent on one or more conditions being met, 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 steps of the method are contingent are met in different iterations of the method. For example, if a method requires performing a first step if a condition is met and performing a second step if the condition is not met, one skilled in the art would understand that the steps recited in the claim are repeated in a particular order until the conditions are met and are no longer met. Thus, a method described with one or more steps that are dependent on one or more conditions being met can be rewritten as a method that is repeated until each condition recited in the method is met. 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 steps of the method until all conditions on which the steps of the method are contingent are met. Those skilled in the art will also appreciate 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.
[0134] 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.
[0135] The term "focus selector" as used herein 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 an 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 (e.g., touch-sensitive display system 112 of FIG. 1A or touchscreen 112 of FIG. 4A) that allows direct interaction with user interface elements on the touchscreen display, a detected contact on the touchscreen acts as the "focus selector," such that when an 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 a 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 that 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 which element of the user interface the user intends to interact with).For example, location of a focus selector (e.g., a 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).
[0136] 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 predefined number of intensity samples, i.e., a set of intensity samples collected during a predefined time (e.g., 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10 seconds) associated with a predefined event (e.g., after detecting a contact, before detecting a lift-off of the contact, before or after detecting the start of movement of the contact, before detecting an 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 a contact is optionally based on one or more of a maximum intensity of the contact, a mean value of the intensity of the contact, an average value of the intensity of the contact, a top 10 percentile value of the intensity of the contact, a half maximum intensity value of the contact, a 90 percent maximum intensity value 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 not exceeding the first threshold results in a first action, a contact having a characteristic intensity above the first intensity threshold but not exceeding 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 the first action or the second action should be performed, but rather is used to determine whether one or more actions should be performed (e.g., whether to perform an individual action or to forgo performing an individual action).
[0137] FIG. 5C illustrates detecting multiple contacts 552A-552E on the touch-sensitive display screen 504 by multiple intensity sensors 524A-524D. FIG. 5C additionally includes an intensity diagram showing the current intensity measurements of the intensity sensors 524A-524D versus intensity units. In this example, the intensity measurements of the intensity sensors 524A and 524D are each 9 intensity units, and the intensity measurements of the intensity sensors 524B and 524C are each 7 intensity units. In some implementations, the aggregate intensity is the sum of the intensity measurements of the multiple intensity sensors 524A-524D, which in this example is 32 intensity units. In some embodiments, each contact is assigned an individual intensity that is a portion of the aggregate intensity. FIG. 5D illustrates assigning an aggregate intensity to the contacts 552A-552E based on their distance from the center of force 554. In this example, each of contacts 552A, 552B, and 552E is assigned a contact intensity of 8 intensity units of the aggregate intensity, and each of contacts 552C and 552D is assigned a contact intensity of 4 intensity units of the aggregate intensity. More generally, in some implementations, each contact j is assigned an individual intensity Ij that is a portion of the aggregate intensity A according to a predefined mathematical function Ij=A(Dj / ΣDi), where Dj is the distance from the center of force to the individual contact j, and ΣDi is the sum of the distances from the center of force to all respective contacts (e.g., from i=1 to the end). The operations described with reference to Figures 5C-5D can be performed using electronic devices similar or identical to device 100, 300, or 500. In some embodiments, the characteristic intensity of the contact is based on one or more intensities of the contact. In some embodiments, an intensity sensor is used to determine a single characteristic intensity (e.g., a single characteristic intensity of a single contact). Note that the intensity diagrams are not part of the displayed user interface, but are included in FIGS. 5C-5D as an aid to the reader.
[0138] In some embodiments, a portion of the gesture is identified for purposes of determining the characteristic intensity. For example, the touch-sensitive surface optionally receives successive swipe contacts that transition from a start location to an end location where the intensity of the contact increases. In this example, the characteristic intensity of the contact at the end location is optionally based on only a portion of the successive swipe contacts (e.g., only the portion of the swipe contact at the end location) rather than the entire swipe contact. In some embodiments, a smoothing algorithm is optionally applied to the intensity of the swipe contact prior to determining the characteristic intensity of the contact. For example, the smoothing algorithm optionally includes one or more of an unweighted moving average smoothing algorithm, a triangular smoothing algorithm, a median filter smoothing algorithm, and / or an exponential smoothing algorithm. In some circumstances, these smoothing algorithms eliminate narrow spikes or dips in the swipe contact intensity for purposes of determining the characteristic intensity.
[0139] The intensity of the contact on the touch-sensitive surface is optionally characterized against one or more intensity thresholds, such as a contact-detection intensity threshold, a light pressure intensity threshold, a deep pressure intensity threshold, and / or one or more other intensity thresholds. In some embodiments, the light pressure intensity threshold corresponds to an intensity at which the device performs an action normally associated with clicking a physical mouse button or trackpad. In some embodiments, the deep pressure intensity threshold corresponds to an intensity at which the device performs an action different from an action normally associated with clicking a physical mouse button or trackpad. In some embodiments, when a contact is detected having a characteristic intensity below the light pressure intensity threshold (e.g., and above a nominal contact-detection intensity threshold below which the contact is not detected), the device moves the focus selector in accordance with the movement of the contact on the touch-sensitive surface without performing an action associated with the light pressure intensity threshold or the deep pressure intensity threshold. In general, unless otherwise specified, these intensity thresholds are consistent among various sets of values for a user interface.
[0140] An increase in the characteristic intensity of a contact from an intensity below the light pressure intensity threshold to an intensity between the light pressure intensity threshold and the deep pressure intensity threshold may be referred to as inputting a "light press." An increase in the characteristic intensity of a contact from an intensity below the deep pressure intensity threshold to an intensity above the deep pressure intensity threshold may be referred to as inputting a "deep press." An increase in the characteristic intensity of a contact from an intensity below the contact detection intensity threshold to an intensity between the contact detection intensity threshold and the light pressure intensity threshold may be referred to as detecting a contact on the touch surface. A decrease in the characteristic intensity of a contact from an intensity above the contact detection intensity threshold to an intensity below the contact detection intensity threshold may be referred to as detecting a lift-off of the contact from the touch surface. In some embodiments, the contact detection intensity threshold is zero. In some embodiments, the contact detection intensity threshold is greater than zero.
[0141] In some embodiments described herein, one or more actions are performed in response to detecting a gesture including an individual pressure input or in response to detecting an individual pressure input performed by an individual contact (or multiple contacts), where the individual pressure input is detected based at least in part on detecting an increase in intensity of the contact (or multiple contacts) above a pressure input intensity threshold. In some embodiments, the individual action is performed in response to detecting an increase in intensity of the individual contact above a pressure input intensity threshold (e.g., a "downstroke" of the individual pressure input). In some embodiments, the pressure input includes an increase in intensity of the individual contact above a pressure input intensity threshold followed by a decrease in intensity of the contact below the pressure input intensity threshold, where the individual action is performed in response to detecting a subsequent decrease in intensity of the individual contact below the pressure input intensity threshold (e.g., an "upstroke" of the individual pressure input).
[0142] 5E-5H illustrate detection of a gesture including a press input corresponding to an increase in intensity of contact 562 from an intensity below a light pressure intensity threshold (e.g., "ITL") in FIG. 5E to an intensity above a deep pressure intensity threshold (e.g., "ITD") in FIG. 5H. The gesture performed by contact 562 is detected on touch-sensitive surface 560, and cursor 576 is displayed over application icon 572B corresponding to app2 on display user interface 570, which includes application icons 572A-572D displayed within predefined region 574. In some embodiments, the gesture is detected on touch-sensitive display 504. An intensity sensor detects the intensity of the contact on touch-sensitive surface 560. The device determines that the intensity of contact 562 peaks above a deep pressure intensity threshold (e.g., "ITD"). Contact 562 is maintained on touch-sensitive surface 560. In response to detecting the gesture, contact 562 having an intensity above a deep pressure intensity threshold (e.g., "ITD") during the gesture causes reduced-scale representations 578A-578C (e.g., thumbnails) of recently opened documents to app2 to be displayed, as shown in Figures 5F-5H. In some embodiments, this intensity that is compared to one or more intensity thresholds is a characteristic intensity of the contact. Note that the intensity diagrams for contact 562 are not part of the displayed user interface, but are included in Figures 5E-5H as an aid to the reader.
[0143] In some embodiments, the display of representations 578A-578C includes an animation. For example, as shown in FIG. 5F, representation 578A is first displayed adjacent to application icon 572B. As the animation progresses, representation 578A moves upward and representation 578B is displayed adjacent to application icon 572B, as shown in FIG. 5G. Then, as shown in FIG. 5H, representation 578A moves upward, representation 578B moves upward toward representation 578A, and representation 578C is displayed adjacent to application icon 572B. Representations 578A-578C form an array above icon 572B. In some embodiments, the animation progresses as a function of the intensity of contact 562, as shown in FIG. 5F-5G, where representations 578A-578C appear and move upward as the intensity of contact 562 increases toward a deep pressure intensity threshold (e.g., "ITD"). In some embodiments, the intensity on which the animation progression is based is a characteristic intensity of the contact. The operations described with reference to FIGS. 5E-5H may be performed using an electronic device similar to or identical to device 100, 300, or 500.
[0144] In some embodiments, the device employs intensity hysteresis to avoid accidental inputs, sometimes referred to as "jitter," and the device defines or selects a hysteresis intensity threshold that has a predefined relationship to the pressure input intensity threshold (e.g., the hysteresis intensity threshold is X intensity units below the pressure input intensity threshold, or the hysteresis intensity threshold is 75%, 90%, or some reasonable percentage of the pressure input intensity threshold). Thus, in some embodiments, the pressure input includes an increase in the intensity of a discrete contact above the pressure input intensity threshold, followed by a decrease in the intensity of the contact below a hysteresis intensity threshold that corresponds to the pressure input intensity threshold, and a discrete action is performed in response to detecting a subsequent decrease in the intensity of the discrete contact below the hysteresis intensity threshold (e.g., an "upstroke" of the discrete pressure input). Similarly, in some embodiments, a pressure input is detected only when the device detects an increase in the intensity of the contact from an intensity below the hysteresis intensity threshold to an intensity above the pressure input intensity threshold, and optionally a subsequent decrease in the intensity of the contact to an intensity below the hysteresis intensity, and a distinct action is performed in response to detecting the pressure input (e.g., an increase in the intensity of the contact or a decrease in the intensity of the contact, as the case may be).
[0145] For ease of explanation, descriptions of operations performed in response to a press input associated with a press input intensity threshold, or a gesture including a press input, are optionally triggered in response to detecting any of an increase in the intensity of a contact above the press input intensity threshold, an increase in the intensity of a contact from an intensity below a hysteresis intensity threshold to an intensity above the press input intensity threshold, a decrease in the intensity of a contact below the press input intensity threshold, and / or a decrease in the intensity of a contact below a hysteresis intensity threshold corresponding to the press input intensity threshold. Further, in examples where an operation is described as being performed in response to detecting a decrease in the intensity of a contact below a press input intensity threshold, the operation is optionally performed in response to detecting a decrease in the intensity of a contact below a hysteresis intensity threshold corresponding to and lower than the press input intensity threshold.
[0146] As used herein, an "installed application" refers to a software application that has been downloaded onto an electronic device (e.g., devices 100, 300, and / or 500) and is ready to run (e.g., opened) on the device. In some embodiments, a downloaded application becomes an installed application by an installation program that extracts program portions from a downloaded package and integrates the extracted portions with the computer system's operating system.
[0147] As used herein, the terms "open application" or "running application" refer to a software application that has retained state information (e.g., as part of device / global internal state 157 and / or application internal state 192). An open or running application is, optionally, any one of the following types of applications: ● the active application currently displayed on the display screen of the device on which the application is being used; Background applications (or background processes) that are not currently displayed, but for which one or more processes are being processed by one or more processors; and A suspended or hibernated application that is not running but has state information stored in memory (volatile and non-volatile, respectively) and that can be used to resume execution of the application.
[0148] As used herein, the term "closed application" refers to a software application that does not have retained state information (e.g., state information for a closed application is not stored in the device's memory). Thus, closing an application includes stopping and / or removing the application process for the application and removing state information for the application from the device's memory. Generally, opening a second application during a first application does not close the first application. When the second application is displayed and the first application is stopped from being displayed, the first application becomes a background application.
[0149] Attention is now directed to embodiments of user interfaces (“UI”) and associated processes implemented on an electronic device, such as device 100, device 300, or device 500. User Interface and Related Processes A user interface for composing and receiving messages
[0150] Users interact with electronic devices in many different ways, including using the electronic device to view and create messages in messaging conversations. The embodiments described below provide a way for an electronic device to display a user interface for creating and displaying messages that include multiple content items. Providing an efficient way to add content items to messaging conversations and to view such content items reduces the amount of time a user needs to interact with the device, which increases battery life for battery-powered devices. It is understood that people use devices. When a person uses a device, that person is optionally referred to as a user of the device.
[0151] 6A-6JJ illustrate various ways in which an electronic device may display multiple content items in a messaging conversation, according to some embodiments of the present disclosure. The embodiments in these figures are used to illustrate the processes described below, including the process described below with reference to FIG. 7. Although FIGS. 6A-6JJ illustrate various examples of ways in which an electronic device may perform the process described below with reference to FIG. 7, it should be understood that these examples are not intended to be limiting, and that an electronic device may perform one or more of the processes described below with reference to FIG. 7 in a manner not explicitly described with reference to FIGS. 6A-6JJ.
[0152] FIG. 6A illustrates an example device 500a that includes a touch screen 504a. In FIG. 6A, the electronic device 500a presents a messaging user interface 602a that includes a messaging conversation between a user (Bob) (the user associated with the device 500a) and a contact named Alice (represented by a representation 621a of Alice). The messaging user interface 602a includes a visual indication 607a of a first message added to the messaging conversation from a device associated with Bob, a visual indication 609a of a second message added to the messaging conversation from a device associated with Alice, and a visual indication 623a of a third message added to the messaging conversation from a device associated with Alice. In some embodiments, the visual indication 609a is displayed within the messaging user interface 602a in response to the device 500a receiving an indication that a device associated with Alice has added a message to the messaging conversation that includes the text "Yup, sending now." Similarly, in some embodiments, visual indication 623a is displayed within messaging user interface 602a in response to device 500a receiving an indication that a device associated with Alice has also added a message to the messaging conversation that includes two content items, such as photo 1 and photo 2. Visual indication 623a corresponds to a third message in the messaging conversation added by a device associated with Alice and includes a representation of photo 1 606a and a representation of photo 2 604a.
[0153] In some embodiments, the visual indication of messages in a messaging conversation includes representations of content items included in the messages partially superimposed on one another. For example, as shown in FIG. 6A, in response to receiving an indication that a third message has been added to the messaging conversation by a device associated with Alice, electronic device 500a displays visual indication 623a of that message with representation 606a of photo 1 (corresponding to photo 1 included in the third message) and representation 604a of photo 2 (corresponding to photo 2 included in the third message) partially superimposed on one another. As described in more detail below, in some embodiments, the visual indication of each message in a messaging conversation optionally includes representations of content items (e.g., photos) included in those respective messages displayed in a stack.
[0154] Similar to the example shown in FIG. 6A, FIG. 6B illustrates another exemplary scenario of device 500a displaying representations of content items partially superimposed on one another. In FIG. 6B, device 500a receives an indication that a device associated with Alice has added an individual message to a messaging conversation that includes three photos, namely photo 1, photo 2, and photo 3. In response to receiving the indication that a device associated with Alice has added an individual message to the messaging conversation, device 500a displays visual indications 605a corresponding to the individual messages. Visual indications 605a include a representation 606a of photo 1 (corresponding to photo 1 included in the individual message), a representation 604a of photo 2 (corresponding to photo 2 included in the individual message), and a representation 608a of photo 3 (corresponding to photo 3 included in the individual message). As shown in FIG. 6B, representations 604a-608a are displayed partially superimposed on one another. In some embodiments, when corresponding messages in a messaging conversation include at most three content items, the representations of the respective content items (e.g., photos, videos, etc.) are displayed partially superimposed on one another. As described in more detail below, in some embodiments, the visual indication of individual messages in a messaging conversation optionally displays representations of the content items as a stack if the number of content items in the corresponding message includes four or more content items.
[0155] In some embodiments, the representations of the content items are displayed in different ways (e.g., spatial layout) based on whether the electronic device is displaying a user interface for creating a new message. For example, in FIG. 6C, while the device 500a is not displaying a user interface for creating a new message and the representations 604a-608a are displayed in the manner described above, the device 500a receives a request to display a user interface for creating a new message (indicated by touch contacts 601a-c selecting text input field 625a). In response to receiving the request to display a user interface for creating a new message, in FIG. 6D, the device 500a updates the messaging user interface 602a to include a soft keyboard and selectable options 610a for creating a new message. In some embodiments, the contents of the new message being created are visually indicated in the text input field 625a. For example, in some embodiments, when the electronic device 500a detects one or more inputs directed to the selection of one or more characters in the soft keyboard, the selected one or more characters are indicated in real time in the text input field 625a. Additionally, in some embodiments, selectable option 610a is selectable to cause electronic device 500a to update messaging user interface 602a to include multiple representations of the photo and, when selected, cause these selected photos to be added to a new message being composed in messaging user interface 602a, as will be described and illustrated in more detail below.
[0156] In addition, in response to device 500a receiving a request to display a user interface for creating a new message, device 500a displays a number of selectable options for adding rich content to a message currently being created within messaging user interface 602a (indicated by content displayed in text input field 625a), including a selectable option for adding content associated with one or more applications downloadable on device 500a (indicated by a selectable option having the label “App Store”), a selectable option for adding information about songs recently played on device 500a (indicated by a selectable option having the label “Music”), and a selectable option for adding one or more graphical icons (indicated by a selectable option having the label “Emoji”).
[0157] Further, as shown in FIGURE 6D, in response to device 500a receiving a request to display a user interface for composing a new message, device 500a continues to display visual indications 607a and 609a of each message in the messaging conversation in the same location within messaging user interface 602a (e.g., the same location of visual indications 607a and 609a within messaging user interface 602a shown in FIGURE 6B) as before an input to display a user interface for composing a new message was detected by device 500a. In contrast, however, device 500a modifies the display of each photograph representation 604a-608a such that the location of visual indications 607a and 609a within messaging user interface 602a remains the same when device 500a updates messaging user interface 602a to include additional user interface elements for composing a new message (e.g., a soft keyboard and selectable options for adding rich content to a new message being composed within messaging user interface 602a). Specifically, as shown in Figure 6D, device 500a modifies the locations of representations 604a-608a in visual indication 605a such that representations 604a-608a overlap at different locations (compared to the overlapping positions of representations 604a-608a in Figure 6C). In some embodiments, in addition to device 500a modifying the positions at which representations 604a-608a overlap one another, device 500a also adjusts the sizes of representations 604a-608a in visual indication 605a when device 500a receives a request to display a user interface for composing a new message.As a result of device 500 adjusting the positions of representations 604a-608a so that they appear closer to one another, the same messaging content may be displayed when device 500a is displaying a user interface for composing a new message (as shown in FIG. 6D) and when device 500 is not displaying a user interface for composing a new message (as shown in FIG. 6C). In some embodiments, in response to device 500a displaying a user interface for composing a new message, device 500a optionally moves visual indications 607a and 609a upward in messaging user interface 602a, but moves visual indications 607a and 609a less than they would have moved if the positions of representations 604a-608a had not been changed.
[0158] As previously discussed, in some embodiments, one or more content items can be optionally added to a new message being created. For example, in FIG. 6E, device 500b associated with a user (Alice) displays messaging user interface 602b including a messaging conversation between Alice (the user associated with device 500b) and Bob (represented by a representation 627b of Bob). Messaging user interface 602b is similar to messaging user interface 602a described above. In FIG. 6F, device 500b receives a request to display a number of photos available for inclusion in a new message being created (represented by touch contacts 601b-f selecting selectable option 610b). In Figure 6G, in response to receiving the request of Figure 6F, device 500b updates messaging user interface 602b to include representation 612-1b of photo 1, representation 612-2b of photo 2, representation 612-3b of photo 3, representation 612-4b of photo 4, representation 612-5b of photo 5, and representation 612-6b of photo 6. In some embodiments, the photos corresponding to representations 612-1b through 612-6b are selected for display in messaging user interface 602b because those photos are currently accessible to device 500b via a photo application currently downloaded on device 500b.
[0159] In some embodiments, device 500b can assign respective priorities (e.g., individual orders) to the photos being added to a new message currently being composed, such that when the message is added (e.g., sent) to the messaging conversation, a visual indication of the message is displayed (e.g., ordered) according to the assigned priorities (e.g., the photos are displayed according to the order defined while the message is being composed). For example, in FIG. 6H, device 500b receives a request to add Photo 1 to a new message currently being composed (indicated by touch contacts 601b-h selecting a representation 612-1b of Photo 1). In response to device 500b detecting the selection in FIG. 6H, in FIG. 6I, Photo 1 is added to a new message being composed within messaging user interface 602b (indicated by device 500b displaying a representation 613-1b of Photo 1 in text input field 625b). Additionally, device 500b displays an indication 629-1b indicating that photo 1 is currently assigned the highest priority (e.g., ordered first) in the message being composed within messaging user interface 602b (e.g., when a new message is added to the messaging conversation, the visual indication corresponding to the new message includes a representation of photo 1 with more visual emphasis than photos assigned a lower priority (e.g., more visual emphasis than photos ordered after photo 1), but no visual emphasis relative to high priority photos (e.g., less visual emphasis than photos ordered before photo 1)).
[0160] In Figure 6I, after adding photo 1 to the new message being composed in messaging user interface 602b, device 500b also detects a request to add photo 5 to the new message being composed (indicated by touch contacts 601b-i selecting representation 612-5b of photo 5). In response to device 500b detecting the selection in Figure 6I, in Figure 6J, photo 5 is added to the new message being composed (indicated by device 500b displaying representation 613-2b of photo 5 in text input field 625b). Additionally, device 500b displays indication 629-5b indicating that photo 5 is currently assigned the second highest priority (e.g., is ordered second) in the message being composed (e.g., when a new message is added to the messaging conversation, the visual indication corresponding to the new message includes a representation of photo 5 with more visual emphasis than photos assigned a lower priority (e.g., more visual emphasis than photos ordered after photo 5), but no visual emphasis relative to higher priority photos (e.g., less visual emphasis than photos ordered before photo 5)).
[0161] After adding photos 1 and 5 to the new message being composed in messaging user interface 602b, in Figure 6K, device 500b detects a request to add photo 3 to the new message being composed (indicated by touch contacts 601b-k selecting representation 612-3b of photo 3). In response to device 500b detecting the selection in Figure 6K, in Figure 6L, photo 3 is added to the new message being composed in messaging user interface 602b (indicated by device 500b displaying representation 613-3b of photo 3 in text input field 625b). Additionally, device 500b displays indication 629-3b indicating that photo 3 is currently assigned the third highest priority (e.g., ordered third) in a new message being created (e.g., when a new message is added to a messaging conversation, the visual indication corresponding to the new message includes a representation of photo 3 that is visually emphasized relative to photos assigned lower priorities (e.g., more visually emphasized than photos ordered after photo 3), but not visually emphasized relative to higher priority photos (e.g., less visually emphasized than photos ordered before photo 3)).
[0162] After adding photos 1, 5, and 3 to the new message being composed in messaging user interface 602b, in Figure 6M device 500b detects a request to add photo 4 to the new message being composed (indicated by touch contacts 601b-m selecting representation 612-4b of photo 4). In response to device 500b detecting the selection in Figure 6M, in Figure 6N photo 4 is added to the new message currently being composed in messaging user interface 602b (indicated by device 500b displaying representation 613-4b of photo 4 in text input field 625b). Additionally, device 500b displays an indication 629-4b indicating that photo 4 is currently assigned the fourth highest priority (e.g., ordered fourth) within a new message being created within messaging user interface 602b (e.g., when a new message is added to a messaging conversation, the visual indication corresponding to the new message includes a representation of photo 4 that is visually emphasized relative to photos assigned lower priorities (e.g., visually emphasized for photos ordered after photo 4), but not visually emphasized relative to high priority photos (e.g., visually not emphasized for photos ordered before photo 4).
[0163] Additionally, in Figure 6N, after adding photos 1, 5, 3, and 4 to a new message being composed in messaging user interface 602b, device 500b receives a request to add photo 2 to the new message being composed (indicated by touch contacts 601b-n selecting representation 612-2b of photo 2). In response to device 500b detecting the selection in Figure 6N, in Figure 6O, photo 2 is added to the message being composed in messaging user interface 602b (indicated by device 500b displaying representation 613-5b of photo 2 in text input field 625b). Additionally, device 500b displays an indication 629-2b indicating that photo 2 is currently assigned the fifth highest priority (e.g., ordered fifth) within a new message being created within messaging user interface 602b (e.g., when a new message is added to a messaging conversation, the visual indication corresponding to the new message includes a representation of photo 2 that is visually emphasized relative to photos assigned lower priorities (e.g., visually emphasized for photos ordered after photo 2), but not visually emphasized relative to high priority photos (e.g., visually not emphasized for photos ordered before photo 2).
[0164] In some embodiments, the priorities assigned to the photos included in the new message currently being composed can optionally be reassigned (e.g., the order assigned to the photos in the message can be changed). For example, in FIG. 6P, device 500b receives a request to move representation 613-5b to the current location of representation 613-4b of photo 4 in text input field 625b (indicated by touch contacts 601b-p moving representation 613-5b of photo to the left). In response to device 500b receiving the request in FIG. 6P, in FIG. 6Q, device 500b rearranges (e.g., reorders) representations 613-5b of photo 2 and 613-4b of photo 4 such that the new location of representation 613-5b of photo 2 corresponds to the previous location of representation 613-4b of photo 4 in text input field 625b and the new location of representation 613-4b of photo 4 corresponds to the previous location of representation 613-5b of photo 2 in text input field 625b. The priorities (e.g., order) assigned to photos 2 and 4 are also updated according to their new positions (e.g., their new order) within text input field 625b. Specifically, indication 629-2b is updated to indicate that photo 2 is now assigned the fourth highest priority (e.g., ordered fourth) in a new message being composed in messaging user interface 602b, and indication 629-4b is updated to indicate that photo 4 is now assigned the fifth highest priority (e.g., ordered fifth) in a message being composed in messaging user interface 602b.
[0165] In some embodiments, the photo can be removed from inclusion from a new message being created in messaging user interface 602b. For example, in FIG. 6R, while photo 3 is currently included in a new message being created in messaging user interface 602b (indicated by representation 613-3b of photo 3 being displayed in text input field 625b), device 500b detects a first selection of representation 612-3b of photo 3 (indicated by touch contact 601b-r tapping representation 612-3b of photo 3). In FIG. 6S, in response to device 500b detecting the selection of representation 612-3b of photo 3 in FIG. 6R, device 500b updates the visual appearance of indication 629-3b to indicate that photo 3 is still included in the new message being created in messaging user interface 602b and to indicate that another selection of representation 612-3b of photo 3 will no longer cause photo 3 to be included in the new message being created in messaging user interface 602b.
[0166] Additionally, in FIG. 6S, device 500b detects a second selection of representation 612-3b of photo 3 (indicated by touch contact 601b-s tapping representation 612-3b of photo 3). In FIG. 6T, in response to device 500b detecting a second selection of representation 612-3b of photo 3, device 500b removes photo 3 from inclusion in the message being composed in messaging user interface 602b (indicated by indication 629-3b no longer displayed in representation 613-3b of photo 3 and by representation 612-3b no longer displayed in text input field 625b). Because photo 3 is no longer included in the new message, the priority (e.g., order) of photos currently included in the new message being composed is also updated. Specifically, device 500b updates the priority of Photo 2 from being assigned the fourth highest priority in the new message to being assigned the third highest priority (e.g., from being ordered fourth in the message to being ordered third) (indicated by indication 629-2b). Similarly, device 500b updates the priority of Photo 4 from being assigned the fifth highest priority in the new message to being assigned the fourth highest priority (e.g., from being ordered fifth in the message to being ordered fourth) (indicated by indication 629-4b).
[0167] In FIG. 6U, after photos 1, 2, 4, and 5 are added to the new message, device 500b detects a request to send the created message to the messaging conversation (indicated by touch contacts 601b-u selecting a selectable option displayed in text entry field 625b). In response to device 500b detecting the request, device 500b adds the newly created message to the messaging conversation. In some embodiments, when an electronic device adds a message to a messaging conversation, devices associated with other users in the messaging conversation receive an indication of the new message added to the messaging conversation. For example, in FIG. 6V, after device 500b (a device associated with Alice) adds the created message to the messaging conversation, device 500a (associated with user Bob) receives an indication of the new message added to the messaging conversation by a device associated with Alice (e.g., device 500b). In response to receiving the indication, the device 500a updates the messaging user interface 602a to include a visual indication 616a corresponding to the new message added to the messaging conversation (e.g., a message created and sent as shown and described with respect to FIG. 6U).
[0168] The visual indication 616a includes a stack of content items. The stack of content items includes a representation of photo 1 614a-1 (corresponding to photo 1 included in the new message added to the messaging conversation), a representation of photo 5 614a-2 (corresponding to photo 5 included in the new message added to the messaging conversation), a representation of photo 2 614a-3 (corresponding to photo 2 included in the new message added to the messaging conversation), and a representation of photo 4 614a-4 (corresponding to photo 4 included in the new message added to the messaging conversation). In some embodiments, the visual indication of the individual messages in the messaging conversation includes a stack of content items because the corresponding individual messages included at least four content items (e.g., at least four photos).
[0169] Representation 614a-1 of photo 1 is displayed at the top of the stack (e.g., in the first position in the stack) because photo 1 was assigned the highest priority (e.g., ordered first) when the message corresponding to visual indication 616a was created (indicated by indication 629-1b in FIG. 6U). Similarly, representation 614a-2 of photo 5 is displayed in the second position in the stack because photo 5 was assigned the second highest priority (e.g., ordered second) when the message corresponding to visual indication 616a was created (indicated by indication 629-5b in FIG. 6U). Similarly, representation 614a-3 of photo 2 is displayed in the third position in the stack because photo 2 was assigned the third highest priority (e.g., ordered third) when the message corresponding to visual indication 616a was created (indicated by indication 629-2b in FIG. 6U). Similarly, representation 614a-4 of photo 4 is displayed in the bottom (e.g., last) position in the stack because photo 4 was assigned the fourth highest priority (e.g., ordered fourth) when the message corresponding to visual indication 616a was created (indicated by indication 629-4b in FIG. 6U).
[0170] 6W, visual indication 616a also includes indication 620a indicating the number and type of content items (four photos) included in the stack. As described in more detail with respect to method 900, indication 620a is selectable and, when selected, causes electronic device 500a to display each of the photos corresponding to representations 614a-1 through 614a-4 in a grid (e.g., arranged in rows and / or columns). In addition, as described in more detail below, device 500a also displays selectable option 618a that, when selected, causes electronic device 500a to initiate a process of saving each of the photos corresponding to representations 614a-1 through 614a-4 to electronic device 500a.
[0171] In some embodiments, device 500a detects one or more inputs to change the content item displayed at the top of the stack (e.g., by cycling through the stack of content items). For example, in FIG. 6W, while representation 614a-1 of photo 1 is displayed at the top of the stack (e.g., the first position in the stack), device 500a detects a request to display the content item currently in the second position in the stack (e.g., representation 614a-2 of photo 2) at the top of the stack, as indicated by touch contact 601a-w swiping left on the stack and / or representation 614a-1. In FIG. 6X, in response to device 500a receiving the input of FIG. 6W, device 500a switches the representation displayed at the top of the stack from representation 614a-1 of photo 1 to representation 614a-2 of photo 5. Similarly, because representation 614a-2 of photo 5 has moved from the second position in the stack to the first position in the stack, the positions of the other content items in the stack are accordingly rearranged. In particular, device 500a rearranges the content items in the stack such that representation 614a-3 of photo 2 is displayed in a second position in the stack (initially in a third position in the stack, as described and illustrated with respect to FIG. 6W), representation 614a-4 of photo 4 is displayed in a second position in the stack (initially in a fourth position in the stack, as described and illustrated with respect to FIG. 6W), and representation 614a-1 of photo 1 is displayed at the bottom of the stack (initially in a first position in the stack, as described and illustrated with respect to FIG. 6W). It will be appreciated that device 500b can also detect one or more swipes directed to the right toward the stack, and in some embodiments, cause device 500a to analogically display the content item corresponding to the last position in the stack to be displayed in the first position in the stack and analogically shift the positions of the remaining content items in the stack.
[0172] In some embodiments, the stack of content items is configured to accept a long swipe input, and when detected, the stack is optionally updated in real time according to the long swipe input. For example, in FIG. 6Y, while the representation of 614a-2 is displayed at the top of the stack, the device 500a detects a touchdown of touch contacts 601a-y on the touch screen 504a (e.g., on the stack) and detects that the touch contacts 601a-y have swiped leftward a first amount. In response to the device 500a detecting the swipe in FIG. 6Y, in FIG. 6Z, the device 500a changes the representation displayed at the top of the stack from the representation of photo 5 614a-2 to the representation of photo 2 614a-3 (previously in the second position in the stack, as shown in FIG. 6Y). Similarly, since the representation of photo 2 614a-3 has moved from the second position in the stack to the top of the stack, the positions of the other content items in the stack are accordingly rearranged. Specifically, device 500a rearranges the content items in the stack so that representation 614a-4 of photo 4 is displayed in the second position in the stack (previously in the third position in the stack, as described and illustrated in FIG. 6Y), representation 614a-1 of photo 1 is displayed in the third position in the stack (previously in the fourth position in the stack, as illustrated in FIG. 6Y), and representation 614a-2 of photo 5 is displayed in the fourth (e.g., last) position in the stack (previously in the first position in the stack, as illustrated in FIG. 6Y).
[0173] After device 500b updates the position of the content item in the stack, device 500b detects additional (e.g., continued) movement of touch contact 601b-y to the left in FIG. 6Z (e.g., without lift-off of contact between FIG. 6Y and FIG. 6Z). In FIG. 6AA, in response to device 500a detecting the continued movement of touch contact 601b-y in FIG. 6Z, device 500a again updates the representation displayed in the first position in the stack from representation 614a-2 of photo 2 to representation 614a-4 of photo 4 (previously in the second position in the stack, as shown in FIG. 6Z). Similarly, because representation 614a-4 of photo 4 has moved from the second position in the stack to the first position in the stack, the positions of the other content items in the stack are accordingly rearranged. Specifically, device 500a rearranges the content items in the stack so that representation 614a-1 of photo 1 is displayed in the second position in the stack (initially the third position in the stack, as described with reference to FIG. 6Z), representation 614a-2 of photo 5 is displayed in the third position in the stack (previously the fourth position in the stack, as described with reference to FIG. 6Z), and representation 614a-3 of photo 2 is displayed in the fourth position in the stack (previously the first position in the stack, as described with reference to FIG. 6Z).
[0174] In some embodiments, the representations included in the stack are displayed according to the priorities (e.g., original order) originally assigned to the corresponding content items (e.g., the order assigned to the content items when the corresponding messages were being created) when the electronic device displays the individual messaging conversations after the electronic device previously terminated the messaging conversations. For example, in FIG. 6BB, after device 500a detects a sequence of inputs to change the positions of representations 614a-1 through 614a-4 in the stack, device 500a detects a request to stop displaying the messaging conversations (indicated by touch contacts 601b-bb selecting a selectable option labeled "Back"). In some embodiments, in response to detecting the inputs in FIG. 6BB, electronic device 500a displays within messaging user interface 602a one or more representations of messaging conversations of which a user of device 500a (Bob) is a part (e.g., messaging conversations to which device 500a has access), including a representation of a messaging conversation between user Bob and contact Alice. In FIG. 6CC, after device 500a receives a request to end the messaging conversation between them, device 500a receives one or more inputs to redisplay the messaging conversation between contact named Alice and contact named Bob in messaging user interface 602. As shown in FIG. 6CC, representations 614a-1 through 614a-4 are no longer displayed in the positions in the stack shown in FIG. 6BB because device 500a has previously stopped displaying the messaging conversation between Alice and Bob. Instead, representations 614a-1 through 614a-4 are displayed in positions in the stack according to the priority (e.g., order) assigned when the message corresponding to visual indication 616a was created and added to the messaging conversation (as described above).
[0175] In some embodiments, the electronic device optionally receives an indication of a message recently added to a messaging conversation while the content item of that message is still being uploaded to a respective server. For example, in FIG. 6DD, device 500a receives an indication of a new message added to a messaging conversation. In response to receiving the indication, device 500a updates messaging user interface 602a to include a visual indication 616a corresponding to the new message added to the messaging conversation. Visual indication 616a includes a stack of content items, as the message corresponding to visual indication 616a includes four photos, namely photo 1, photo 2, photo 4, and photo 5 (e.g., content items). The stack of content items includes a representation 614a-1 of photo 1 (corresponding to photo 1 in the corresponding message added to the messaging conversation), a representation 614a-2 of photo 5 (corresponding to photo 5 in the corresponding message added to the messaging conversation), a representation 614a-3 of photo 2 (corresponding to photo 2 in the corresponding message added to the messaging conversation), and a representation 614a-4 of photo 4 (corresponding to photo 4 in the corresponding message added to the messaging conversation). As shown by indication 620a, three of the content items in the corresponding message, photo 5, photo 2, and photo 4, are still uploaded to the server and are not available to be downloaded to (e.g., displayed by) device 500a. In some embodiments, as shown in FIG. 6DD, the representations corresponding to content items that cannot currently be displayed by device 500a include placeholder images, and the representations of content items available for display on device 500a include indications of the corresponding content.For example, representation 614a-4 of photo 4 (corresponding to photo 4 in the corresponding message), representation 614a-3 of photo 2 (corresponding to photo 2 in the corresponding message), and representation 614a-2 of photo 5 (corresponding to photo 5 in the corresponding message) are displayed with a placeholder image because the content items corresponding to these representations are not currently downloadable by device 500a. In contrast, representation 614a-1 of photo 1 (corresponding to photo 1 in the corresponding message) is displayed with a visual appearance indicative of the content of photo 1.
[0176] As discussed above, in some embodiments, messaging user interface 618a includes a selectable option for saving one or more content items corresponding to the representations included in the visual indication of the respective message. For example, in FIG. 6EE, device 500a displays selectable object 618a that, when selected, causes device 500a to initiate a process of saving respective photographs corresponding to representations 614a-1 through 614a-4 to electronic device 500a. In some embodiments, selectable option 618a is displayed in the messaging user interface because device 500a (or a server in communication with device 500a) determines that a user of device 500a (Bob) is likely to download photographs (photo 1, photo 2, photo 4, and photo 5) corresponding to representations 614a-1 through 614a-4. In some embodiments, if device 500a (or a server in communication with device 500a) determines that a user of device 500a is not likely to save / download the content items corresponding to representations 614a-1-614a-4 and / or because the content items corresponding to representations 614a-1-614a-4 are of a particular content type (e.g., cannot be saved on device 500a), device 500a does not display selectable option 618a in messaging user interface 602b. In FIG. 6FF, in response to receiving the request of FIG. 6EE, device 500a displays a menu including selectable option 622a that, when selected, causes device 500a to save photos (photo 1, photo 2, photo 4, and photo 5) corresponding to representations 614a-1-614a-4 to device 500a. In some embodiments, device 500a saves the content items to a particular application downloaded on device 500a, such as a photo and / or video application. The menu displayed by device 500a also includes a selectable option 624a that, when selected, causes the display of the menu in messaging user interface 602a to cease without saving the photographs corresponding to representations 614a-1-614a-4 to device 500a.In Figure 6GG, while device 500a displays selectable options 622a and 624a, device 500a detects a selection of selectable option 622a (indicated by touch contacts 610a-gg tapping selectable option 622a). In Figure 6HH, in response to detecting the selection in Figure 6GG, device 500a saves photographs corresponding to representations 614a-1-614a-4 to device 500a (as represented by device 500a updating indication 616a from indicating the number of content items included in visual indication 620a (four photographs) to indicating the number of content items in stored visual indication 616a (four stored photographs)).
[0177] As mentioned above, in some embodiments, the selectable option 620a is selectable to display a representation of the content item in the visual indication 616a in a grid. For example, in FIG. 6II, the device 500a detects a selection of the indication 620a (indicated by touch contacts 601a-gg tapping the indication 620a). The characteristics of the indication 620a are described in more detail with reference to method 900. In FIG. 6JJ, in response to the device 500a receiving the request of FIG. 6II, the device 500a displays a representation 648-1 of photo 1 (corresponding to photo 1 included in the message corresponding to the visual indication 616a), a representation 648-2 of photo 5 (corresponding to photo 5 included in the message corresponding to the visual indication 616a), a representation 648-3 of photo 2 (corresponding to photo 2 included in the message corresponding to the visual indication 616a), and a representation 648-4 of photo 4 (corresponding to photo 4 included in the message corresponding to the visual indication 616a) in a grid layout. The operation of the selectable options 644 a , 646 a , 654 a , 656 a , and 658 a is described in detail with reference to the method 900 .
[0178] 7 is a flow diagram illustrating a method for displaying multiple content items in a messaging conversation, according to some embodiments. Method 700 is optionally performed in an electronic device, such as device 100, device 300, device 500, device 500a, or device 500b, as described above with reference to Figures 1A-1B, 2-3, 4A-4B, and 5A-5H. Some operations in method 700 are optionally combined and / or the order of some operations is optionally changed.
[0179] As described below, method 700 provides a way for an electronic device to display multiple content items in a messaging conversation, according to some embodiments. This method reduces the cognitive burden on a user when interacting with a user interface of a device of the present disclosure, thereby creating a more efficient human-machine interface. For battery-operated electronic devices, improving the efficiency of the user's interaction with the user interface conserves power and increases the time between battery charges.
[0180] In some embodiments, the method 700 is performed in an electronic device (e.g., a mobile device (e.g., a tablet, smartphone, media player, or wearable device), a computer (e.g., a desktop computer, a laptop computer), or a wearable device (e.g., a watch, a head-mounted device) in communication with a display generation component and one or more input devices, optionally in communication with one or more of a mouse (e.g., external), a trackpad (optionally integrated or external), a remote control device (e.g., external), another mobile device (e.g., separate from the electronic device), a handheld device (e.g., external), and / or a controller (e.g., external, etc.), or a set-top box (e.g., a remote control) in communication with the one or more input devices). In some embodiments, the display generation component is an external display, such as a display (optionally a touch screen display) integral with the electronic device, a monitor, projector, television, or a hardware component (optionally integrated or external) for projecting a user interface or making the user interface visible to one or more users.
[0181] In some embodiments, the electronic device, via a display generation component, displays (702) a messaging user interface including a messaging conversation associated with multiple users (e.g., the electronic device and the electronic devices associated with the multiple users have access to the messaging conversation). In some embodiments, the messaging conversation includes messages sent from the electronic device and messages sent from electronic devices associated with the multiple users. In some embodiments, messages sent from the electronic device (e.g., from a user account associated with the electronic device) are displayed on a first side (e.g., right side) of the messaging conversation and messages sent from a different electronic device (e.g., from a user account associated with the different electronic device) are displayed on a second side (e.g., left side) of the messaging conversation.
[0182] In some embodiments, while displaying the messaging user interface, the electronic device receives (704) an indication of a first messaging activity directed to the messaging conversation from an individual user of the plurality of users (e.g., the electronic device receives an indication that a device associated with the individual user has added a message to the messaging conversation). The individual user is, optionally, a user associated with the electronic device or a user associated with another device that is part of the messaging conversation, such as device 500 receiving an indication that a device associated with a user (Alice) has added a message to the messaging conversation that includes two photos (photo 1 and photo 2) as illustrated in FIG. 6A, where the first messaging activity includes a plurality of content items added to the messaging conversation (e.g., the message added to the messaging conversation includes a photo, a video, and / or other type of media item). In some embodiments, the electronic device receives an indication of the first messaging activity when the electronic device associated with the individual user detects a sequence of one or more inputs to send (e.g., add) a message to the messaging conversation. In some embodiments, the indication of the first messaging activity includes text and / or content items, such as videos, photos, and / or other types of media items (e.g., gifs, jpegs, etc.) that the individual user added to the messaging conversation. In some embodiments, the individual user that caused the first messaging activity to be generated is a user of an electronic device. In some embodiments, the individual user that caused the first messaging activity to be generated is a user of a different electronic device. In some embodiments, text is included in the first messaging activity when a device associated with the individual user detects input directed at a (e.g., soft) keyboard (e.g., displayed in a messaging user interface).In some embodiments, content items are included in a first messaging activity when a device associated with an individual user receives a sequence of inputs to add one or more content items (e.g., photos, videos, and / or other types of media items) to the first messaging activity. In some embodiments, the content items are of the same type (e.g., only photos). Alternatively, in some embodiments, the content items are of different types (e.g., including photos and videos).
[0183] In some embodiments, in response to receiving an indication of the first messaging activity, the electronic device displays (706) a first visual indication in a messaging user interface (e.g., at a separate location) corresponding to the first messaging activity including a representation of the multiple content items, such as device 500a displaying visual indication 623a in messaging user interface 602 of FIG. 6A. For example, in response to a separate user adding multiple content items to a messaging conversation, the electronic device receives an indication that a separate user has added multiple content items to the messaging conversation. In some embodiments, in response to the electronic device receiving an indication of the first messaging activity, the electronic device visually indicates (e.g., displays) the multiple content items included in the first messaging activity. In some embodiments, displaying the first visual indication includes indicating a user associated with the device that added the multiple content items to the messaging conversation, as well as a representation of the content items added to the messaging conversation.
[0184] In some embodiments, pursuant to a determination that the first messaging activity satisfies one or more criteria (e.g., if the content items included in the first messaging activity exceed a respective threshold number of content items (e.g., 4, 8, 12 content items). In some embodiments, the one or more criteria are independent of the respective user or the device associated with the respective user that caused the first messaging activity to be added to the messaging conversation), representations of the plurality of content items are displayed (708) in a first manner (e.g., in a respective location). For example, if the message corresponding to visual indication 623a included four or more content items, representations of the content items are displayed as a stack, similar to the stack of content items displayed in FIG. 6V. For example, if the content items in the first messaging activity exceed a respective threshold number of content items (e.g., 4, 8, 12 content items), the content items are displayed in a different manner than when the content items do not exceed a respective threshold number of content items (e.g., 4, 8, 12 content items). In some embodiments, displaying the content items according to the first method includes displaying the content items in a first visual appearance (e.g., a first color). In some embodiments, displaying the content items according to the first method includes displaying the multiple content items in a stack such that each item in the stack corresponds to one of the content items (e.g., the content items are displayed as a collection of items in a single user interface element). In some embodiments, the stack of content items displays one content item at a time (e.g., visually highlighting one content item while other content items in the stack are not visually highlighted), and an input directed to the stack of content items causes the stack to display (e.g., visually highlight) a new content item in the stack.
[0185] In some embodiments, pursuant to a determination that the first messaging activity does not meet one or more criteria (e.g., the content items included in the first messaging activity do not exceed a threshold number of content items (e.g., 4, 8, 12 content items)), the representations of the multiple content items are displayed (710) in a second manner (e.g., in separate locations) that is different from the first manner, such as representations 604a and 606a displayed overlapping in FIG. 6A. For example, when the content items in the first messaging activity do not exceed a threshold number of content items (e.g., 4, 8, 12 content items), the content items are displayed in a different manner than when the content items exceed a threshold number of content items (e.g., 4, 8, 12 content items). In some embodiments, displaying the content items according to the second manner includes displaying the content items in a second visual appearance (e.g., a second color). In some embodiments, displaying the content items according to the second manner includes displaying the multiple content items and includes displaying the content items in a predefined (e.g., spatial) layout that is different from the stack of content items described above. For example, within the first visual indication, at least one content item is displayed such that it is partially overlaid on another content item (eg, overlaid on an edge (or corner) of the other content item).
[0186] The above-described method of displaying a content item in a first message in a first manner or a second manner based on one or more criteria provides an efficient way of displaying content items in a message in different manners based on the criteria met, thereby simplifying the interaction between a user and the electronic device, improving usability of the electronic device and making the user device interface more efficient, thereby allowing a user to use the electronic device more quickly and efficiently, thereby further reducing power usage and improving battery life of the electronic device.
[0187] In some embodiments, the one or more criteria include a criterion that is met based on the number of content items included in the first messaging activity (e.g., including at least 4, 8, 12, 16 content items). For example, if the message added to the messaging conversation of FIG. 6V did not include four content items, device 500a does not display representations of those content items in a stack in messaging user interface 602. Similarly, if the message added to the messaging conversation includes four or more content items, as shown in FIG. 6V, device 500a displays representations of those content items in a stack. For example, if the number of content items included in the first messaging activity is at least four content items, displaying the first visual indication of the first messaging activity includes displaying the multiple content items in a first manner (e.g., in a first visual appearance as described above or in a stack of content items). Similarly, if the number of content items included in the first messaging activity is equal to or less than the discrete number of content items (e.g., at least 4, 8, 12, 16 content items), displaying the first visual indication of the first messaging activity includes displaying the multiple content items in a second manner (e.g., with a second visual appearance or according to a spatial layout in which each representation of a content item is at least partially overlaid on another representation of another content item (e.g., not overlaid on two content items)).
[0188] The above-described method of displaying content items included in a first messaging activity in a first manner or a second manner based on the met criteria provides an efficient way of displaying content items included in a first messaging activity in different manners based on the number of content items included in the first messaging activity, which simplifies the interaction between a user and an electronic device, improves usability of the electronic device, and makes the user-device interface more efficient, which further reduces power usage and improves battery life of the electronic device by allowing a user to use the electronic device more quickly and efficiently.
[0189] In some embodiments, displaying the representations of the plurality of content items in a second manner includes displaying the representations of the plurality of content items in a first spatial layout such that the representations of photos 1, 2, and 3 overlap one another, as shown in FIG. 6B. For example, the content items at individual locations in a messaging user interface are displayed according to the first spatial layout. In some embodiments, the first spatial layout defines the (e.g., display) size, aspect ratio, etc. of each content item in the messaging user interface, and the position of each content item at the individual locations. In some embodiments, displaying the plurality of content items according to the first spatial layout includes displaying representations of content items having a first size at individual location positions, such that the representations of such content items are at least partially overlapped with one another (e.g., overlapping an edge (or corner) of another content item), but the two content items are not overlapped). In some embodiments, when the plurality of content items are displayed in the second manner and / or the first spatial layout, the plurality of content items are not interactable (e.g., not switchable to change the display order of the content items) in one or more of the methods described herein and / or method 900. In some embodiments, displaying the plurality of content items in the first manner includes displaying less than 50% of each content item visible below a top content item in a stack. In contrast, displaying the plurality of content items in the second manner includes displaying more than 50% of each content item visible below a "top" picture.The above-described method of displaying representations of content items in a first spatial layout provides an efficient way of displaying representations of content items according to a first spatial layout when one or more criteria are not met, thereby simplifying the interaction between a user and an electronic device, improving usability of the electronic device, providing a more efficient user device interface, and further reducing power usage and improving battery life of the electronic device by allowing a user to use the electronic device more quickly and efficiently.
[0190] In some embodiments, displaying the representations of the plurality of content items in a second manner includes, pursuant to a determination that a message creation user interface is displayed in the messaging user interface (e.g., when user interface elements for creating a message are displayed by the electronic device), displaying the representations of the plurality of content items in a second spatial layout that is different from the first spatial layout, such as the spatial layout of representations 604a, 606a, and 608a shown in FIG. 6D (e.g., different from displaying the representations of the plurality of content items in a first manner). In some embodiments, the message creation user interface includes a soft keyboard and one or more selectable options for adding the content item to a new message being created in the messaging user interface. In some embodiments, the message creation user interface is displayed in response to the electronic device detecting a selection of a text entry field displayed in the messaging user interface. For example, when the messaging user interface includes a user interface element for creating a message, the plurality of content items are displayed in the respective locations according to the second spatial layout. In some embodiments, the second spatial layout defines a size of the representations of the content items and a position of the representations of the content items in the respective locations in the messaging user interface. In some embodiments, the size at which the representations of the content items are displayed and / or the positions of the content items in the respective locations in the messaging user interface differ from the characteristics defined by the first spatial layout. In some embodiments, before the electronic device displays the messaging composition user interface, the representations of the content items are displayed in the respective locations according to the first spatial layout.In some embodiments, before the message composition user interface is displayed in the messaging user interface, the messaging user interface displays representations of the first message and the second message in the messaging conversation at respective locations in the messaging user interface. In some such embodiments, the respective locations of the representations of the first message and the second message in the messaging user interface do not change when the electronic device receives a request to display the message composition user interface.
[0191] In some embodiments, in accordance with a determination that a message creation user interface is not displayed in the messaging user interface, the representations of the plurality of content items are displayed in a first spatial layout, such as the spatial layout of representations 604a, 606a, and 608a shown in FIG. 6C. For example, if the messaging user interface does not include a user interface for creating a message in a messaging conversation, the representations of the plurality of content items are displayed in respective locations in the messaging user interface in accordance with the first spatial layout. In some embodiments, the first spatial layout defines a size of each content item and a position of each content item in the respective locations. In some embodiments, displaying the plurality of content items in accordance with the first spatial layout includes displaying the representations of the content items in a first size in positions in the respective locations in the messaging user interface such that the representations of the content items are partially overlapped with one another (e.g., overlapped with an edge (or corner) of another content item, but not overlapped with the two content items). In some embodiments, when the representations of the plurality of content items are displayed in a first manner, the spatial layout of the representations of the plurality of content items does not change based on whether a messaging creation user interface is displayed by the electronic device.
[0192] The above-described method of displaying representations of content items according to a first spatial layout or a second spatial layout based on whether the electronic device is displaying a message composition user interface provides an efficient way of displaying representations of content items differently in a messaging user interface based on the user interface being displayed by the electronic device, which simplifies the interaction between a user and the electronic device, improves usability of the electronic device, and makes the user-device interface more efficient, which further reduces power usage and improves battery life of the electronic device by allowing a user to use the electronic device more quickly and efficiently.
[0193] In some embodiments, while displaying the messaging user interface, the electronic device receives a first input via one or more input devices corresponding to a request to create a messaging activity including one or more content items, such as the input detected by device 500a of FIG. 6C (e.g., the electronic device is displaying the messaging user interface when the electronic device detects a request to create an individual message). In some embodiments, the request to create a message is received when the electronic device detects selection of a text input field in the messaging user interface).
[0194] In some embodiments, in response to receiving the first input, the electronic device updates the messaging user interface to include a content item selection user interface including a first representation of a first plurality of content items for inclusion in the messaging activity, such as device 500a displaying selectable options similar to selectable options 610b shown in FIG. 6G and a representation of a photograph similar to the representation of the photograph included in FIG. 6G. For example, in response to receiving a request to create a message, the electronic device displays representations of a plurality of content items (e.g., photographs) available for addition (e.g., inclusion) in the currently created message. In some embodiments, the first representation is displayed because the content item (e.g., photograph) was recently created (e.g., captured via a camera of the electronic device), recently saved in a photo application on the electronic device, and / or recently modified.
[0195] In some embodiments, while displaying the content item selection user interface, the electronic device receives a sequence of one or more inputs via one or more input devices that includes a selection of a subset of the first representations of the first plurality of content items for inclusion in the messaging activity, such as inputs selecting representations corresponding to photos 1-5 of Figures 6H-6O (e.g., the electronic device detects a request to add one or more photos to a message currently being composed). In some embodiments, the subset of the first representations of the first plurality of content items is selected when the electronic device detects a touch down and lift off of a touch contact at locations corresponding to each of the representations included in the subset.
[0196] In some embodiments, in response to receiving the sequence of one or more inputs, the electronic device displays, via a display generation component, one or more indications that the subset of the first representations has been selected for inclusion in the messaging activity (e.g., the electronic device provides an indication that a content item corresponding to the subset of the first representations has been added to a message currently being created at the electronic device), such as the device displaying visual indications 629-1b through 629-5b of FIG. 6O. In some embodiments, the one or more indications also indicate a priority assigned to the content item corresponding to the selected subset of the first representations in the messaging activity).
[0197] In some embodiments, the one or more indications that a subset of the first representations has been selected for inclusion in the messaging activity pursuant to a determination that a sequence of one or more inputs corresponded to a selection of a first representation in the subset of the first representations prior to a selection of a second representation in the subset of the first representations also indicate that a content item corresponding to the first representation has priority over a content item corresponding to the second representation in the messaging activity. For example, indication 629-1b indicates that photo 1 in a message being composed in messaging user interface 602b is assigned the highest priority. For example, because the content item corresponding to the first representation was added to the messaging activity before the content item corresponding to the second representation was added to the messaging activity, the electronic device assigns the content item corresponding to the first representation a higher priority than the priority assigned to the second content item. In some embodiments, the priorities assigned to the content items in the messaging activity provide an indication of the order in which the content items will be displayed (or which content items will be visually highlighted relative to other content items included in the messaging activity) when the messaging activity is sent to a messaging conversation.
[0198] In some embodiments, pursuant to a determination that a sequence of one or more inputs corresponded to a selection of a second representation in the subset of first representations prior to the selection of a first representation in the subset of first representations, the one or more indications that a subset of first representations has been selected for inclusion in the messaging activity also indicate that the content item corresponding to the second representation has priority over the content item corresponding to the first representation in the messaging activity. For example, because the content item corresponding to the first representation was added to the messaging activity after the content item corresponding to the second representation was added to the messaging activity, the electronic device assigns a lower priority to the content item corresponding to the first representation than the priority assigned to the second content item. In some embodiments, the priority assigned to the content items in a messaging activity provides an indication of the order in which the content items will be displayed in a messaging user interface (or which content items will be visually emphasized over other content items included in the messaging activity and / or stack of content items) when the messaging activity is sent to a messaging conversation.
[0199] The above-described method of indicating priorities assigned to content items included in a messaging activity provides an efficient way of indicating the order in which content items are displayed in a messaging user interface when that messaging activity is added to a messaging conversation, which simplifies the interaction between a user and an electronic device, improves usability of the electronic device, and makes the user-device interface more efficient, which further reduces power usage and improves battery life of the electronic device by allowing a user to use the electronic device more quickly and efficiently.
[0200] In some embodiments, the messaging user interface includes a messaging activity input area, such as text entry field 625b. In some embodiments, in response to receiving the sequence of one or more inputs, the electronic device updates the messaging activity input area to include a subset of the first representations selected for inclusion in the messaging activity, such as representations 613-1b and 613-2b included in text entry field 625b (e.g., representations of content items currently selected for inclusion in the messaging activity are displayed in the messaging activity input area), the subset of the first representations including the first representation and the second representation, and the sequence of one or more inputs corresponds to a selection of the first representation prior to a selection of the second representation, such that the content item corresponding to the first representation has a higher priority in the messaging activity than the content item corresponding to the second representation (e.g., the content item corresponding to the first representation is currently assigned a higher priority than the content item corresponding to the second representation because the content item corresponding to the first representation was added to the messaging activity before the content item corresponding to the second representation was added to the messaging activity).
[0201] In some embodiments, while displaying the subset of the first representation within the messaging activity input area, the electronic device receives a second input via one or more input devices corresponding to a request to reposition the first representation relative to the second representation within the messaging activity input area (e.g., the electronic device detects a request to switch the locations of the first and second representations within the messaging activity input area), such as the input detected in FIG. 6P. In some embodiments, the electronic device receives the second input when a touch contact drags the first representation to the current location of the second representation and / or when a touch contact drags the second representation to the current location of the first representation.
[0202] In some embodiments, in response to receiving the second input, the electronic device rearranges the first representation relative to the second representation in the messaging activity input area according to the second input (e.g., reordering representations 613-5b and 613-4b in FIG. 6Q), and the electronic device updates priorities associated with the first and second representations such that the content item corresponding to the second representation has a higher priority in the messaging activity than the content item corresponding to the first representation (e.g., changing the priorities of Photo 2 and Photo 4 from the priorities assigned in FIG. 6P to the priorities assigned in FIG. 6Q). For example, after detecting a request to switch the order of the first and second representations in the messaging activity input area, the electronic device switches the locations of the first and second representations in the messaging activity input area. In addition, because the respective positions of the first and second representations in the messaging activity input area have changed, the priorities of the first and second representations are updated accordingly. For example, before the second input is received, the content items corresponding to the first representation are assigned a first individual priority and the content items corresponding to the second representation are assigned a second individual priority, after the second input is received, the respective priorities assigned to the respective content items are switched such that the content items corresponding to the first representation are assigned the second individual priority and the content items corresponding to the second representation are assigned the first individual priority.
[0203] The above-described method of updating the priority of a content item selected for inclusion in a messaging activity when the position of a representation corresponding to the content item is changed within a message entry area provides an efficient method of adjusting priorities assigned to content items added to a messaging activity, which simplifies the interaction between a user and an electronic device, improves usability of the electronic device, and makes the user-device interface more efficient, which further reduces power usage and improves battery life of the electronic device by allowing a user to use the electronic device more quickly and efficiently.
[0204] In some embodiments, while displaying a content item selection user interface (e.g., the electronic device is currently displaying, in a messaging user interface, a plurality of representations of content items available for inclusion in a message being composed within the messaging user interface), and while a first representation and a second representation within a subset of the first representations are selected for inclusion in the messaging activity (e.g., the electronic device has detected one or more inputs for including content items corresponding to the first representation and the second representation in the messaging activity), the selection of the first representation for inclusion in the messaging activity being reflected in a first visual indication displayed in association with the first representation, the first visual indication having an individual visual characteristic having a first value, the electronic device receives, via one or more input devices, one or more inputs directed at the first representation, such as touch contacts 601b-r and 601b-s of FIGS. 6R and 6S.
[0205] In some embodiments, in response to receiving one or more inputs directed to the first representation, in accordance with a determination that the one or more inputs include more than a threshold number of selections of the first representation, the first representation is deselected from inclusion in the messaging activity, the display of the first visual indication is discontinued, and a priority that a content item corresponding to the second representation has in the messaging activity is updated, such as removing Photo 3 from inclusion in the message being composed in FIG. 6S. For example, if the electronic device detects that the first representation has been selected more than a threshold number of times, the content item corresponding to the first representation is removed from the first messaging activity. In some embodiments, the priority of other content items included in the messaging activity is updated accordingly as individual content items are removed from the messaging activity. For example, if a messaging activity included a first content item having the highest priority in the messaging conversation, a second content item having the second highest priority in the messaging conversation, and a third content item having the third highest priority in messaging, when the first content item is deselected (e.g., removed) from the messaging activity, the electronic device optionally updates the priority of the second content item to have the highest priority in the messaging activity and updates the priority of the third content item to have the second highest priority in the messaging activity.
[0206] In some embodiments, pursuant to a determination that the one or more inputs do not include more than a threshold number of selections of the first representation, display a first visual indication having a distinct visual characteristic having a second value different from the first value while maintaining the first representation as selected for inclusion in the messaging activity, without updating the priority that the content item corresponding to the second representation has in the messaging activity (e.g., even if touch contacts 601b-r selected the representation corresponding to photo 3, the priority of photo 3 in the message being composed would remain the same as in FIG. 6R). For example, if the first representation has not been selected more than the threshold number of times, the first visual indication indicates that another selection of the first representation will cause the content item corresponding to the first representation to be removed from the first messaging activity. In some embodiments, the visual appearance of the first visual indication when the first visual indication is displayed with the second value is different from when the first visual indication is displayed with the first value.
[0207] The above-described method of removing a content item from a message being created in a messaging user interface when a representation corresponding to the content item has been selected a predetermined number of times provides an efficient method of removing a content item from a messaging activity currently being created in a messaging user interface, which simplifies the interaction between a user and an electronic device, improves the usability of the electronic device, makes the user device interface more efficient, and further reduces power usage and improves battery life of the electronic device by allowing a user to use the electronic device more quickly and efficiently.
[0208] In some embodiments, the electronic device receives an indication of a second messaging activity directed to the messaging conversation while displaying the representations of the plurality of content items in the messaging user interface in a first manner, the second messaging activity including a second plurality of content items added to the messaging conversation, such as device 500 receiving an indication in FIG. 6V that a device associated with Alice added a message including four photos to the messaging conversation. In some embodiments, the electronic device receives an indication of a new messaging activity in the messaging conversation while the electronic device displays the representations of the plurality of content items in individual locations in the messaging user interface. In some embodiments, the individual user who triggered the second messaging activity is a user of the electronic device. In some embodiments, the individual user who triggered the second messaging activity is a user of a different electronic device.
[0209] In some embodiments, in response to receiving an indication of the second messaging activity, following a determination that the second messaging activity does not meet one or more criteria (e.g., if the number of content items included in the second messaging activity does not exceed a discrete threshold number of content items (e.g., 4, 8, 12 content items)), the electronic device simultaneously displays, in the messaging user interface, a representation of the plurality of content items in a first manner (e.g., the electronic device does not change the manner in which the representations of the content items are presented because the first messaging activity and the second messaging activity are independent of one another) and a representation of the second plurality of content items in a second manner (e.g., the representations of the second plurality of content items are displayed in a second manner in a second discrete location within the messaging user interface). For example, when the number of content items in the second messaging activity does not exceed a content item individual threshold (e.g., 4, 8, 12 content items), the representations of these content items are displayed in a different manner than when the content items exceed a content item individual threshold (e.g., 4, 8, 12 content items). In some embodiments, displaying the representations of the second plurality of content items in a second manner includes displaying the second plurality of content items in a second visual appearance (e.g., a second color). In some embodiments, displaying the representations of the second plurality of content items in a second manner includes displaying the representations of the second plurality of content items in a predefined (e.g., spatial) layout that is different from the stack of content items described above.For example, displaying representations of at least one content item such that the content item is partially overlaid on another content item (e.g., overlaid at an edge (or corner) of the other content item) in a second separate location in the messaging user interface.
[0210] The above method of differently displaying representations of content items based on whether corresponding messaging activity satisfies one or more criteria provides an efficient way of displaying content items in a messaging user interface differently based on the criteria that are met, thereby simplifying the interaction between a user and the electronic device, improving usability of the electronic device, and making the user device interface more efficient, thereby further reducing power usage and improving battery life of the electronic device by allowing a user to use the electronic device more quickly and efficiently.
[0211] In some embodiments, displaying the representations of the multiple content items in a first manner includes displaying the representations of the multiple content items as a stack of the representations of the content items, such as the stack shown in FIG. 6V. For example, if the number of content items included in the first messaging activity is at least four content items, the representations of the multiple content items are displayed as a stack of the representations. In some embodiments, displaying the representations of the content items in the stack includes displaying each of the representations of the content items with different priority levels (e.g., different levels of visual emphasis and / or visual prominence). In some embodiments, the electronic device prioritizes display of individual representations in the stack (e.g., a representation of a content item is not obscured by other representations of other content items). In some embodiments, an input directed (e.g., a swipe) at the stack causes the stack to prioritize display of a representation of a new content item. In some embodiments, the second manner differs from the first manner because an input directed (e.g., a swipe) at a representation of a content item does not prioritize a representation of a new content item. In some embodiments, when a stack of representations of content items is initially displayed in a messaging user interface, the electronic device provides an indication that input can be directed to the stack (e.g., the representations in the stack fan out in an animation when initially displayed in the messaging user interface).
[0212] The above-described method of displaying representations of a content item as a stack provides an efficient way for displaying multiple representations of a content item as a stack when criteria for displaying the representations of the content item in a first manner are met, which simplifies the interaction between a user and an electronic device, improves usability of the electronic device and makes the user-device interface more efficient, which further reduces power usage and improves battery life of the electronic device by allowing a user to use the electronic device more quickly and efficiently.
[0213] In some embodiments, displaying the representation of the plurality of content items in a first manner includes displaying in the messaging user interface a selectable option associated with the representation of the plurality of content items that is selectable to display a separate user interface including the representation of the plurality of content items displayed in a third manner different from the first manner, such as indication 620a of FIG. 6II. For example, when the electronic device is displaying the plurality of content items included in the first visual indication in a first manner, the first visual indication also includes a selectable option to display the plurality of content items in rows and columns (e.g., arranged according to a "grid" layout). In some embodiments, the selectable option is displayed regardless of the respective manner in which the electronic device is displaying the plurality of content items included in the first visual indication. In some embodiments, when the electronic device is displaying the plurality of content items according to a second manner, the selectable option is not displayed in the first visual indication.
[0214] The above method of displaying a selectable option that, when selected, displays a plurality of content items in a third manner provides an efficient method of displaying a plurality of content items in different manners depending on an input, thereby simplifying the interaction between a user and the electronic device, improving usability of the electronic device, and making the user device interface more efficient, thereby allowing a user to use the electronic device more quickly and efficiently, thereby further reducing power usage and improving battery life of the electronic device.
[0215] In some embodiments, the selectable options include status information of a plurality of content items, such as the status shown in the indication 620a of FIG. 6II ("4 photos saved"). For example, in some embodiments, the selectable options (e.g., included in the first visual indication) provide information about a plurality of content items on the electronic device. For example, if none of the content items corresponding to the representations of the content items (e.g., included in the first visual indication) are saved on the electronic device, the selectable options indicate the number of content items that can be saved / downloaded to the electronic device (e.g., "2 content items", "10 content items", etc.). In some embodiments, if a subset of the content items included in the first visual indication have been downloaded to the electronic device, the selectable options indicate the number of downloaded content items (e.g., also indicate the total number of content items that can be downloaded to the electronic device). In some embodiments, if the electronic device cannot access the individual number of content items included in the visual indication because the content items are still uploaded to a particular server, the selectable options indicate the number of content items that are still uploaded to the server. In some embodiments, the selectable option indicates when the electronic device will no longer have access to the content item included in the first visual indication (eg, the date the content item will expire).
[0216] The above method of indicating the status of multiple content items provides an efficient method of indicating the status of multiple content items to an electronic device displaying the multiple content items, thereby simplifying interaction between a user and the electronic device, improving usability of the electronic device, providing a more efficient user device interface, and further reducing power usage and improving battery life of the electronic device by allowing a user to use the electronic device more quickly and efficiently.
[0217] In some embodiments, pursuant to a determination that the first messaging activity satisfies one or more second criteria, the messaging user interface displays, in association with the representation of the plurality of content items, a selectable option selectable for initiating a process of saving the plurality of content items to the electronic device, such as selectable option 618a of FIG. 6FF. For example, if a content item corresponding to the representation of the plurality of content items included in the first visual indication is available for download to the electronic device (or it is determined that a user of the electronic device is likely to download the plurality of content items (e.g., exceeds a probability threshold of 70%, 80%, 90%, etc.)), the electronic device updates the messaging user interface to include a selectable option for downloading / saving the plurality of content items to the electronic device. In some embodiments, if a subset of the plurality of content items has previously been downloaded to the electronic device, initiating a process of saving the plurality of content items to the electronic device includes initiating a process of downloading / saving the plurality of content items not previously downloaded (e.g., without initiating a process of downloading / saving the plurality of content items already saved / downloaded to the electronic device). In some embodiments, if none of the plurality of content items have been downloaded to the electronic device, initiating the process of storing the plurality of content items on the electronic device includes initiating a process of downloading / storing all of the content items included in the plurality of content items to the electronic device (or to individual applications available on the electronic device).
[0218] The above method of displaying selectable options for downloading / saving multiple content items provides an efficient method for initiating the process for saving multiple content items from a messaging user interface, thereby simplifying the interaction between a user and the electronic device, improving usability of the electronic device, and making the user device interface more efficient, thereby allowing a user to use the electronic device more quickly and efficiently, thereby further reducing power usage and improving battery life of the electronic device.
[0219] In some embodiments, displaying the representations of the plurality of content items in a first manner includes displaying status information of the plurality of content items in the messaging user interface in association with the representations of the plurality of content items (e.g., the electronic device displays the status of the content items included in the first visual indication while the representations of those content items are displayed in the first manner) relative to the electronic device). In some embodiments, if none of the content items have been stored / downloaded to the electronic device, the status information indicates a total number of content items available for storage on the electronic device (e.g., the number of content items corresponding to the first visual indication). In some embodiments, if some of the plurality of content items have been previously stored / downloaded to the electronic device, the status information indicates a number of content items of the plurality of content items previously stored / downloaded.
[0220] In some embodiments, while displaying a selectable option selectable for initiating a process of saving the plurality of content items to the electronic device, the electronic device receives, via one or more input devices, a first input corresponding to a selection of the selectable option, such as input 601a-cc selecting selectable option 618a of FIG. 6EE (e.g., the electronic device detects a request to download the plurality of content items while the electronic device is displaying a messaging user interface). In some embodiments, in response to receiving the first input, the electronic device initiates a process of saving the plurality of content items to the electronic device. In some embodiments, initiating a process of saving the plurality of content items to the electronic device includes initiating a process of saving all of the plurality of content items that are not currently downloaded to the electronic device. In some embodiments, the electronic device prompts a user of the electronic device to confirm / approve the process of saving the plurality of content items to the electronic device. In some embodiments, after initiating the process of storing the plurality of content items on the electronic device (e.g., after the plurality of content items are stored on the electronic device), the electronic device 500 updates the status information of the plurality of content items to indicate that the plurality of content items have been stored on the electronic device, such as a status update from "4 photos" in FIG. 6EE to "4 photos stored" in FIG. 6HH. For example, before the request to store the plurality of content items was received, the status information associated with the plurality of content items indicated that none of the plurality of content items are currently stored on the electronic device. After the request to store the plurality of content items is received (and after the plurality of content items are successfully stored on the electronic device), the electronic device updates the status information from a status indicating that none of the content items are currently stored on the electronic device to a status indicating that all of the content items are currently stored on the electronic device (e.g., a status indicating a distinct number of the plurality of content items currently stored on the electronic device).
[0221] The above-described method of updating status information displayed in a messaging user interface when the status of multiple content items on an electronic device changes provides an efficient way of indicating the current status of multiple content items on an electronic device, which simplifies the interaction between a user and the electronic device, improves usability of the electronic device, and makes the user-device interface more efficient, which further reduces power usage and improves battery life of the electronic device by allowing a user to use the electronic device more quickly and efficiently.
[0222] In some embodiments, the representations of the plurality of content items (e.g., included in (or displayed in) the first visual indication) include a first representation of a first content item (e.g., a first photo, a first video), and displaying the representations of the plurality of content items in a first manner includes, pursuant to determining that the first content item is available for viewing, displaying the first representation of the first content item in a first appearance and position that corresponds to a first priority among the representations of the plurality of content items, such as the visual appearance and position of representation 614a-1 of Photo 1 in the stack of FIG. 6DD. For example, the priority of the first representation of the first content item (e.g., assigned to the first representation) varies based on whether the electronic device has access to the first content item. For example, if the first content item is available for viewing by the electronic device, then the first representation of the first content item may be displayed in a first appearance and position that corresponds to a first priority among the representations of the plurality of content items, such as the visual appearance and position of representation 614a-1 of Photo 1 in the stack of FIG. The representation is displayed with a higher priority than content items that are not available for display by the electronic device. In some embodiments, displaying the first representation of the first content having a first visual appearance includes displaying the first content item (or a representation of the first content item). In some embodiments, if the visual indication displays multiple content items in a stack, the representation of the first content item is closer to the top of the stack (e.g., the position of the representation of the first content item is closer to the top of the stack) than representations of other content items that are not available for display / viewing (e.g., the position of the representation of the first content item is further from the top of the stack than the first representation of the first content item). In some embodiments, the first content item is not available for viewing if the electronic device is unable to download the content item from a respective server.
[0223] In some embodiments, displaying the representation of the plurality of content items in a first manner includes, in accordance with a determination that the first content item is not available for viewing, displaying the first representation of the first content item in a second visual appearance different from the first visual appearance in the representation of the plurality of content items in a position corresponding to a second priority lower than the first priority, such as displaying the representation 614a-1 of photo 1 in a second position in the stack of FIG. 6DD if photo 1 is still being downloaded from the server. For example, the priority assigned to the first representation of the first content item is lower when the first content item is not available for viewing. In some embodiments, the first content item is not available for viewing if the first content item is still being uploaded to the server (e.g., cannot be downloaded by the electronic device). In some embodiments, if the first content item is not available for viewing, displaying the representation of the first content item with the second visual appearance includes displaying a placeholder image or a placeholder gray box (e.g., until the first content item is available for viewing). In some embodiments, when the first visual indication includes multiple content items displayed in a stack, a representation of the first content item is displayed closer to the bottom of the stack than representations of the content items available for viewing.
[0224] The above-described method of changing the priority of a representation of a first content item based on whether the first content item is available for viewing provides an efficient way of prioritizing the display of representations of content items available for viewing, thereby simplifying the interaction between a user and an electronic device, improving usability of the electronic device and making the user device interface more efficient, thereby enabling a user to use the electronic device more quickly and efficiently, thereby further reducing power usage and improving battery life of the electronic device.
[0225] In some embodiments, while displaying representations of the multiple content items in a first manner, where the representations of the multiple content items are displayed in a first order in the first manner (e.g., the electronic device is currently displaying the multiple content items in a particular order in the first visual indication. In some embodiments, the order corresponds to the position of the representations of the multiple content items in a stack (e.g., the visual order of the representations of the content items displayed in the first visual indication)), the electronic device receives a first input directed to the representations of the multiple content items, such as inputs 601a-w of FIG. 6W , via one or more input devices.
[0226] In some embodiments, in response to receiving the first input, according to a determination that the first input includes a movement that satisfies one or more second criteria (e.g., if the first input corresponds to a horizontal swipe or drag gesture performed on the stack of content items), the electronic device updates the display of the representations of the plurality of content items to display the representations of the plurality of content items in a first manner in a second order that is different from the first order, such as the order of the representations shown in FIG. 6X. In some embodiments, if the movement is a vertical swipe or drag gesture, the movement does not meet the one or more second criteria, and instead of updating the order of the content items in the stack, the electronic device scrolls a messaging user interface, optionally including scrolling the stack of content items out of view on the display. For example, if the first representation of the first content item is displayed with the highest priority (e.g., at the top of the stack) in the first visual indication when the first input is received, then in response to the first (e.g., swipe) input, the second representation of the second content item is displayed with the highest priority (e.g., at the top of the stack). In some embodiments, as a result, the second representation of the second content item moves from its respective position in the stack to the top of the stack (e.g., to the first position in the stack), and the respective positions of the other content items in the stack are rearranged accordingly. In some embodiments, when the electronic device is displaying representations of the multiple content items according to the second method, the order of the representations of the multiple content items does not change in response to the input.
[0227] The above method of changing the order of representations of multiple content items with individual visual indications in response to an input provides an efficient way for displaying content items in different orders, thereby simplifying the interaction between a user and an electronic device, improving usability of the electronic device, making the user device interface more efficient, and further reducing power usage and improving battery life of the electronic device by allowing a user to use the electronic device more quickly and efficiently.
[0228] In some embodiments, the first order is the first individual order in accordance with a determination that the individual user indicated a first individual order for the representations of the multiple content items in the first messaging activity. For example, the electronic device displays the representations of the multiple content items in an order (e.g., according to priority) assigned to the corresponding content items when the individual user was composing a message corresponding to the first visual indication (e.g., the first messaging activity). In some embodiments, the first individual order corresponds to an order in which the content items were added to the first messaging activity.
[0229] In some embodiments, the first order is the second individual order pursuant to a determination that the individual user indicated a second individual order for the representations of the plurality of content items in the first messaging activity that is different from the first individual order. For example, the electronic device displays the representations of the plurality of content items in an order (e.g., according to priority) assigned to the corresponding content items when the individual user was composing a message corresponding to the first visual indication (e.g., the first messaging activity). In some embodiments, the second individual order corresponds to an order in which the content items were added to the first messaging activity.
[0230] The above method of visually ordering representations of content items in visual indications of different messaging activities based on priorities assigned to the content items during creation of the messaging activities provides an efficient way to display content items in different orders, thereby simplifying the interaction between a user and the electronic device, improving usability of the electronic device, and making the user-device interface more efficient, thereby further reducing power usage and improving battery life of the electronic device by allowing a user to use the electronic device more quickly and efficiently.
[0231] In some embodiments, while displaying the representations of the plurality of content items in the first manner and in the second order, the electronic device hides the display of the messaging user interface, such as in response to input 601b-bb selecting a selectable option of FIG. 6BB. For example, the electronic device ceases displaying the messaging user interface in response to the electronic device detecting a selection of a "Back" button or a "Done" button in the messaging user interface. In some embodiments, after ceasing to display the messaging user interface, the electronic device displays a messaging user interface including a messaging conversation associated with the plurality of users, the messaging user interface including the representations of the plurality of content items displayed in the first manner and in the first order, such as the order of representations 614a-1-614a-4 of FIG. 6CC. For example, the representations of the content items included in the first visual indication are displayed according to priorities originally assigned to the corresponding content items (e.g., priorities assigned while the first messaging activity was being created), even though the order of the content items was previously changed in the messaging user interface in response to user input after the messaging activity was created and sent to the messaging conversation.
[0232] The above-described method of displaying representations of content items with a first visual indication according to an order defined by an individual user who created a corresponding messaging activity provides an efficient method for displaying representations of content items based on an ordering defined by an individual user after the order of those representations has been changed in response to one or more inputs, which simplifies the interaction between the user and the electronic device, improves usability of the electronic device, and makes the user-device interface more efficient, which further reduces power usage and improves battery life of the electronic device by allowing a user to use the electronic device more quickly and efficiently.
[0233] It should be understood that the particular order described for the operations in FIG. 7 is merely exemplary, and the order described is not intended to indicate that the operations are the only order in which they may be performed. Those skilled in the art will recognize various ways to reorder the operations described herein. It should also be noted that other process details described herein with respect to other methods described herein (e.g., method 900) are also applicable in a similar manner to method 700 described above with respect to FIG. 7. For example, the method of displaying representations of multiple content items in a messaging conversation described above with reference to method 700 optionally has one or more of the characteristics of the method of interacting with multiple representations of a content item described herein with reference to other methods described herein (e.g., method 900). For the sake of brevity, those details will not be repeated here.
[0234] The operations in the information processing method described above are optionally implemented by executing one or more functional modules in an information processing device, such as a general-purpose processor (e.g., as described with respect to FIGS. 1A-1B, 3, 5A-5H) or an application specific chip. Furthermore, the operations described above with reference to FIG. 7 are optionally implemented by the components shown in FIGS. 1A-1B. For example, receiving operation 704, displaying operations 702 and 706 are optionally performed by event sorter 170, event recognizer 180, and event processor 190. Event monitor 171 of event sorter 170 detects a contact on touch screen 504, and event dispatcher module 174 delivers the event information to application 136-1. Individual event recognizer 180 of application 136-1 compares the event information with respective event definitions 186 to determine whether a first contact at a first location on the touch screen corresponds to a predefined event or sub-event, such as a selection of an object on a user interface. When a respective predefined event or sub-event is detected, the event recognizer 180 activates an event handler 190 associated with the detection of that event or sub-event. The event handler 190 optionally utilizes or calls a data updater 176 or an object updater 177 to update the application internal state 192. In some embodiments, the event handler 190 accesses a respective GUI updater 178 to update what is displayed by the application. Similarly, it will be apparent to one skilled in the art how other processes can be implemented based on the components shown in FIGS. 1A-1B. Selecting a content item in the messaging user interface
[0235] A user interacts with an electronic device in many different ways, including using the electronic device to access a user interface associated with one or more content items in a messaging conversation. In some embodiments, a user interface associated with an individual content item in a messaging conversation includes a selectable option or options for adding a messaging activity to that individual content item in the messaging conversation. The embodiments described below provide a way for an electronic device to display a user interface associated with a content item in a messaging conversation. Providing an efficient way to access a user interface associated with an individual content item in a messaging conversation reduces the amount of time required for a user to interact with the device, thereby extending the battery life of a battery-powered device. It is understood that people use devices. When a person uses a device, the person is optionally referred to as a user of the device.
[0236] 8A-8LLL illustrate various ways of interacting with multiple content items in a messaging conversation, according to some embodiments of the present disclosure. The embodiments in these figures are used to illustrate the processes described below, including the process described with reference to FIG. 9. Although FIGS. 8A-8LLL show various examples of ways in which an electronic device may perform the processes described below with reference to FIG. 9, it should be understood that these examples are not intended to be limiting, and that an electronic device may perform one or more of the processes described below with reference to FIG. 9 in ways not explicitly described with reference to FIGS. 8A-8LLL.
[0237] FIG. 8A illustrates an example device 500a that includes a touch screen 504a. In FIG. 8A, device 500a presents a messaging user interface 802a that includes a messaging conversation between a user of device 500a (Bob), a contact named Alice (represented by a representation of Alice 850a), and a contact named Sam (represented by a representation of Sam 848a). Messaging user interface 802a includes a visual indication 807a of a first message added to the messaging conversation with a device associated with Bob, includes a visual indication 809a of a second message added to the messaging conversation with a device associated with Sam, and includes a visual indication 816a of a third message added to the messaging conversation with a device associated with Alice. Visual indication 816a includes a representation of photo 1 814a-1, a representation of photo 5 814a-2, a representation of photo 2 814a-3, and a representation of photo 4 814a-4. In some embodiments, visual indication 816a is displayed within messaging user interface 802a in response to device 500a receiving an indication that a device associated with Alice has added a message to the messaging conversation that includes four photos—photo 1, photo 2, photo 4, and photo 5. In the example of FIG. 8A, device 500a displays representations 814a-1 through 814a-4 in a stack because the message corresponding to visual indication 816a includes four photos, namely photo 1, photo 2, photo 4, and photo 5. As discussed above with reference to FIG. 6U, in some embodiments, when the electronic device receives an indication that a message including four or more content items has been added to the messaging conversation, device 500a displays representations of the content items in a stack. Visual indication 816a optionally has one or more characteristics similar to visual indication 616a discussed above.
[0238] In some embodiments, when an electronic device is displaying representations of content items in a stack, the representation displayed at the top of the stack (e.g., displayed in a first position in the stack) is selectable and, when selected, causes the electronic device to display a user interface for the content item corresponding to the selected representation. For example, in FIG. 8B, while device 500a is displaying representation 814a-1 of photo 1 at the top of the stack, device 500a receives an input selecting representation 814a-1 of photo 1 (indicated by touch contacts 801a-b tapping representation 814a-1). In FIG. 8C, in response to device 500a detecting selection of representation 814a-1 of photo 1, device 500a displays user interface 804a of photo 1 (e.g., the photo corresponding to representation 814a-1). User interface 804a includes representation 897a of photo 1 and includes an indication 803a indicating that the representation corresponding to photo 1 of FIG. 8B (e.g., representation 814a-1) is currently at the top of the stack. Additionally, indication 803a indicates that the representation corresponding to photo 1 in visual indication 816a is one of four representations included in visual indication 816a. Additionally or alternatively, in some embodiments, when an electronic device is displaying representations of content items in a stack, the stack is selectable, which when selected, causes the electronic device to display a user interface for the content item that corresponds to the representation displayed at the top of the stack.
[0239] In addition, user interface 804a includes selectable option 805a that, when selected, causes electronic device 500a to display a user interface including a representation of the content item included in visual indication 816a; selectable option 806a-1 that, when selected, causes electronic device 500a to initiate a process to share photo 1 with one or more users (e.g., users associated with one or more second electronic devices); selectable option 806a-2 that, when selected, causes electronic device 500a to display information about / associated with photo 1; selectable option 806a-3 that, when selected, causes electronic device 500a to initiate a process to add a reaction (e.g., a tapback) to photo 1 in a messaging conversation; selectable option 806a-4 that, when selected, causes electronic device 500a to initiate a process to respond to photo 1 in a message conversation; and selectable option 806a-5 that, when selected, causes electronic device 500a to initiate a process to save photo 1 to electronic device 500a.
[0240] In FIG. 8C, while device 500a is displaying user interface 804a associated with photo 1, electronic device 500a detects a request to display a user interface corresponding to another photo included in visual indication 816a (indicated by touch contacts 801a-c swiping right on representation 897a of photo 1). In some embodiments, the next user interface displayed by device 500a is based on a representation in the stack that is ordered after (e.g., directly) the representation of photo 1. For example, in FIG. 8D, in response to device 500a detecting the swipe input in FIG. 8C, device 500a displays user interface 804a-2 for photo 5 because photo 5 corresponds to representation 814a-2 that is ordered after representation 814a-1 of photo 1 in the stack, as shown in FIG. 8B. User interface 804a-2 optionally has one or more characteristics similar to user interface 804a shown in FIG. 8C. Specifically, user interface 804-2a includes representation 897a-2 of photo 5 and includes an indication 803a indicating that a representation corresponding to photo 5 of FIG. 8B (e.g., representation 814a-2) is currently in the second position in the stack. In addition, indication 803a indicates that the representation corresponding to photo 5 in visual indication 816a is one of four representations included in visual indication 816a. It is understood that while device 500a is displaying user interface 804a, device 500a may also detect a leftward swipe, which in some embodiments causes device 500a to similarly display a user interface for a content item corresponding to the representation displayed at the bottom of the stack (photo 4) because no other representations are ordered before representation 814a-1 of photo 1 in the stack (e.g., because device 500a is displaying representation 814a-1 at the top of the stack), as shown in FIG.
[0241] In addition, user interface 804a-2 includes selectable option 805a that, when selected, causes electronic device 500a to display a user interface including a representation of the content item included in visual indication 816a; selectable option 806a-1 that, when selected, causes electronic device 500a to initiate a process to share photo 5 with one or more users (e.g., users associated with one or more second electronic devices); selectable option 806a-2 that, when selected, causes electronic device 500a to display information about / associated with photo 5; selectable option 806a-3 that, when selected, causes electronic device 500a to initiate a process to add a reaction (e.g., a tapback) to photo 5 in a messaging conversation; selectable option 806a-4 that, when selected, causes electronic device 500a to initiate a process to respond to photo 5 in a message conversation; and selectable option 806a-5 that, when selected, causes electronic device 500a to initiate a process to save photo 5 to electronic device 500a.
[0242] In FIG. 8E, while the device 500a is displaying the user interface 804a-2 associated with photo 5, the electronic device 500a detects another request to display a user interface for another photo included in the visual indication 816a (indicated by touch contact 801a-e swiping right on the representation 897a-2 of photo 5). In FIG. 8F, in response to the electronic device 500a detecting the request to display a user interface associated with another photo included in the visual indication 816a, the electronic device 500a displays the user interface 804a-3 for photo 2, as photo 2 corresponds to the representation 814a-3 of FIG. 8B, which is ordered (e.g., directly) after the representation 814a-2 of photo 5 in the stack. The user interface 804a-3 optionally has one or more characteristics similar to the user interface 804a shown in FIG. 8C.
[0243] Specifically, user interface 804a-3 includes representation 897a-2 of photo 2 and includes an indication 803a that indicates that a representation corresponding to photo 2 in Figure 8B (e.g., representation 814a-3) is currently in the third position in the stack. In addition, indication 803a indicates that the representation corresponding to photo 2 in visual indication 816a is one of four representations of photos included in visual indication 816a.
[0244] In addition, user interface 804a-3 includes selectable option 805a that, when selected, causes the electronic device 500a to display a user interface including a representation of the content item included in visual indication 816a; selectable option 806a-1 that, when selected, causes the electronic device 500a to initiate a process of sharing photo 2 with one or more users (e.g., users associated with one or more second electronic devices); selectable option 806a-2 that, when selected, causes the electronic device 500a to display information about / associated with photo 2; selectable option 806a-3 that, when selected, causes the electronic device 500a to initiate a process of adding a reaction (e.g., a tapback) to photo 2 in a messaging conversation; selectable option 806a-4 that, when selected, causes the electronic device 500a to initiate a process of responding to photo 2 in a message conversation; and selectable option 806a-5 that, when selected, causes the electronic device 500a to initiate a process of saving photo 2 to the electronic device 500a.
[0245] In Fig. 8G, while device 500a is displaying user interface 804a-3, device 500a detects a request to add a tapback (e.g., a message tag) to photo 2 in the messaging conversation (represented by touch contacts 801a-g selecting selectable option 806a-3). In response to device 500a detecting the request in Fig. 8G, in Fig. 8H, device 500a displays multiple tapbacks (e.g., message tags) including heart tapback 822a-1, thumbs up tapback 822a-2, thumbs down tapback 822a-3, laugh tapback 822a-4, emphasis tapback 822a-5, and question mark tapback 822a-6, and when selected, device 500a adds the selected tapback (e.g., a message tag) to photo 2 in the messaging conversation. In FIG. 8I, while device 500a is displaying multiple tapbacks (e.g., message tags), device 500a detects a selection of heart tapback 822a-1 (indicated by touch contacts 801a-i tapping heart tapback 822a-1). In FIG. 8J, in response to detecting the selection of heart tapback 822a-1 of FIG. 8I, device 500a displays a visual indication indicating that heart tapback 822a-1 was selected. In FIG. 8K, device 500a stops displaying tapbacks (e.g., message tags) 822a-1-822a-6 in user interface 804a-3 after a discrete amount of time (e.g., 0.3, 0.7, 1, 3 seconds) has elapsed since indicating that heart tapback 822a-1 was selected. Additionally, in FIG. 8K, because a tapback (e.g., a message tag) has been added to photo 2 in the messaging conversation, device 500a updates the visual appearance of selectable option 806a-3 to indicate the tapback(s) added to photo 2 in the messaging conversation.In particular, because a heart tapback has been added to Photo 2 (and because no other tapbacks (e.g., message tags) have been added to Photo 2 in the messaging conversation), device 500a updates the visual appearance of selectable option 806a-3 to indicate that a heart tapback has been added to Photo 2 in the messaging conversation.
[0246] In FIG. 8K, after device 500a adds a heart tap back to photo 2 in the messaging conversation, device 500a detects a request to navigate back to messaging user interface 802a (indicated by touch contacts 801a-k selecting a selectable option having the label "Done"). In some embodiments, device 500a updates the representation displayed at the top of the stack in messaging user interface 802a (e.g., the first position in the stack) to correspond to the photo that was being displayed by device 500a when the request to navigate back to messaging user interface 802a was received. For example, in FIG. 8L, because device 500a was displaying a representation of photo 2 when the request to navigate back to messaging user interface 802a was received in FIG. 8K, device 500a updates the representation displayed at the top of the stack from representation 814a-1 of photo 1 to representation 814a-3 corresponding to photo 2. As a result of device 500a updating the position of representation 814a-3 of photo 2 in the stack from the third position to the first position (e.g., the top of the stack), the positions of the representations of the other content items in the stack are rearranged accordingly. Specifically, device 500a rearranges the representations of the other content items in the stack such that representation 814a-4 of photo 4 is displayed in the second position in the stack (previously the fourth position in the stack, as shown in FIG. 8A), representation 814a-1 of photo 1 is displayed in the third position in the stack (previously the first position in the stack, as shown in FIG. 8A), and representation 814a-2 of photo 5 is displayed at the bottom of the stack (previously the second position in the stack, as shown in FIG. 8A). In addition to the positions of the items in the stack being rearranged by device 500a (e.g., the positions of representations 814a-1 through 814a-4), device 500a also updates messaging user interface 802a to include representation 830a of the heart tapback in representation 814a-3 of Photo 2 because the heart tapback for Photo 2 has been added to the messaging conversation, as illustrated in FIG. 8I.
[0247] In some embodiments, tapbacks (e.g., message tags) previously added to messages in a messaging conversation may be modified / adjusted. For example, in FIG. 8M, device 500a detects a selection of a heart tapback representation 814a-3 displayed on representation 830a of photo 2 (indicated by touch contacts 801a-m pressing on touchscreen 504a at a location corresponding to representation 830a for more than a threshold duration (e.g., 0.5, 1, 2, 5 seconds)). In FIG. 8N, in response to detecting the input in FIG. 8M, device 500a updates messaging user interface 802a to include a heart tapback, a thumbs up tapback, a thumbs down tapback, a laugh tapback, an emphasis tapback, and a question mark tapback, as previously described and shown in FIG. 8H. While displaying multiple tapbacks (e.g., message tags) in FIG. 8N, device 500a detects a selection of a thumbs up tapback (indicated by touch contacts 801a-n tapping at a location on touchscreen 504a corresponding to the thumbs up message tag). In response to device 500a detecting the input in FIG. 8N, in FIG. 8O, device 500a updates the tapback (e.g., a message tag) previously added by device 500a to the messaging conversation from a heart tapback to a thumbs-up tapback (shown by device 500a updating its messaging user interface to display a representation 831a of a thumbs-up tapback).
[0248] In some embodiments, device 500a displays tapbacks (e.g., message tags) added to individual messages (or content items) in the messaging conversation by devices of other users in the messaging conversation. For example, in FIG. 8P, device 500a receives an indication that Sam added a heart tapback to Photo 2 in the messaging conversation. In response to device 500a receiving an indication that a device associated with Sam added a heart tapback to Photo 2 in the messaging conversation, device 500a updates messaging user interface 802a to display representation 830a-2 of the heart tapback on representation 814a-3 corresponding to Photo 2. In FIG. 8Q, while displaying the updated messaging user interface 802a and while representation 814a-3 of Photo 2 is displayed at the top of the stack, electronic device 500a detects a selection of the stack of items included in visual indication 816a (indicated by touch contacts 801a-q selecting the stack included in visual indication 816a).
[0249] As previously mentioned, in some embodiments, the representation displayed at the top of the stack is selectable and, when selected, causes the electronic device to display a user interface associated with the content item corresponding to the selected representation. For example, in FIG. 8R, in response to electronic device 500a detecting a selection of representation 814a-3 of photo 2, device 500a displays user interface 804a-3 associated with photo 2 (e.g., the photo corresponding to representation 814a-3). User interface 804a includes representation 897a-3 of photo 2 and includes an indication 803a indicating that the representation corresponding to photo 2 of FIG. 8B (e.g., representation 814a-3) is currently at the top of the stack. In addition, indication 803a indicates that the representation corresponding to photo 2 in visual indication 816a is one of the four representations included in visual indication 816a.
[0250] Further, user interface 804a-3 includes selectable option 805a that, when selected, causes electronic device 500a to display a user interface including a representation of the content item included in visual indication 816a; selectable option 806a-1 that, when selected, causes electronic device 500a to initiate a process of sharing photo 2 with one or more users (e.g., users associated with one or more second electronic devices); selectable option 806a-2 that, when selected, causes electronic device 500a to display information about / related to photo 2; selectable option 806a-3 that, when selected, causes electronic device 500a to initiate a process of adding a reaction to photo 2 in a messaging conversation (e.g., a message tag, a tapback, etc.); selectable option 806a-4 that, when selected, causes device 500a to initiate a process of responding to photo 2 in a message conversation; and selectable option 806a-5 that, when selected, causes device 500a to initiate a process of saving photo 2 to electronic device 500a. 8R, because tapbacks (e.g., message tags) were previously added to photo 2 in the messaging conversation, device 500a displays selectable option 806a-3 having a visual appearance indicating tapbacks (e.g., message tags) previously added to photo 2 in the messaging conversation. In particular, selectable option 806a-3 indicates that a heart tapback and a thumbs-up tapback were previously added to photo 2 in the messaging conversation.
[0251] In FIG. 8S, while device 500a is displaying user interface 804a-3, device 500a detects a selection of selectable option 806a-3 (indicated by touch contacts 801a-s tapping selectable option 806a-3). In FIG. 8T, in response to device 500a detecting the selection in FIG. 8S, device 500a displays tapbacks 822a-1 through 822a-6 as previously illustrated and described. Additionally, in FIG. 8T, because a tapback (e.g., a message tag) was previously added to photo 2 in the messaging conversation, device 500a displays indication 826a indicating a user associated with the device that added a tapback (e.g., a message tag) to photo 2. In particular, indication 826a includes indication 828a indicating that a user (Sam) added a heart tapback to photo 2 and indication 830a indicating that a user (Bob) added a thumbs-up tapback to photo 2.
[0252] In some embodiments, the electronic device optionally receives a request to respond to a particular content item (e.g., a photo) in the messaging conversation. For example, in FIG. 8U, while the electronic device 500a displays the user interface 804a-3, the electronic device 500a detects a request to respond to Photo2 in the messaging conversation (indicated by touch contacts 801a-u selecting selectable option 806a-4). In FIG. 8V, in response to receiving the request to respond to Photo2 in the messaging conversation, the device 500a displays a response user interface 832a superimposed on the user interface 804a shown in FIG. 8U. The response user interface 832a includes a representation 860a of Photo2 indicating that the message created in the response user interface 832a is added to the messaging conversation as a response to Photo2. The response user interface 832a also includes a soft keyboard and a text entry field 825a. In the example of FIG. 8V, a user of device 500a (Bob) selects a sequence of inputs directed at a soft keyboard to compose a reply message to Photo 2 that includes the text "Great photo!" (indicated by text displayed in text input field 825a). After the user finishes composing the reply message, device 500a detects a request to add the created reply message ("Great photo!") to the messaging conversation (indicated by touch contacts 801a-v selecting selectable options in text input field 825a). In FIG. 8V-1, in response to device 500a receiving a request to add the created reply message to the messaging conversation, device 500a adds the created reply message to the messaging conversation and updates messaging user interface 802a to indicate that the reply message to Photo 2 has been successfully added to the messaging conversation.Specifically, in FIG. 8V-1, device 500a updates messaging user interface 802a to include representation 862a of the reply message that has been added to the messaging conversation and line 866a connecting representation 862a to representation 864a of Photo 2 (indicating that the message corresponding to representation 862a is a reply to Photo 2 in the messaging conversation).
[0253] In some embodiments, the electronic device optionally initiates a process to save the particular content item included in the message corresponding to the visual indication 816a. For example, in FIG. 8V-1, the electronic device 500a detects a selection of the representation 814a-3 of photo 2 (indicated by touch contact 801a-v-1 tapping on the representation 814a-3 of photo 2). In FIG. 8W, in response to the device 500a detecting the selection of the representation 814a-3 of photo 2, the electronic device 500a displays the user interface 804a-3, as previously described and illustrated above. In FIG. 8X, while the electronic device 500a displays the user interface 804a-3, the electronic device 500a detects a selection of the selectable option 806a-5 (indicated by touch contact 806a-5 tapping on the selectable option 801a-x). In response to electronic device 500a detecting a selection of selectable option 806a-5 of FIG. 8X, in FIG. 8Y, electronic device 500a updates user interface 804a-3 to include menu 835a. Menu 835a includes selectable option 834a that, when selected, causes electronic device 500a to save photo 2 to a photo application installed on device 500a, and selectable option 836a that, when selected, causes electronic device 500a to stop displaying menu 835a in user interface 804a without saving photo 2 to electronic device 500a. In FIG. 8Z, while electronic device 500a is displaying menu 835a in user interface 804a-3, electronic device 500a detects a selection of selectable option 834a (indicated by touch contacts 801a-z tapping selectable option 834a). In FIG. 8AA, in response to device 500a detecting a selection of selectable option 834a of FIG. 8Z, electronic device 500a saves Photo 2 to a photo application installed on device 500a and stops displaying menu 835a.
[0254] As previously discussed, in some embodiments, selectable option 806a-1 is selectable to cause electronic device 500a to initiate a process of sharing photo2 with one or more users (e.g., with devices associated with one or more users). For example, in FIG. 8AA, electronic device 500a detects a selection of selectable option 806a-1 (indicated by touch contacts 801a-aa tapping selectable option 806a-1). In FIG. 8BB, in response to device 500a detecting a selection of selectable option 806a-1 in FIG. 8AA, electronic device 500a updates user interface 804a-3 to include menu 840a. Menu 840a includes an indication 840a-4 indicating that selectable options 840a-1, 840a-2, 840a-3, 840a-5, 840a-6, 840a-7, and 804a-8 are associated with sharing photo2. Menu 840a also includes representations of messaging conversations accessible by device 500a (e.g., messaging conversations of which the user of device 500a is a part), including a representation 840a-5 of a first messaging conversation between the user of device 500a (Bob) and Alice and Sam of the messaging conversations shown in FIG. 8A, a representation 840a-6 of a second messaging conversation between the user of device 500a (Bob) and a user named X, a representation 840a-7 of a third messaging conversation between the user of device 500a (Bob) and a user named Y, a representation 840a-8 of a fourth messaging conversation between the user of device 500a (Bob) and a user named Z, and a representation 840a-1 of a fifth messaging conversation between the user of device 500a (Bob) and a user named U. Representations 840a-1, 840a-5, 840a-6, 840a-7, and 840a-8 are selectable and, when selected, cause electronic device 500a to create a message including Photo 2 in the messaging conversation corresponding to the selected representation.In addition, menu 840a also includes selectable option 840a-3 that, when selected, causes electronic device 500a to create a new message including photo 2 in a messaging application installed on device 500a, and selectable option 840a-2 that, when selected, causes electronic device 500a to create a new email including photo 2 in an email application installed on device 500a.
[0255] As mentioned above, in some embodiments, the selectable option 805a is selectable to cause the electronic device 500a to display a representation of the content item included in the visual indication 816a shown in FIG. 8V-1 (e.g., to display a representation of the content item included in the message corresponding to the visual indication 816a). For example, in FIG. 8CC, while the device 500a displays the user interface 804a-3, the device 500a detects a selection of the selectable option 805a (indicated by touch contact 801a-cc tapping the selectable option 805a). In FIG. 8DD, in response to the electronic device 500a detecting the selectable option 805a, the electronic device 500a displays the user interface 842a. The user interface 842a includes a representation of photo 1 848-1, a representation of photo 5 848-2, a representation of photo 2 848-3, and a representation of photo 4 848a-4 (e.g., a representation of the photo included in the message corresponding to the visual indication 816a). As shown in FIG. 8DD, device 500a displays representations 848-1 through 848-4 in a grid layout (eg, the representations are arranged in rows and columns).
[0256] In some embodiments, device 500a displays the representation in user interface 842a along with one or more indications that one or more tapbacks (e.g., message tags) have been added to the corresponding photo in the messaging conversation. For example, as shown in FIG. 8DD, device 500a is displaying indications 852a-1 of a heart tapback and 852a-1 of a thumbs-up tapback because a device associated with a user (Sam) added a heart message tapback to photo 2 in the messaging conversation, and because a user of device 500a (Bob) added a thumbs-up tapback to photo 2 (e.g., the photo corresponding to representation 848a-3) in the messaging conversation, as described above. The user interface 842a also includes a selectable option 846a that, when selected, causes the device 500a to enter a content selection mode enabling selection of one or more representations to be displayed in the user interface 842a, a selectable option 854a that, when selected, causes the device 500a to initiate a process to share photos corresponding to the representations 848a-1-848-4 with one or more users (e.g., with devices associated with one or more users), a selectable option 856a that, when selected, causes the device 500a to initiate a process to download photos corresponding to the representations 848-1-848-4 to the device 500a (e.g., downloading the photos included in the message corresponding to the visual indication 816a shown in FIG. 8DD), and a selectable option 858a that, when selected, causes the device 500a to initiate a process to create a response message to the message corresponding to the visual indication 816a shown in FIG. 8DD. In addition, the user interface 842a also includes an indication 850a that indicates information about the photos included in the user interface 842a. In particular, indication 850a indicates the total number of photos displayed on user interface 842a and how many of the total number of photos displayed on user interface 842a have been saved to electronic device 500a.
[0257] In some embodiments, the representations of the photographs displayed in user interface 842a are selectable and, when selected, cause device 500a to display a user interface associated with the photograph corresponding to the selected representation. For example, in FIG. 8EE, while device 500a is displaying user interface 842a, electronic device 500a detects a selection of representation 848a-2 of photograph 5 (indicated by touch contact 801a-ee tapping representation 848a-2 of photograph 5). In FIG. 8FF, in response to device 500a detecting a selection of representation 848-2 of photograph 5 of FIG. 8EE, device 500a displays user interface 804a-2 for photograph 5 (e.g., the photograph corresponding to representation 848a-2), as shown and described above.
[0258] In FIG. 8GG, while electronic device 500a displays user interface 804a-2, electronic device 500a detects a selection of selectable option 805a (indicated by touch contact 801a-gg tapping selectable option 805a). In FIG. 8HH, in response to device 500a detecting a selection of selectable option 805a of FIG. 8GG, electronic device 500a displays user interface 842a as previously shown and described in FIG. 8DD. In FIG. 8II, while electronic device 500a displays user interface 842a, electronic device 500a detects a selection of selectable option 856a (indicated by touch contact 801a-ii tapping selectable option 856a). In FIG. 8JJ, in response to electronic device 500a detecting a selection of selectable option 856a, electronic device initiates a process of downloading one or more of the photographs corresponding to representations 848-1-848-4. In some embodiments, as shown in FIGURE 8JJ, if none of the photographs corresponding to representations 848-1 through 848-4 have been previously downloaded to electronic device 500a, electronic device 500a displays menu 862a that includes selectable option 862a that, when selected, causes electronic device 500a to save photographs corresponding to representations 848-1 through 848-4 (photo 1, photo 2, photo 4, and photo 5) to electronic device 500a, and selectable option 864a that, when selected, causes electronic device 500a to stop displaying menu 863a without saving photographs corresponding to representations 848-1 through 848-4 to electronic device 500a. In FIGURE 8JJ, electronic device 500a detects a selection of selectable option 862a (indicated by touch contacts 801a through jj tapping selectable option 862a). In response to device 500a detecting selection of selectable option 862a, device 500a saves photos (photo 1, photo 2, photo 4, photo 5) corresponding to representations 848a-1 to 848-4 in a photo application installed on device 500a.
[0259] In Figure 8KK, after device 500a saves photos 1, 2, 4, and 5 in the photo application installed on device 500a of Figure 8JJ, device 500a stops displaying menu 863a and updates indication 850a. Specifically, electronic device 500a updates indication 850a from indicating that none of the photos corresponding to representations 848-1 through 848-4 are stored on device 500a (as shown in Figure 8HH) to indicating that all of the photos corresponding to representations 848-1 through 848-4 are stored on device 500a.
[0260] In some embodiments, device 500a optionally allows a user of device 500a to select one or more of the representations displayed in user interface 842a and, optionally, save those selected representations to device 500a. For example, in FIG. 8LL, electronic device 500a displays user interface 842a, but none of the photos corresponding to representations 848-1 through 848-4 are stored on device 500a (indicated by indication 850a including text "0 photos stored"). In FIG. 8MM, while device 500a displays user interface 842a and none of the photos corresponding to representations 848-1 through 848-4 are stored on device 500a, device 500a detects a request to enter a content selection mode that allows one or more of the representations displayed in user interface 842a to be selected (indicated by touch contact 801a-mm tapping on selectable option 846a). In response to device 500a detecting the input in FIG. 8MM, in FIG. 8NN device 500a enters a content selection mode (indicated by device 500a switching from displaying selectable option 846a ("Select") to displaying selectable option 847a ("Cancel")). In FIG. 8OO, after electronic device 500a enters the content selection mode, device 500a detects a selection of representation 848a-1 of PHOTO 1 (indicated by touch contact 801a-oo tapping representation 848a-1 of PHOTO 1). In FIG. 8PP, in response to detecting a selection of representation 848a-1 shown in FIG. 8OO, electronic device 500a selects representation 848a-1 of PHOTO 1 and displays an indication 849a-1 indicating that representation 848a-1 is currently selected by device 500a. In FIG. 8QQ, while representation 848a-1 is currently selected by device 500a (indicated by indication 849a-1), electronic device 500a detects a selection of representation 848a-2 of photograph 5 (represented by touch contact 801a-qq tapping representation 848a-2 of photograph 5).In Figure 8RR, in response to device 500a detecting a selection of representation 848a-2, device 500a selects representation 848a-2 of photo 5 and displays an indication 849a-2 indicating that representation 848a-2 is currently selected by device 500a. In Figure 8SS, while representation 848a-1 of photo 1 and representation 848a-2 of photo 5 are currently selected by device 500a (indicated by indications 849a-1 and 849-2), electronic device 500a detects a request to select representation 848a-3 of photo 2 (indicated by touch contact 801a-ss tapping representation 848-3 of photo 2). In FIG. 8TT, in response to device 500a detecting selection of representation 848a-3 of FIG. 8SS, electronic device 500a selects representation 848a-3 of Photo 2 and displays indication 849a-3 indicating that representation 848-3 is currently selected by device 500a.
[0261] 8UU, electronic device 500a detects a selection of selectable option 856a (indicated by touch contact 801a-uu tapping selectable option 856a) while representations 848a-1 through 848a-3 corresponding to photos 1, 5, and 2 are currently selected (indicated by indications 849a-1, 849a-2, and 849a-3). In some embodiments, if electronic device 500a detects a selection of selectable option 865a while one or more representations in user interface 842a are selected, electronic device 500a initiates a process to download the photograph corresponding to the selected representation. For example, in FIG. 8VV, in response to detecting a selection of selectable option 864a while representation 848a-1 of photo 1, representation 848a-2 of photo 5, and representation 848a-3 of photo 2 are currently selected, device 500a displays menu 870a including selectable option 872a that, when selected, causes electronic device 500a to save photos corresponding to the selected representations, photos 1, 2, and 5, to electronic device 500a. Additionally, in FIG. 8VV, electronic device 500a detects a selection of selectable option 872a (indicated by touch contact 801a-tt tapping selectable option 872a). In response to device 500a detecting a selection of selectable option 872a, device 500a saves photos corresponding to the selected representations (photo 1, photo 2, and photo 5) to a photo application installed on device 500a. In FIGURE 8WW, after device 500a saves photos 1, 2, and 5 to electronic device 500a, device 500a stops displaying menu 870a and updates indication 850a. Specifically, device 500a updates indication 850a from indicating that none of the photos corresponding to representations 848a-1 through 848a-4 are stored on device 500a to indicating that three of the photos corresponding to representations 848a-1 through 848a-4 are stored on device 500a, as shown in FIGURE 8LL.
[0262] In some embodiments, electronic device 500a optionally receives a request to re-save one or more of the photos previously stored on electronic device 500a. For example, in FIG. 8XX, while three of the photos corresponding to representations 848a-1 through 848a-4 are stored on device 500a (indicated by indication 850a including text "3 photos stored"), device 500a receives a request to enter a content selection mode, which allows one or more of the representations displayed in user interface 842a to be selected (indicated by touch contact 801a-vv tapping selectable option 846a), as described above. In FIG. 8YY, in response to device 500a detecting the input in FIG. 8XX, device 500a enters a content selection mode (indicated by device 500a switching from displaying selectable option 846a ("Select") to displaying selectable option 847a ("Cancel"). In some embodiments, while the device 500a is in the content selection mode, the device 500a displays visual indications in representations within the user interface 842a that correspond to photographs previously stored on the device 500a. Specifically, in the example of FIG. 8YY, because photographs 1, 2, and 5 were previously stored on the electronic device 500a, the device 500a displays an indication 876a-1 in representation 848a-1 indicating that photographs 1, 2, and 5 were previously stored on the device 500a, an indication 876a-2 for photograph 2 in representation 848-3, and an indication 876a-5 for photograph 5 in representation 848-2.
[0263] Additionally, in FIGURE 8YY, while device 500a is displaying indication 876a-5 indicating that photo 5 is currently stored on electronic device 500a, and while device 500a is currently in a content selection mode, device 500a detects a selection of representation 848a-2 of photo 5 (represented by touch contact 801a-yy tapping representation 848a-2 of photo 5). In FIGURE 8ZZ, in response to device 500a detecting a selection of representation 848a-2 of photo 5, device 500a selects representation 848a-2 and updates the visual appearance of indication 876a-5 from indicating that photo 5 is currently stored on device 500a to indicating that representation 848a-2 of photo 5 is currently selected by device 500a. In FIG. 8AAA, device 500a detects a selection of selectable option 856a (indicated by touch contact 801a-aaa tapping selectable option 856a) while representation 848a-2 of photo 5 is currently selected. In some embodiments, if electronic device 500a detects a selection of selectable option 846a and the selected representation corresponds to photos previously stored on device 500a, electronic device 500a initiates a process to re-save those photos on device 500a. For example, in FIG. 8BBB, in response to detecting a selection of selectable option 856a while representation 848a-2 of photo 5 is currently selected and while photo 5 is currently stored on electronic device 500a, electronic device displays menu 878a. Menu 878a includes a selectable option 880a that, when selected, causes the electronic device to re-save photo 5 (e.g., the photo corresponding to the selected representation) on device 500a. Additionally, selectable options 880a include an indication identifying the selected photo(s) that are already stored on device 500a ("Photo 5 is already stored in your photo library, would you like to save it again?").
[0264] In FIG. 8CCC, while device 500a is displaying menu 878a, device 500a detects a selection of selectable option 880a (indicated by touch contacts 801a-ccc tapping selectable option 880a). In FIG. 8DDD, in response to device 500a detecting a selection of selectable option 880a, device 500a re-saves photo 5 to a photo application installed on device 500a and ceases displaying menu 878a in user interface 842a. Additionally, as shown in FIG. 8DDD, device 500a continues to display indication 850a indicating that three of the photos corresponding to representations 848a-1-848a-4 have been saved to device 500a (photos 1, 2, and 5).
[0265] In some embodiments, selectable option 856a is selectable to save remaining photos corresponding to representations 848a-1 through 848-4 that have not been previously stored on electronic device 500a. For example, in FIG. 8EEE, while three of the four photos (photos 1, 2, and 5) corresponding to representations 848a-1 through 848a-4 are stored on device 500a (indicated by indication 850a including text "3 photos saved"), device 500a detects a selection of selectable option 856a (indicated by touch contact 801a-eee tapping selectable option 856a). In FIG. 8FFF, in response to device 500a detecting a selection of selectable option 801a-eee in FIG. 8EEE, device 500a displays menu 884a because some of the photos corresponding to representations 848a-1 through 848a-4 are currently stored on device 500a. Menu 884a includes selectable options 886a that, when selected, cause device 500a to save to device 500a photos corresponding to representations 848-1 through 848-4 that are not currently stored on device 500a, and selectable options 888a that, when selected, cause device 500a to cease displaying menu 884a without saving photos corresponding to representations 848a-1 through 848a-4 that are not currently stored on device 500a. In addition, selectable options 886a indicate which photos corresponding to representations 848a-1 through 848-4 were previously saved to device 500a, and which photos corresponding to representations 848a-1 through 848a-4 have not yet been saved to device 500a.
[0266] In FIG. 8GGG, while electronic device 500a is displaying menu 884a, electronic device 500a detects a selection of selectable option 886a (indicated by touch contact 801a-ggg tapping selectable option 886a). In response to device 500a detecting a selection of selectable option 886a, device 500a saves photo 4 in a photo application installed on device 500a (e.g., saves photos corresponding to representations 848a-1 through 848a not previously saved on device 500a). In FIG. 8HHH, after device 500a saves photo 4 to electronic device 500a, device 500a stops displaying menu 884a and updates indication 850a. Specifically, device 500a updates indication 850a from a state indicating that three of the photos corresponding to representations 848a-1 through 848a-4 have been stored on device 500a to a state indicating that all of the photos corresponding to representations 848a-1 through 848a-4 have been stored on device 500a ("all photos saved"), as shown in FIG. 8DDD.
[0267] In some embodiments, the electronic device receives a request to respond to photos corresponding to representations 848a-1-848a-4 in the messaging conversation. For example, in FIG. 8HHH, while electronic device 500a displays user interface 842a, the electronic device detects a request to respond to photos 1, 2, 4, and 5 in the messaging conversation (e.g., device 500 receives a request to respond to a message corresponding to visual indication 816a) (indicated by touch contacts 801a-hhh selecting selectable option 858a). In response to receiving the request to respond to photos 1, 2, 4, and 5 in the messaging conversation, device 500a displays a response user interface 832a superimposed on user interface 804a shown in FIG. 8U. The response user interface 832a includes a visual indication 890a of a message in the messaging conversation that includes photos 1, 2, 4, and 5. The response user interface 832a also includes a soft keyboard and a text entry field 825a.
[0268] In the example of FIG. 8III, a user of device 500a (Bob) provides a sequence of inputs directed at a soft keyboard to create a reply message to the message corresponding to visual indication 890a that includes the text "Great photo!" (indicated by text displayed in text input field 825a). After the user of device 500a finishes creating the reply message, device 500a detects a request to add the created reply message ("Great photo!") to the messaging conversation (indicated by touch contact 801a-iii selecting a selectable option in text input field 825a). In FIG. 8JJJ, in response to device 500a receiving a request to add the created reply message to the messaging conversation, device 500a adds the reply message to the messaging conversation and updates messaging user interface 802a to indicate that the reply to the message corresponding to visual indication 816a was successfully added to the messaging conversation. Specifically, in FIG. 8JJJ, device 500a updates messaging user interface 802a to include a representation 863a of the reply message added by device 500a to the messaging conversation and a line 867a connecting visual indication 863a to representation 816a of the reply message (indicating that the message corresponding to representation 816a is a reply to the message corresponding to visual indication 863a).
[0269] As previously discussed, in some embodiments, electronic device 500a receives a request to share photos corresponding to representations 848a-1-848-2 with one or more users. For example, in FIG. 8KKK, electronic device 500a detects a selection of selectable option 854a (indicated by touch contacts 801a-bbb tapping selectable option 854a). In FIG. 8LLL, in response to device 500a detecting a selection of selectable option 854a in FIG. 8KKK, electronic device 500a displays menu 840a. Menu 840a includes indication 840a-4 indicating that selectable options 840a-1, 840a-2, 840a-3, 840a-5, 840a-6, 840a-7, and 804a-8 are associated with sharing four photos, namely photo 1, photo 2, photo 4, and photo 5. Menu 840a also includes representations of messaging conversations accessible by device 500a (e.g., messaging conversations of which the user of device 500a is a part), including a representation 840a-5 of a first messaging conversation between the user of device 500a (Bob) and Alice and Sam of the messaging conversations shown in FIG. 8A, a representation 840a-6 of a second messaging conversation between the user of device 500a (Bob) and a user named X, a representation 840a-7 of a third messaging conversation between the user of device 500a (Bob) and a user named Y, a representation 840a-8 of a fourth messaging conversation between the user of device 500a (Bob) and a user named Z, and a representation 840a-1 of a fifth messaging conversation between the user of device 500a (Bob) and a user named U. Representations 840a-1, 840a-5, 840a-6, 840a-7, and 840a-8 are selectable and, when selected, cause the electronic device to create a message including photos 1, 2, 4, and 5 in the messaging conversation corresponding to the selected representation.In addition, menu 840a also includes a selectable option 840a-3 that, when selected, causes electronic device 500a to create a new message in a messaging application installed on device 500a that includes photos 1, 2, 4, and 5, and a selectable option 840a-2 that, when selected, causes electronic device 500a to create a new email in an email application installed on device 500a that includes photos 1, 2, 4, and 5.
[0270] 9 is a flow diagram illustrating a method for selecting and displaying a user interface associated with a content item in a messaging conversation. Method 900 is optionally performed in an electronic device such as device 100, device 300, device 500, device 500a, device 500b, etc., as described above with reference to Figures 1A-1B, 2-3, 4A-4B, and 5A-5H. Some operations in method 900 are optionally combined and / or the order of some operations is optionally changed.
[0271] As described below, method 900 provides a way for an electronic device to display a user interface associated with one or more content items in a messaging conversation and / or add messaging activity to one or more content items in a messaging conversation. This method reduces the cognitive burden on a user when interacting with a user interface of a device of the present disclosure, thereby creating a more efficient human-machine interface. For battery-operated electronic devices, improving the efficiency of the user's interaction with the user interface conserves power and increases the time between battery charges.
[0272] In some embodiments, the method 900 is performed in an electronic device (e.g., a mobile device (e.g., a tablet, smartphone, media player, or wearable device), a computer (e.g., a desktop computer, a laptop computer), or a wearable device (e.g., a watch, a head-mounted device) in communication with a display generating component and one or more input devices, optionally in communication with one or more of a mouse (e.g., external), a trackpad (optionally integrated or external), a remote control device (e.g., external), another mobile device (e.g., separate from the electronic device), a handheld device (e.g., external), and / or a controller (e.g., external, etc.), or a set-top box (e.g., a remote control) in communication with the one or more input devices). In some embodiments, the display generating component is an external display, such as a display (optionally a touch screen display) integral with the electronic device, a monitor, projector, television, or a hardware component (optionally integrated or external) for projecting a user interface or for making a user interface visible to one or more users.
[0273] In some embodiments, the electronic device, via a display generation component, displays a messaging user interface including a messaging conversation associated with a plurality of users (e.g., in some embodiments, the messaging user interface has one or more characteristics of the messaging user interface described in method 700), where the messaging user interface includes a first visual indication of a first messaging activity in the messaging conversation (e.g., such as a visual indication described with reference to method 700 when one or more criteria are met or not met), where the first visual indication includes a representation of a plurality of content items (e.g., photos, videos, and / or other media items, etc.) included in the first messaging activity (902), such as visual indication 816a included in messaging user interface 802a of FIG. 8B. For example, the electronic device displays a visual indication of a messaging activity added by an electronic device having access to the messaging conversation. In some embodiments, in addition to a representation of the plurality of content items, the visual indication also includes a representation of a typed message (e.g., including text). In some embodiments, the first visual indication is displayed by the electronic device because the electronic device received an indication that a device associated with a respective one of the multiple users added a new message to the messaging conversation. In some embodiments, the first visual indication includes one or more representations of a content item because the electronic device that added the first messaging activity to the messaging conversation detected a sequence of one or more inputs to add a content item to the first messaging activity. In some embodiments, the content items are of the same type (e.g., the content item corresponds to only images / photos) or are of different types (e.g., the content item corresponds to both images and videos).
[0274] While displaying the messaging user interface, the electronic device receives (904) a first input via one or more input devices corresponding to a selection of a first content item of a plurality of content items included in the first messaging activity, such as a selection of the representation of photo 1 of FIG. 8B (e.g., the electronic device receives an input for selecting a visual indication corresponding to a messaging activity including a plurality of content items). In some embodiments, the first input corresponds to a selection of the first content item pursuant to a determination that a first representation of the first content item of the plurality of content items was visually highlighted in the first visual indication when the first input was received. For example, when the visual indication is selected, the first content item is displayed with more prominence than other content items included in the visual indication. For example, the first content item is displayed at the top of a stack of content items, with other content items in the stack being below the first content item.
[0275] In some embodiments, in response to receiving the first input (906), the electronic device, via the display generating component, displays (908) a first user interface associated with the first content item and including one or more selectable options selectable for adding a messaging activity corresponding to a messaging conversation related to the first content item (e.g., not the second content item of the plurality of content items), such as user interface 804a of FIG. 8C. In some embodiments, when the electronic device detects a selection of the first visual indication, the content items included in the first visual indication are displayed as a stack (e.g., a collection). In some embodiments, the stack of content items displays one content item at a time (e.g., visually highlights one content item), and an input directed to the stack of content items causes the stack to display (e.g., visually highlights) a new content item in the stack. In some embodiments, the manner in which the content items are displayed in the visual indication is similar to the manner in which the content items are displayed in method 700. In some embodiments, when the visual indication is selected, the first content item is visually highlighted by the stack (e.g., is the current cover photo in the stack). In some embodiments, different portions of the visual indication of the first messaging activity are selectable. For example, text within the first messaging activity is selectable, and a stack of content items is selectable. In some embodiments, in response to selecting a stack when a particular photo is visually highlighted among other content items also displayed in the visual indication, the electronic device displays a user interface (e.g., a first user interface) that includes a selectable option for sending (e.g., adding) the messaging activity to a messaging conversation.For example, in some embodiments, the first user interface includes one or more selectable options for sending a response to the first content item (or, optionally, multiple content items) in the messaging conversation and / or for sending (e.g., adding) tags to the first content item (e.g., adding reactions such as "like," "heart," question mark, emphasis, and laugh).
[0276] The above-described method of displaying a user interface associated with a content item that is visually highlighted in a respective visual indication when the visual indication is selected provides an efficient method of accessing a user interface associated with a visually highlighted content item and adding messaging activity related to that content item in a messaging conversation, which simplifies the interaction between a user and an electronic device, improves usability of the electronic device, makes the user-device interface more efficient, and further reduces power usage and improves battery life of the electronic device by allowing a user to use the electronic device more quickly and efficiently.
[0277] In some embodiments, while displaying a messaging user interface in which a first representation of a first content item is visually highlighted in a first visual indication, the electronic device receives, via one or more input devices, a second input corresponding to a swipe input on the first visual indication, such as when touch inputs 801a-b of FIG. 8B correspond to a swipe gesture instead of a selection gesture. For example, while a representation corresponding to a first content item is visually highlighted in a stack, the electronic device receives a second input corresponding to a drag or swipe gesture. In some embodiments, the second input includes a movement that meets one or more second criteria. In some embodiments, if the second input corresponds to a vertical swipe or drag gesture, the movement of the second input does not meet one or more second criteria, and instead of updating the order of the content items in the stack, the electronic device scrolls the messaging user interface, optionally including scrolling the stack of content items out of view on the display.
[0278] In some embodiments, in response to receiving the second input, the electronic device updates the first visual indication to visually emphasize a second representation of a second content item that is different from the first content item of the plurality of content items, such as device 500 displaying representations 814a-2 of photo 2 at the top of the stack if touch contacts 801a-b correspond to the swipe input of FIG. 8B. For example, if the first representation of the first content item was displayed with the highest priority (e.g., at the top of the stack) in the first visual indication when the first input was received, in response to the second (e.g., swipe) input, the second representation of the second content item is displayed with the highest priority (e.g., at the top of the stack). In some embodiments, as a result, the second representation of the second content item moves from its respective position in the stack to the top of the stack (e.g., the first position in the stack), and the respective positions of the other content items in the stack are also rearranged accordingly.
[0279] In some embodiments, while displaying the updated first visual indication, the electronic device receives, via the one or more input devices, a third input corresponding to a selection of a second content item of the plurality of content items included in the first visual indication of the first messaging activity (e.g., in some embodiments, the third input corresponds to a selection of the second content item pursuant to a determination that a second representation of the second content item different from the first content item of the plurality of content items was visually highlighted in the first visual indication when the third input was received). In some embodiments, in response to receiving the third input, the electronic device displays, via the display generating component, a second user interface associated with the second content item including one or more selectable options selectable for adding a messaging activity corresponding to a messaging conversation related to the second content item, such as device 500a displaying user interface 804a-3 shown in FIG. 8F when a representation corresponding to photo 2 is displayed at the top of the stack (e.g., rather than the first content item of the plurality of content items). For example, because a representation of the second content item was visually highlighted when the electronic device detected a selection of the second content item, the electronic device displays a user interface associated with the second content item (e.g., the content item corresponding to the visually highlighted representation). In some embodiments, the second user interface includes selectable options for sending a response to the second content item in the messaging conversation and / or for adding a tag to the second content item in the messaging conversation (e.g., adding a tag such as a "like" tag, a "heart" tag, a question mark tag, an emphasis tag, a laugh tag, etc.). In some embodiments, while the electronic device is displaying the second user interface, the electronic device switches to displaying a first user interface associated with the first content item in response to the electronic device detecting one or more inputs.The above-described method of displaying a user interface associated with a second content item when a representation of the second content item is visually highlighted in a visual indication of a message in a messaging conversation provides an efficient way of accessing a user interface associated with the visually highlighted content item and adding messaging activity related to that content item in the messaging conversation, which simplifies the interaction between a user and an el...
Claims
**Claim 1** A method, in an electronic device that communicates with a display generation component and one or more input devices, displaying, via the display generation component, a messaging user interface that includes a messaging conversation associated with a plurality of users; receiving, while the messaging user interface is being displayed, an indication of a first messaging activity targeting the messaging conversation from an individual user among the plurality of users, the first messaging activity including a plurality of content items to be added to the messaging conversation; in response to receiving the indication of the first messaging activity, displaying, in the messaging user interface, a first visual indication corresponding to the first messaging activity that includes a representation of the plurality of content items, wherein the representation of the plurality of content items is displayed in a first manner according to a determination that the first messaging activity meets one or more criteria; and the representation of the plurality of content items is displayed in a second manner different from the first manner according to a determination that the first messaging activity does not meet the one or more criteria. **Claim 2** The method according to claim 1, wherein the one or more criteria include criteria that are met based on a number of content items included in the first messaging activity. **Claim 3** The method according to claim 1, wherein displaying the representation of the plurality of content items in the second manner includes displaying the representation of the plurality of content items in a first spatial layout. **Claim 4** Displaying the representation of the plurality of content items in the second manner includes: displaying the representation of the plurality of content items in a second spatial layout different from the first spatial layout according to a determination that a message creation user interface is being displayed in the messaging user interface. In accordance with the determination that the message creation user interface is not being displayed in the messaging user interface, displaying the representation of the plurality of content items within the first spatial layout, the method of claim 3 including the same.
5. While the messaging user interface is being displayed, receiving a first input corresponding to a request to create a messaging activity that includes one or more content items via the one or more input devices. In response to receiving the first input, updating the messaging user interface to include a content item selection user interface that includes a first representation of a first plurality of content items for inclusion in the messaging activity. While the content item selection user interface is being displayed, receiving one or more sequences of inputs via the one or more input devices that include a selection of a subset of the first representation of the first plurality of content items for inclusion in the messaging activity. In response to receiving the one or more sequences of inputs, displaying, via the display generation component, one or more indications that the subset of the first representation has been selected for inclusion in the messaging activity. Prior to a selection of a second representation in the subset of the first representation, in accordance with the determination that the one or more sequences of inputs corresponded to a selection of a first representation in the subset of the first representation, the one or more indications that the subset of the first representation has been selected for inclusion in the messaging activity also indicate that the content item corresponding to the first representation has precedence over the content item corresponding to the second representation in the messaging activity. Before the selection of the first expression in the subset of the first expression, according to the determination that the sequence of one or more inputs corresponded to the selection of the second expression in the subset of the first expression, the one or more indications that the subset of the first expression was selected for inclusion in the messaging activity also indicate that the content item corresponding to the second expression takes precedence over the content item corresponding to the first expression in the messaging activity. The method according to claim 1.
6. The messaging user interface includes a messaging activity input area, and the method includes in response to receiving the sequence of one or more inputs, updating the messaging activity input area to include the subset of the first expression selected for inclusion in the messaging activity, the subset of the first expression including the first expression and the second expression, and the sequence of one or more inputs corresponding to the selection of the first expression before the selection of the second expression such that the content item corresponding to the first expression takes precedence over the content item corresponding to the second expression in the messaging activity; while displaying the subset of the first expression in the messaging activity input area, receiving a second input via the one or more input devices in response to a request to relocate the first expression relative to the second expression in the messaging activity input area; in response to receiving the second input, relocating the first expression relative to the second expression in the messaging activity input area according to the second input, and updating the priorities associated with the first expression and the second expression such that the content item corresponding to the second expression takes precedence over the content item corresponding to the first expression in the messaging activity. The method according to claim 5, further comprising.
7. While the content item selection user interface is being displayed and while the first representation for inclusion in the messaging activity, the selection of the first representation for inclusion in the messaging activity is reflected in a first visual indication that is displayed in relation to the first representation, the first visual indication has an individual visual characteristic having a first value, while the first representation and the second representation within the subset of the first representation are selected, receiving, via the one or more input devices, one or more inputs directed to the first representation, In response to receiving the one or more inputs directed to the first representation, In accordance with a determination that the one or more inputs include a number that exceeds a threshold number of selections of the first representation, deselecting the first representation from inclusion in the messaging activity, ceasing display of the first visual indication, and updating a priority that the content item corresponding to the second representation has in the messaging activity; In accordance with a determination that the one or more inputs do not include more than the threshold number of selections of the first representation, maintaining the first representation as selected for inclusion in the messaging activity and displaying the first visual indication having an individual visual characteristic having a second value different from the first value without updating the priority that the content item corresponding to the second representation has in the messaging activity. The method according to claim 5, further comprising.
8. While displaying the representations of the plurality of content items in the messaging user interface by the first method, receiving an indication of a second messaging activity directed to the messaging conversation, the second messaging activity including a second plurality of content items to be added to the messaging conversation, and in response to receiving the indication of the second messaging activity, In accordance with the determination that the second messaging activity does not meet the one or more criteria, in the messaging user interface, the representation of the plurality of content items in the first method, and the representation of the second plurality of content items in the second method, are simultaneously displayed, further comprising the method according to claim 1.
9. Displaying the representation of the plurality of content items in the first method includes displaying the representation of the plurality of content items as a stack of content item representations, the method according to claim 1.
10. Displaying the representation of the plurality of content items in the first method includes, in the messaging user interface in relation to the representation of the plurality of content items, displaying selectable options selectable to display a separate user interface including the representation of the plurality of content items displayed in a third method different from the first method, the method according to claim 1.
11. The selectable option includes status information of the plurality of content items, the method according to claim 10.
12. Displaying the representation of the plurality of content items in the first method includes, in accordance with the determination that the first messaging activity meets one or more second criteria, displaying, in the messaging user interface in association with the representation of the plurality of content items, selectable options selectable to initiate a process of storing the plurality of content items in the electronic device, the method according to claim 1.
13. Displaying the representation of the plurality of content items in the first method includes displaying status information of the plurality of content items in the messaging user interface in association with the representation of the plurality of content items, and the method includes receiving, via the one or more input devices, a first input corresponding to the selection of the selectable option while the selectable option selectable to initiate the process of storing the plurality of content items in the electronic device is being displayed. In response to receiving the first input, starting the process of storing the plurality of content items in the electronic device; After starting the process for storing the plurality of content items in the electronic device, updating the status information of the plurality of content items to indicate that the plurality of content items are stored in the electronic device, the method of claim 12 further comprising.
14. The representation of the plurality of content items includes a first representation of a first content item, and displaying the representation of the plurality of content items in the first method In accordance with a determination that the first content item is available for viewing, displaying the first representation of the first content item in a first visual appearance at a position corresponding to a first priority in the representation of the plurality of content items; In accordance with a determination that the first content item is not available for viewing, displaying the first representation of the first content item in a second visual appearance different from the first visual appearance and at a position corresponding to a second priority lower than the first priority in the representation of the plurality of content items, the method of claim 1.
15. While displaying the representation of the plurality of content items in the first method, the representation of the plurality of content items being displayed in a first order in the first method, receiving a first input with respect to the representation of the plurality of content items via the one or more input devices; In response to receiving the first input, In accordance with a determination that the first input includes a movement that satisfies one or more second criteria, updating the display of the representation of the plurality of content items to display the representation of the plurality of content items in a second order different from the first order in the first method, the method of claim 1 further comprising.
16. Based on a determination that the individual user indicated a first individual order for the representation of the plurality of content items in the first messaging activity, the first order is the first individual order; The method according to claim 15, wherein, in accordance with a determination that the individual user has indicated a second individual order different from the first individual order for the representation of the plurality of content items in the first messaging activity, the first order is the second individual order.
17. while displaying the representation of the plurality of content items in the second order by the first method, suspending the display of the messaging user interface; after suspending the display of the messaging user interface, displaying the messaging user interface including the messaging conversation associated with the plurality of users, wherein the messaging user interface includes the representation of the plurality of content items displayed by the first method in the first order. The method according to claim 15, further comprising:
18. An electronic device, one or more processors; a memory; one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, and the one or more programs include instructions for executing the method according to any one of claims 1 to 17. An electronic device.
19. A non-transitory computer-readable storage medium storing one or more programs, the one or more programs including instructions that, when executed by one or more processors of an electronic device, cause the electronic device to execute the method according to any one of claims 1 to 17. A non-transitory computer-readable storage medium.