Adaptive video conference user interface

Abstract

To provide a user interface for managing a video conference session.SOLUTION: In some embodiments, a video conference interface updates when participants join and / or leave a video conference session. In some embodiments, a video conference interface includes a representation of content being shared in the video conference session.SELECTED DRAWING: Figure 6L

Description

[Technical field]

[0001] (CROSS REFERENCE TO RELATED APPLICATIONS) This application claims priority to U.S. patent application Ser. No. 17 / 745,680, entitled "ADAPTIVE VIDEO CONFERENCE USER INTERFACES", filed May 16, 2022, U.S. Provisional Application No. 63 / 230,476, entitled "ADAPTIVE VIDEO CONFERENCE USER INTERFACES", filed August 6, 2021, U.S. Provisional Application No. 63 / 197,461, entitled "ADAPTIVE VIDEO CONFERENCE USER INTERFACES", filed June 6, 2021, and U.S. Provisional Application No. 63 / 190,224, entitled "ADAPTIVE VIDEO CONFERENCE USER INTERFACES", filed May 18, 2021, all of which are incorporated by reference in their entireties herein.

[0002] TECHNICAL FIELD This disclosure relates generally to computer user interfaces, and more particularly, to techniques for managing video conferencing sessions. [Background technology]

[0003] The computer system may include hardware and / or software for displaying various types of communication and information sharing interfaces. Summary of the Invention

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

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

[0006] According to some embodiments, a method is described that is executed on a computer system in communication with one or more display generating components and one or more input devices. The method includes: displaying a user interface of the real-time communication session, the user interface including a plurality of representations of participants of the real-time communication session, the plurality of representations including a first set of the representations of the participants displayed in a grid pattern in a first region of the user interface of the real-time communication session and a second set of the representations of the participants displayed in a second region of the user interface visually distinct from the first region, the representations of the first set of representations being larger than the representations of the second set of representations; detecting a change in one or more dimensions of the first region while displaying the user interface of the real-time communication session including the plurality of representations of participants of the real-time communication session; and in response to detecting the change in the one or more dimensions of the first region, modifying a number of the representations of participants of the real-time communication session displayed in the first region based on the change in the one or more dimensions of the first region, the modifying including ceasing to display a first representation of each participant in the first region and displaying a second representation of each participant in the second region.

[0007] According to some embodiments, a non-transitory computer readable storage medium is described that stores one or more programs configured to be executed by one or more processors of a computer system in communication with one or more display generating components and one or more input devices, the one or more programs being for displaying a user interface of a real-time communication session, the user interface including a plurality of representations of participants of the real-time communication session, the plurality of representations including a first set of the representations of the participants displayed in a grid pattern in a first region of the user interface of the real-time communication session, and a second set of the representations of the participants displayed in a second region of the user interface visually distinct from the first region; The method includes instructions for: displaying a first set of representations that is larger than a second set of representations; detecting a change in one or more dimensions of the first area while displaying a user interface of the real-time communication session including a plurality of representations of participants in the real-time communication session; and in response to detecting the change in the one or more dimensions of the first area, modifying a number of representations of participants of the real-time communication session displayed in the first area based on the change in the one or more dimensions of the first area, the modifying including ceasing to display a first representation of each participant in the first area and displaying a second representation of each participant in the second area.

[0008] According to some embodiments, a temporary computer readable storage medium is described. The temporary computer readable storage medium stores one or more programs configured to be executed by one or more processors of a computer system in communication with one or more display generating components and one or more input devices, the one or more programs being for displaying a user interface of a real-time communication session, the user interface including a plurality of representations of participants of the real-time communication session, the plurality of representations including a first set of the representations of the participants displayed in a grid pattern in a first region of the user interface of the real-time communication session, and a second set of the representations of the participants displayed in a second region of the user interface visually distinct from the first region, the representations being displayed in a grid pattern in a second region of the user interface visually distinct from the first region, The method includes instructions for displaying a user interface of a real-time communication session, the user interface including a first set of representations being larger than a second set of representations; detecting a change in one or more dimensions of the first area while displaying a user interface of the real-time communication session including a plurality of representations of participants in the real-time communication session; and in response to detecting the change in the one or more dimensions of the first area, modifying a number of representations of participants of the real-time communication session displayed in the first area based on the change in the one or more dimensions of the first area, the modifying including ceasing to display a first representation of each participant in the first area and displaying a second representation of each participant in the second area.

[0009] According to some embodiments, a computer system configured to communicate with one or more display generation components and one or more input devices is described. The computer system comprises one or more processors and a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs including instructions for: displaying a user interface of the real-time communication session, the user interface including a plurality of representations of participants in the real-time communication session, the plurality of representations including a first set of the representations of the participants displayed in a grid pattern in a first region of the user interface of the real-time communication session and a second set of the representations of the participants displayed in a second region of the user interface visually distinct from the first region, wherein the representations of the first set of representations are larger than the representations of the second set of representations; detecting a change in one or more dimensions of the first region while displaying the user interface of the real-time communication session including the plurality of representations of participants in the real-time communication session; and in response to detecting the change in the one or more dimensions of the first region, modifying a number of the representations of participants of the real-time communication session displayed in the first region based on the change in the one or more dimensions of the first region, the modifying including ceasing to display a first representation of each participant in the first region and displaying a second representation of each participant in the second region.

[0010] According to some embodiments, a computer system configured to communicate with one or more display generating components and one or more input devices is described, the computer system including: means for displaying a user interface of the real-time communication session, the user interface including a plurality of representations of participants of the real-time communication session, the plurality of representations including a first set of the representations of the participants displayed in a grid pattern in a first region of the user interface of the real-time communication session and a second set of the representations of the participants displayed in a second region of the user interface visually distinct from the first region, the representations of the first set of representations being larger than the representations of the second set of representations; means for detecting a change in one or more dimensions of the first region while displaying the user interface of the real-time communication session including the plurality of representations of participants of the real-time communication session, and means for modifying a number of the representations of participants of the real-time communication session displayed in the first region based on the change in the one or more dimensions of the first region in response to detecting the change in the one or more dimensions of the first region, the modifying including ceasing to display a first representation of each participant in the first region and displaying a second representation of each participant in the second region.

[0011] According to some embodiments, a computer program product is described. The computer program product includes one or more programs configured to be executed by one or more processors of a computer system in communication with one or more display generation components and one or more input devices, the one or more programs for displaying a user interface of a real-time communication session, the user interface including a plurality of representations of participants of the real-time communication session, the plurality of representations including a first set of the representations of the participants displayed in a grid pattern in a first region of the user interface of the real-time communication session and a second set of the representations of the participants displayed in a second region of the user interface visually distinct from the first region, the representations the representation of a first set of participants being larger than the representation of a second set of representations; detecting a change in one or more dimensions of the first area while displaying a user interface of the real-time communication session including a plurality of representations of participants of the real-time communication session; and in response to detecting the change in the one or more dimensions of the first area, modifying a number of the representations of the participants of the real-time communication session displayed in the first area based on the change in the one or more dimensions of the first area, the modifying including ceasing to display a first representation of each participant in the first area and displaying a second representation of each participant in the second area.

[0012] According to some embodiments, a method is described that is executed in a computer system in communication with one or more display generation components and one or more input devices, the method including receiving a request to display a user interface of a real-time communication application corresponding to the real-time communication session, displaying a user interface of the real-time communication application corresponding to the real-time communication session in response to receiving the request to display the user interface of the real-time communication application corresponding to the real-time communication session, and while the computer system is connected to the real-time communication session and connected to the shared content session, simultaneously displaying, in the user interface of the real-time communication application, a plurality of representations of participants of the real-time communication session, the plurality of representations being displayed in a two-dimensional array including two or more rows and two or more columns, and a representation of content of the shared content session having a size corresponding to two or more rows of the array and / or two or more columns of the array, the representation of the content being displayed in visual association with the array.

[0013] According to some embodiments, a non-transitory computer-readable storage medium is described. The non-transitory computer-readable medium stores one or more programs configured to be executed by one or more processors of a computer system in communication with one or more display generating components and one or more input devices, the one or more programs including instructions for receiving a request to display a user interface of a real-time communication application corresponding to a real-time communication session, displaying a user interface of the real-time communication application corresponding to the real-time communication session in response to receiving the request to display the user interface of the real-time communication application corresponding to the real-time communication session, and simultaneously displaying, in the user interface of the real-time communication application, a plurality of representations of participants of the real-time communication session, the plurality of representations being displayed in a two-dimensional array including two or more rows and two or more columns, and a representation of content of the shared content session having a size corresponding to two or more rows of the array and / or two or more columns of the array, the representation of the content being displayed in visual association with the array while the computer system is connected to the real-time communication session and connected to the shared content session.

[0014] According to some embodiments, a temporary computer-readable storage medium is described. The temporary computer-readable medium stores one or more programs configured to be executed by one or more processors of a computer system in communication with one or more display generating components and one or more input devices, the one or more programs including instructions for receiving a request to display a user interface of a real-time communication application corresponding to a real-time communication session, displaying a user interface of the real-time communication application corresponding to the real-time communication session in response to receiving the request to display the user interface of the real-time communication application corresponding to the real-time communication session, and simultaneously displaying, in the user interface of the real-time communication application, a plurality of representations of participants of the real-time communication session, the plurality of representations being displayed in a two-dimensional array including two or more rows and two or more columns, and a representation of content of the shared content session having a size corresponding to two or more rows of the array and / or two or more columns of the array, the representation of the content being displayed in visual association with the array while the computer system is connected to the real-time communication session and connected to the shared content session.

[0015] According to some embodiments, a computer system configured to communicate with one or more display generation components and one or more input devices is described, the computer system comprising one or more processors and a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs including instructions for receiving a request to display a user interface of a real-time communication application corresponding to a real-time communication session, displaying a user interface of the real-time communication application corresponding to the real-time communication session in response to receiving the request to display the user interface of the real-time communication application corresponding to the real-time communication session, and simultaneously displaying, in the user interface of the real-time communication application, a plurality of representations of participants of the real-time communication session, the plurality of representations being displayed in a two-dimensional array including two or more rows and two or more columns, and a representation of content of the shared content session having a size corresponding to two or more rows of the array and / or two or more columns of the array, the representation of the content being displayed in visual association with the array while the computer system is connected to the real-time communication session and connected to the shared content session.

[0016] According to some embodiments, a computer system configured to communicate with one or more display generation components and one or more input devices is described, the computer system including: means for receiving a request to display a user interface of a real-time communication application corresponding to the real-time communication session; means for displaying a user interface of the real-time communication application corresponding to the real-time communication session in response to receiving the request to display the user interface of the real-time communication application corresponding to the real-time communication session; and means for simultaneously displaying, in the user interface of the real-time communication application while the computer system is connected to the real-time communication session and connected to the shared content session, a plurality of representations of participants of the real-time communication session displayed in a two-dimensional array including two or more rows and two or more columns, and a representation of content of the shared content session having a size corresponding to two or more rows of the array and / or two or more columns of the array, the representation of the content being displayed in visual association with the array.

[0017] According to some embodiments, a computer program product is described, the computer program product including one or more programs configured to be executed by one or more processors of a computer system in communication with one or more display generation components and one or more input devices, the one or more programs including instructions for receiving a request to display a user interface of a real-time communication application corresponding to a real-time communication session, displaying a user interface of the real-time communication application corresponding to the real-time communication session in response to receiving the request to display the user interface of the real-time communication application corresponding to the real-time communication session, and simultaneously displaying, in the user interface of the real-time communication application, while the computer system is connected to the real-time communication session and connected to the shared content session, a plurality of representations of participants of the real-time communication session displayed in a two-dimensional array including two or more rows and two or more columns, and a representation of content of the shared content session having a size corresponding to two or more rows of the array and / or two or more columns of the array, the representation of the content displayed in visual association with the array.

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

[0019] Thus, devices are provided with faster, more efficient methods and interfaces for managing video conferencing sessions, thereby increasing the effectiveness, efficiency, and user satisfaction of such devices, which methods and interfaces may complement or replace other methods for managing video conferencing sessions.

[0020] For a better understanding of the various described embodiments, reference should be made 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]

[0021] [Figure 1A] FIG. 1 is a block diagram illustrating a portable multifunction device with a touch-sensitive display in accordance with some embodiments. [Figure 1B] FIG. 2 is a block diagram illustrating example components for event processing according to some embodiments. [Diagram 2] 1 illustrates a portable multifunction device with a touch screen in accordance with some embodiments. [Diagram 3] 1 is a block diagram of an exemplary multifunction device having a display and a touch-sensitive surface in accordance with some embodiments. [Figure 4A] 1 illustrates an exemplary user interface for a menu of applications on a portable multifunction device in accordance with some embodiments. [Figure 4B] 1 illustrates an exemplary user interface for a multifunction device having a touch-sensitive surface that is separate from the display in accordance with some embodiments. [Figure 5A] 1 illustrates a personal electronic device according to some embodiments. [Figure 5B] FIG. 1 is a block diagram illustrating a personal electronic device according to some embodiments. [Figure 5C] 1 illustrates an example diagram of a communication session between electronic devices according to some embodiments. [Figure 6A] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6B] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6C] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6D] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6E] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6F] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6G] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6H] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6I] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6J] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6K] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6L] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6M] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6N] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6O] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6P] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6Q] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6R] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6S] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6T] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6U] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6V] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6W] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6X] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6Y] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6Z] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AA]1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AB] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AC] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6A-D] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AE] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AF] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6A-G] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AH] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AI] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AJ] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AK] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AL] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AM] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AN]1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AO] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AP] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AQ] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AR] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 6AS] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 7] 1 shows a flow diagram illustrating a method for managing a video conference session according to some embodiments. [Figure 8A] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 8B] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 8C] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 8D] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 8E] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 8F] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 8G]1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 8H] 1 illustrates an exemplary user interface for managing a video conference session according to some embodiments. [Figure 9] 1 shows a flow diagram illustrating a method for managing a video conference session according to some embodiments. DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

[0022] The following description sets forth example methods, parameters, etc. However, such description should not be construed as intended to limit the scope of the present disclosure, but rather as provided for illustrating example embodiments.

[0023] There is a need for electronic devices that provide efficient methods and interfaces for managing video conferencing sessions. Such techniques can reduce the cognitive burden on users accessing content in a video conferencing session, thereby increasing productivity. Furthermore, such techniques can reduce processor and battery power that is otherwise wasted on redundant user input.

[0024] 1A-1B, 2, 3, 4A-4B, and 5A-5C provide a description of an exemplary device for performing techniques for managing a video conference session. FIGS. 6A-6AS show an exemplary user interface for managing a video conference session. FIG. 7 is a flow diagram illustrating a method for managing a video conference session, according to some embodiments. The user interfaces of FIGS. 6A-6AS are used to illustrate processes described below, including the process of FIG. 7. FIGS. 8A-8H show an exemplary user interface for managing a video conference session. FIG. 9 is a flow diagram illustrating a method for managing a video conference session, according to some embodiments. The user interfaces of FIGS. 8A-8H are used to illustrate processes described below, including the process of FIG. 9.

[0025] The processes described below enhance usability of the device and streamline the user-device interface (e.g., by helping the user provide appropriate inputs and reduce user errors when operating / interacting with the device) through a variety of techniques, including providing improved visual feedback to the user, reducing the number of inputs required to execute an action, providing additional control options without cluttering the user interface with additional displayed controls, executing an action without requiring further user input when a set of conditions is met, and / or other techniques. These techniques also reduce power usage and improve the device's battery life by allowing the user to use the device more quickly and efficiently.

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

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

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

[0029] 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.

[0030] 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 computers 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 a desktop computer having a touch-sensitive surface (e.g., a touchscreen display and / or a touchpad). In some embodiments, the electronic device is a computer system in communication (e.g., via wireless communication, via wired communication) with a display generating component. The display generating component is configured to provide a visual output, such as a display via a CRT display, a display via an LED display, or a display via image projection. In some embodiments, the display generating component is integrated with the computer system. In some embodiments, the display generation components are 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 description, an electronic device is described that includes 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 each application. 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 now turns to embodiments of portable devices with touch-sensitive displays. Figure 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), a memory controller 122, one or more processing units (CPUs) 120, a peripherals interface 118, RF circuitry 108, audio circuitry 110, a speaker 111, a microphone 113, an input / output (I / O) subsystem 106, other input control devices 116, and an external port 124. Device 100 optionally includes one or more optical sensors 164. Device 100 optionally includes one or more contact intensity sensors 165 for detecting 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 for generating a tactile output on device 100 (e.g., generating a 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 ​​that includes at least four distinct values, and more typically includes hundreds (e.g., at least 256) distinct values. The intensity of a contact is optionally determined (or measured) using a variety of techniques and a variety of 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 area of ​​contact 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 force or pressure of the contact 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, a touch-sensitive surface, or a physical / mechanical control such as a knob or button) that may not otherwise be accessible by the user on miniaturized devices that have limited real estate 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 tactile sense. 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 that corresponds to a perceived change in a physical characteristic 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 a 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 stated, the tactile output produced corresponds to a physical displacement of the device, or a component of a 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 can 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 (e.g., computer programs (e.g., including instructions)) 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 circuitry for performing these functions, including, but not limited to, an antenna system, an RF transceiver, one or more amplifiers, a tuner, one or more oscillators, a digital signal processor, a CODEC chipset, a subscriber identity module (SIM) card, memory, and the like. 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 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 is optionally supported by any of the following standards: 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 (LDO), HSPA+, ...LTE), Near Field Communication (NFC), Wideband Code Division Multiple Access (W-CDMA), Code Division Multiple Access (CDMA), Time Division Multiple Access (TDMA), Bluetooth, Bluetooth Low Energy (BTLE), Wireless Fidelity (Wi-Fi) (e.g., IEEE 802.11a, IEEE 802.11b, IEEE 802.11g, IEEE 802.11n, and / or IEEE 802.11ac), Voice over Internet Protocol (VoIP), Wi-MAX, protocols for email (e.g., Internet Message Access Protocol (IMAP) and / or Post Office Protocol (POP)), instant messaging (e.g., eXtensible Messaging and Presence Protocol (EPO)), and / or IEEE 802.11b. The present invention may use any of a number of communications standards, protocols, and technologies, including, but not limited to, 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 hereof.

[0041] The audio circuitry 110, the speaker 111, and the microphone 113 provide an audio interface between a user and the device 100. The audio circuitry 110 receives audio data from the peripherals interface 118, converts the audio data to 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 circuitry 110 also receives an electrical signal converted from the sound waves by the microphone 113. The audio circuitry 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 circuitry 108 by the peripherals interface 118. In some embodiments, the audio circuitry 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, an optical sensor controller 158, a depth camera controller 169, 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 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, via 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 user gestures (e.g., hand gestures and / or air gestures) as input. In some embodiments, the one or more input devices are integrated with the computer system. In some embodiments, the one or more input devices are separate from the computer system.In some embodiments, an air gesture is a gesture that is detected without the user touching an input element that is part of the device (or independent of an input element that is part of the device) and is based on detected in-air movements of a part of the user's body, including movements of the user's body relative to an absolute reference (e.g., the angle of the user's arm relative to the ground, or the distance of the user's hand relative to the ground), movements of the user's body relative to another part of the user's body (e.g., movements of the user's hand relative to the user's shoulder, movements of the user's other hand relative to one of the user's hands, and / or movements of the user's fingers relative to another finger or part of the user's hand), and / or absolute movements of a part of the user's body (e.g., a tap gesture that includes movements of the hand in a predetermined pose with a predetermined amount and / or speed, or a shake gesture that includes rotation of a part of the user's body a predetermined speed or amount).

[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] The touch-sensitive display 112 provides an input and output interface between the device and a user. The display controller 156 receives and / or transmits electrical signals from and to the touchscreen 112. The touchscreen 112 displays visual output to the user. This visual output optionally includes graphics, text, icons, video, 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 interruption 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 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 for determining 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 the multi-touch-sensing touchpad described in U.S. Patent Nos. 6,323,846 (Westerman et al.), 6,570,557 (Westerman et al.), and / or 6,677,932 (Westerman), and / or U.S. Patent Application Publication No. 2002 / 0015024(A1), each of which is incorporated by reference 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] Touch screen 112 optionally has a video resolution of greater than 100 dpi. In some embodiments, the touch screen has a video resolution of approximately 160 dpi. A user optionally contacts touch screen 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 touch screen. In some embodiments, the device converts the rough finger input into precise pointer / cursor positions or commands to perform the actions desired by the user.

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

[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 failure 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 an optical sensor controller 158 in I / O subsystem 106. Optical sensor 164 optionally includes a Charge-Coupled Device (CCD) or 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, such that the touchscreen display can be used as a viewfinder for acquisition of still and / or video images. In some embodiments, the optical sensor is located on the front of the device so 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) so that a single optical sensor 164 is used for both video conferencing and still and / or video image capture, along with the touchscreen display.

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

[0054] 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 collocated with or located 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.

[0055] 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 touch screen 112 when the multifunction device is placed near the user's ear (e.g., when the user is making a phone call).

[0056] 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 positioned proximate to a touch-sensitive surface (e.g., touch-sensitive display system 112) and generates a tactile output, optionally by moving the touch-sensitive surface vertically (e.g., in / out of the surface of device 100) or horizontally (e.g., back and forth in the same plane as the surface of device 100). In some embodiments, at least one tactile output generator sensor is located on the back of device 100, opposite touchscreen display 112, which is located on the front of device 100.

[0057] 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 view based on an analysis of data received from the one or more accelerometers. In addition to accelerometer(s) 168, device 100 optionally includes a magnetometer and a GPS (or GLONASS or other global navigation system) receiver for obtaining information regarding the location and orientation (e.g., vertical or horizontal) of device 100.

[0058] 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.

[0059] 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.

[0060] The communications module 128 facilitates communication with other devices via one or more external ports 124 and includes various software components 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.

[0061] 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 motion of the contact exists and tracking the motion across the touch-sensitive surface (e.g., detecting one or more events of dragging a finger), and determining whether contact has ceased (e.g., detecting a finger up event or an interruption of contact). Contact / motion module 130 receives contact data from the touch-sensitive surface. Determining the motion of the contact, as represented by the set 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 operations 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.

[0062] 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 hardware of the trackpad or touchscreen display. 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).

[0063] 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 location (or substantially the same location) as the finger down event (e.g., at the location 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.

[0064] Graphics module 132 includes various known software components for rendering and displaying graphics on touch screen 112 or other display, including components for modifying 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, text, web pages, icons (such as user interface objects including soft keys), digital images, videos, animations, and the like.

[0065] 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 to output to display controller 156.

[0066] 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.

[0067] 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).

[0068] 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).

[0069] 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, ●Video conferencing module 139; ● an email client module 140; ● Instant messaging (IM) module 141, ● Training support module 142, A camera module 143 for still and / or video images, ● 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.

[0070] 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.

