Design for Collaboration with Messages

♪ ♪ Hello. My name is Jaewoo. I'm a designer on the Apple Design team. Whether preparing Keynote presentations with colleagues or collecting ideas with friends, people collaborate on all types of things everyday. To create a first-class collaboration experience, we made a handful of changes to iOS 16 and macOS Ventura. Today, I'm going to talk about why we put Messages in the center of our collaboration experience and walk you through an end-to-end collaboration flow, showcasing all the new changes we've made. I'll also share a few considerations to help you design a great collaboration experience in your app using Messages. Without further ado, let's get started. Email is one of the great communication tools that people use every day. Many collaborative apps use email as a primary way of connecting people. However, chatting over email during collaboration doesn't feel responsive. That's because email was designed as an asynchronous communication tool. So, we brought Messages into collaboration to supplement email. Messages allows people to send collaboration invitations using existing conversations. No need to ask for email addresses. Effective communication is a key to successful collaboration. Messages already has many great features to facilitate that. Messages conversations can also easily turn into FaceTime calls. Talking over FaceTime and using screen sharing can make collaboration far more productive. Let's take a look at how Messages and collaborative apps work together. My friends and I love baking, and we often share recipes with each other. I'm working on a Pages document with some recipes, and I'd like to share it with my friends. I'll start by tapping on the share button in the toolbar. The new system share popover allows me to share this document in two different ways. I can either start a new collaboration or send a copy. With the collaboration option, I can send invitations using Messages, Mail, or other communication apps. My baking friends and I have a chat group called Cupcake Designers. The system share popover knows I talk to them quite often and show them as a conversation suggestion in here. I'll select the group to start a collaboration. The collaboration invitation is now in the Messages input field and is ready to be sent. Send button kicks off collaboration immediately. If you look at the toolbar, you can see the Cupcake Designers photo appeared. The conversation is now linked with this document. Looks like my friends Lauren and Chris just joined.

Tapping on the group conversation photo brings up the collaboration popover. This collaboration popover was added for easy access to communication tools and is also a quick collaboration overview. Pages displays who's currently in the document. Tapping on the Messages button in the popover brings the Messages conversation over the shared document. I can quickly go back to the group conversation and talk about this document. If I need to talk to people over FaceTime, I can simply tap on the audio or video button in this popover.

Now, my friends and I can make edits in real-time. Tight integration with Messages unlocks more superpowers. Now Messages can display notifications from collaborative apps.

Looks like Chris just made edits to the Baking Recipes document.

This Messages banner allows me to directly open the document and see the new updates.

Collaborative apps and Messages now have a strong connection to make collaboration workflows more streamlined. Okay, we looked at an example of the new collaboration experience. Starting a collaboration is simple using the share button and the system share popover. People can easily drop invitations in existing conversations. And the collaboration popover allows people to easily go back to Messages conversations or start FaceTime calls.

Edit notifications from collaborative apps let people stay up-to-date.

Now that we've seen how Messages and collaborative apps work together, let's switch gears and look at some practical tips for how to design collaboration into your app. Starting with the system share sheet. The people who use your app are very familiar with the system share sheet. They use it for all kinds of things, including sharing websites, songs and albums, photos, and other types of content. And conversation suggestions help people quickly find destinations of the content they are sharing. The system share sheet gives people an easy way to begin a collaboration. It will help make collaboration in your app more consistent and familiar. If you do decide to take advantage of the system share sheet, the next step is to place a share button in your app. Put the button in a place where people can easily access. Toolbars are a good candidate. Now let's look more closely at how you can customize the share sheet for your needs. The popup button in the header allows people to choose how they share files. If your app doesn't support sending a copy, then the popup button will be hidden. "Everyone can make changes" text below the popup button is an entry point to the collaboration permission settings. You need to provide a descriptive copy of default settings your app supports. To avoid truncation, be as concise as possible. The permission settings screen will be presented when tapping on "Everyone can make changes" text. When customizing the screen, keep the structure of choices simple so people can easily skim the options and make quick decisions. The share popover in macOS has been redesigned to reflect the changes in iOS and iPadOS, including the conversation suggestions. The dropdown menu lets people choose how they wish to share their files. Permission settings are also accessible within this popover. Again, use a concise permission summary string and keep the settings simple. Next, let's talk about how to optimize the experience of initiating collaboration in Messages. People can choose not only how they share, but also customize collaboration settings from the Messages input field. People don't need to go back to the share sheet to change those options. Using drag and drop to add a file into a Messages conversation is another convenient way of starting a collaboration. So help people easily set the permissions from the Messages input field and let them start a collaboration with the send button. And it's really important to put the collaboration button where people can easily find it. Once people have begun collaborating, the collaboration button will appear in your app. This collaboration button is one of the most important UI elements of the entire collaboration experience. Find a place where it can stand out and draw people's attention. It's best to place the collaboration button right next to the share button. The appearance of the collaboration button will be slightly different depending on how people started collaboration. If people sent an invitation to a one-on-one Messages conversation, the recipient's picture will appear as the button. If collaboration started with a group conversation, and the conversation has a photo, the system will show the photo in your app. If a group conversation photo is not available, a system provided symbol will be used instead. Once you decide where to put the collaboration button, it's time to customize the collaboration popover for your app. The collaboration popover consists of three separate sections. The top section shows who you are collaborating with. The system will find corresponding profile pictures from the Contacts app and display them here. There are also buttons for communication. If there is no Messages conversation linked with the document, the message button will let you connect one. The middle section is for you, and it's fully customizable. Think about what information or functions will be essential for people using your app. Pages shows the active participant list with a display setting. In contrast, the Notes app shows the latest activities along with two action buttons. Try not to overload this collaboration popover with too much information or too many buttons. Keep it glanceable. Also make sure everything you are adding here is visually consistent with other elements in the popover. If your app doesn't have anything to show in this popover, it's okay to leave the middle section empty, like Reminders and Files. At the bottom of the popover, there is the "Manage Shared File" button. You can customize the button label if needed. This button opens the collaboration management screen. People can add and remove participants and also change other settings from this screen. If your app is using CloudKit sharing, the management screen will be provided by the system. If you're not using CloudKit sharing, you can have your own management screen for your app.

The collaboration popover on macOS has the same structure as iOS. Use macOS UI components and design patterns when customizing the middle section. Lastly, you will want to give special consideration to the appearance of the banners in Messages. The banners in Messages are how your app can notify collaborators of important changes. These banners allow people to stay informed about new updates without having to open the document. Messages offers banner templates for you to choose from. Edits made, comments added, you were mentioned, and also files modified. Tell Messages what type of updates you want to display. Those updates will end up in the right conversations. You might ask, what if multiple people made multiple edits in many different documents? How will Messages handle multiple banners? To not clutter conversation with too many banners, Messages will consolidate those banners into one. When people tap on the view button in this banner, Messages will show all the updates in one place and let people choose which one they want to open. Okay, we've taken a look at all the details to design the best collaboration experience using Messages. Adopt the new system share sheet for better collaboration initiation, and customize the collaboration popover to provide communication tools and a good collaboration overview. Let people enjoy a productive and successful collaboration with the Messages integration. I hope all these updates help you design a better experience for your app. Thank you for watching. ♪ ♪