[0071] The contacts module 137, in conjunction with the touch screen 112, the display controller 156, the contact / motion module 130, the graphics module 132, and the text input module 134, is 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 telephone 138, video conferencing module 139, email 140, or IM 141, and the like.

[0072] 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 a series of characters corresponding to a telephone number, access one or more telephone numbers in contacts module 137, modify entered telephone numbers, dial respective telephone numbers, place calls, and disconnect and hang up when a call is completed. As mentioned above, the wireless communication optionally uses any of a number of communication standards, protocols, and technologies.

[0073] 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, contacts module 137, and telephone module 138 to initiate, conduct, and terminate a video conference between a user and one or more other participants according to the user's instructions.

[0074] 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. The email client module 140, in conjunction with the image management module 144, greatly facilitates the creation and sending of emails with still or video images captured by the camera module 143.

[0075] 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 a sequence of characters corresponding to an instant message, modifying previously entered characters, sending respective 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).

[0076] The training support module 142 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 GPS module 135, the map module 154, and the music player module 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 the workout data.

[0077] 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.

[0078] 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.

[0079] 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.

[0080] 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.

[0081] The widget module 149, in conjunction with the RF circuitry 108, the touch screen 112, the display controller 156, the touch / motion module 130, the graphics module 132, the text input module 134, and the 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) that are downloaded and used by a user, or mini-applications (e.g., user-created widget 149-6) that are created by a user. In some embodiments, the widgets include a Hypertext Markup Language (HTML) file, a Cascading Style Sheets (CSS) file, and a JavaScript file. In some embodiments, the widgets include an Extensible Markup Language (XML) file and a JavaScript file (e.g., Yahoo! Widget).

[0082] 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).

[0083] 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, contains 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.

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

[0085] The notes 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 commands.

[0086] 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.

[0087] 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), play (e.g., on the touchscreen or on an external display connected via external port 124), 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 by reference in their entireties.

[0088] The above modules and applications each correspond to a set of executable instructions for performing one or more of the functions described above and methods described herein (e.g., computer-implemented methods and other information processing methods described herein). These modules (e.g., sets of instructions) need not be implemented as individual software programs (e.g., computer programs (e.g., including instructions), 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 modules and data structures. Additionally, memory 102 optionally stores additional modules and data structures not described above.

[0089] 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.

[0090] 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.

[0091] 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., within operating system 126) and a respective application 136-1 (e.g., any of applications 137-151, 155, 380-390 discussed above).

[0092] 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) are 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.

[0093] 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.

[0094] Event monitor 171 receives event information from peripherals interface 118. The event information includes information about a sub-event (e.g., a user touch on touch-sensitive display 112 as part of a multi-touch gesture). 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.

[0095] 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).

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

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

[0098] 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 view (of the respective application) in which the touch is detected optionally corresponds to a programmatic level within the programmatic or view hierarchy of the application. For example, the lowest level view in which the touch is detected is optionally referred to as a 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.

[0099] Hit view determination module 172 receives information related to sub-events of a touch-based gesture. When an application has multiple views organized in a hierarchy, hit view determination module 172 identifies the hit view as the lowest view in the hierarchy that should process the sub-events. In most situations, the hit view is the lowest level view in which an initiating sub-event occurs (e.g., the first sub-event in a 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.

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

[0101] Event dispatcher module 174 dispatches the 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 the event information retrieved by each event receiver 182 in an event queue.

[0102] 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.

[0103] 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 that occur within a respective view of the application's user interface. Each application view 191 of application 136-1 includes one or more event recognizers 180. Typically, each application view 191 includes multiple event recognizers 180. In other embodiments, one or more of the event recognizers 180 are part of a separate module, such as a user interface kit or a higher-level object from which application 136-1 inherits methods and other properties. In some embodiments, each 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 each application view 191.

[0104] Each event recognizer 180 receives event information (e.g., event data 179) from event sorter 170 and identifies an event 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).

[0105] 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 touch movement. 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 touch movement, 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 device's current orientation (also called device pose).

[0106] 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 a definition of an event (e.g., a predefined set of sub-events), such as event 1 (187-1) and event 2 (187-2). In some embodiments, the sub-events in the event (187-1 and / or 187-2) include, for example, touch start, touch end, touch movement, touch cancellation, and multiple touches. In one example, the definition for event 1 (187-1) is a double tap on a displayed object. The double tap includes, for example, a first touch on a displayed object 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, movement of the touch across the touch-sensitive display 112, and lift-off of the touch (end of touch). In some embodiments, the event also includes information about one or more associated event handlers 190.

[0107] In some embodiments, event definition 186 includes a definition of the event for each user interface object. In some embodiments, event comparator 184 performs a hit test to determine which user interface object is associated with the 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 respective 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.

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

[0109] If the respective event recognizer 180 determines that the sequence of sub-events does not match any of the events in the event definition 186, the respective 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.

[0110] In some embodiments, each event recognizer 180 includes 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 whether sub-events are delivered to various levels in a view or programmatic hierarchy.

[0111] In some embodiments, each 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, each 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 respective 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.

[0112] 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.

[0113] 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.

[0114] 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 a respective application 136-1 or application view 191. In other embodiments, they are included in two or more software modules.

[0115] It should be understood that the above 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, tactile 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.

[0116] 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.

[0117] Device 100 also optionally includes one or more physical buttons, such as a “home” button or menu button 204. As mentioned above, 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 certain 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 industrial 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 called a chipset) that interconnects and controls communication between system components. Device 300 includes input / output (I / O) interface 330, including display 340, which is typically a touchscreen display. I / O interface 330 also optionally includes a keyboard and / or mouse (or other pointing device) 350 and a touchpad 355, a tactile output generator 357 (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 elements of FIG. 3 above is optionally stored in one or more of the memory devices mentioned above. Each of the modules above corresponds to an instruction set for performing the functions described above. The modules or computer programs (e.g., including an instruction set or instructions) described above need not be implemented as individual software programs (e.g., computer programs (e.g., including instructions)), 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 modules and data structures described above. Additionally, memory 370 optionally stores additional modules and data structures not described above.

[0121] Attention is now directed to embodiments of a user interface, optionally 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 referred to as 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 related to 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 each application icon includes the name of the application that corresponds to the respective 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 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 (where 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 movements) 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., rather than a contact) followed by a cursor movement along the path of the swipe (e.g., rather than a contact movement). As another example, a tap gesture is optionally replaced by a mouse click while the cursor is positioned over the tap gesture location (e.g., rather than a contact detection followed by a non-detection of the contact). Similarly, when multiple user inputs are detected simultaneously, it should be understood that multiple computer mice are, optionally, being used simultaneously, or a mouse and finger contacts are, optionally, being 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, hereinafter referred to as touchscreen 504. Alternatively, or in addition to touchscreen 504, device 500 has a display and a touch-sensitive surface. In some embodiments, similar to that of devices 100 and 300, touchscreen 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 touchscreen 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 a touch based on its 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, published as WO 2013 / 169849, entitled "Device, Method, and Graphical User Interface for Displaying User Interface Objects Corresponding to an Application," and International Patent Application No. PCT / US2013 / 069483, filed November 11, 2013, published as WO 2014 / 105276, entitled "Device, Method, and Graphical User Interface for Transitioning Between Touch Input to Display Output Relationships," each of which is incorporated by reference in its entirety herein.

[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). Additionally, 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 process 700 and process 900 (FIGS. 7 and 9). A computer-readable storage medium may be any medium that may 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. A non-transitory computer-readable storage medium may include, but is 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] 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.

[0134] As used herein, the term "focus selector" refers to an input element that indicates the current portion of a user interface with which a user is interacting. In some implementations involving a cursor or other location marker, the cursor acts as a "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 a "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 detected contact on the touchscreen acts as a "focus selector" such that the particular user interface element is adjusted according to the detected input. In some implementations, focus is moved from one area of ​​the user interface to another area of ​​the user interface (e.g., focus is moved from one button to another by using the tab key or arrow keys) without corresponding cursor movement or contact movement on the touchscreen display, and in these implementations the focus selector moves to follow the movement of focus between various areas 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 the element of the user interface through which the user intends to interact).For example, the location of a focus selector (e.g., a cursor, touch, or selection box) over a respective 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 the respective button (and not other user interface elements displayed on the device's display).

[0135] 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 lift-off of the contact, before or after detecting the start of movement of the contact, before detecting the end of the contact, before or after detecting an increase in the intensity of the contact, and / or before or after detecting a decrease in the intensity of the contact). The characteristic intensity of 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 90th percentile value of the maximum intensity of the contact, etc. In some embodiments, the duration of the contact is used in determining the characteristic intensity (e.g., when the characteristic intensity is an average of the intensity of the contact over time). In some embodiments, the characteristic intensity is compared to a set of one or more intensity thresholds to determine whether an operation 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 to determine whether one or more actions should be performed (e.g., whether to perform the respective action or to forego performing the respective action).

[0136] As used herein, an "installed application" refers to a software application that has been downloaded to an electronic device (e.g., devices 100, 300, and / or 500) and is ready to be launched (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.

[0137] As used herein, the terms "open application" or "running application" refer to a software application that has state information retained (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 executing but has state information stored in memory (volatile and non-volatile, respectively) and that can be used to resume execution of the application.

[0138] 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 deleting the application process for the application and deleting 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. If the first application ceases to be displayed while the second application is being displayed, the first application becomes a background application.

[0139] 5C illustrates an exemplary diagram of a communication session between electronic devices 500A, 500B, and 500C. Devices 500A, 500B, and 500C are similar to electronic device 500, and each share one or more data connections 510 with each other, such as an Internet connection, a Wi-Fi connection, a cellular connection, a short-range communication connection, and / or any other such data connection or network, to facilitate real-time communication of audio and / or video data between the respective devices over a period of time. In some embodiments, the exemplary communication session may include a shared data session in which data is communicated from one or more of the electronic devices to the other electronic devices to enable simultaneous output of respective content at the electronic devices. In some embodiments, the exemplary communication session may include a videoconferencing session in which audio and / or video data is communicated between devices 500A, 500B, and 500C such that users of the respective devices may engage in real-time communication using the electronic devices.

[0140] In Figure 5C, device 500A represents an electronic device associated with user A. Device 500A is in communication (via data connection 510) with devices 500B and 500C associated with users B and C, respectively. Device 500A includes a camera 501A used to capture video data of the communication session and a display 504A (e.g., a touch screen) used to display content associated with the communication session. Device 500A also includes other components such as a microphone (e.g., 113) for recording audio of the communication session and a speaker (e.g., 111) for outputting audio of the communication session.

[0141] Device 500A displays, via display 504A, a communications UI 520A, which is a user interface that facilitates a communications session (e.g., a video conferencing session) between device 500B and device 500C. Communications UI 520A includes video feed 525-1A and video feed 525-2A. Video feed 525-1A is a representation of video data captured at device 500B (e.g., using camera 501B) and communicated from device 500B to devices 500A and 500C during the communications session. Video feed 525-2A is a representation of video data captured at device 500C (e.g., using camera 501C) and communicated from device 500C to devices 500A and 500B during the communications session.

[0142] The communication UI 520A includes a camera preview 550A, which is a representation of the video data captured at the device 500A via the camera 501A. The camera preview 550A represents to the user A the expected video feed of the user A as it will be displayed on each of the devices 500B and 500C.

[0143] The communications UI 520A includes one or more controls 555A that control one or more aspects of the communications session. For example, the controls 555A may include controls for muting audio for the communications session, changing a camera view for the communications session (e.g., changing which camera is used to capture video for the communications session, adjusting a zoom value), terminating the communications session, applying visual effects to a camera view for the communications session, and activating one or more modes associated with the communications session. In some embodiments, the one or more controls 555A are optionally displayed on the communications UI 520A. In some embodiments, the one or more controls 555A are displayed separately from the camera preview 550A. In some embodiments, the one or more controls 555A are displayed overlaying at least a portion of the camera preview 550A.

[0144] In Figure 5C, device 500B represents an electronic device associated with user B, who is in communication with devices 500A and 500C (via data connection 510). Device 500B includes a camera 501B used to capture video data of the communication session and a display 504B (e.g., a touch screen) used to display content associated with the communication session. Device 500B also includes other components, such as a microphone (e.g., 113) for recording audio of the communication session and a speaker (e.g., 111) for outputting audio of the communication session.

[0145] Device 500B displays, via touch screen 504B, a communications UI 520B similar to communications UI 520A of device 500A. Communications UI 520B includes video feed 525-1B and video feed 525-2B. Video feed 525-1B is a representation of video data captured at device 500A (e.g., using camera 501A) and communicated from device 500A to devices 500B and 500C during a communications session. Video feed 525-2B is a representation of video data captured at device 500C (e.g., using camera 501C) and communicated from device 500C to devices 500A and 500B during a communications session. Communications UI 520B also includes camera preview 550B, which is a representation of video data captured at device 500B via camera 501B, and one or more controls 555B, similar to control 555A, for controlling one or more aspects of the communications session. Camera preview 550B represents to user B the expected video feed of user B as it would be displayed on each of devices 500A and 500C.

[0146] In Figure 5C, device 500C represents an electronic device associated with user C, who is in communication with devices 500A and 500B (via data connection 510). Device 500C includes a camera 501C used to capture video data of the communication session, and a display 504C (e.g., a touch screen) used to display content associated with the communication session. Device 500C also includes other components, such as a microphone (e.g., 113) for recording audio of the communication session, and a speaker (e.g., 111) for outputting audio of the communication session.

[0147] Device 500C displays, via touchscreen 504C, a communication UI 520C similar to communication UI 520A of device 500A and communication UI 520B of device 500B. Communication UI 520C includes video feed 525-1C and video feed 525-2C. Video feed 525-1C is a representation of video data captured at device 500B (e.g., using camera 501B) and communicated from device 500B to devices 500A and 500C during a communication session. Video feed 525-2C is a representation of video data captured at device 500A (e.g., using camera 501A) and communicated from device 500A to devices 500B and 500C during a communication session. Communications UI 520C also includes a camera preview 550C, which is a representation of video data captured at device 500C via camera 501C, and one or more controls 555C for controlling one or more aspects of the communications session, similar to controls 555A and 555B. Camera preview 550C represents to user C an expected video feed of user C as it will be displayed on each of devices 500A and 500B.

[0148] Although the diagram shown in FIG. 5C represents a communication session between three electronic devices, a communication session may be established between two or more electronic devices, and the number of devices participating in a communication session may change as electronic devices join or leave the communication session. For example, if one of the electronic devices leaves the communication session, the audio and video data from the device that stopped participating in the communication session is no longer represented on the participating device. For example, if device 500B stops participating in the communication session, the data connection 510 between devices 500A and 500C and the data connection 510 between devices 500C and 500B do not exist. In addition, device 500A does not include video feed 525-1A, and device 500C does not include video feed 525-1C. Similarly, when a device joins a communication session, a connection is established between the joining device and the existing devices, and video and audio data are shared between all devices so that each device can output data communicated from the other devices.

[0149] The embodiment shown in Figure 5C represents a diagram of a communication session between multiple electronic devices, including the exemplary communication sessions shown in Figures 6A-6AS and 8A-8H, in some embodiments, the communication sessions shown in Figures 6A-6AS and 8A-8H include two or more electronic devices, even if other electronic devices participating in the communication session are not shown in the figures.

[0150] Attention is now directed to embodiments of user interfaces ("UI") and associated processes implemented on an electronic device such as portable multifunction device 100, device 300, or device 500.

[0151] 6A-6AS show example user interfaces for managing a video conference session, according to some embodiments. The user interfaces in these figures are used to illustrate the processes described below, including the process in FIG 7. In some embodiments, the user interfaces of FIG 6A-6AS can be used to illustrate the process described below with respect to FIG 9.

[0152] This disclosure describes embodiments for managing a video conferencing session. In some embodiments, a video conferencing session is provided in association with a shared content session in which respective content may be simultaneously output at multiple devices participating in the shared content session (also referred to as a shared session). In some embodiments, a video conferencing session is ongoing while the shared content session is inactive or not in progress. In some embodiments, a video conferencing session is ongoing simultaneously with a shared content session. In some embodiments, a shared content session is initiated from a video conferencing session or a user interface for providing a video conferencing session. In some embodiments, a video conferencing session is initiated from a shared content session or a user interface for providing a shared content session.

[0153] In some embodiments, the individual content simultaneously output at multiple devices participating in the shared content session is screen shared content. For example, the displayed screen content of the host device is shared with the participants of the shared content session, and the participants can view the screen content of the host device (the shared device or the device whose screen content is being shared) in real time at their respective devices, including any changes to the displayed screen content. In some embodiments, the respective content is synchronized content simultaneously output at each of the participants' devices in the shared content session. For example, each of the participants' devices separately accesses the respective content (e.g., videos, movies, TV shows, and / or songs) from a remote server(s) and / or local memory, and the content is simultaneously output at each of the devices (e.g., via an application local to each of the devices) as each device separately accesses the respective content from the remote server and / or local memory, and the respective outputs of the content are synchronized. In some embodiments, the respective devices exchange information (e.g., via a server) to facilitate the synchronization. For example, each device can share content playback state and / or playback position information as well as indications of local commands (e.g., play, pause, stop, fast forward, and / or rewind) to execute commands on the output of the content on the other device. Sharing the playback state and / or playback position information is more efficient and effective for synchronizing the content at each device because the host device is not sending the content to each device, but rather sending smaller data packets that include the playback state and / or playback position information.In addition, each respective device outputs content at a size and quality appropriate to each respective device and the device's connectivity (e.g., data connection conditions such as data transmission and / or processing speed), thereby providing a more customized and synchronized playback experience on each respective device. In some embodiments, applications (or "apps") may be utilized (e.g., downloaded and / or installed) on each respective device to enable the devices to participate in the shared content session.

[0154] As used herein, the terms "share," "sharing," or "shared" are generally used to refer to a situation in which content (e.g., screen share content and / or synchronized content) is or can be output (e.g., viewed and / or played) simultaneously on multiple devices participating in a shared content session. Unless otherwise specified, these terms do not require that the content being "shared" is transmitted from any particular device participating in the shared content session to any of the other devices with which the content is being shared. In some embodiments, the content being shared in a shared content session is content that is accessed separately by each of the respective devices, e.g., from a remote server or another source other than one of the devices participating in the shared content session. For example, in some embodiments, when media content such as a movie is being played on devices participating in a shared content session, the movie is said to be shared with the participants, even if each participant accesses and plays the movie (e.g., from a movie application) separately (but simultaneously) from the other participants in the shared content session. In some embodiments, the screen share content is shared with the participants in the shared content session by transmitting image data representing the content to be displayed on the display screen of the host device from the host device to the other devices participating in the shared content session.

[0155] In some embodiments, one or more audio channels are activated (e.g., opened) while the shared content session is in progress, so that participants in the shared content session can talk to each other in real time while the shared content session is in progress, and optionally while content (e.g., screen share content and / or synchronized content) is being shared via the shared content session. In some embodiments, one or more video channels are opened (e.g., via a video conferencing application local to their respective devices) while the shared content session is in progress, and optionally while content is being shared via the shared content session, so that participants in the shared content session can engage in live video communication (e.g., video chat). Various aspects of these embodiments, as well as further details of shared content sessions, are described below with reference to the drawings.

[0156] In some embodiments, content is displayed as a window that is optionally overlaid on another user interface and can be moved separately from the user interface in which it is displayed. In some embodiments, such a window is referred to herein as a picture-in-picture window, or "PiP." In some embodiments, a PiP can include shared content, such as screen shared content and / or synchronized content. In some embodiments, a PiP can include content independent of a shared content session, such as a video feed from a video conference (although in some embodiments, such a PiP can be displayed in association with a shared content session).

[0157] 6A-6S illustrate example devices and user interfaces for participating in a videoconferencing session, according to some embodiments. Specifically, the devices include device 600 (e.g., a tablet), device 601 (e.g., a laptop), and device 602 (e.g., a smartphone). The devices include displays (e.g., 600-1, 601-1, and 602-1, respectively), one or more cameras (e.g., 600-2, 601-2, and 602-2, respectively), and one or more microphones. Devices 600, 601, and 602 include one or more elements of devices 100, 300, and / or 500.

[0158] In the embodiments provided herein, devices 600, 601, or 602 may be described as performing a set of functions associated with a video conference and / or shared content session. These descriptions are not intended to limit the functions performed by the respective devices, but rather are provided to illustrate various aspects and embodiments of a video conference and / or shared content session. Thus, unless otherwise specified, functions described as being performed by device 600 may be similarly performed by devices 601 and 602. Similarly, unless otherwise specified, functions described as being performed by device 601 may be similarly performed by devices 600 and 602, and functions described as being performed by device 602 may be performed by either device 600 or 601.

[0159] 6A-6AS illustrate an exemplary embodiment showing a video conference session between participants in a group. The participants in the video conference are represented in the figure by respective video feeds from respective devices associated with each participant in the video conference. For simplicity, the participants' respective video feeds are represented in the figure by tiles 610 having a number inside a silhouette, each number corresponding to a particular participant's video feed. In some embodiments, the tiles are numbered in the order in which the participants joined the call. Similarly, a representation of the camera preview (or self-view) video feed of device 600, 601, or 602 is shown by a tile having the text "me" inside a silhouette (e.g., tile 608). In FIGS. 6A-6L, tile 608 represents the video feed of device 600, generated, for example, using camera 600-2.

[0160] 6A, device 600 displays a video conference interface 605 that includes at least two areas for displaying tiles corresponding to participants in a video conference: a main area 604 and a roster 606. In some embodiments, tiles are typically displayed in main area 604, but may be displayed in roster 606 based on various criteria, such as if there is not enough space to display each tile in main area 604.

[0161] In some embodiments, the tiles displayed in the roster 606 are smaller than the tiles displayed in the main area 604. In some embodiments, the tiles displayed in the roster 606 are all displayed at the same size. In some embodiments, the camera preview tile 608 is displayed to match or within the roster 606 and is displayed at the same size as the tiles in the roster 606.

[0162] The roster 606 may display several complete tiles and one partial tile (e.g., overlapping below or above tile 608). The remaining tiles in the roster 606 are hidden and may be displayed by scrolling the roster 606 (e.g., in response to either user input or detection events of participants actively participating, such as by speaking or moving). Tiles in the roster 606 that are overlapped by tile 608 may be partially shaded to indicate that there are more tiles in the roster 606 and / or that the roster 606 can be scrolled. In some embodiments, the order of the tiles in the roster 606 depends on the order in which participants join the videoconferencing session. In some embodiments, the order of the tiles in the roster 606 changes over time (e.g., as participants join or leave the videoconferencing session, or as participants move in and out of the main area 604, for example, due to user selection of a tile in the roster 606 or active participation by participants represented in the roster 606). In some embodiments, the order of tiles in the roster 606 is fixed (e.g., the order in which tiles in the roster 606 are displayed does not change over time). In some embodiments, the order of tiles in the roster 606 is based on the order of a list associated with a group (e.g., the order in which participants were added to the group when the group was created). In some embodiments, the display (e.g., video feeds) of tiles in the main area 604 are updated more frequently than the display of tiles in the roster 606 (e.g., the video feeds of tiles in the roster 606 are updated less frequently than the video feeds of tiles in the main area 604).

[0163] In some embodiments, tiles are associated with a priority level for display, with tiles with higher priority being displayed in the main area and the remaining tiles (or a subset of the remaining tiles) being displayed in the roster. In some embodiments, tiles with higher priority are tiles that display video feeds of participants that are more active (or more recently active), tiles associated with participants who are sharing content or have recently shared content, participants who joined the video conference earlier in a call session, or tiles that have been selected (e.g., pinned) for display in the main area. In some embodiments, tiles with higher priority may be displayed in the roster if there is not enough space to display tiles in the main area. In some embodiments, tiles are moved from the main area 604 to the roster 606 (or vice versa) when a participant's priority changes or in response to other conditions. In some embodiments, not all tiles are visible in the roster. In such cases, the roster may be scrolled in response to user input (e.g., a swipe or drag gesture on the roster) to display additional tiles assigned to the roster. In some embodiments, in response to user input (e.g., a tap on camera preview 608), camera preview 608 is displayed over at least a portion of roster 606, and tiles in roster 606 can be scrolled in or out below camera preview 608.

[0164] In some embodiments, tiles in main area 604 may be displayed in various arrangements based on whether grid view is enabled. When grid view is enabled, device 600 displays tiles in a grid arrangement, for example, as shown in Figures 6A-6L. When grid view is disabled, device 600 displays tiles in an overlapping or non-grid display arrangement, as described in more detail below (see Figures 6Z or 8H).

[0165] The video conference interface 605 also includes a control area 612 that includes information and various controls associated with the video conference and, optionally, a shared content session that is active simultaneously with the video conference session. In FIG. 6A, the control area 612 includes a status area 612-1 that indicates that four participants in a group called “Climbers” are currently active in a video conference session. The control area 612 also includes various options that are selectable to control the operation, parameters, and / or settings of the video conference and / or shared content session. For example, in some embodiments, a message option 612-2 can be selected to display a message interface for viewing message conversations between members of the climbers group. In some embodiments, a microphone option 612-3 can be selected to enable or disable or change settings related to a microphone used for the video conference and / or shared content session. In some embodiments, a camera option 612-4 can be selected to initiate a video conference session with the climbers group, view ongoing video conference sessions, enable / disable a camera, and / or select a different camera to use in the video conference and / or shared content session. In some embodiments, the share option 612-5 can be selected to view and / or change various media playback settings or to initiate a screen share option in which content displayed on the screen of the device 600 is shared with participants in the video conference (e.g., via a shared content session). In some embodiments, the leave option 612-6 can be selected to cause the device 600 to leave the video conference and / or shared content session. In some embodiments, the status area 612-1 can be selected to view information about the climber group and / or other settings related to the video conference and / or shared content session. For example, in some embodiments, the status area 612-1 can be selected to display a group card that includes an option to enable or disable a grid view setting.

[0166] 6A-6H illustrate example embodiments showing the progression of videoconferencing interface 605 as participants join a videoconferencing session. In some embodiments, the arrangement of tiles is determined automatically (e.g., by device 600) to balance various factors, such as the aesthetics of the displayed tile arrangement, the space available to display tiles, tile priority, and the size of the displayed tiles, while reducing (e.g., minimizing) the movement and / or rearrangement of tiles as participants join or leave the communication session so as to avoid confusing or overwhelming a user viewing videoconferencing interface 605.

[0167] In FIG. 6A, device 600 displays tiles 610-1, 610-2, and 610-3 corresponding to participants 1-3 in a video conference. The tiles are displayed in a single row in main area 604, with no tiles displayed in roster 606. In some embodiments, as participants 1-3 join the video conference, tiles corresponding to the joining participants are added to main area 604, shifting the position of existing tiles and optionally changing their size. For example, when participant 1 is the only remote participant in the video conference, tile 610-1 is displayed in an expanded view (e.g., full screen or using all of the screen outside of the portions of the screen designated for system status information and / or system control), and when participant 2 joins, tile 610-1 is reduced in size and displayed in main area 604 with participant 2's tile 610-2 displayed at the same size as tile 610-1.

[0168] In some embodiments, each participant is determined to be the active (or most active) participant based on the participant's activity represented in the tile (e.g., talking, sharing content, playing content, and / or moving within the camera feed). The device 600 highlights the active participant's tile to identify the active participant to provide visual feedback to a viewer of the videoconferencing interface 605. For example, in FIG. 6A, participant 1 is the most active participant, and therefore the device 600 displays tile 610-1 at an enlarged size (relative to the other tiles) and includes a shadow 609 to provide simulated depth to tile 610-1.

[0169] In some embodiments, the videoconferencing interface 605 includes an arrangement selection option 672 that can be selected to change between a mode in which the representations of participants in the videoconferencing interface 605 are displayed in a grid pattern (e.g., as shown in FIG. 6A) and a mode in which the representations of participants are displayed in an overlapping arrangement (e.g., as shown in FIG. 6Z). In some embodiments, the arrangement selection option 672 indicates (e.g., via the text "Grid") that a grid pattern option (also referred to as a grid view or grid arrangement) is available. In some embodiments, the arrangement selection option 672 is visually enhanced (e.g., highlighted, bolded, outlined, and / or filled) when the grid pattern is enabled and is not visually enhanced when the grid pattern is not enabled (e.g., an overlapping arrangement is enabled). Features of the arrangement selection 672 are also described with reference to FIGS. 6X, 6Z, and 6AH-6AS.

[0170] In Figure 6B, participant 4 joins the video conference and device 600 displays tile 610-4 in main area 610 along with tiles 610-1 through 610-3. When tile 610-4 is added to main area 604, the tiles are displayed in a 2x2 arrangement with tiles 610-1 and 610-2 in the top row and tiles 610-3 and 610-4 in the bottom row. Participant 1 remains the most active participant.

[0171] In Figure 6C, participants 5 and 6 join the video conference, and device 600 displays corresponding tiles 610-5 and 610-6 in main area 604. Device 600 displays the tiles in a 2x3 arrangement, with tiles 610-1 through 610-3 in the top row and tiles 610-4 through 610-6 in the bottom row. It is now determined that participant 3 is the most active participant. Thus, device 600 returns tile 610-1 to a de-highlighted state, increases the size of tile 610-3, and displays a shadow 609 around tile 610-3.

[0172] 6D, participants 7 and 8 join the video conference, and device 600 displays tiles 610-7 and 610-8 corresponding to the new columns in main area 604. Device 600 reduces the size of tiles 610-1 through 610-6 to accommodate the additional new tiles, adds tile 610-7 to the end of the top row, and adds tile 610-8 to the end of the bottom row, displaying the tiles in a 2×4 arrangement. Participant 3 remains the most active participant.

[0173] 6E, participants 9-12 join the video conference, and device 600 displays tiles 610-9-610-12 corresponding to a new row in main area 604. Device 600 reduces the size of the tiles and displays them in a 3×4 arrangement to accommodate the additional new row of tiles 610-9-610-12. Participant 9 is now determined to be the most active participant, as indicated by the increased size (relative to the other tiles) and shadow 609 of tile 610-9.

[0174] 6F, participants 13-15 join the video conference and device 600 displays tiles 610-13 to 610-15 corresponding to the new columns in main area 604. Device 600 reduces the size of the tiles to accommodate the additional new columns of tiles 610-13 to 610-15 and displays the tiles in a 3×5 arrangement. Participant 9 remains the most active participant.

[0175] 6G, participants 16-18 join the video conference, and device 600 displays tiles 610-16 through 610-18 corresponding to the new columns in main area 604. Device 600 reduces the size of the tiles to accommodate the additional new columns of tiles 610-16 through 610-18, and displays the tiles in a 3×6 arrangement, where participant 8 is the most active participant.

[0176] As device 600 fills main area 604, the device begins placing additional participants in roster 606. For example, in FIG. 6H, participants 19-25 have joined the video conference, as indicated by the display of 26 active participants in the status area of ​​control area 612. Rather than adding rows or columns to the grid in main area 604, device 600 displays additional tiles in roster 606, as indicated by tiles 610-19-610-23. Although device 600 assigns tiles for participants 19-25 to the roster, in the embodiment shown in FIG. 6H, there is not enough space on display 601 to display all the tiles in the roster. Thus, as shown in FIG. 6H, some of the tiles in roster 606, specifically the tiles for participants 24 and 25, are not displayed. However, these additional roster tiles can be revealed by manipulating the arrangement of tiles in videoconferencing interface 605. For example, roster 606 can be scrolled to display the additional tiles. As another example, the dimensions of the main area 604 may be increased or otherwise altered to accommodate the additional tiles within the main area 604. Such an embodiment is shown in Figure 6I.

[0177] In FIG. 6I , device 600 is rotated and videoconferencing interface 605 is changed from landscape to portrait orientation. As a result of the rotated orientation, and in some embodiments due to the aspect ratio of the tiles, device 600 accommodates more tiles in main area 604 than when videoconferencing interface 605 is in landscape orientation. Thus, device 600 moves some of the tiles (e.g., the tiles in the roster with the highest priority) from roster 606 to main area 604. Specifically, tiles 610-19 and 610-20 are moved from roster 606 to main area 604, and tiles in roster 606 slide to fill the void created by moving tiles 610-19 and 610-20 to main area 604, thereby making visible tiles 610-24 and 610-25 corresponding to participants 24 and 25, respectively.

[0178] In some embodiments, when device 600 rotates the orientation of videoconferencing interface 605, device 600 maintains the relative locations of some of the tiles to avoid or minimize rearrangement of the displayed tiles. For example, in FIG. 6I, device 600 retains the locations of tiles 610-1 through 610-12 relative to each other (which remain arranged in the first four columns and top three rows shown in FIG. 6H), moves tiles 610-13 through 610-18 from the rightmost two columns (as shown in FIG. 6H) to the bottom two rows of FIG. 6I, and fills the last two spots in the arrangement with tiles 610-19 and 610-20. Although tiles 610-13 through 610-18 have been moved, device 600 still maintains the relative locations of a subset of those tiles. For example, tiles 610-13 and 610-16 remain positioned adjacent to one another, as do tiles 610-14 and 610-17, and tiles 610-15 and 610-18. In some embodiments, the transition from the arrangement of Figure 6H to the arrangement of Figure 6I is displayed as an animation, where the rightmost two columns of Figure 6H (e.g., tiles 610-13 through 610-18) fade out of view as device 600 is rotated and fade into view in the bottom two rows, along with tiles 610-19 and 610-20 of Figure 6I, while the remaining tiles remain displayed and rotate in place to remain in an upright display position.

[0179] In some embodiments, the repositioning of tiles from FIG. 6H to FIG. 6I can be reversed by rotating device 600 again. In FIG. 6J, device 600 has been returned to landscape orientation. Thus, the transition described above with respect to FIG. 6H and FIG. 6I is reversed, moving tiles 610-19 and 610-20-20 from main area 604 to roster 606, and sliding tiles 610-24 and 610-25 off-screen (e.g., scrolling off-screen behind camera preview 608). In addition, tiles 610-13 through 610-18 are moved from the bottom two rows of FIG. 6I to the rightmost two columns of FIG. 6J. In some embodiments, this transition is displayed as an animation, with the bottom two rows of FIG. 6I (e.g., tiles 610-13 through 610-20) fading out of view as device 600 is rotated and fading into view in their respective locations (e.g., tiles 610-19 and 610-20 in roster 606, and tiles 610-13 through 610-18 in the rightmost two columns of FIG. 6J), while the remaining tiles remain displayed and rotate in place to remain in the upright viewing position.

[0180] In FIG. 6J, a notification 614 is displayed indicating that one of the participants (e.g., participant 2) has selected content (e.g., a TV program) for viewing in the video conference session (e.g., via a shared content session). Now, tile 610-2 is highlighted to indicate that participant 2 is the most active participant, since participant 2 has selected content to share with the mountaineer group. The notification 614 includes an option 614-1 that can be selected to start playing the content on the device 600, and the playback is also synchronized with other participants of the mountaineer group who are playing the content using their respective devices. In response to an input 615-1 selecting option 614-1, the device 600 launches a TV app and begins playing the TV program selected by participant 2 for the mountaineer group, as shown in FIG. 6K. In some embodiments, the playback of the shared content is handled on the device 600 according to various device settings, including, for example, settings for the shared content session and / or settings for a particular app (e.g., a TV app). 6J, the settings of device 600 are such that device 600 prompts the user to play the shared content (e.g., by displaying notification 614). However, in some embodiments, the settings of device 600 can be set so that content selected for sharing with the group is automatically played on device 600 (e.g., without displaying notification 614).

[0181] In FIG. 6K, device 600 launches a TV app to play a TV program selected by Participant 2 for the climber group. The TV program content is displayed on device 600 in content PiP 620. In some embodiments, device 600 displays tiles in videoconferencing interface 605 overlaying the content PiP 620. In some embodiments, device 600 rearranges the display of the tiles to avoid being overlaid by the content PiP 620. Content PiP 620 includes playback controls 620-2 for adjusting playback (e.g., pause, play, fast forward, rewind, and / or skip) and a scrub bar 620-1 indicating elapsed playback time that can be selected to scrub through the displayed content. The content PiP 620 can be manipulated on the display of the device 600, including being moved (e.g., in response to a drag input), resized (e.g., in response to a pinch or unpinch gesture), minimized (e.g., in response to dragging the content PiP 620 to an edge of the display 600-1), or expanded (e.g., in response to selection of the expand affordance 620-3) (e.g., to an expanded view, a full screen view, or a view that uses all of the screen outside of the portion of the screen designated for system state information and / or system control). Playback of the content can be terminated by selecting the close affordance 620-4. In some embodiments, ending playback of the content also terminates playback of the same content on the respective devices of the other members of the climber group. Similarly, adjusting playback of the content (e.g., playing, pausing, scrubbing the content) also adjusts playback of the content on the respective devices of the other members of the climber group, such that the members of the climber group can experience the shared content synchronously with the other members.Similarly, other members of the climber group can control playback of the content in the content PiP 620 on device 600 by manipulating the playback controls of the content displayed on their respective devices. In some embodiments, members can experience (e.g., view) the shared content while simultaneously interacting with one another via the audio and video channels of a video conference session.

[0182] In FIG. 6L, the device 600 continues to play the TV program in the content PiP 620. The playback controls and other elements of the content PiP 620 are automatically removed (e.g., after a predetermined amount of time has passed without any input to the content PiP 620). In addition, now participant 10 is the most active participant (e.g., participant 10 has started talking about a television program) and participant 6 has left the video conference session. In some embodiments, the device 600 avoids rearranging the displayed arrangement of tiles even if a participant has left the video conference. For example, in FIG. 6L, the device 600 stops displaying the tile 610-6 corresponding to the participant who has left, leaving a gap 622 in the grid. In some embodiments, the device 600 fills the gap by replacing the tile of the participant who has left with a tile from the roster 606.

[0183] 6M-6P illustrate an example embodiment of a videoconferencing interface displayed using device 601. Device 601 includes display 601-1, camera 601-2, and keyboard 601-3 (optionally including a trackpad, mouse, or other input device). Device 601 displays a videoconferencing interface similar to videoconferencing interface 605 in videoconferencing window 630. Videoconferencing window 630 includes various tiles 640 (similar to tiles 610) displayed in main area 634 (similar to main area 604) and roster 636 (similar to roster 606), camera preview 638 (similar to camera preview 608), and control area 632 including various controls similar to those displayed in control area 612. Camera preview 638 represents at least a portion of the video feed of camera 601-2. In some embodiments, the video conference window 630 includes an arrangement selection option 672 that can be selected to change between a grid pattern and an overlapping arrangement of tiles 640 in the main area 634 in a manner similar to that described with reference to Figures 6A, 6X, 6Z, and 6AH-6AS.

[0184] In FIG. 6M, device 601 displays tiles 640-1 through 640-9 in a grid arrangement in main area 634 and tiles 640-10 and 640-11 in roster 636. Tile 640-1 is shown highlighted with a slightly enlarged size and shadow 639 to indicate participant 1 is the most active participant. Device 601 detects input 615-2 (e.g., a click-and-drag gesture with a cursor) using a mouse, trackpad, or other input device. In response to input 615-2, device 601 slightly resizes (e.g., shrinks) videoconferencing window 630, including shrinking tiles 640-1 through 640-11 and camera preview 638, without moving any tiles from main area 634 to roster 636 (or vice versa), as shown in FIG. 6N. In some embodiments, the resize can be reversed by enlarging window 630 (e.g., enlarging tiles and camera preview).

[0185] In Figure 6N, device 601 detects input 615-3 or 615-4. Input 615-3 is a click-and-drag gesture to narrow videoconference window 630. Input 615-4 is a click-and-drag gesture to shorten videoconference window 630. The results of each of these inputs are shown in Figures 6O and 6P, respectively, as described in more detail below.

[0186] 6O illustrates the result of a narrowing gesture input 615-3. The device 601 narrows the window 630, including narrowing the main region 634. As a result, the dimensions of the main region 634 decrease horizontally, and the device 601 moves the rightmost column of tiles from the main region 634 to the roster 636. Specifically, tiles 640-3, 640-6, and 640-9 are moved from the main region 634 to the roster 636 next to tiles 640-10 and 640-11, which are also in the roster. In some embodiments, the narrowing of the window 630 can be reversed (e.g., by clicking and dragging a side edge of the window 630 to widen the window), which also reverses the arrangement of the tiles by moving tiles 640-3, 640-6, and 640-9 from the roster 636 to the main region 634.

[0187] 6P illustrates the result of shortening input 615-4. Device 601 shortens window 630, including shortening main region 634. As a result, the dimensions of main region 634 decrease vertically, and device 601 moves the bottom row of tiles from main region 634 to roster 636. Specifically, tiles 640-7, 640-8, and 640-9 are moved from main region 634 to roster 636 next to tiles 640-10 and 640-11, which are also in the roster. In some embodiments, the shortening of window 630 can be reversed (e.g., by clicking and dragging the top edge of window 630 to lengthen the window), which also reverses the arrangement of the tiles by moving tiles 640-7, 640-8, and 640-9 from roster 636 to main region 634.

[0188] 6Q-6AG illustrate an example embodiment of a videoconferencing interface displayed using device 602. Device 602 includes display 602-1 and camera 602-2. Device 602 displays videoconferencing interface 605 and videoconferencing interface 650 similar to videoconferencing window 630. Videoconferencing interface 650 includes various tiles 660 (similar to tiles 610 and 640) displayed in main area 654 (similar to main area 604 and main area 634), camera preview 658 (similar to camera preview 608 and camera preview 638), and control area 652 (similar to control area 612). Camera preview 658 represents a video feed of camera 602-2. In some embodiments, if there are no tiles in the roster, the roster is not displayed. For example, in FIG. 6Q, device 602 displays tile 660-2 within main area 654 such that it is partially located in the area of ​​display 602-1 that typically displays a directory, if applicable (e.g., as shown in FIG. 6V).

[0189] In FIG. 6Q, device 602 displays tiles 660-1 and 660-2 in main area 654. Participant 2 is the most active participant, as indicated by the enlarged size and shadow 659 of tile 660-2. Camera preview 658 is displayed overlapping tile 660-2. Device 602 detects input 615-5 on tile 660-2 and, in response, moves tile 660-2 in front of camera preview 658 and displays additional controls and elements associated with tile 660-2, as shown in FIG. 6R. Specifically, device 602 displays participant name 664, capture affordance 662, and magnification affordance 666. The capture affordance 662 can be selected to capture an image of the tile 660-2, and the magnification affordance 666 can be selected to magnify the tile 660-2 (e.g., in a pinned view, a full-screen view, or a view that uses all of the screen outside of a portion of the screen designated for system state information and / or system controls).

[0190] In some embodiments, the device adjusts the size and / or placement of tiles displayed within the videoconferencing interface based on the available space within the main area. For example, in FIG. 6S, the control area 652 disappears after a predetermined time, and the device 602 enlarges and shifts the position of tiles 660-1 and 660-2 to fill the available space created by the removal of the control area 652. Conversely, when the control area 652 is displayed, the device 602 resizes and shifts the position of tiles 660-1 and 660-2 to make room for the control area (e.g., as shown in FIG. 6Q). In FIG. 6T, participant 3 joins the videoconferencing session, and in response, the device 602 displays tile 660-3 in the main area 654 and shrinks tiles 660-1 and 660-2 to make room for tile 660-3. In FIG. 6U, participant 4 joins the videoconferencing session and, in response, device 602 displays tile 660-4 in main area 654 and shrinks and rearranges tiles 660-1 through 660-3 to accommodate tile 660-4.

[0191] FIG. 6V shows device 602 after participants 5-11 have joined the videoconferencing session. Tiles 660-5 and 660-6 are displayed in main area 654, and tiles 660-7-660-9 are shown in roster 656, with tile 660-9 positioned behind camera preview 658. In response to input 615-6, device 602 scrolls the tiles in roster 656 to display tiles 660-9-660-11 of FIG. 6W. Now, participant 4 is the most active participant, and device 602 detects input 615-7 to scroll the roster in the opposite direction, thereby hiding tiles 660-10 and 660-11 and undisplaying tiles 660-7 and 660-8, as shown in FIG. 6X.

[0192] In FIG. 6X, in response to detecting input 615-20 (e.g., a tap) in FIG. 6W, device 602 displays control region 652 and placement selection options 672, and shifts and resizes tiles 660-1 through 660-6 to accommodate the display of control region 652. Device 602 detects input 615-8 in state region 652-1 of control region 652, and in response, displays group card interface 665, as shown in FIG. 6Y. In some embodiments, group card interface 665 includes an option to enable or disable a grid view configuration. For example, in FIG. 6Y, device 602 displays group card interface 665 shown with grid view option 668 enabled. In some embodiments, grid view option 668 is located in a different location within group card interface 665. For example, grid view option 668 appears below the list of participants (optionally included in an area with "Copy Invite Link") and, in some embodiments, appears when scrolling through group card interface 665 (e.g., when there are many participants). In FIG. 6Y, device 602 detects input 615-9 selecting grid view option 668 to disable grid view configuration and detects input 615-10 to return to videoconferencing interface 650. In FIG. 6Z, device 602 displays videoconferencing interface 650 with grid view configuration disabled. Thus, tiles 660-1, 660-2, and 660-3 are displayed in a non-grid arrangement (e.g., overlapping arrangement) in main area 654, and tiles 660-4, 660-5, and 660-6 are moved to roster 656 with tiles 660-6 through 660-11.

[0193] In some embodiments, the videoconferencing interface 650 changes from the grid pattern shown in FIG. 6X to the overlapping arrangement shown in FIG. 6Z in response to detecting an input 615-14 in FIG. 6X (e.g., a selection of the arrangement selection option 672). In some embodiments, the videoconferencing interface 650 changes from the grid pattern shown in FIG. 6X to the overlapping arrangement shown in FIG. 6Z in response to detecting an input 615-13 in FIG. 6X (e.g., a gesture including contacts 615-13A and 615-13B). In the embodiment shown in FIG. 6X, the input 615-13 is an unpinch gesture of two contacts that move further apart over time and / or move through a location that corresponds to one or more of the participants' representations (e.g., 660) in the user interface. In some embodiments, the video conferencing interface 650 changes from the grid pattern shown in FIG. 6X to the overlapping arrangement shown in FIG. 6Z in response to detecting a pinch gesture of two or more contacts (e.g., 615-15A and 615-15B) that move closer together over time and through locations corresponding to one or more of the participant's representations (e.g., 660) in the user interface.

[0194] In some embodiments, the videoconferencing interface 650 changes from the overlapping arrangement shown in FIG. 6Z to the grid pattern shown in FIG. 6X in response to detecting an input 615-16 in FIG. 6Z (e.g., selection of arrangement selection option 672). In some embodiments, the videoconferencing interface 650 changes from the overlapping arrangement shown in FIG. 6Z to the grid pattern shown in FIG. 6X in response to detecting an input 615-15 in FIG. 6Z (e.g., a gesture including contacts 615-15A and 615-15B). In the embodiment shown in FIG. 6Z, the input 615-15 is a pinch gesture of two contacts that move toward each other over time and / or move through locations that correspond to one or more of the participants' representations (e.g., 660) in the user interface. In some embodiments, the video conferencing interface 650 changes from the overlapping arrangement shown in FIG. 6Z to the grid pattern shown in FIG. 6X in response to detecting an unpinch gesture of two or more contacts (e.g., 615-13A and 615-13B) that move further apart over time and move through locations corresponding to one or more of the participant's representations (e.g., 660) in the user interface.

[0195] In Figure 6AA, after a predetermined period of time without input, or in response to input 615-21 in Figure 6Z (e.g., a tap on videoconferencing interface 650 that is not directed at representation 660), device 602 hides control area 652 and resizes and shifts tiles 660-1 through 660-3 in main area 654. Here, participant 2 is the most active participant, as indicated by the enlarged size and shadow 659 of tile 660-2.

[0196] 6AB-6AG illustrate various embodiments of a device 602 that moves tiles to avoid overlapping with shared content. In FIG. 6AB, the device 602 is playing media from a shared content session (e.g., a TV show or movie) in a content PiP 670 (similar to the content PiP 620). Tiles 660-1 and 660-2 are resized and shifted, and tile 660-3 is moved to the roster 656 to accommodate the non-overlapping display of the content PiP 670. The device 602 detects an input 615-11 (e.g., a drag gesture) on the content PiP 670 and, in response, moves the content PiP 670 on the display while the input 615-11 is maintained. As the content PiP 670 is dragged on the display, the device 602 moves tiles 660-1 and 660-2 out of the way of the content PiP 670, as shown in FIG. 6AC.

[0197] In some embodiments, the device 602 moves the roster 656 and the camera preview 658 to accommodate the movement of the content PiP 670. For example, in FIG. 6AD, the device 602 moves the roster 656 and the camera preview 658 when the content PiP 670 is moved to the bottom of the display 602-1. In some embodiments, the device 602 does not move the roster 656 or the camera preview 658 to accommodate the movement of the content PiP 670. For example, if the content PiP 670 is hovering above the roster 656 and the camera preview 658 as shown in FIG. 6AC, and the input 615-11 is terminated (e.g., finger is lifted), the device 602 repositions the content PiP 670 to a location above the roster 656 and the camera preview 658 and repositions / resizes the tiles 660-1 and 660-2 as shown in FIG. 6AE. In FIG. 6AE, device 602 detects input 615-12 and, in response, moves content PiP 670 to the top of videoconferencing interface 650, as shown in FIG. 6AF.

[0198] In some embodiments, the device maintains the location of display elements (e.g., tiles) relative to the display when the orientation of the videoconferencing interface is changed. For example, in FIG. 6AG, device 602 is rotated counterclockwise from the portrait orientation in FIG. 6AF. Device 602 maintains the location of content PiP 670, tiles 660-1 through 660-5, and camera preview 658 relative to display 602-1 while rotating each element to maintain an upright display position. In some embodiments, device 602 optionally resizes content PiP 670, tiles 660-1, and / or tiles 660-2 to maintain the location of each element on display 602-1.

[0199] Figures 6AH-6AS show an embodiment of a videoconferencing interface 650. Figures 6AH, 6AJ, 6AL, 6AN, 6AP, and 6AR show videoconferencing interfaces 650 with the grid pattern disabled (e.g., and overlapping arrangement enabled), and Figures 6AI, 6AK, 6AM, 6AO, 6AQ, and 6AS show corresponding videoconferencing interfaces 650 with the grid pattern enabled (e.g., and overlapping arrangement disabled).

[0200] FIG. 6AH illustrates videoconferencing interface 650 when there are two active participants in the videoconference (e.g., one remote participant (represented by 660-1) and a participant associated with device 602 (represented by camera preview 658)), control area 652 is displayed, and grid pattern is disabled. Placement selection option 672 is not displayed in FIG. 6AH because the number of participants (two participants) is less than a predetermined number of participants (e.g., three participants, four participants (as in FIG. 6AH), or five participants). FIG. 6AI illustrates videoconferencing interface 650 under the same conditions as FIG. 6AH (e.g., the same two participants are active, control area 652 is displayed, and grid pattern is enabled), except that the grid pattern is enabled. Placement selection option 672 is not displayed in FIG. 6AI because the number of participants (two participants) is less than a predetermined number of participants (e.g., three participants, four participants (as in FIG. 6AI), or five participants). In the embodiment shown in Figures 6AH and 6AI, when there are two active participants, the video conferencing interface 650 is the same when the grid pattern is disabled as when the grid pattern is enabled.

[0201] FIG. 6AJ illustrates videoconferencing interface 650 when there are three active participants in the videoconference (e.g., compare with FIGS. 6AH and 6AI, participant 2 represented by 660-2 is participating in the videoconference), control area 652 is displayed, and grid pattern is disabled. Placement selection option 672 is not displayed in FIG. 6AJ because the number of participants (three participants) is less than a predetermined number of participants (e.g., three participants, four participants (as in FIG. 6AJ), or five participants). FIG. 6AK illustrates videoconferencing interface 650 under the same conditions as FIG. 6AJ (e.g., the same three participants are active, control area 652 is displayed, and grid pattern is enabled), except that grid pattern is enabled. Placement selection option 672 is not displayed in FIG. 6AK because the number of participants (three participants) is less than a predetermined number of participants (e.g., three participants, four participants (as in FIG. 6AK), or five participants). In the embodiment shown in Figures 6AJ and 6AK, when there are three active participants, the videoconferencing interface 650 is the same when the grid pattern is disabled as when the grid pattern is enabled.

[0202] FIG. 6AL illustrates video conference interface 650 when there are four active participants in the video conference (e.g., compare with FIGS. 6AJ and 6AK, participant 3 represented by 660-3 is participating in the video conference), control area 652 is displayed, and grid pattern is disabled. Because the number of participants (four participants) meets (e.g., is greater than or equal to) a predetermined number of participants (e.g., three participants, four participants (as in FIG. 6AL), or five participants) and control area 652 is displayed, arrangement selection option 672 is displayed in FIG. 6AL. Because grid pattern is not enabled, arrangement selection option 672 is not highlighted (e.g., not bolded) in FIG. 6AL. FIG. 6AM illustrates video conference interface 650 under the same conditions as FIG. 6AL (e.g., the same four participants are active, control area 652 is displayed, and grid pattern is enabled), except that grid pattern is enabled. Arrangement selection option 672 is displayed in FIG. 6AM because the number of participants (four participants) meets the predetermined number of participants (e.g., three participants, four participants (as in FIG. 6AM), or five participants) and control area 652 is displayed. In the embodiment shown in FIG. 6AJ and FIG. 6AK, when there are three active participants, videoconferencing interface 650 is the same when grid pattern is disabled as when grid pattern is enabled. Because grid pattern is enabled, arrangement selection option 672 is highlighted (e.g., bolded) in FIG. 6AM. In response to detecting input 615-17 (e.g., a tap) corresponding to selection of arrangement selection option 672 in FIG. 6AL, device 602 enables the grid pattern and changes videoconferencing interface 650 (e.g., including tiles 660 in main area 654) from the overlap arrangement in FIG. 6AL to the grid pattern in FIG. 6AM, highlighting arrangement selection option 672.In response to detecting an input 615-18 (e.g., a tap) corresponding to a selection of the placement selection option 672 in FIG. 6AM, the device 602 disables the grid pattern (e.g., enables the overlapping arrangement) and changes the videoconferencing interface 650 (e.g., including the tiles 660 in the main area 654) from the grid pattern in FIG. 6AM to the overlapping arrangement in FIG. 6AL and de-emphasizes the placement selection option 672.

[0203] FIG. 6AN illustrates videoconferencing interface 650 when there are four active participants in the videoconference (e.g., the same four participants as in FIGS. 6AL and 6AM), control area 652 and placement selection options 672 are not displayed, and the grid pattern is disabled. In some embodiments, device 602 ceases displaying control area 652 and / or placement selection options 672 in response to determining that a predetermined amount of time has elapsed since an input was received or in response to detecting input 615-22 in FIG. 6AL (e.g., a tap on videoconferencing interface 650 in a location that does not correspond to a participant's location). In some embodiments, device 602 displays control area 652 and / or placement selection options 672 (e.g., displays videoconferencing interface 650 as shown in FIG. 6AL) in response to detecting input 615-24 in FIG. 6AN (e.g., a tap on videoconferencing interface 650 in a location that does not correspond to a participant's location). FIG. 6AO illustrates the videoconferencing interface 650 under the same conditions as FIG. 6AN (e.g., the same four participants are active, the control area 652 and the placement selection options 672 are not displayed, and the grid pattern is enabled), except that the grid pattern is enabled. In some embodiments, the device 602 ceases displaying the control area 652 and / or the placement selection options 672 in response to determining that a predetermined amount of time has elapsed since an input was received or in response to detecting an input 615-23 in FIG. 6AM (e.g., a tap on the videoconferencing interface 650 in a location that does not correspond to the location of the participant). In some embodiments, the device 602 displays the control area 652 and / or the placement selection options 672 (e.g., displays the videoconferencing interface 650 as shown in FIG. 6AM) in response to detecting an input 615-26 in FIG. 6AO (e.g., a tap on the videoconferencing interface 650 in a location that does not correspond to the location of the participant).In some embodiments, in response to detecting an input 615-25 (e.g., an unpinch gesture as described with reference to FIG. 6Z or a pinch gesture as described with reference to FIG. 6X) on the display 602-1 in FIG. 6AN, the device 602 enables a grid pattern and changes the videoconferencing interface 650 (e.g., including tiles 660 in the main area 654) from the overlapping arrangement in FIG. 6AN to the grid pattern in FIG. 6AO. In some embodiments, in response to detecting an input 615-27 (e.g., an unpinch gesture as described with reference to FIG. 6Z or a pinch gesture as described with reference to FIG. 6X) on the display 602-1 in FIG. 6AO, the device 602 disables the grid pattern (e.g., enables an overlapping arrangement) and changes the videoconferencing interface 650 (e.g., including tiles 660 in the main area 654) from the grid pattern of FIG. 6AO to the overlapping arrangement of FIG. 6AN.

[0204] FIG. 6AP illustrates the video conference interface 650 when there are five active participants in the video conference (e.g., participant 4, represented by 660-4, joins the video conference compared to FIGS. 6AN and 6AO) and the grid pattern is disabled (e.g., overlapping arrangement is enabled). With the grid pattern disabled, the tile 660-4 representing participant 4 is displayed next to the camera preview 658 in the roster 656. In response to the grid pattern being disabled when the number of participants increases to (or exceeds) a predetermined number (e.g., four participants, five participants (as in FIG. 6AP), or six participants), the device 602 displays a notification 674 indicating that the grid pattern is available (e.g., some or all of the tiles 660 can be displayed in the grid pattern shown in FIG. 6AP, e.g., rather than in an overlapping arrangement). FIG. 6AQ illustrates the videoconferencing interface 650 under the same conditions as FIG. 6AP (e.g., the same five participants are active, the control area 652 and the placement selection options 672 are not displayed, and the grid pattern is enabled), except that the grid pattern is enabled. Because the grid pattern is enabled, the tile 660-4 representing participant 4 is displayed in the main area 654 (e.g., not in the roster 656). In FIG. 6AQ, because the grid pattern is enabled when the number of participants increases to a predetermined number (e.g., four participants, five participants (as in FIG. 6AQ), or six participants), the device 602 ceases to display the notification 674 indicating that the grid pattern is available. In response to detecting an input 615-19 (e.g., a tap) corresponding to selection of notification 674 in FIG. 6AP, device 602 enables a grid pattern and changes videoconferencing interface 650 (e.g., including tile 660 in main area 654) from the overlapping arrangement in FIG. 6AP to the grid pattern in FIG. 6AQ (e.g., including moving tile 660-4 from roster 656 to main area 654).

[0205] FIG. 6AR illustrates the video conference interface 650 when there are seven active participants in the video conference (e.g., compare to FIGS. 6AP and 6AQ, participant 5 represented by 660-5 and participant 6 represented by 660-6 are participating in the video conference) and the grid pattern is disabled (e.g., overlap arrangement is enabled). With the grid pattern disabled, tile 660-5 representing participant 5 and tile 660-6 representing participant 6 are displayed in the roster 656 (e.g., as shown in FIG. 6AA). In the embodiment illustrated in FIG. 6AR, the device 602 has ceased displaying notification 674 and does not display (e.g., redisplay) notification 674 in response to additional participants (e.g., participant 5 and / or participant 6) joining the video conference.

[0206] Figure 6AS shows the videoconferencing interface 650 under the same conditions as Figure 6AR (e.g., the same seven participants are active, control area 652 and placement selection option 672 are not displayed, and grid pattern is enabled), except that the grid pattern is enabled. Because the grid pattern is enabled, tile 660-5 representing participant 5 and tile 660-6 representing participant 6 are displayed in main area 654 (e.g., rather than in roster 656). In some embodiments, tile 660-5 representing participant 5 and / or tile 660-6 representing participant 6 are displayed in roster 656 (e.g., rather than in main area 654).

[0207] In some embodiments, techniques applied to video conferencing interface 650 described with reference to Figures 6AH-6AS are applied to video conferencing interface 605 (and optionally, tiles 610 and / or control area 612 therein) and / or the video conferencing interface in video conferencing window 630 (and optionally, tiles 640 and / or control area 632 therein).

[0208] 7 is a flow diagram illustrating a method for managing a videoconferencing session using a computer system (e.g., 600, 601, or 602), according to some embodiments. Method 700 is performed in a computer system (e.g., 100, 300, 500, 600, 601, or 602) in communication with one or more display generation components (e.g., 600-1, 601-1, or 602-1) (e.g., a display controller, a touch-sensitive display system, a speaker, a bone conduction audio output device, a tactile output generator, a projector, and / or a holographic display) and one or more input devices (e.g., 600-1, 601-3, or 602-1) (e.g., a touch-sensitive surface, a keyboard, a mouse, a trackpad, one or more optical sensors for detecting gestures, one or more capacitive sensors for detecting hover inputs, and / or an accelerometer / gyroscope / inertial measurement unit). Some operations of method 700 are optionally combined, the order of some operations is optionally changed, and some operations are optionally omitted.

[0209] As described below, the method 700 provides an intuitive way to manage a video conference session. The method reduces the cognitive burden on a user of managing a video conference session, thereby creating a more efficient human-machine interface. For battery-operated computing devices, allowing a user to manage a video conference session more quickly and efficiently conserves power and extends the time between battery charges.

[0210] The computer system displays a user interface (e.g., 605, 630, or 650) (e.g., an interface of an application) of a real-time communication session (e.g., a video communication session, an audio communication session, or an audio / video communication session (e.g., video chat)), the user interface including a plurality of representations (e.g., tiles 610, 640, or 650) of participants of the real-time communication session, the plurality of representations including a first set of the representations of the participants displayed in a grid pattern (e.g., a Cartesian grid including one or more rows and one or more columns, a two-dimensional array, a canvas region) in a first region (e.g., 604, 634, or 654) of the user interface of the real-time communication session, and a visual and a second set of representations of participants (e.g., the first and second sets are mutually exclusive) displayed in a second region of the user interface (e.g., 606, 636, or 656) (e.g., in a single row (along the top or bottom of the display) or a single column (along the left or right side of the display)) that is distinct from (e.g., does not overlap with and is separated from the first region by a visible boundary), where the representations of the first set of representations are larger (e.g., are physically larger and / or have a larger physical size) than the representations of the second set of representations (e.g., each representation of the first set of representations is larger than each representation of the second set of representations, or the smallest representation of the first set of representations is larger than the largest representation of the second set of representations) (702). In some embodiments, the first set of representations are displayed simultaneously with the second set of representations. In some embodiments, the grid pattern includes representations of participants that are more active and / or have a higher priority (e.g., according to participant priority criteria) than the participants represented in the region.

[0211] While displaying a real-time communication session user interface (e.g., 605, 630, or 650) including multiple representations (e.g., 610, 640, or 660) of participants in the real-time communication session, the computer system (e.g., 600, 601, or 602) detects a change in one or more dimensions of a first region (e.g., 604, 634, or 654) (e.g., detects a change in size (increase or decrease) and / or a change in aspect ratio (a change in the size of one dimension (height) of the first region relative to the other dimension (width))) (704). In some embodiments, detecting a change in one or more dimensions of the first region includes (e.g., is) detecting a request to modify the first region. In some embodiments, detecting a change in one or more dimensions of the first region includes (e.g., is) detecting an input directed to the real-time communication session user interface.

[0212] In response to detecting a change in one or more dimensions of the first region (e.g., 604, 634, or 654), the computer system (e.g., 600, 601, or 602) modifies (706) the number of representations (e.g., 610, 640, or 660) of participants of the real-time communication session displayed in the first region (e.g., grid) based on the change in the one or more dimensions of the first region, which may result in a change in the number of first representations (e.g., 610-19 and / or 610-20 of FIG. 6I) of each participant in the first region (e.g., FIG. 6N and displaying a second representation (e.g., 610-19 and / or 610-20 of FIG. 6J) (e.g., 640-3, 640-6, 640-7, 640-8, and / or 640-9 of FIG. 6O) (e.g., 640-7, 640-8, and / or 640-9 of FIG. 6P) (e.g., 660-3 of FIG. 6AB) in a second area (e.g., 606, 636, or 656). By altering the number of representations of participants of the real-time communication session displayed in the first area based on changes in one or more dimensions of the first area, the computer system is able to automatically and dynamically optimize the arrangement of the representations of participants based on changes in one or more dimensions of the first area without requiring a user to manually adjust the user interface of the real-time communication session, which provides improved visual feedback and reduces the number of inputs required to perform an action.

[0213] In some embodiments, modifying the number of representations of participants of the real-time communication session displayed in a first region (e.g., 604, 634, or 654) based on a change in one or more dimensions of the first region may include displaying a first representation (e.g., 610-19 and / or 610-20 of FIG. 6J) of each participant in a second region (e.g., 606, 636, or 656) (e.g., 640-3, 640-6, and / or 640-7 of FIG. 6O) in a second region (e.g., 606, 636, or 656). 6A) in the first region and displaying a second representation of the respective participant in the second region. In some embodiments, ceasing to display a first representation of the respective participant in the first region and displaying a second representation of the respective participant in the second region may be referred to as moving the respective participant from the first region to the second region. Similarly, ceasing to display a first representation of each participant in the second area and displaying a second representation of each participant in the first area is referred to as moving each participant from the second area to the first area.

[0214] In some embodiments, when a first region (e.g., 604, 634, or 654) decreases in size (e.g., in one or more dimensions) (e.g., beyond a threshold size), the computer system (e.g., 600, 601, or 602) moves one or more representations of participants in the real-time communication session (e.g., 610-19 and / or 610-20 of FIG. 6I) (e.g., 640-3, 640-6, 640-7, 640-8, and / or 640-9 of FIG. 6N) (e.g., 660-3 of FIG. 6AA) from the first region to a second region (e.g., 606, 636, or 656) (and, optionally, removes one or more representations of participants in the real-time communication session from the first region) (e.g., the computer system reduces the number of representations of participants in the real-time communication session displayed in the first region). In some embodiments, when the size (e.g., in one or more dimensions) of the first region increases (e.g., beyond a threshold size), the computer system moves one or more representations of participants in the real-time communication session (e.g., 610-19 and / or 610-20 of FIG. 6I) (e.g., 640-3, 640-6, 640-7, 640-8, and / or 640-9 of FIG. 6N) (e.g., 660-3 of FIG. 6AA) from the second region to the first region (and, optionally, removes one or more representations of participants in the real-time communication session from the second region) (e.g., the computer system increases the number of representations of participants in the real-time communication session displayed in the first region).

[0215] In some embodiments, the change in one or more dimensions of the first region (e.g., 604, 634, or 654) comprises a change in the orientation of the first region (e.g., from portrait to landscape or from landscape to portrait) (e.g., as shown in Figures 6H-6J). In some embodiments, the computer system changes one or more dimensions of the first region in response to detecting a change in orientation, (e.g., rotation), of the computer system and / or display generating components that causes the length and height of the first region to be swapped when the lengths and heights of the first region are different. In some embodiments, the change in one or more dimensions of the first region (e.g., 604, 634, or 654) comprises a change in size of one or more dimensions (e.g., height and / or width) of the first region (e.g., as shown in Figures 6M-6P).

[0216] In some embodiments, detecting a change in one or more dimensions of the first region (e.g., 604, 634, or 654) occurs while the first region is in a first state (e.g., a first size) (e.g., 634 of FIG. 6N). In some embodiments, in response to detecting a change in one or more dimensions of the first region (e.g., 615-3 or 615-4), a determination is made that the change in the one or more dimensions of the first region corresponds to a change of the first region (e.g., 615-3) from the first state to a second state (e.g., a first resized state) (e.g., 634 of FIG. 6O), in which the respective participant is a first participant (e.g., a participant corresponding to tile 640-3, 640-6, or 640-9) of the real-time communications session (e.g., when the first region is changed to the second state, a representation of the first participant moves from the first region to the second region). In accordance with a determination that the change in one or more dimensions of the first region corresponds to a change of the first region (e.g., 615-4) from the first state to a third state (e.g., 634 of FIG. 6P) that is different from the second state (e.g., the second resized state), the respective participant is a second participant in the real-time communication session (e.g., a participant corresponding to tiles 640-7, 640-8, or 640-9) that is different from the first participant in the real-time communication session (e.g., when the first region is changed to the third state that is different from the second state, a representation of the second (another) participant is moved from the first region to the second region). In accordance with a determination that the change in one or more dimensions of the first region corresponds to a change to a second state or a third state, the respective participant being a first or second participant in the real-time communication session, the computer system is enabled to automatically and dynamically optimize placement of the representations of the participants based on the change in one or more dimensions of the first region without requiring a user to manually adjust a user interface of the real-time communication session, which provides improved visual feedback and reduces the number of inputs required to perform an action. In some embodiments, the computer system moves different participants to the second region depending on how the first region is altered.

[0217] In some embodiments, in response to detecting a change (e.g., 615-2) in one or more dimensions of the first area (e.g., 634) and before changing the number of representations (e.g., 640) of participants in the real-time communication session displayed in the first area, the computer system (e.g., 600, 601, or 602) changes (e.g., decreases or increases) a size (e.g., height and / or width) of one or more representations (e.g., 640-1, 640-2, 640-3, 640-4, 640-5, 640-6, 640-7, 640-8, and / or 640-9 in FIG. 6N ) (e.g., a subset of the representations or all of the representations) of the first set of representations of participants in the first area (optionally without changing the number of representations of participants in the real-time communication session displayed in the first area). By changing the size of one or more of the representations of the first set of participant representations in the first area before changing the number of representations of participants of the real-time communication session displayed in the first area, the computer system is able to automatically and dynamically change the display size of the first area while maintaining the arrangement of the participant representations without requiring a user to manually adjust the participant representations in the user interface of the real-time communication session, which provides improved visual feedback and reduces the number of inputs required to perform an action.

[0218] In some embodiments, the change in one or more dimensions of the first region (e.g., 604, 634, or 654) includes a first (e.g., initial) change (e.g., 615-2) (e.g., increase or decrease) in one or more dimensions of the first region (e.g., to a size that does not meet the size threshold) followed by a second (e.g., continued or additional) change (e.g., 615-3 or 615-4) in one or more dimensions of the first region (e.g., to a size that meets the size threshold), and in response to detecting the first change, a computer system (e.g., 60 0, 601, or 602) changes (e.g., increases or decreases, respectively) the size of the participant representations in the first area (e.g., 640-1, 640-2, 640-3, 640-4, 640-5, 640-6, 640-7, 640-8, and / or 640-9 in FIG. 6N) but does not change the number of participant representations displayed in the first area, and in response to detecting a second change, the computer system changes the number of participant representations of the real-time communication session displayed in the first area (e.g., as shown in FIG. 6O or FIG. 6P).

[0219] In some embodiments, the computer system (e.g., 600, 601, or 602) alters the number of representations of participants of the real-time communication session displayed within the first region (e.g., 604, 634, or 654) in accordance with a determination that a change in one or more dimensions of the first region meets a set of criteria (e.g., one or more dimensions of the first region have reduced in size below a threshold size). For example, in response to detecting a reduction in the size of the first region, the computer system first reduces the size of the representations (e.g., in FIG. 6N) until the size of the first region has reduced to the threshold size, at which point the computer system alters (e.g., reduces) the number of representations of participants of the real-time communication session displayed in the first region (e.g., in FIG. 6O or FIG. 6P).

[0220] In some embodiments, the number of representations (e.g., 610, 640, or 660) of participants of the real-time communication session displayed in a first region (e.g., 604, 634, or 654) is based on a minimum representation size. Displaying the number of representations of participants of the real-time communication session based on a minimum representation size allows the computer system to set a size threshold for automatically and dynamically moving participant representations into or out of the first region based on changes in one or more dimensions of the first region without requiring a user to manually adjust a user interface of the real-time communication session, which provides improved visual feedback and reduces the number of inputs required to perform an action. In some embodiments, in response to a determination that the size of the first region is within a first range of region sizes, the computer system displays a first number of representations of participants of the real-time communication session in the first region, and in response to a determination that the size of the first region is not within the first range of region sizes, the computer system displays a second number of representations of participants of the real-time communication session in the first region, the second number being different from the first number. In some embodiments, the first range of region sizes includes a first maximum region size at which the participant's representation has a maximum representation display size and a first minimum region size at which the participant's representation has a minimum representation display size. In some embodiments, if the size of the first region is reduced below the first minimum region size, the computer system reduces the number of representations of the participants of the real-time communication session in the first region and increases the size of the representations (e.g., to the maximum representation display size).

[0221] In some embodiments, while displaying a user interface (e.g., 605, 630, or 650) of a real-time communication session, a computer system (e.g., 600, 601, or 602) detects a change in a display state of a first set (e.g., 610-6 in FIG. 6L) of one or more representations of participants in the real-time communication session (e.g., one or more participants joining the real-time communication session, one or more participants leaving the real-time communication session, one or more participants having an increased activity level, one or more participants having a decreased activity level, one or more representations of participants being moved from a first area (e.g., to a second area), and / or one or more representations of participants being moved to the first area). In some embodiments, in response to detecting a change in the display state of a first set of one or more representations of participants in the real-time communication session, the computer system updates the first set of representations of participants displayed in a grid pattern (e.g., 604, 634, or 654) based on the change in the display state of the first set of one or more representations of participants in the real-time communication session (e.g., addition and / or removal of tiles in the grid) without changing the displayed positions (e.g., while maintaining the displayed positions / arrangement of tiles in the grid that do not have a changed state) of a second set of one or more representations of participants in the real-time communication session that are not included in the first set (e.g., any of 610-1 through 610-5 and 610-7 through 610-18 in FIG. 6L).By updating a first set of participant representations displayed in a grid pattern based on changes in the display state of the first set of one or more representations of participants in the real-time communication session without changing the displayed positions of a second set of one or more representations of participants not included in the first set, the computer system is able to automatically and dynamically optimize the arrangement of the participant representations to avoid repositioning the participant representations based on changes in one or more dimensions of the first area without requiring a user to manually adjust the user interface of the real-time communication session to maintain the displayed arrangement of the participant representations in the second set, which provides improved visual feedback and reduces the number of inputs required to perform an operation.

[0222] In some embodiments, the computer system (e.g., 600, 601, or 602) updates the grid by adding and / or removing tiles to minimize movement of tiles (e.g., 610, 640, or 660) within the grid. For example, the computer system adds or removes entire rows and / or columns at a time by reflowing the grid when one user is added or removed from the grid to avoid piecemeal construction or deconstruction of the grid, or re-arranging the order of tiles within the grid. As another example, when a participant is removed from the grid (e.g., the corresponding user has left the real-time communication session or has been moved to a roster), the computer system leaves the location corresponding to the removed participant blank (e.g., 622) or displays in that location a representation of the participant previously represented in the second area (e.g., the roster) without moving other tiles in the grid.

[0223] In some embodiments, updating the first set of representations of participants displayed in the grid pattern based on a change in the display state of the first set of one or more representations of participants of the real-time communication session without changing the displayed position of a second set of one or more representations of participants of the real-time communication session not included in the first set includes adding complete rows (e.g., 610-9, 610-10, 610-11, and 610-12 of FIG. 6E ) or columns (e.g., 610-7 and 610-8 of FIG. 6D ) of representations of participants of the real-time communication session to the first region (e.g., 604, 634, or 654) or removing complete rows (e.g., 640-7, 640-8, and 640-9 of FIG. 6P ) or columns (e.g., 640-3, 640-6, and 640-9 of FIG. 6O ) of representations of participants of the real-time communication session from the first region (e.g., 604, 634, or 654). By adding or removing complete rows or columns of representations of participants in the real-time communication session to or from the first region, the computer system is able to automatically and dynamically optimize the arrangement of the participant representations to avoid re-arranging the participant representations based on changes in one or more dimensions of the first region without requiring a user to manually adjust a user interface (e.g., 605, 630, or 650) of the real-time communication session to maintain the displayed arrangement of the representations of the second set of participants, which provides improved visual feedback and reduces the number of inputs required to perform an action.

[0224] In some embodiments, when a first region (e.g., 604, 634, or 654) is resized, entire rows or columns of participant representations are removed from or added to the first region based on the resize. For example, when the first region is resized horizontally, columns of participant representations are removed from (e.g., moved to) the first region when decreasing the width of the first region, and columns of participant representations are added to (e.g., moved from) the first region when increasing the width of the first region. As another example, when the first region is resized vertically, rows of participant representations are removed from (e.g., moved to) the first region when decreasing the height of the first region, and rows of participant representations are added to (e.g., moved from) the first region when increasing the height of the first region.

[0225] In some embodiments, updating the first set of representations of participants displayed in a grid pattern based on a change in the display state of the first set of one or more representations of participants of the real-time communication session without changing the displayed positions of a second set of one or more representations of participants of the real-time communication session that are not included in the first set includes maintaining the displayed arrangement of the representations of the second set of participants (e.g., 640-1, 640-2, 640-4, 640-5, 640-7, and 640-8 of FIG. 6O) (e.g., 640-1 through 640-6 of FIG. 6P) in response to a change in orientation of the user interface (e.g., 605, 630, or 650) of the real-time communication session. Maintaining the displayed arrangement of the representations of the second set of participants in response to changes in orientation of the user interface of the real-time communication session enables the computer system to automatically and dynamically optimize the arrangement of the participant representations to avoid repositioning the participant representations based on changes in one or more dimensions of the first region without requiring a user to manually adjust the user interface of the real-time communication session to maintain the displayed arrangement of the representations of the second set of participants, which provides improved visual feedback and reduces the number of inputs required to perform actions. In some embodiments, as the orientation of the user interface is changed (e.g., rotated), tiles in the grid maintain their relative location to other tiles in the grid.

[0226] In some embodiments, updating the first set of participant representations displayed in the grid pattern based on changes in the display state of the first set of one or more representations of the real-time communication session participants without changing the displayed positions of the second set of one or more representations of the real-time communication session participants not included in the first set includes maintaining locations of the second set of participant representations (e.g., 660-1 and / or 660-2 of FIG. 6AG) relative to the display generating component while rotating the participant representations in accordance with the change in orientation of the real-time communication session user interface in response to a change in orientation of the real-time communication session user interface. Maintaining locations of the participant representations in the second set in response to a change in orientation of the real-time communication session user interface enables the computer system to automatically and dynamically optimize the placement of the participant representations to avoid repositioning the participant representations based on changes in one or more dimensions of the first region without requiring a user to manually adjust the real-time communication session user interface to maintain the displayed placement of the participant representations in the second set, which provides improved visual feedback and reduces the number of inputs required to perform an action. In some embodiments, when the user interface is reoriented (e.g., rotated), the tiles in the grid maintain their absolute location on the display, and each tile is rotated in place to maintain an upright position relative to the viewer.

[0227] In some embodiments, pursuant to a determination that the third participant's activity level meets a set of activity criteria (e.g., the third participant has the highest activity level of the participants in the real-time communication session), the computer system (e.g., 600, 601, or 602) increases a size of the representation of the third participant (e.g., in the first region) (e.g., 610-3 of FIG. 6C). Increasing the size of the representation of the third participant pursuant to a determination that the third participant's activity level meets the set of activity criteria may provide feedback to a user of the computer system as to which participants in the real-time communication session are meeting the established activity criteria, which provides improved visual feedback.

[0228] In some embodiments, pursuant to a determination that the fourth participant's activity level meets a set of activity criteria (e.g., the fourth participant has the highest activity level of the participants in the real-time communication session), the computer system (e.g., 600, 601, or 602) visually distinguishes the fourth participant's representation (e.g., in the first region) (e.g., 610-9 of FIG. 6E ) including modifying a depth effect (e.g., 609) associated with the fourth participant's representation (e.g., increasing a shading effect to indicate an increase in depth, decreasing a shading effect to indicate a decrease in depth). Modifying the depth effect associated with the fourth participant's representation pursuant to a determination that the fourth participant's activity level meets a set of activity criteria may provide feedback to a user of the computer system as to which participants in the real-time communication session are meeting the established activity criteria, which provides improved visual feedback.

[0229] In some embodiments, a computer system (e.g., 600, 601, or 602) is in communication with one or more cameras (e.g., 600-2, 601-2, or 602-2), and a user interface (e.g., 605, 630, or 650) of the real-time communication session includes a representation (e.g., a camera preview) (e.g., 608, 638, or 658) of a field of view of the one or more cameras. In some embodiments, the computer system detects an input (e.g., 615-5) corresponding to the first representation of a participant of the real-time communication session while displaying the representation of the one or more cameras overlaid on at least a portion of a first representation of a participant of the real-time communication session (e.g., 660-2 of FIG. 6Q) (e.g., the camera preview is displayed in front of at least a portion of the participant's representation). In some embodiments, in response to detecting an input corresponding to a first representation of a participant in the real-time communication session, the computer system displays the first representation of the participant in the real-time communication session overlaid on at least a portion of the representation of the field of view of the one or more cameras (e.g., the participant's representation is displayed in front of at least a portion of the camera preview) (e.g., as shown in FIG. 6R). By displaying the first representation of the participant in the real-time communication session overlaid on at least a portion of the representation of the field of view of the one or more cameras in response to detecting an input corresponding to a first representation of the participant in the real-time communication session, additional control for optimizing placement of the participant's representation without requiring the display of additional control options can be provided without cluttering the user interface.

[0230] In some embodiments, while displaying a second representation of a participant in the real-time communication session (e.g., 660-2 in FIG. 6Q), a computer system (e.g., 600, 601, or 602) detects a selection (e.g., 615-5) of the second representation of the participant in the real-time communication session. In some embodiments, in response to detecting the selection of the second representation of the participant in the real-time communication session, the computer system displays a capture affordance (e.g., 662) selectable to generate an image of the second representation of the participant in the real-time communication session (e.g., without generating images of other participants in the real-time communication session). Displaying the capture affordance in response to detecting the selection of the second representation of the participant in the real-time communication session may provide additional control for generating an image of the second representation of the participant in the real-time communication session without cluttering the user interface with additional control options until a selection is detected, providing additional control options without cluttering the user interface. In some embodiments, an external computer system associated with a remote participant in the real-time communication session captures an image of a second representation of the participant in the real-time communication session and transmits the image to the computer system (e.g., the computer system obtains the image of the second representation of the participant in the real-time communication session from the external computer system).

[0231] In some embodiments, a computer system (e.g., 600, 601, or 602) is in communication with one or more cameras (e.g., 600-2, 601-2, or 602-2), a capture affordance (e.g., 662) is displayed on a first portion of a second representation of a participant in the real-time communication session (e.g., 660-2 in FIG. 6R), and prior to detecting a selection (e.g., 615-5) of the second representation of a participant in the real-time communication session, the computer system displays a representation of the field of view (e.g., camera preview) (e.g., 608, 638, or 658) of the one or more cameras overlaid on the first portion of the second representation of a participant in the real-time communication session (e.g., as shown in FIG. 6Q).

[0232] In some embodiments, while displaying a second set of representations of participants displayed in a second area (e.g., 606, 636, or 656) and having a first size, the computer system (e.g., 600, 601, or 602) receives a request to display a first set of one or more controls (e.g., 612, 632, or 652) for the real-time communication session. In some embodiments, in response to receiving a request to display a first set of one or more controls for the real-time communication session, the computer system displays the first set of one or more controls for the real-time communication session (e.g., a control area or graphical object including information associated with the real-time communication session and / or the shared content session and / or one or more selectable functional options that, when selected, cause the computer system to perform a respective function associated with the real-time communication session and / or the shared content session) and displays a second set of representations of participants displayed in a second area and having a second size smaller than the first size (e.g., when the controls are displayed, a roster having a smaller size) (e.g., in some embodiments, the tiles in the roster 656 of FIG. 6X shrink when the control area 652 is displayed). By displaying a second set of participant representations displayed in a second area and having a second size smaller than the first size, the computer system is able to automatically and dynamically optimize the size of the participant representations to accommodate the display of the first set of controls for the real-time communication session without requiring a user to manually adjust the user interface of the real-time communication session to place the controls and participant representations in the second area, which provides improved visual feedback and reduces the number of inputs required to perform actions.

[0233] In some embodiments, a computer system (e.g., 600, 601, or 602) is in communication with one or more cameras (e.g., 600-2, 601-2, or 602-2), and a user interface (e.g., 605, 630, or 650) for the real-time communication session includes a representation (e.g., camera preview) (e.g., 608, 638, or 658) of the field of view of the one or more cameras, and a second set of representations of participants displayed in a second area (e.g., 606, 636, or 656) includes one or more representations (e.g., 660-9 of FIG. 6V) (e.g., 660-11 of FIG. 6W) of participants having shifted positions adjacent (e.g., with no intervening positions or representations of the participants) to the representation of the field of view of the one or more cameras (e.g., one or more of the tiles in the roster are shifted to make room for the camera preview). By displaying a second set of participant representations in a second area including one or more representations of participants having shifted positions adjacent to the representations of the field of view of the one or more cameras, the computer system is able to automatically and dynamically optimize the positioning of the participant representations in the second area to accommodate the display of the representations of the field of view of the one or more cameras without requiring a user to manually adjust a user interface of the real-time communication session to position the participant representations in the second area, which provides improved visual feedback and reduces the number of inputs required to perform an action.

[0234] In some embodiments, while displaying a first subset of the second set of participant representations displayed in a second area (e.g., 606, 636, or 656), the computer system (e.g., 600, 601, or 602) receives an input (e.g., 615-6 or 615-7) corresponding to a movement in a respective direction in the user interface (e.g., 605, 630, or 650) (e.g., a drag or swipe gesture) (e.g., a request to scroll through the first set of participant representations) (e.g., a request to scroll through the second set of participant representations). In some embodiments, in response to receiving an input corresponding to movement in the respective direction in the user interface, in accordance with a determination that the input corresponding to movement in the respective direction in the user interface is directed to a portion of the user interface that includes the second set of participant representations (e.g., 606, 636, or 656), the computer system scrolls the second set of participant representations in the respective direction, including displaying (e.g., and ceasing to display) (e.g., and continuing to display) (e.g., and continuing to display) one or more representations of participants in the first subset) of one or more participants (e.g., 660-10 and / or 660-11 of FIG. 6W) that are not included in a first subset of the second set of participant representations (e.g., 660-7 and / or 660-8 of FIG. 6X). By scrolling the second set of participant representations in accordance with a determination that inputs corresponding to movement in the respective directions in the user interface are directed to a portion of the user interface that includes the second set of participant representations, the computer system is able to display or hide representations of participants in the second area, which provides improved visual feedback and reduces the number of inputs required to perform an action.

[0235] In some embodiments, the computer system (e.g., 600, 601, or 602) ceases scrolling the first set of participant representations in response to receiving an input (e.g., 615-6 or 615-7) corresponding to a respective directional movement in the user interface (e.g., 605, 630, or 650) and in accordance with a determination that the input corresponding to the respective directional movement in the user interface is directed at a portion of the user interface (e.g., 604, 634, or 656) that includes the first set of participant representations. In some embodiments, the first set of participant representations (e.g., a grid) is not scrollable.

[0236] In some embodiments, the computer system (e.g., 600, 601, or 602) is in communication with one or more cameras (e.g., 600-2, 601-2, or 602-2), and the user interface (e.g., 605, 630, or 650) of the real-time communication session includes a representation of the field of view of the one or more cameras (e.g., a camera preview) (e.g., 608, 638, or 658), and scrolling the second set of participant representations includes scrolling one or more representations of participants (e.g., 660-10 and / or 660-11 in FIG. 6X) in the second set of participant representations below the representation of the field of view of the one or more cameras (e.g., scrolling a roster below the camera preview). By scrolling one or more representations of participants in the second set of participant representations below the representations of the field of view of one or more cameras, the computer system is able to display or hide representations of participants in the second area while accommodating the display of the representations of the field of view of one or more cameras, which provides improved visual feedback and reduces the number of inputs required to perform an action.

[0237] In some embodiments, after changing the number of representations of participants of the real-time communication session displayed in the first region (e.g., 604, 634, or 654) (e.g., based on one or more participants leaving or joining the real-time communication session based on a change in one or more dimensions of the first region), the computer system (e.g., 600, 601, or 602) updates the display of the user interface (e.g., 605, 630, or 650) of the real-time communication session, which indicates that a second set of representations of participants has been added to the representations of participants of the real-time communication session. and ceasing to display the second set of representations of participants of the real-time communication session (e.g., area 656 of FIG. 6U) in accordance with a determination that the second set of participant representations does not include more than the threshold number of participant representations of the real-time communication session (e.g., ceasing to display the roster if all tiles have been moved from the roster to the grid). Ceasing to display the second set of representations of participants of the real-time communication session in accordance with a determination that the second set of participant representations does not include more than the threshold number of participant representations may provide feedback to a user of the computer system that the representations of participants are less than the threshold number and may conserve computational resources by precluding the display of the second set of representations of participants of the real-time communication session, which provides improved visual feedback and conserves computational resources of the computer system.

[0238] In some embodiments, while displaying a first set of representations of participants (e.g., 660-1, 660-2, and 660-3 of FIG. 6AA) displayed in a first area (e.g., 604, 634, or 654) and having a first arrangement (e.g., size and / or location), a computer system (e.g., 600, 601, or 602) receives a request to display a second set of one or more controls (e.g., 612, 632, or 652) for the real-time communication session. In some embodiments, in response to receiving a request to display a second set of one or more controls for the real-time communication session, the computer system displays a second set of one or more controls for the real-time communication session (e.g., a control area or graphical object including information associated with the real-time communication session and / or the shared content session and / or one or more selectable functional options that, when selected, cause the computer system to perform a respective function associated with the real-time communication session and / or the shared content session) and displays a first set of representations of participants (e.g., 660-1, 660-2, and 660-3 of FIG. 6Z ) displayed in the first area and having a second arrangement that differs from the first arrangement (e.g., having a different location, position, order, and / or size based on the display of the set of controls). By displaying a first set of participant representations displayed in a first area and having a second arrangement different from the first arrangement, the computer system is able to automatically and dynamically optimize the locations of the participant representations in response to displaying a second set of one or more controls for the real-time communication session without requiring a user to manually adjust a user interface of the real-time communication session, which provides improved visual feedback and reduces the number of inputs required to perform actions.

[0239] In some embodiments, the real-time communication session user interface (e.g., 665) includes an arrangement selection option (e.g., 668 and / or 672) (e.g., an affordance, button, and / or selectable graphical element) that, when selected, enables (or disables) an overlapping arrangement (e.g., FIG. 6AZ) of the representations (e.g., 660-1, 660-2, and 660-3 of FIG. 6Z) of the participants of the real-time communication session (e.g., in a first region (e.g., 604, 634, or 654) of the real-time communication session user interface) (or, optionally, disables a grid pattern of the first set of participant representations in the first region (e.g., 604, 634, or 654) of the real-time communication session user interface). Displaying the arrangement selection option can provide additional control for enabling an overlapping arrangement of the third set of participant representations without cluttering the user interface with additional controls that are displayed until an input is detected, providing additional control options without cluttering the user interface. In some embodiments, an overlapping arrangement includes one or more representations of a participant overlapping with one or more other representations of the participant of the real-time communication session (e.g., FIG. 6Z, FIG. 6AL, FIG. 6AN, FIG. 6AP, and / or FIG. 6AR). In some embodiments, while in an overlapping arrangement, one or more representations of the third set of representations change size and / or position over time (e.g., in FIG. 6Z 660-1 increases in size because participant 1 is the most active participant) and maintain overlap (e.g., continue to overlap) with one or more other representations during and / or after the change in size and / or position (e.g., in FIG. 6Z 660-1 maintains overlap with 660-2, and / or 660-2 maintains overlap with 660-3).In some embodiments, after changing the size and / or position, one or more of the representations in the third set of representations occupy the position that one or more of the representations occupied before changing the size and / or position (e.g., in FIG. 6Z, 660-1 remains to the top left of 660-2, and 660-2 remains to the top right of 660-3). In some embodiments, the third set of representations of participants in the real-time communication session correspond to the same participants as the first set of representations of participants in the real-time communication session (e.g., the first and third sets include the same number of representations) (e.g., FIGS. 6AL and 6AM). In some embodiments, the third set of representations of participants in the real-time communication session include a different number of representations (e.g., more or fewer representations) than the first set of representations of participants in the real-time communication session (e.g., the number of representations changes when changing from a grid pattern to an overlapping arrangement or from an overlapping arrangement to a grid pattern) (e.g., FIGS. 6X and 6Z, 6AP and 6AQ, and 6AR and 6AS).

[0240] In some embodiments, while displaying a representation of a shared content session (e.g., a session between a computer system and one or more external computer systems that enables the computer system (e.g., 600, 601, or 602) to output synchronized content (e.g., audio and / or video data whose output is synchronized between the computer system and the external computer system) and / or screen sharing content (e.g., image data generated by a device (e.g., the computer system, the external computer system) that provides a real-time representation of image or video content currently being displayed at the device) while content is being output by the one or more external computer systems) in a first area of ​​a user interface of the real-time communication session simultaneously with a first set of participants' representations, the computer system receives a request (e.g., 615-11 or 615-12) to move the representation of the content.In some embodiments, in response to receiving a request to move the representation of the content, the computer system moves the representation of the content from a first location (e.g., 620 of FIG. 6K) within a user interface of the real-time communication session (e.g., 670 of FIG. 6AB) to a second location within the user interface of the real-time communication session, based on the movement (e.g., post-movement location) of the representation of the content (e.g., to avoid the post-movement location of the representation of the content) in accordance with a determination that overlapping placement of the first set of participant representations is enabled ...). and ceasing to reposition (e.g., move) the one or more representations of the participants of the first set of participant representations in the first region based on the movement (e.g., post-movement position) of the representation of the content in accordance with a determination that overlap placement of the first set of participant representations is not enabled (e.g., displaying the representation of the content overlaid on the one or more representations of the participants of the first set of participant representations in some embodiments) (e.g., as shown in FIG. 6K or FIG. 6L ). Repositioning the one or more representations of the participants of the first set of participant representations in the first region based on the movement (e.g., post-movement position) of the representation of the content in accordance with a determination that overlap placement of the first set of participant representations is not enabled. By repositioning the one or more representations of the participants of the first set of participant representations in the first region based on the movement of the representation of the content, the computer system is able to automatically and dynamically optimize the location of the representations based on the change in the position of the content without requiring a user to manually adjust a user interface of the real-time communication session, which provides improved visual feedback and reduces the number of inputs required to perform an action. In some embodiments, when grid placement is enabled, tiles in the grid do not move to avoid the position of the shared content when the shared content is moved. In some embodiments, when overlap placement is enabled, tiles move to avoid the location of the shared content when the shared content is moved.

[0241] In some embodiments, the placement selection option (e.g., 672) is displayed simultaneously with multiple representations of the participants in the real-time communication session (e.g., Figures 6X and 6Z), and displaying the placement selection option simultaneously with multiple representations of the participants in the real-time communication session provides additional control options without cluttering the user interface and reduces the number of inputs required to perform an action by providing the option to select a placement of the representations of the participants in the real-time communication session without further navigating the user interface.

[0242] In some embodiments, in response to a predetermined number of participants (e.g., three participants, four participants, or five participants) participating (e.g., simultaneously participating) in the real-time communication session (e.g., participants joining the real-time communication session to match the number of participants to a predetermined number of participants), the computer system displays (e.g., initially displays and / or begins displaying) the placement selection options (e.g., FIGS. 6AL and 6AM). In some embodiments, the placement selection options are not displayed before (e.g., immediately before) the predetermined number of participants have joined the real-time communication session (e.g., FIGS. 6AH and 6AI). In some embodiments, the placement selection options are not displayed if (e.g., upon and / or pursuant to) (e.g., upon determining that) fewer than the predetermined number of participants are participating (e.g., simultaneously participating) in the real-time communication session. By displaying arrangement selection options in response to a predetermined number of participants joining a real-time communication session, arrangement selection options are displayed when the number of participants reaches a number where a grid pattern provides a better use of the display space than an overlapping arrangement, or when there is a significant difference between the grid pattern and the overlapping arrangement, which provides improved visual feedback to the user and performs an action without requiring further user input when a set of conditions are met.

[0243] In some embodiments, while displaying the placement selection options (e.g., 672), the computer system receives an indication that fewer than a predetermined number of participants are participating (e.g., simultaneously participating) in the real-time communication session (e.g., one participant leaves the real-time communication session, resulting in the number of participants being less than the predetermined number of participants). In some embodiments, in response to receiving the indication that fewer than a predetermined number of participants are participating in the real-time communication session, the computer system ceases displaying the placement selection options (e.g., FIGS. 6AJ and 6AK). Ceasing to display the placement selection options in response to receiving the indication that fewer than a predetermined number of participants are participating allows the computer system to avoid displaying the placement selection options when the number of participants is below a number that provides a better use of the display space in a grid pattern than in an overlapping arrangement, or when there is no significant difference between the grid pattern and the overlapping arrangement, which provides improved visual feedback to the user and performs an action without further user input when a set of conditions are met, avoiding cluttering the user interface.

[0244] In some embodiments, in response to a participant joining the real-time communication session (e.g., optionally in response to a determination that the number of participants after the participants join the real-time communication session is equal to or greater than a predetermined number of participants), the computer system initiates display of the placement selection options (e.g., 672). By initiating display of the placement selection options in response to a participant joining the real-time communication session, placement selection options are displayed when the number of participants increases such that a grid pattern provides a better use of the display space than an overlapping placement, or when there is a significant difference between the grid pattern and an overlapping placement, which provides improved visual feedback to the user and performs an action without requiring further user input when a set of conditions are met.

[0245] In some embodiments, a placement selection option (e.g., 672) is displayed while (e.g., upon or in response to) a HUD or graphical object including information associated with the real-time communication session and / or the shared content session and / or one or more selectable functionality options (e.g., affordances, buttons, and / or selectable graphical elements) is displayed in the user interface of the real-time communication session that, when selected, causes the computer system to execute a respective functionality associated with the real-time communication session and / or the shared content session (e.g., leave the call, end the call, display video effects options, switch camera, mute / unmute microphone, and / or capture image). ... While simultaneously displayed, the computer system detects the occurrence of a respective condition (e.g., a threshold time has elapsed without detecting a tap input at the user interface or an input directed at the user interface) corresponding to ceasing to display the third set of one or more controls for the real-time communication session. In some embodiments, in response to detecting the occurrence of the respective condition, the computer system ceases to display the third set of one or more controls for the real-time communication session (e.g., 612, 632, and / or 652) and ceases to display the placement selection options (e.g., 672). In some embodiments, the computer system displays (e.g., begins displaying) the third set of one or more controls (and, optionally, the placement selection options) in response to detecting an input (e.g., 615-24 or 615-26) (e.g., a tap gesture or an input causing a pointer (e.g., cursor) to hover over the user interface of the real-time communication session).In some embodiments, the computer system ceases displaying the third set of one or more controls (and, optionally, the placement selection options) in response to detecting an input (e.g., 615-22 or 615-23) (e.g., a tap gesture or input that does not cause the pointer (e.g., cursor) to hover over the user interface for the real-time communication session). By ceasing to display the placement selection options in response to detecting the occurrence of a respective condition corresponding to ceasing to display the third set of one or more controls for the real-time communication session and ceasing to display the third set of one or more controls for the real-time communication session, the computer system consolidates the display of options for the real-time communication session to provide additional control options without cluttering the user interface with additional displayed controls and performs an action without requiring further user input when a set of conditions is met.

[0246] In some embodiments, while displaying a first set of representations of participants in a grid pattern in a first region of a user interface of the real-time communication session (e.g., FIG. 6X), the computer system detects a first gesture (e.g., 615-13A and 615-13B, and / or 615-15A and 615-15B) (e.g., a touch gesture including one or more contacts on the touch-sensitive surface that communicate with the computer system, such as a pinch release gesture (e.g., a gesture including two or more contacts that move further apart over time) or a pinch gesture (e.g., a gesture including two or more contacts that move closer together over time), optionally independent of the location of the touch gesture (e.g., not directed at a particular graphical element) that corresponds to a request to rearrange the representations of the participants within the user interface). In some embodiments, detecting the first gesture includes In response to placing a gesture, the computer system displays (e.g., in the first region) a fourth set of representations of the participants of the real-time communication session in an overlapping arrangement (e.g., FIG. 6Z) (e.g., disables the grid pattern of the first set of representations of the participants in the first region of the user interface of the real-time communication session and switches to an overlapping arrangement). By displaying the representations of the participants of the real-time communication session in an overlapping arrangement in response to a gesture that includes movement through locations corresponding to one or more of the representations of the participants in the user interface, the computer system changes the arrangement of the representations of the participants of the real-time communication session regardless of whether a selectable graphical element for changing the arrangement of the representations of the participants of the real-time communication session is displayed, which can reduce the number of inputs required to perform an operation and provide additional control options without cluttering the user interface with additional displayed controls.

[0247] In some embodiments, while displaying a fifth set of representations of participants in the real-time communication session in an overlapping arrangement (e.g., FIG. 6Z ) within a user interface of the real-time communication session, the computer system detects a second gesture (e.g., 615-13A and 615-13B, and / or 615-15A and 615-15B) including movement through a location corresponding to one or more of the participant's representations (e.g., 660-2 of FIG. 6Z ) within the user interface (e.g., a touch gesture including one or more contacts on a touch-sensitive surface in communication with the computer system, such as a pinch gesture (e.g., a gesture including two or more contacts that move closer together over time) or an unpinch gesture (e.g., a gesture including two or more contacts that move further apart over time)) corresponding to a request to change the arrangement of the multiple representations of the participants within the user interface. In some embodiments, in response to detecting the second gesture, the computer system displays (e.g., in the first area) a sixth set of representations of the participants of the real-time communication session in a grid pattern (e.g., FIG. 6X) (e.g., disabling the overlapping arrangement of the fifth set of participant representations). By displaying the representations of the participants of the real-time communication session in a grid pattern in response to a gesture that includes movement through locations corresponding to one or more of the participant representations in the user interface, the computer system repositions the representations of the participants of the real-time communication session regardless of whether selectable graphical elements for repositioning the representations of the participants of the real-time communication session are displayed, which can reduce the number of inputs required to perform an action and provide additional control options without cluttering the user interface with additional displayed controls.

[0248] In some embodiments, while displaying a seventh set of representations of participants of the real-time communication session in an overlapping arrangement within the user interface of the real-time communication session, the computer system receives an indication that a predetermined number of participants (e.g., three participants, four participants, five participants, or six participants) are participating (e.g., simultaneously participating) in the real-time communication session (e.g., participants have joined the real-time communication session to match the number of participants to a predetermined number of participants). In some embodiments, in response to receiving the indication that a predetermined number of participants are participating in the real-time communication session, the computer system displays (e.g., initially displays and / or begins displaying) a notification (e.g., 674) indicating that a plurality of representations of participants of the real-time communication session may be displayed in a grid pattern. In some embodiments, the notification includes (e.g., is) a selectable option (e.g., affordance) that, when selected (e.g., 615-19), causes the computer system to display representations of participants of the real-time communication session in a grid pattern within the first region (e.g., FIG. 6AQ). In response to receiving an indication that a predetermined number of participants are participating in the real-time communication session, a notification may be displayed indicating that multiple representations of the participants in the real-time communication session can be displayed in a grid pattern, thereby informing the user that a different arrangement is available that may provide a more appropriate display for a larger number of participants, which provides improved visual feedback to the user.

[0249] In some embodiments, the representation of the set of participant representations in the second area (e.g., 606, 636, or 656) has a similar height (or the same height) as a representation (e.g., 608, 638, or 658) of the field of view (e.g., camera preview) of a camera (e.g., 600-2, 601-2, or 602-2) that is in communication with the computer system (e.g., 600, 601, or 602).

[0250] In some embodiments, displaying a user interface (e.g., 605, 630, or 650) of the real-time communication session includes displaying a representation (e.g., 608, 638, or 658) of a field of view (e.g., a camera preview) of a camera (e.g., 600-2, 601-2, or 602-2) in communication with the computer system (e.g., 600, 601, or 602) in a second area (e.g., 606, 636, or 656) of the user interface that is visually distinct from the first area (e.g., 604, 634, or 654) (e.g., the second area includes a camera preview and a roster, both of which are separate from the tiles in the grid).

[0251] In some embodiments, altering the number of representations of participants of the real-time communication session displayed in a first region (e.g., 604, 634, or 654) based on a change in one or more dimensions of the first region includes fading out (e.g., gradually reducing the visual prominence of a first row of participant representations by decreasing the brightness, opacity, saturation, and / or other visual characteristics of the first row of participant representations, such as by animating the row to fade out) a first row of participant representations (e.g., one of the bottom two rows of tiles 610-13 through 610-20 of FIG. 6I when transitioning to the arrangement of FIG. 6J) while maintaining display of at least a second row of participant representations in the first region (e.g., the top three rows of tiles 610-1 through 610-12 of FIG. 6I when transitioning to the arrangement of FIG. 6J) (e.g., one or more rows fade out while one or more rows remain displayed in the grid). Displaying a first row of participant representations fading out while maintaining display of at least a second row of participant representations in the first region enables the computer system to automatically and dynamically optimize the arrangement of participant representations to avoid re-arranging participant representations based on changes in one or more dimensions of the first region without requiring a user to manually adjust the user interface of the real-time communication session to maintain the displayed arrangement of participant representations in the second set, which provides improved visual feedback and reduces the number of inputs required to perform an action. In some embodiments, the participant representations in the first row are displayed fading into the roster in the second region.

[0252] In some embodiments, altering the number of representations of participants of the real-time communication session displayed in a first region (e.g., 604, 634, or 654) based on a change in one or more dimensions of the first region includes fading out (e.g., gradually reducing the visual prominence of a first row of participant representations by decreasing the brightness, opacity, saturation, and / or other visual characteristics of the first row of participant representations, such as animating the column to fade out) a first column of participant representations (e.g., one of the rightmost two columns of tiles 610-13 through 610-18 of FIG. 6H when transitioning to the arrangement of FIG. 6I) while maintaining display of at least a second column of participant representations in the first region (e.g., one of the leftmost four columns of tiles 610-1 through 610-12 of FIG. 6H when transitioning to the arrangement of FIG. 6I) (e.g., one or more columns fade out while one or more columns remain displayed in the grid). Fading out the first column of participant representations while maintaining display of at least a second column of participant representations in the first region enables the computer system to automatically and dynamically optimize the arrangement of participant representations to avoid re-arranging participant representations based on changes in one or more dimensions of the first region without requiring a user to manually adjust the user interface of the real-time communication session to maintain the displayed arrangement of participant representations in the second set, which provides improved visual feedback and reduces the number of inputs required to perform an action. In some embodiments, the first column of participant representations are faded in and displayed into the roster of the second region.

[0253] It should be noted that the process details described above with respect to method 700 (e.g., FIG. 7) are also applicable in a similar manner to the methods described below. For example, method 900 optionally includes one or more of the characteristics of the various methods described above with reference to method 700. For example, the method of arranging tiles shown in FIGS. 6A-6AS may be applied to the embodiment described with reference to method 900. For the sake of brevity, these details have not been repeated.

[0254] Figures 8A-8H show exemplary user interfaces for managing a video conference session, according to some embodiments. The user interfaces in these figures are used to illustrate the processes described below, including the process in Figure 9. In some embodiments, the user interfaces of Figures 8A-8H can be used to illustrate the processes described above with respect to Figure 7.

[0255] In FIG. 8A , device 600 displays home screen 801 while climbers group is participating in a video conference that is simultaneously active with a shared content session. Device 600 also displays control area 812 similar to control area 612. Device 600 detects input 815-1 selecting camera option 812-4 and in response displays video conference interface 805 similar to video conference interface 605. The video conference interface includes tiles 810-1 through 810-12 displayed in main area 804, tiles 810-13 and 810-14 displayed in roster 806, and camera preview 808. Participant 1 is the most active participant, as indicated by the enlarged size and shadow 809 of tile 810-1.

[0256] In FIG. 8C, participant 1 begins sharing content with the climber group. Thus, device 600 displays shared content area 820, which includes a representation of the shared content and other elements associated with the shared content. In the embodiment shown in FIG. 8C, participant 1 (John) is sharing content displayed on the screen of his device. Thus, shared content area 820 includes screen shared content 830, which is a real-time representation of John's screen. Shared content area 820 also includes indicator 824 indicating that the shared content is John's screen, and tile 810-1b, which is a video feed from John's device. In some embodiments, John's video feed is displayed in both shared content area 820 and the grid, as indicated by respective tiles 810-1a and 810-b. In some embodiments, the view of the shared content can be resized, adjusted, zoomed in, zoomed out, panned, or otherwise manipulated. For example, the magnification affordance 822 can be selected to display an enlarged view of the screen shared content 830 (e.g., using the full screen or all of the screen outside of a portion of the screen designated for system state information and / or system controls). The tiles 810-1b and indicators 824 are optionally displayed along with the enlarged view of the screen shared content 830. In some embodiments, the view of the screen shared content 830 can be zoomed in (e.g., in response to an unpinch gesture), zoomed out (e.g., in response to a pinch gesture), panned (e.g., in response to a one- or two-finger drag gesture), or otherwise manipulated.

[0257] When device 600 displays shared content area 820, some of the tiles are moved to roster 806 while continuing to display the remaining tiles in main area 804. In the embodiment shown in Figures 8B and 8C, device 600 moved the tiles in the rightmost column of main area 804 (tiles 810-7, 810-8, and 810-12) to roster 806 while maintaining the relative positions of the remaining tiles in their respective 3x3 arrangements.

[0258] 8D-8H show various embodiments in which an active participant's tile is enlarged, for example, to indicate that the participant is a presenter. In FIG. 8D, participant 1 stops sharing his / her screen and device 600 returns the tiles to their previous arrangement. As participant 2 begins to speak to the group of climbers, tile 810-2 is highlighted. In FIG. 8E, as participant 2 continues to speak to the group, device 600 transitions tile 810-2 from the highlighting in FIG. 8D to an enlarged presenter state as shown in tile 810-2b. Once participant 2 becomes the presenter, their video feed is displayed in enlarged tile 810-2b and grid tile 810-2a. In some embodiments, shadow 809 is not displayed around tile 810-2a because participant 2 is already highlighted in enlarged tile 810-2b. When the enlarged tile 810-2b is displayed, the device 600 moves the tiles in a manner similar to that described above with respect to Figures 8B and 8C, including moving some tiles to the roster 806 and preserving the relative locations of the remaining tiles within the main area 804.

[0259] In Figure 8E, device 600 detects input 815-2 selecting tile 810-9. In response, device 600 expands tile 810-9, thereby pinning tile 810-9 within main region 804, as shown in Figure 8F. As tile 810-9 is expanded, device 600 moves adjacent tiles 810-4, 810-5, and 810-10 to roster 806 while maintaining remaining tiles 810-1, 810-2a, 810-3, 810-6, and 810-11 within main region 804.

[0260] In FIG. 8G, participant 2 begins sharing content with the climbers group. The device 600 displays the shared content in the content PiP 840 (similar to the content PiP 620). The device 600 continues to display the enlarged tile 810-2b in the main area 804 along with the content PiP 840 to indicate that participant 2 is sharing content in the content PiP 840 with the climbers group. As shown in FIG. 8G, the device 600 moves the remaining tiles to the roster 806 to accommodate the display of the enlarged tile 810-2b and the content PiP 840.

[0261] In some embodiments, device 600 can display tiles in a hybrid arrangement, where tiles are displayed in a grid and a presenter tile is displayed overlapping at least a portion of the grid. An example of such an embodiment is shown in FIG. 8H, where an enlarged tile 810-2b is displayed above tiles 810-1 through 810-12 in main area 804. The tiles in the grid are split into two groups, with tiles 810-1, 810-2a, 810-4, 810-5, 810-9, and 810-10 located on one side of enlarged tile 810-2b, and tiles 810-3, 810-7, 810-6, 810-8, 810-11, and 810-12 located on the other side of enlarged tile 810-2b.

[0262] 9 is a flow diagram illustrating a method for managing a videoconferencing session using a computer system (e.g., 600, 601, or 602), according to some embodiments. Method 900 is performed in a computer system (e.g., a smartphone, tablet, desktop or laptop computer) (e.g., 100, 300, 500, 600, 601, or 602) in communication with one or more display generation components (e.g., a display controller, a touch-sensitive display system, a speaker, a bone conduction audio output device, a tactile output generator, a projector, and / or a holographic display) (e.g., 600-1, 601-1, or 602-1) and one or more input devices (e.g., a touch-sensitive surface, a keyboard, a mouse, a trackpad, one or more optical sensors for detecting gestures, one or more capacitive sensors for detecting hover inputs, and / or an accelerometer / gyroscope / inertial measurement unit) (e.g., 600-1, 601-3, or 602-1). Some operations of method 900 are optionally combined, the order of some operations is optionally changed, and some operations are optionally omitted. In some embodiments, method 900 is performed on a computer system while a real-time communication session is available (e.g., can be joined or initiated). In some embodiments, the real-time communication session is included in (part of) a shared content session. In some embodiments, the shared content session is included in (part of) a real-time communication session. In some embodiments, the real-time communication session and the shared content session are included in (part of) the same communication session.

[0263] As described below, the method 900 provides an intuitive way to manage a video conference session. The method reduces the cognitive burden on a user of managing a video conference session, thereby creating a more efficient human-machine interface. For battery-operated computing devices, allowing a user to manage a video conference session more quickly and efficiently conserves power and extends the time between battery charges.

[0264] The computer system receives (902) a request (e.g., 815-1) to display a user interface (e.g., 805) of a real-time communication application corresponding to the real-time communication session. In response to receiving the request to display the user interface of the real-time communication application corresponding to the real-time communication session, the computer system displays (904) the user interface (e.g., 805) of the real-time communication application corresponding to the real-time communication session.While the computer system is connected to a real-time communications session and is connected to a shared content session (e.g., a session between the computer system and one or more external computer systems that enables the computer system to output content (e.g., synchronized content (e.g., audio and / or video data whose output is synchronized between the computer system and the external computer system) and / or screen sharing content (e.g., image data generated by a device (e.g., the computer system, the external computer system) that provides a real-time representation of image or video content currently displayed on the device)) while the content is being output by the one or more external computer systems), the computer system may participate in a real-time communications application (e.g., a video communications session, an audio communications session, or an audio / video communications session). A user interface (e.g., an interface of an application) of a real-time communication session (e.g., video chat) simultaneously displays (906) a plurality of representations (e.g., 810) of participants in the real-time communication session, where the plurality of representations are displayed in a two-dimensional array (e.g., an arrangement of tiles 810 in main area 804 as shown in FIG. 8C, FIG. 8E, FIG. 8F, and / or FIG. 8H) including two or more rows and two or more columns (e.g., a grid, a pattern) and a representation of content of the shared content session (e.g., 820, 830, 810-2b, and / or 840), where the representation of content is displayed in visual association with the array (e.g., displayed adjacent to, displayed grouped with, displayed within the array), and where the representation of content has a size corresponding to two or more rows of the array and / or two or more columns of the array. In some embodiments, the two-dimensional array includes corresponding locations corresponding to each row and each column. In some embodiments, not all locations in the array have representations (eg, some locations may or may not have content other than representations of participants in a real-time communication session).Simultaneously displaying multiple representations of the participants in a real-time communication session and a representation of the content of the shared content session in the user interface of the real-time communication application allows a user to view the content of the shared content session while maintaining the context of the ongoing real-time communication session without requiring the user to navigate between separate user interfaces for the shared content and the real-time communication application, which provides improved visual feedback without cluttering the user interface.

[0265] In some embodiments, multiple representations of participants (e.g., 810) in a real-time communication session at least partially occupy two or more rows and two or more columns of an array (e.g., an array of tiles 810 in main area 804) (e.g., the multiple representations are not all in a single row or a single column). In some embodiments, one or more of the multiple representations of participants in the real-time communication session (e.g., tile 810-1) (e.g., tile 610-1 of FIG. 6K) occupy a row that is at least partially occupied by a representation of the content (e.g., 620, 820, 830, 810-2b, and / or 840) and one or more of the multiple representations of participants in the real-time communication session (e.g., tiles 610-12, 610-15, and / or 610-18 of FIG. 6K) occupy a column that is at least partially occupied by a representation of the content (e.g., 620) (e.g., there are one or more representations of participants in the real-time communication session above / below the representation of the content (e.g., occupying the same column but different rows), and one or more representations of participants in the real-time communication session beside the representation of the content (e.g., occupying the same row but different columns). In some embodiments, the representation of the content includes a region (e.g., 820) that contains a representation of the content (e.g., 830), the region being defined at least in part by a boundary, and at least one of the region and the representation of the content within the region having a size corresponding to two or more rows of the array and / or two or more columns of the array.

[0266] In some embodiments, during a shared content session, content (e.g., 820, 830, 810-2b, and / or 840) is simultaneously output at both the computer system (e.g., 600, 601, or 602) and at one or more external computer systems associated with the participants of the real-time communication session. In some embodiments, the content is screen shared content (e.g., content displayed on a display of the computer system) from the computer system that is transmitted to the external computer system(s) such that the computer system simultaneously outputs the screen shared content from the computer system. In some embodiments, the content is screen shared content (e.g., content displayed on a display of the external computer system) from the external computer system (e.g., 830) that is transmitted to the computer system (and, in some embodiments, other external computer systems) such that the computer system simultaneously outputs the screen shared content from the external computer systems. In some embodiments, the content is synchronized content (e.g., 840) that is output at the computer system and the external computer system(s). In some embodiments, the computer system and the external computer system(s) each separately access content (e.g., videos, movies, TV shows, songs) from a remote server and are synchronized in their respective output of the content such that the content is output at the computer system (e.g., via an application local to the respective computer system) while each computer system separately accesses the content from the remote server. In some embodiments, the computer system and the external computer system(s) separately access the content (e.g., synchronized content) in response to a selection received at the computer system or the external computer system requesting output of the content.

[0267] In some embodiments, the representation of the content of the shared content session includes a representation (e.g., 810-1b, 824, and / or 810-2b) (e.g., a live video feed, a name, a photo, and / or an avatar) of an active participant (e.g., a participant presenting content, sharing content, and / or talking) of the real-time communication session. In some embodiments, the representation of the content of the shared content session includes a first representation (e.g., 810-1b or 810-2b) (e.g., a live video feed, a name, a photo, and / or an avatar) of an active participant, and the multiple representations of the participants include a second representation (e.g., 810-1a or 810-2a) (e.g., a live video feed, a name, a photo, and / or an avatar) of the active participant. Displaying a first representation of the active participant in the representation of the content and a second representation of the active participant in the multiple representations of the participants provides feedback to a user of the computer system that the active participant is associated with the shared content without adjusting the displayed arrangement of the multiple representations of the participants, which may confuse a user of the computer system, thereby providing improved visual feedback.

[0268] In some embodiments, displaying a representation of the content in the shared content session includes displaying a representation of the content (e.g., 830 of FIG. 8C or 810-2b of FIG. 8G) having a first size in accordance with a determination that the content has a first aspect ratio (e.g., 4:3, 9:16, or portrait), and displaying a representation of the content (e.g., 840) having a second size different from the first size in accordance with a determination that the content has a second aspect ratio different from the first aspect ratio (e.g., 16:9 or landscape). In some embodiments, the representation of the content in the shared content session includes a representation (e.g., 810-1b, 810-2b, and / or 824) of a participant who initiated output of content in the shared content session (e.g., a live video feed, a name, a photo, and / or an avatar). Displaying a representation of the content of the shared content session that includes a representation of the participant who has initiated output of the content in the shared content session provides feedback to a user of the computer system that the participant has initiated output of the shared content, which provides improved visual feedback. In some embodiments, the representation of the participant who has initiated output of the content in the shared content session includes a live video feed (e.g., 810-1b or 810-2b) of the participant. In some embodiments, displaying the representation of the content in the shared content session includes displaying an area (e.g., 820) (e.g., a bounded area) that includes a representation (e.g., 830) of the content (e.g., screen shared content and / or synchronized content) and a representation (e.g., 810b and / or 824) of the participant who has initiated output of the content in the shared content session (e.g., name, avatar, photo, and / or live video feed), where the representation of the participant who has initiated output of the content in the shared content session is displayed separately (e.g., spaced apart) from the representation of the content.By displaying a representation of the content of a shared content session that includes an area including a representation of the content and a representation of a participant who has started outputting content in the shared content session, feedback is provided to a user of the computer system that the participant has started outputting the shared content, which provides improved visual feedback.

[0269] In some embodiments, while displaying multiple representations of participants in a real-time communication session in a two-dimensional array, with each representation of the participants having a first display size, a computer system (e.g., 600, 601, or 602) detects a set of one or more inputs (e.g., 815-2) corresponding to a first representation (e.g., 810-9) of a participant in the real-time communication session having a first display size (e.g., pinned tile). In some embodiments, the set of one or more inputs includes a request to pin a tile. In some embodiments, the set of one or more inputs includes a request to enlarge a tile. In some embodiments, the set of one or more inputs includes a request to shrink a tile (e.g., after the tile has been enlarged). In some embodiments, in response to detecting a set of one or more inputs corresponding to a first representation of a participant of the real-time communication session, the computer system displays the first representation of the participant of the real-time communication session in a two-dimensional array having a second display size different (e.g., larger) than the first display size (e.g., 810-9 of FIG. 8F) while displaying other representations of the participant of the real-time communication session having the first display size (e.g., 810-1 of FIG. 8F). Displaying the first representation of the participant of the real-time communication session in a two-dimensional array having a second display size different from the first display size while displaying other representations of the participant of the real-time communication session having the first display size provides feedback to a user of the computer system that the representation of the participant was selected, which provides an enlarged view of the participant's representation providing improved visual feedback. In some embodiments, tiles may be pinned to not change position within the grid. In some embodiments, when a pinned tile is enlarged, one or more adjacent tiles are pushed out into the roster while the enlarged pinned tile remains within the grid. In some embodiments, when a zoomed-in pinned tile is shrunk to its original display size, the tiles that were pushed into the grid are removed from the roster and displayed in their original position adjacent to the pinned tile.

[0270] In some embodiments, the multiple representations of participants of the real-time communication session displayed in the two-dimensional array include a respective representation of the participant (e.g., 810-9 in FIG. 8F) having a pinned state that prevents the respective representation of the participant from changing location within the two-dimensional array (e.g., in response to a change in the number of participants represented in the two-dimensional array). Displaying multiple representations of participants of the real-time communication session including a respective representation of the participant having a pinned state that prevents the respective representation of the participant from changing location within the two-dimensional array provides additional control for maintaining fixed positions of the respective representations of the participants without cluttering the user interface with additional controls for maintaining fixed positions of the respective participants, which provides additional control options without cluttering the user interface.

[0271] In some embodiments, displaying the plurality of representations of participants in the real-time communication session includes displaying a first section of the two-dimensional array (e.g., a section including 810-1, 810-2a, 810-4, 810-5, 810-9, and 810-10 of FIG. 8H) (e.g., a section including two or more rows and two or more columns of representations of participants in the real-time communication session) and displaying a second section of the two-dimensional array (e.g., 810-3, 810-4, 810-5, 810-9, and 810-10 of FIG. 8H) that is different from the first section (e.g., separate from the first section). 10-7, 810-6, 810-8, 810-11, and 810-12) (e.g., a section including two or more rows and two or more columns of representations of participants in the real-time communication session), and displaying an enlarged representation (e.g., 810-2b) of a first participant in the real-time communication session, where the enlarged representation of the first participant overlaps at least a portion of the first section of the two-dimensional array and at least a portion of the second section of the two-dimensional array. Displaying multiple representations of participants in a real-time communication session, including displaying an enlarged representation of a first participant in the real-time communication session overlapping at least a portion of a first section of the two-dimensional array and at least a portion of a second section of the two-dimensional array, allows a user to view the representation of the first participant while maintaining the context of the ongoing real-time communication session with the other participants without requiring the user to navigate between separate user interfaces to view the representation of the first participant and the representation of the participant in the first and second sections of the two-dimensional array, which provides improved visual feedback without cluttering the user interface.

[0272] In some embodiments, while displaying multiple representations of participants in a real-time communication session (e.g., 660 or 810) and representations of content in a shared content session (e.g., 620, 670, 820, 830, 810-2b, and / or 840), a computer system (e.g., 600, 601, or 602) receives a request (e.g., 615-11 or 615-12) (e.g., an input) to move a representation of the content. In some embodiments, in response to receiving a request to move the representation of the content, the computer system moves the representation of the content (e.g., moves 670 as shown in FIGS. 6AB-6AF) in accordance with the request to move the representation of the content (e.g., based on the direction and / or magnitude of the input movement) and repositions (e.g., moves) one or more representations of participants in the real-time communication session (e.g., tiles 660 within region 654 and / or region 656) based on the movement of the representation of the content (e.g., the post-movement position) (e.g., to avoid the post-movement position of the representation of the content). Repositioning one or more representations of participants in the real-time communication session based on the movement of the representation of the content enables the computer system to automatically and dynamically optimize the location of the representations based on the change in the position of the content without requiring a user to manually adjust a user interface of the real-time communication application, which provides improved visual feedback and reduces the number of inputs required to perform an action. In some embodiments, the user interface of the real-time communication application includes a subset of representations of participants in the real-time communication session (e.g., tiles 660 or 810 within region 656 or 806) displayed within a first region of the user interface (e.g., 656 or 806) that is visually distinct from the two-dimensional array.

[0273] In some embodiments, modifying the location of one or more representations of participants of the real-time communication session based on the movement of the representation of the content includes moving a subset of the representations of the participants from a first region of a user interface to a second region of a user interface based on the movement of the representation of the content (e.g., to avoid a post-movement location of the representation of the content) (e.g., as shown in FIG. 6AD). Moving the subset of the representations of participants of the real-time communication session from a first region of a user interface to a second region of a user interface based on the movement of the representation of the content enables a computer system to automatically and dynamically optimize the location of the subset of the representations of participants based on the change in the location of the content without requiring a user to manually adjust the user interface of the real-time communication application, which provides improved visual feedback and reduces the number of inputs required to perform an action.

[0274] In some embodiments, while displaying multiple representations of participants in the real-time communication session and a representation of content of the shared content session, the computer system receives a request (e.g., 615-11 or 615-12) (e.g., an input) to select an item (e.g., 610, 620, 640, 670, 660, 810, 820, 830, 810-2b, or 840) (e.g., a representation of a participant in the real-time communication session, a set of one or more representations of participants in the real-time communication session, or a representation of content of the shared content session) for moving within a user interface (e.g., 605, 630, 650, or 805) of the real-time communication application. In some embodiments, in response to receiving a request to select an item to move, in accordance with a determination that the request corresponds to a selection of a representation of content of the shared content session (e.g., 620, 670, 820, 830, 810-2b, or 840), the computer system enables the movement of the representation of the content (e.g., based on the direction and / or magnitude of the input movement), and in accordance with a determination that the request corresponds to a selection of a set of one or more representations (e.g., 610, 660, 640, or 810) of participants in the real-time communication session (e.g., one or more tiles in an array, one or more tiles in a roster), the computer system ceases to enable the movement of the set of one or more representations of participants in the real-time communication session. By enabling moving of the representation of the content when the request corresponds to selecting a representation of the content for the shared content session and by ceasing to enable moving of the set of one or more representations of the participants in the real-time communication session when the request corresponds to selecting a set of one or more representations of the participants in the real-time communication session, a control is provided for selecting a representation of the content to move within the user interface without cluttering the user interface with additional controls for moving the representation of the content, which provides additional control options without cluttering the user interface.In some embodiments, representations of shared content can be selected and moved within the user interface, but tiles within the grid and / or roster cannot be selected and moved within the user interface.

[0275] In some embodiments, while displaying a representation of the content (e.g., 670) having a first position relative to a plurality of representations of participants of the real-time communication session (e.g., 660-1, 660-2, 660-3, 660-4, and / or 660-5) (e.g., as shown in FIG. 6AF), the computer system detects a change in orientation of a user interface of the real-time communication application (e.g., a rotation of the computer system from portrait to landscape orientation, or a rotation of the computer system from landscape to portrait orientation) (e.g., as shown in FIG. 6AG). In some embodiments, in response to detecting a change in orientation of the user interface of the real-time communication application, and in accordance with a determination that the change in orientation is a rotation in a first direction (e.g., a clockwise rotation), the computer system rotates a displayed orientation of the representation of the content (e.g., 670) and the plurality of representations of the participants (e.g., 660-1, 660-2, 660-3, 660-4, and / or 660-5) in a second direction (e.g., , counterclockwise) and pursuant to a determination that the orientation change is a rotation in a third direction (e.g., counterclockwise rotation) (e.g., as shown in FIG. 6AG), the computer system rotates the displayed orientations of the representation of the content (e.g., 670) and the multiple representations of the participants (e.g., 660-1, 660-2, 660-3, 660-4, and / or 660-5) in a fourth direction (e.g., clockwise) while maintaining the first position of the representation of the content relative to the multiple representations of the participants of the real-time communication session (e.g., as shown in FIG. 6AG). Rotating the displayed orientations of the representation of the content and the multiple representations of the participants while maintaining the first position of the representation of the content relative to the multiple representations of the participants of the real-time communication session allows the computer system to optimize the displayed orientations of the representation of the content and the multiple representations of the participants without adjusting the displayed placement of the representation of the content and the multiple representations of the participants, which may be confusing to a user of the computer system, which provides improved visual feedback.

[0276] It should be noted that the process details described above with respect to method 900 (e.g., FIG. 9) are also applicable in a similar manner to the methods described above. For example, method 700 optionally includes one or more of the characteristics of the various methods described above with reference to method 900. For example, the method of displaying shared content shown in FIGS. 8A-8H and described with reference to method 900 may be applied to the embodiment shown in FIGS. 6A-6AS and described with reference to method 700. For the sake of brevity, these details are not repeated.

[0277] Various embodiments provided herein are generally described using devices 600, 601, and 602. However, it should be understood that other computer systems or devices (in addition to or instead of devices 600, 601, and / or 602) can be used to participate in a videoconferencing session (with or without a simultaneous shared content session), and various aspects of a videoconferencing session can be implemented differently across various devices participating in the videoconferencing session. For example, a smart speaker, optionally including a display component, can be used to participate in a videoconferencing session. In some embodiments, input on the smart speaker can be provided verbally and, optionally, via touch input, and output can be audio output and, optionally, visual output provided on a connected display component. As another example, a display component (and speaker used to generate audio) of a head mounted device (HMD) can be used to display visual aspects of the videoconferencing session, and input can be received by detecting gestures, gaze, hand movements, audio input, touch input, or the like. In some embodiments, the user interface shown in the figures can be displayed in an extended reality environment, such as augmented reality or virtual reality. For example, the video tiles, windows, and / or other display areas shown in the figures can be displayed floating within a three-dimensional environment. As another example, representations of users or participants can be displayed as simulated three-dimensional avatars or two-dimensional avatars positioned around a three-dimensional environment, rather than as video tiles or windows in a video conferencing application. In addition, although the embodiments are described herein using various types of input, such as taps, drags, clicks, and hover gestures, it should be understood that the described embodiments can be modified to respond to other forms of input, including gestures, gaze, hand movements, audio input, and the like.Additionally, different devices with different capabilities can be combined in a single video conferencing session (e.g., with or without a shared content session), for example, a smartphone, a tablet, a laptop computer, a desktop computer, a smart speaker, a smart TV, headphones or earphones, an HMD, and / or a smart watch (or a subset thereof) can participate in the same session with the different devices participating differently according to the capabilities of the device (e.g., an HMD displaying content in a simulated three-dimensional or augmented reality environment, a smart speaker providing audio output and input, headphones providing spatial audio output and audio input, a laptop, desktop computer, smartphone and tablet providing audio and visual input and output, a smart TV providing audio and visual output as well as audio input (or audio and visual input)).

[0278] The above has been described with reference to specific embodiments for purposes of explanation. However, the above illustrative description is not intended to be exhaustive or to limit the invention to the precise form disclosed. Many modifications and variations are possible in light of the above teachings. The embodiments have been chosen and described in order to best explain the principles of the technology and their practical applications. This will enable others skilled in the art to best utilize the technology and various embodiments with various modifications as appropriate for the specific applications intended.

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

[0280] As noted above, one aspect of the present technology is to collect and use data available from various sources to improve the delivery of video conferencing session content to users. The present disclosure contemplates that in some cases, this collected data may include personal information data that uniquely identifies a particular person or that can be used to contact or locate a particular person. Such personal information data may include demographic data, location-based data, phone numbers, email addresses, social network IDs, home addresses, data or records regarding the user's health or fitness level (e.g., vital sign measurements, medication information, exercise information), date of birth, or any other identifying or personal information.

[0281] This disclosure recognizes that the use of such personal information data in the present technology may be used to the benefit of the user. For example, the personal information data may be used to deliver targeted content that is more interesting to the user. Thus, the use of such personal information data allows for calculated control of the content delivered by the user. Additionally, other uses of personal information data that benefit the user are also contemplated by this disclosure. For example, health and fitness data may be used to provide insight into the overall wellness of the user, or may be used as proactive feedback to individuals using the technology in pursuit of wellness goals.

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

[0283] Notwithstanding the foregoing, the present disclosure also contemplates embodiments in which a user selectively prevents use of or access to personal information data. That is, the present disclosure contem...

Claims

1. A computer system in communication with one or more display generating components and one or more input devices, comprising: Displaying a user interface of a real-time communication session, the user interface including a plurality of representations of participants of the real-time communication session, the plurality of representations comprising: a first set of representations of participants of the real-time communication session displayed in a grid pattern in a first area of ​​the user interface; a second set of representations of participants displayed in a second area of ​​the user interface visually distinct from the first area, the representations of the first set of representations being larger than the representations of the second set of representations; detecting a change in one or more dimensions of the first region while displaying the user interface of the real-time communication session including the representations of the participants of the real-time communication session; in response to detecting the change in the one or more dimensions of the first area, modifying a number of representations of participants of the real-time communication session displayed in the first area based on the change in the one or more dimensions of the first area, the modifying including ceasing to display a first representation of each participant in the first area and displaying a second representation of each participant in the second area; A method comprising:

2. The method of claim 1 , wherein the change in one or more dimensions of the first region comprises a change in orientation of the first region.

3. The method of any one of claims 1 to 2, wherein the change in one or more dimensions of the first region comprises a change in size of one or more dimensions of the first region.

4. detecting the change in one or more dimensions of the first region while the first region is in a first state; in response to detecting the change in one or more dimensions of the first region; in response to a determination that the change in one or more dimensions of the first region corresponds to a change in the first region from the first state to a second state, the respective participant is a first participant in the real-time communications session; in accordance with a determination that the change in one or more dimensions of the first region corresponds to a change of the first region from the first state to a third state different from the second state, the respective participant being a second participant of the real-time communications session different from the first participant of the real-time communications session. The method according to any one of claims 1 to 3.

5. in response to detecting the change in the one or more dimensions of the first region, resizing one or more of the first set of representations of participants in the real-time communication session in the first area before changing the number of representations of participants of the real-time communication session displayed in the first area; The method of any one of claims 1 to 4, further comprising:

6. The method of any one of claims 1 to 5, wherein the number of representations of participants of the real-time communication session that are displayed in the first area is based on a minimum representation size.

7. detecting a change in a display state of a first set of one or more representations of participants in the real-time communication session while displaying the user interface of the real-time communication session; responsive to detecting the change in display state of the first set of one or more representations of participants of the real-time communication session, updating the first set of representations of participants displayed in the grid pattern based on the change in display state of the first set of one or more representations of participants of the real-time communication session without changing displayed positions of a second set of one or more representations of participants of the real-time communication session that are not included in the first set; The method of any one of claims 1 to 6, further comprising:

8. 8. The method of claim 7, wherein updating the first set of representations of participants displayed in the grid pattern based on the change in the display state of the first set of one or more representations of participants of the real-time communication session without changing the displayed positions of the second set of one or more representations of participants of the real-time communication session that are not included in the first set includes adding complete rows or columns of representations of participants of the real-time communication session to the first area or removing complete rows or columns of representations of participants of the real-time communication session from the first area.

9. 9. The method of claim 7, wherein updating the first set of representations of participants displayed in the grid pattern based on the changes in the display state of the first set of one or more representations of participants of the real-time communication session without changing the displayed positions of the second set of one or more representations of participants of the real-time communication session that are not included in the first set comprises maintaining the displayed arrangement of the representations of the second set of participants in response to changes in orientation of the user interface of the real-time communication session.

10. 10. The method of claim 7, wherein updating the first set of representations of participants displayed in the grid pattern based on the changes in the display state of the first set of one or more representations of participants of the real-time communication session without changing the displayed positions of the second set of one or more representations of participants of the real-time communication session that are not included in the first set comprises maintaining the location of the representations of the second set of participants relative to the display generation component while rotating the representations of the participants in accordance with the change in orientation of the user interface of the real-time communication session in response to a change in orientation of the user interface of the real-time communication session.

11. increasing a size of the representation of a third participant in accordance with a determination that an activity level of the third participant satisfies a set of activity criteria; The method of any one of claims 1 to 10, further comprising:

12. visually distinguishing the representation of the fourth participant, including modifying a depth effect associated with the representation of the fourth participant in accordance with a determination that an activity level of the fourth participant meets a set of activity criteria; The method of any one of claims 1 to 11, further comprising:

13. the computer system is in communication with one or more cameras, and the user interface of the real-time communication session includes a representation of a field of view of the one or more cameras, the method comprising: detecting an input corresponding to a first representation of a participant of the real-time communication session while displaying the representation of the field of view of the one or more cameras overlaid on at least a portion of the first representation of the participant of the real-time communication session; in response to detecting the input corresponding to the first representation of the participant of the real-time communication session, displaying the first representation of the participant of the real-time communication session overlaid on at least a portion of the representation of the field of view of the one or more cameras; The method of any one of claims 1 to 12, further comprising:

14. detecting a selection of a second representation of a participant of the real-time communication session while displaying the second representation of the participant of the real-time communication session; in response to detecting the selection of the second representation of the participant of the real-time communication session, displaying a selectable capture affordance for generating an image of the second representation of the participant of the real-time communication session; The method of any one of claims 1 to 13, further comprising:

15. the computer system being in communication with one or more cameras; the capture affordance is displayed on a first portion of the second representation of the participant of the real-time communication session; and displaying a representation of a field of view of the one or more cameras overlaid on the first portion of the second representation of the participant of the real-time communication session prior to detecting the selection of the second representation of the participant of the real-time communication session. The method of claim 14.

16. receiving a request to display a first set of one or more controls for the real-time communication session while displaying the second set of representations of participants displayed in the second area and having a first size; in response to receiving the request to display a first set of one or more controls for the real-time communication session; displaying the first set of one or more controls for the real-time communication session; and displaying the second set of representations of participants displayed in the second area and having a second size smaller than the first size; The method of any one of claims 1 to 15, further comprising:

17. the computer system being in communication with one or more cameras; the user interface of the real-time communication session includes a representation of a field of view of the one or more cameras; the second set of representations of participants displayed in the second area includes one or more representations of participants having shifted positions adjacent to the representations of the fields of view of the one or more cameras. The method according to any one of claims 1 to 16.

18. receiving inputs corresponding to movements in respective directions in the user interface while displaying a first subset of the second set of representations of participants displayed in the second area; in response to receiving the input corresponding to a movement in the respective direction in the user interface; scrolling the second set of participant representations in the respective directions, including displaying one or more representations of participants not included in the first subset of the second set of participant representations, in accordance with a determination that the input corresponding to movement in the respective directions in the user interface is directed toward a portion of the user interface that includes the second set of participant representations; The method of any one of claims 1 to 17, further comprising:

19. in response to receiving the input corresponding to a movement in the respective direction in the user interface; ceasing scrolling of the first set of participant representations in response to a determination that the input corresponding to the movement in the respective direction in the user interface is directed toward a portion of the user interface that includes the first set of participant representations; 20. The method of claim 18, further comprising:

20. the computer system being in communication with one or more cameras; the user interface of the real-time communication session includes a representation of a field of view of the one or more cameras; scrolling through the second set of participant representations includes scrolling one or more representations of participants in the second set of participant representations below the representations of the fields of view of the one or more cameras.

20. The method according to any one of claims 18 to 19.

21. updating the display of the user interface of the real-time communication session after changing the number of representations of participants of the real-time communication session displayed in the first area, displaying the second set of representations of participants in the real-time communication session in accordance with a determination that the second set of representations of participants includes more than a threshold number of representations of participants in the real-time communication session; ceasing to display the second set of representations of participants of the real-time communication session in accordance with a determination that the second set of representations of participants does not include more than the threshold number of representations of participants of the real-time communication session. The method of any one of claims 1 to 20, further comprising:

22. receiving a request to display a second set of one or more controls for the real-time communication session while displaying the first set of representations of participants displayed in the first area and having a first arrangement; in response to receiving the request to display a second set of one or more controls for the real-time communication session; displaying the second set of one or more controls for the real-time communication session; and displaying the first set of representations of participants displayed in the first area and having a second arrangement different from the first arrangement; The method of any one of claims 1 to 21, further comprising:

23. A method according to any preceding claim, wherein the user interface of the real-time communication session includes an arrangement selection option which, when selected, enables an overlapping arrangement of a third set of representations of participants in the real-time communication session.

24. receiving a request to move a representation of content associated with a shared content session while displaying the representation of the content in the first area of ​​the user interface of the real-time communication session concurrently with the first set of participant representations; in response to receiving the request to move the representation of the content, moving a representation of the content from a first location within the user interface of the real-time communication session to a second location within the user interface of the real-time communication session; repositioning one or more representations of participants of the first set of participant representations within the first region based on the movement of the representation of content in accordance with a determination that the overlap arrangement of the first set of participant representations is enabled; refraining from repositioning one or more representations of participants of the first set of participant representations within the first region based on the movement of the representation of content in accordance with a determination that the overlapping arrangement of the first set of participant representations is not enabled; and 24. The method of claim 23, further comprising:

25. A method according to any one of claims 23 to 24, wherein said placement selection options are displayed simultaneously with said representations of the participants in said real-time communication session.

26. displaying said placement selection options in response to a predetermined number of participants participating in said real-time communication session; The method of any one of claims 23 to 25, further comprising:

27. receiving an indication that less than the predetermined number of participants are participating in the real-time communication session while displaying the placement selection options; ceasing to display the placement selection options in response to receiving the indication that less than the predetermined number of participants are participating in the real-time communication session; and The method of any one of claims 23 to 26, further comprising:

28. initiating display of the placement selection options in response to a participant joining the real-time communication session; The method of any one of claims 23 to 27, further comprising:

29. the placement selection option is displayed while a third set of one or more controls for the real-time communication session are displayed in the user interface for the real-time communication session; The method further comprising: detecting the occurrence of a respective condition corresponding to ceasing to display the third set of one or more controls for the real-time communication session while the placement selection option is being displayed simultaneously with the third set of one or more controls for the real-time communication session; ceasing to display the third set of one or more controls for the real-time communication session and ceasing to display the placement selection options in response to detecting the occurrence of the respective condition; The method of any one of claims 23 to 28, further comprising:

30. detecting a first gesture, while displaying the first set of representations of participants in the grid pattern in the first area of ​​the user interface of the real-time communication session, the first gesture including a movement through a location corresponding to one or more of the representations of participants in the user interface, the first gesture corresponding to a request to change the arrangement of the representations of participants in the user interface; displaying a fourth set of representations of participants in the real-time communication session in an overlapping arrangement in response to detecting the first gesture; The method of any one of claims 1 to 29, further comprising:

31. detecting, while displaying within the user interface of the real-time communication session a fifth set of representations of participants of the real-time communication session in an overlapping arrangement, a second gesture including a movement through a location corresponding to one or more of the representations of participants within the user interface corresponding to a request to change the arrangement of the representations of participants within the user interface; displaying a sixth set of representations of participants in the real-time communication session in a grid pattern in response to detecting the second gesture; The method of any one of claims 1 to 30, further comprising:

32. receiving an indication that a predetermined number of participants are participating in the real-time communication session while displaying a seventh set of representations of participants in the real-time communication session in an overlapping arrangement on the user interface of the real-time communication session; responsive to receiving the indication that a predetermined number of participants are participating in the real-time communication session, displaying a notification indicating that the representations of participants in the real-time communication session may be displayed in the grid pattern; The method of any one of claims 1 to 31, further comprising:

33. A method according to any preceding claim, wherein the representation of the set of representations of participants in the second area has a similar height to a representation of a field of view of a camera in communication with the computer system.

34. 34. The method of claim 1, wherein displaying the user interface of the real-time communication session comprises displaying a representation of a field of view of a camera in communication with the computer system in a second area of ​​the user interface that is visually distinct from the first area.

35. 35. A method according to any one of claims 1 to 34, wherein altering the number of representations of participants of the real-time communication session displayed in the first area based on the change in the one or more dimensions of the first area comprises fading out a first row of representations of participants while maintaining the display of at least a second row of representations of participants in the first area.

36. 36. A method according to any one of claims 1 to 35, wherein altering the number of representations of participants of the real-time communication session displayed in the first area based on the change in the one or more dimensions of the first area comprises fading out a first column of representations of participants while maintaining the display of at least a second column of representations of participants in the first area.

37. A non-transitory computer readable storage medium storing one or more programs configured to be executed by one or more processors of a computer system in communication with one or more display generating components and one or more input devices, the one or more programs including instructions for performing the method of any one of claims 1 to 36.

38. 1. A computer system configured to communicate with one or more display generation components and one or more input devices, the computer system comprising: one or more processors; - a memory storing one or more programs configured to be executed by said one or more processors, said one or more programs including instructions for performing a method according to any one of claims 1 to 36; A computer system comprising:

39. 1. A computer system configured to communicate with one or more display generation components and one or more input devices, comprising: A computer system comprising means for carrying out the method according to any one of claims 1 to 36.

40. 37. A computer program product comprising one or more programs configured to be executed by one or more processors of a computer system in communication with one or more display generating components and one or more input devices, said one or more programs comprising instructions for performing a method according to any one of claims 1 to 36.

41. 1. A non-transitory computer-readable storage medium storing one or more programs configured to be executed by one or more processors of a computer system in communication with one or more display generating components and one or more input devices, the one or more programs comprising: Displaying a user interface of a real-time communication session, the user interface including a plurality of representations of participants of the real-time communication session, the plurality of representations comprising: a first set of representations of participants of the real-time communication session displayed in a grid pattern in a first area of ​​the user interface; a second set of representations of participants displayed in a second area of ​​the user interface visually distinct from the first area, the representations of the first set of representations being larger than the representations of the second set of representations; detecting a change in one or more dimensions of the first region while displaying the user interface of the real-time communication session including the representations of the participants of the real-time communication session; in response to detecting the change in the one or more dimensions of the first area, modifying a number of representations of participants of the real-time communication session displayed in the first area based on the change in the one or more dimensions of the first area, the modifying including ceasing to display a first representation of each participant in the first area and displaying a second representation of each participant in the second area; A non-transitory computer-readable storage medium comprising instructions for:

42. 1. A computer system configured to communicate with one or more display generation components and one or more input devices, comprising: one or more processors; and a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs comprising: Displaying a user interface of a real-time communication session, the user interface including a plurality of representations of participants of the real-time communication session, the plurality of representations comprising: a first set of representations of participants of the real-time communication session displayed in a grid pattern in a first area of ​​the user interface; a second set of representations of participants displayed in a second area of ​​the user interface visually distinct from the first area, the representations of the first set of representations being larger than the representations of the second set of representations; detecting a change in one or more dimensions of the first region while displaying the user interface of the real-time communication session including the representations of the participants of the real-time communication session; in response to detecting the change in the one or more dimensions of the first area, modifying a number of representations of participants of the real-time communication session displayed in the first area based on the change in the one or more dimensions of the first area, the modifying including ceasing to display a first representation of each participant in the first area and displaying a second representation of each participant in the second area; A computer system comprising instructions for:

43. 1. A computer system configured to communicate with one or more display generation components and one or more input devices, comprising: Means for displaying a user interface of a real-time communication session, said user interface including a plurality of representations of participants of said real-time communication session, said plurality of representations comprising: a first set of representations of participants of the real-time communication session displayed in a grid pattern in a first area of ​​the user interface; a second set of representations of participants displayed in a second area of ​​the user interface visually distinct from the first area, the representations of the first set of representations being larger than the representations of the second set of representations; means for detecting a change in one or more dimensions of the first region while displaying the user interface of the real-time communication session including the plurality of representations of participants in the real-time communication session; means for modifying a number of representations of participants of the real-time communication session displayed in the first area based on the change in the one or more dimensions of the first area in response to detecting the change in the one or more dimensions of the first area, the modifying means including ceasing to display a first representation of each participant in the first area and displaying a second representation of each participant in the second area; A computer system comprising:

44. 1. A computer program product comprising one or more programs configured to be executed by one or more processors of a computer system in communication with one or more display generating components and one or more input devices, the one or more programs comprising: Displaying a user interface of a real-time communication session, the user interface including a plurality of representations of participants of the real-time communication session, the plurality of representations comprising: a first set of representations of participants of the real-time communication session displayed in a grid pattern in a first area of ​​the user interface; a second set of representations of participants displayed in a second area of ​​the user interface visually distinct from the first area, the representations of the first set of representations being larger than the representations of the second set of representations; detecting a change in one or more dimensions of the first region while displaying the user interface of the real-time communication session including the representations of the participants of the real-time communication session; in response to detecting the change in the one or more dimensions of the first area, modifying a number of representations of participants of the real-time communication session displayed in the first area based on the change in the one or more dimensions of the first area, the modifying including ceasing to display a first representation of each participant in the first area and displaying a second representation of each participant in the second area; A computer program product comprising instructions for:

45. A computer system in communication with one or more display generating components and one or more input devices, comprising: Receiving a request to display a user interface of a real-time communication application corresponding to the real-time communication session; displaying the user interface of the real-time communication application corresponding to the real-time communication session in response to receiving the request to display the user interface of the real-time communication application corresponding to the real-time communication session; While the computer system is connected to the real-time communication session and connected to a shared content session, In the user interface of the real-time communication application, a plurality of representations of participants in the real-time communication session, the plurality of representations being displayed in a two-dimensional array including two or more rows and two or more columns; a representation of content of the shared content session having a size corresponding to two or more rows of the array and / or two or more columns of the array, the representation of content being displayed in visual association with the array; and A method comprising:

46. 46. ​​The method of claim 45, wherein the representation of content of the shared content session includes a representation of active participants in the real-time communication session.

47. 47. The method of claim 46, wherein the representation of content of the shared content session includes a first representation of the active participant and the multiple representations of participants includes a second representation of the active participant.

48. Displaying a representation of content in the shared content session displaying the representation of the content having a first size in accordance with a determination that the content has a first aspect ratio; displaying the representation of the content having a second size different from the first size in accordance with a determination that the content has a second aspect ratio different from the first aspect ratio; The method according to any one of claims 45 to 47, comprising:

49. The method of any one of claims 45 to 48, wherein the representation of content of the shared content session includes a representation of a participant who initiated output of the content in the shared content session.

50. 50. The method of claim 49, wherein the representation of the participant initiating the output of the content in the shared content session includes a live video feed of the participant.

51. 51. A method according to any one of claims 49 to 50, wherein displaying the representation of content in the shared content session comprises displaying an area including the representation of the content and a representation of a participant who initiated output of the content in the shared content session, and the representation of the participant who initiated output of the content in the shared content session is displayed separately from the representation of the content.

52. while displaying the representations of participants in the real-time communication session in the two-dimensional array, each representation of a participant having a first display size, detecting a set of one or more inputs corresponding to first representations of participants in the real-time communication session having the first display size; in response to detecting the set of one or more inputs corresponding to the first representation of the participant of the real-time communication session, displaying the first representation of the participant of the real-time communication session in the two-dimensional array having a second display size different from the first display size while displaying other representations of the participant of the real-time communication session having the first display size; The method of any one of claims 45 to 51, further comprising:

53. 53. A method according to any one of claims 45 to 52, wherein the plurality of representations of participants of the real-time communication session displayed in the two-dimensional array includes respective representations of participants having a pinned state that prevents the respective representations of participants from changing location within the two-dimensional array.

54. displaying the plurality of representations of participants in the real-time communication session; displaying a first section of the two-dimensional array; displaying a second section of the two-dimensional array different from the first section; displaying an enlarged representation of a first participant of the real-time communication session, the enlarged representation of the first participant overlapping at least a portion of the first section of the two-dimensional array and at least a portion of the second section of the two-dimensional array; The method of any one of claims 45 to 53, comprising:

55. receiving a request to move the representation of content while displaying the representations of participants in the real-time communication session and the representation of content of the shared content session; In response to receiving the request to move the representation of content, moving the representation of the content in accordance with the request to move the representation of the content; repositioning one or more representations of participants in the real-time communication session based on the movement of the representation of the content; and The method of any one of claims 45 to 54, further comprising:

56. the user interface of the real-time communications application includes a subset of representations of participants in the real-time communications session displayed in a first region of the user interface that is visually distinct from the two-dimensional array; modifying a position of one or more representations of participants in the real-time communication session based on the movement of the representations of content includes moving the subset of representations of participants from the first area to a second area of ​​the user interface based on the movement of the representations of content.

56. The method of claim 55.

57. receiving a request to select an item for navigating within the user interface of the real-time communication application while displaying the representations of the participants of the real-time communication session and the representation of content of the shared content session; In response to receiving the request to select an item for movement, enabling movement of the representation of content in accordance with a determination that the request corresponds to a selection of the representation of the content of the shared content session; withdrawing from enabling the movement of the set of one or more representations of participants in the real-time communication session in accordance with a determination that the request corresponds to a selection of a set of one or more representations of participants in the real-time communication session; 57. The method of any one of claims 45 to 56, further comprising:

58. detecting a change in orientation of the user interface of the real-time communication application while displaying the representation of content having a first position relative to the representations of participants of the real-time communication session; in response to detecting the change in orientation of the user interface of the real-time communication application; rotate a displayed orientation of the representation of the content and the multiple representations of participants in the real-time communication session in a second direction while maintaining the first position of the representation of the content relative to the multiple representations of participants in the real-time communication session in accordance with a determination that the change in orientation is a rotation in a first direction; rotate a displayed orientation of the representation of the content and the multiple representations of participants in the real-time communication session in a fourth direction while maintaining the first position of the representation of the content relative to the multiple representations of participants in the real-time communication session in accordance with a determination that the change in orientation is a rotation in a third direction; The method of any one of claims 45 to 57, further comprising:

59. 59. A non-transitory computer readable storage medium storing one or more programs configured to be executed by one or more processors of a computer system in communication with one or more display generating components and one or more input devices, the one or more programs including instructions for performing the method of any one of claims 45 to 58.

60. 1. A computer system configured to communicate with one or more display generation components and one or more input devices, the computer system comprising: one or more processors; and a memory storing one or more programs configured to be executed by said one or more processors, said one or more programs including instructions for performing a method according to any one of claims 45 to 58.

61. 1. A computer system configured to communicate with one or more display generation components and one or more input devices, comprising: Means for carrying out the method according to any one of claims 45 to 58, A computer system comprising:

62. 59. A computer program product comprising one or more programs configured to be executed by one or more processors of a computer system in communication with one or more display generation components and one or more input devices, said one or more programs comprising instructions for performing a method according to any one of claims 45 to 58.

63. 1. A non-transitory computer-readable storage medium storing one or more programs configured to be executed by one or more processors of a computer system in communication with one or more display generating components and one or more input devices, the one or more programs comprising: Receiving a request to display a user interface of a real-time communication application corresponding to the real-time communication session; displaying the user interface of the real-time communication application corresponding to the real-time communication session in response to receiving the request to display the user interface of the real-time communication application corresponding to the real-time communication session; While the computer system is connected to the real-time communication session and connected to a shared content session, In the user interface of the real-time communication application, a plurality of representations of participants in the real-time communication session, the plurality of representations being displayed in a two-dimensional array including two or more rows and two or more columns; a representation of content of the shared content session having a size corresponding to two or more rows of the array and / or two or more columns of the array, the representation of content being displayed in visual association with the array; and A non-transitory computer-readable storage medium comprising instructions for:

64. 1. A computer system configured to communicate with one or more display generation components and one or more input devices, comprising: one or more processors; a memory storing one or more programs configured to be executed by the one or more processors; wherein the one or more programs include: Receiving a request to display a user interface of a real-time communication application corresponding to the real-time communication session; displaying the user interface of the real-time communication application corresponding to the real-time communication session in response to receiving the request to display the user interface of the real-time communication application corresponding to the real-time communication session; While the computer system is connected to the real-time communication session and connected to a shared content session, In the user interface of the real-time communication application, a plurality of representations of participants in the real-time communication session, the plurality of representations being displayed in a two-dimensional array including two or more rows and two or more columns; a representation of content of the shared content session having a size corresponding to two or more rows of the array and / or two or more columns of the array, the representation of content being displayed in visual association with the array; and A computer system comprising instructions for:

65. 1. A computer system configured to communicate with one or more display generation components and one or more input devices, comprising: means for receiving a request to display a user interface of a real-time communication application corresponding to a real-time communication session; means for displaying the user interface of the real-time communication application corresponding to the real-time communication session in response to receiving the request to display the user interface of the real-time communication application corresponding to the real-time communication session; While the computer system is connected to the real-time communication session and connected to a shared content session, In the user interface of the real-time communication application, a plurality of representations of participants in the real-time communication session, the plurality of representations being displayed in a two-dimensional array including two or more rows and two or more columns; a representation of content of the shared content session having a size corresponding to two or more rows of the array and / or two or more columns of the array, the representation of content being displayed in visual association with the array; and a means for simultaneously displaying A computer system comprising:

66. 1. A computer program product comprising one or more programs configured to be executed by one or more processors of a computer system in communication with one or more display generating components and one or more input devices, the one or more programs comprising: Receiving a request to display a user interface of a real-time communication application corresponding to the real-time communication session; displaying the user interface of the real-time communication application corresponding to the real-time communication session in response to receiving the request to display the user interface of the real-time communication application corresponding to the real-time communication session; While the computer system is connected to the real-time communication session and connected to a shared content session, In the user interface of the real-time communication application, a plurality of representations of participants in the real-time communication session, the plurality of representations being displayed in a two-dimensional array including two or more rows and two or more columns; a representation of content of the shared content session having a size corresponding to two or more rows of the array and / or two or more columns of the array, the representation of content being displayed in visual association with the array; and A computer program product comprising instructions for:

Images