Design great App Clips

Hello and welcome to WWDC.

Hi. Welcome to designing great App Clips. I'm Grant Paul from the Apple Design Team, and I'm gonna be joined shortly by my colleague Heena Ko. Today we're gonna talk about all of the pieces that you need in order to design great App Clips. I hope you're as excited about App Clips as we are. So, let's get started. First off, we're gonna go into a little bit more detail about what exactly App Clips are and how they relate to the apps that you already have.

Then we're gonna talk about how people actually get into App Clips, since unlike with apps, they don't start by going to the App Store.

And finally we'll talk about what features should go into a great App Clip and what you need to know in order to design your user interfaces for them.

So, what are App Clips? App Clips are lightweight versions of apps. They offer some of an app's functionality and they offer it when and where people need it.

They're fully native experiences and they use all of the same technologies that you already know from your apps. And since App Clips are lightweight, you can use them instantly. You don't have to download or install an app at all. In fact, App Clips are meant for people who haven't downloaded your app yet. They might not even know what it is. Now, unlike apps, which you usually get by browsing or searching in the App Store, App Clips show up right when you need them. They're found through codes and tags out in the world, including some new codes that we've designed just for App Clips.

App Clips can also come from places and apps that are built into iOS. Things like Maps and Safari. We're gonna talk more in a little bit about some best practices for when your App Clips show up in each of these places. Now, last but not least, App Clips don't stick around when you're done using them. Once you swipe an App Clip away, you're done with it. You don't need to manage it or clear it out to save space or delete it off your device. It's all gonna be handled for you. And if you do need an App Clip again, you can always just get back to it the same way that you got there in the first place. But if you want faster access, you can download that App Clip's corresponding app to your Home Screen and that'll be able to do everything the App Clip does, as well as some extra things that only the app can do. So, that's what App Clips are.

Let's talk about what they look like. Of course, this here is an app icon, which should be pretty familiar by now.

And this is what that app icon looks like as an App Clip. And that border is generated automatically from the icon you provide, so when you're making your app icon, there's nothing special at all that you need to do for App Clips.

So, here's what it looks like to use an App Clip in practice. Let's say you tap your phone to an NFC tag.

You'll instantly get an App Clip card with information that tells you all about what the App Clip is and what it can do. And if you want to use the App Clip, all you need to do is tap "Open." And once you tap "Open," the App Clip card slides off, the App Clip finishes loading, and you're all ready to go. That's how easy it is and how fast it is to use an App Clip.

And App Clips can be used for anything. We're gonna cover a bunch of ideas in this session of different categories and different use cases that you can use App Clips for. What we're even more excited about than any of those are all of the ideas that we've never thought of, that developers, that you, are gonna make. It's just like all of the incredible, creative, and amazing apps that we've seen on the App Store. We hope that App Clips are gonna open up places that weren't possible before and spur new ideas, just like apps did.

One of those places that App Clips can open up is for small businesses. Now, small businesses often don't have the resources to make an entire app by themselves.

So instead, the small businesses usually show up as a small part of a bigger app that's under a different brand.

Think about an app for delivering ice cream.

So, to order from an ice cream shop in this app, you need to go into the delivery app first and then find the shop that you want.

But what people wanna do is to interact with the business that they already know. They don't wanna download and learn about another app just in order to order their ice cream. App Clips can help. When you have an App Clip, you make a custom experience for the small business. An experience that uses that small business's own branding, along with some attribution back to the App Clip.

That lets the experience feel like it's coming from that small business.

So, we're really excited to see how this can bring the power of App Clips and bring the power of apps to more businesses where they couldn't work before.

So, that's what App Clips are and what they're for. Now I wanna talk about how you find App Clips and how you get into them. As I mentioned before, unlike with apps, you don't find App Clips by going to the App Store and searching for them by name or browsing through categories. Instead, the way you find App Clips is in context. You find them right when and where you need them.

And one of the ways that you do that is through physical tags. Now, App Clips support many different kinds of physical tags. They support our new App Clip codes, they support other kinds of NFC tags, and they also support your standard QR codes.

These new App Clip codes are the most visible way for people to get into App Clips. They have a consistent appearance, so they can become instantly recognizable as leading to a great App Clip experience once you scan it.

And when people see one, because they're instantly recognizable, they'll know exactly what to do right away.

Now, these codes are also flexible. In the middle there's an NFC tag, which you can use just by holding your iPhone up to the tag.

And there's a visual code on the outside around it, which can be useful if you can't get up close. Maybe 'cause the code is on a billboard or a poster or it's just out of reach. Something like that. And this is what they look like physically. You can see how the App Clip code is placed on the table so it's easy to see and notice right when you need it. We're gonna have some more information available soon on how you can make and place your own App Clip codes. A really important part of using any kind of physical tag is to use a different tag for each way into your App Clip. So, let's say a coffee shop has four locations.

If you go to the location in Cupertino, it should use a different tag than all of the other locations. That way the App Clip can know to show the menu for the Cupertino location automatically, rather than making you have to pick a location first.

You can also use different tags from within a location. For example, each table at the Cupertino shop could have a different tag on it. So, the App Clip automatically knows not just which location you're at, but also which table that your order should go to. It saves a step. This makes your App Clip faster. But it also means that there's no chance that someone's gonna accidentally pick the wrong location or pick the wrong table in your App Clip because it's all handled for them automatically. Now, in addition to placing physical tags, you can also attach App Clips to locations.

If you do that for your App Clip, it might start showing up in Maps, which lets people use the App Clip before they actually get to the place itself.

For example, a food app like Panera Bread here, can let you preorder or can let you order takeout before you actually go over to that location.

And if an App Clip ends up being especially useful or popular and relevant in a specific place, it can get selected to show up automatically in Siri Suggestions. That means both in the widget on the home screen and in Siri Suggestions in Spotlight.

That way, people can start getting into your App Clip without having to scan anything first or even find a tag or a code to get in. So, that's how you can get into App Clips from physical tags and from locations. Next, I wanna talk about getting to App Clips from different places on your device.

Now, some App Clip experiences don't have a physical location that makes sense to put tags or that they could be associated with in Maps. And that's totally great too. App Clips are gonna work just as well with experiences that are totally virtual and that take place entirely on the device.

So, the way that you find those App Clip experiences is from the Smart App Banner in Safari. If you have a website and you also have an App Clip, you can add a Smart App Banner to the top of your page. And if you do, people can start going straight into your App Clip as soon as they press the button.

So, for example, what you see here. Etsy can put a Smart App Banner on their detail page to jump right into their App Clip.

And, of course, if someone has their app installed, the banner will take people to the app instead. So they can get all of the features of the app in addition to what the App Clip can do.

So, when would you show a Smart App Banner in Safari versus having people, for example, just use your website? Well, there's two main reasons.

One of them is that when you make an App Clip, just like when you make an app, it's often gonna be a better experience than what you'll find on a website. App Clips use native system controls, so people already know how to use them and they're faster to learn.

And of course, just like apps, App Clips are really fast and responsive.

It's really the same great user experience that's why people go to the App Store to download your apps today.

Now, the second reason is that App Clips enable new types of experiences that are either hard or impossible to make on the Web but with apps are really common and easy to do. For example, think of something like recording and editing a video. It's not common on the Web, but with the power of the iOS frameworks, it's simple to do in your app.

Similarly, you can do things like connect to a device with Bluetooth or show interactive 3D scenes in augmented reality.

App Clips have all of the power of apps available to you right away. And just like with physical tags, when you use a Smart App Banner, it's important to launch into the right part of your App Clip automatically.

So, in this example, Etsy would launch right into the part of their App Clip for the product being shown in Safari below. That saves people from having to navigate back to that product from inside the App Clip.

There's also one last place that you might see App Clips. If you have a page with a Smart App Banner and you share a link to that page in Messages, people can go directly from Messages right into the App Clip. And what's great about that is that people can start sharing your App Clip with the people they know, which lets people organically discover your App Clip and also discover your app through it. So, that's the Smart App Banner in Safari and how it ties into Messages.

Now, the next step after you find an App Clip is to use it.

And every time you use an App Clip, the first thing you're gonna see is the App Clip card.

The App Clip card is like the product page in the App Store. It's your chance to show off what it is that your App Clip can do, to introduce your App Clip to people, and to let people know why they should start using it. So, let's say you tap your phone on an App Clip code.

As with all of the other ways that you can get into an App Clip, the first thing you're gonna see is the App Clip card.

All App Clip cards have the same general shape but they have a few different parts that you can customize. Let's look at the different pieces and how you can customize them.

So, the most important part of your App Clip card to customize is the title. The title is what tells people what your App Clip is. Now, for most App Clips, this is gonna be the same as the name of your app or the name of your brand.

Now, sometimes it can be worth using a more specific title for your App Clip. If your App Clip focuses on a single feature out of your app, you can use that feature as part of your title.

For example here, if you have a music listening app, but your App Clip for it is all about radio, you might put "radio" in as part of the App Clip experience's title.

Now, if the title is the brand of your App Clip, the subtitle is where you get to explain what it is that your App Clip does. Remember that when people are using your App Clip, it's often gonna be the first time they're having any interaction with your app or with your brand, so they might not know what your name means. They're gonna need an explanation of what it is that your App Clip is there to do, and that's what you can put in the subtitle. Next up is the header image. Now, the header image is your chance to show visually what it is that you can get out of your App Clip. If your App Clip is attached to something physical, like a real-world location or a service, a photo of that location or of that service can make for a great header image. But if it's not attached to anything physical, you can always make a great graphic version of your logo or some part of your brand. Either way, you should always stick to either a photograph or some kind of custom graphic. You should never use screenshots or fill it up with lots of text since both of those can be really hard to read in the small space available on your App Clip card. Now, after the header image, there's one more piece you can customize. The button on the right of the App Clip card represents the action that people are gonna take when they open up your App Clip on their device.

So, right now we have three options available to you for the action button, Open, View and Play.

Now, if you're making a general App Clip, the usual one that you're gonna pick is Open. It's the default choice. But if you have an App Clip that's all about showing information or visualizing something, the View action can be a good one to pick.

And, of course, Play is great for things like media and games.

Now, beyond these three, we're looking to hear what additional action labels would be useful to you. So as you come up with ideas for App Clips, let us know in Feedback Assistant what else we could add.

Finally, at the bottom of the App Clip card is the attribution back to the App Clip's corresponding app.

Tapping in here takes you to the App Store so you can get the app or you can see more information about it, like who developed it or what the privacy policy is.

If you wanna customize this section, that means changing your app's metadata.

So, that's how people discover App Clips. It can be from physical tags like our App Clip codes, NFC tags and QR codes.

You can use the Smart App Banner in Safari to offer your App Clip when it has a new or a better experience than what you can get from the web page.

You should make sure to launch into the right part of your App Clip to skip unnecessary navigation when the context is already clear from the specific tag or page that the App Clip is coming from.

And finally, make sure to be thoughtful in how you introduce people to your App Clip on your App Clip card. You should use clear language and great imagery. Now that you have a sense of what App Clips are and how you get into them, I'll hand it over to my colleague Heena to talk about how to design the content for inside your App Clips.

Hi, my name is Heena, and I'll be talking to you today about designing App Clips.

Let's first talk about what goes into a great App Clip. So, the most important thing to remember is that great App Clips are simple. Their focused experience is made for accomplishing a task. Great App Clips are fast. Not only are they quick to load, the flow should be as quick and streamlined as possible. So, when you're about to create an App Clip, you wanna have three main things in mind.

First, decide what the purpose is. Whether it's renting a scooter or buying ice cream, think about the single task your App Clip accomplishes.

Second, think about what the absolute minimum flow is to accomplish that task. Remember, App Clips are in-the-moment experiences, so the flow should be focused and efficient. Consider using technologies like Apple Pay and Sign in with Apple for a more seamless experience.

Lastly, you can offer the full app for more features. Remember, App Clips should be useful in isolation, but if you wanna offer it, we made something so you can do that easily. Okay, so let's walk through some examples.

Let's say you're making an App Clip for a café where you can order ahead to get coffee to go. The minimum flow here could include the ability to browse the menu and order.

Then pay for your coffee with Apple Pay.

Then after the transaction's complete and you've demonstrated the value of your App Clip, you could offer to download the full app. It's important here to clearly explain the additional benefits that the full app offers.

This next example's a parking app that allows you to pay for a parking space in various parking garages.

The minimum flow here could be to provide the ability to pay for your parking space for a certain amount of time.

Then you could send a notification saying that the time is about to expire.

Tapping on that notification could allow you to extend your time remotely so you don't have to walk back to your car. Okay, let's move on to this next example. Let's say you're setting up an online store, like this one where you can shop for accessories.

The flow here could include a simple shopping experience where you can browse and add items to a shopping cart.

After the transaction's complete, you could offer Sign in with Apple so folks can get notified of sales and save their favorite items.

This is an example of a restaurant App Clip that allows you to order and pay right from your table.

It's important to note that this kind of experience requires that you distribute unique App Clip codes to each table for your patrons to scan.

So once the code's been scanned, the experience here can include a simple menu to browse the dishes and the ability to continuously add items to your order. Then a checkout experience with Apple Pay.

Lastly, after you've proven how great of an experience your App Clip is, offer the full app here so people could order ahead, get takeout and delivery.

Has it sunk in yet? Great! This last example is an AR experience where you can use the camera to identify the names of mountains and peaks around you.

So, here the experience could include a simple camera view...

and a way to augment that view with annotations and information about your surroundings.

And lastly, you might wanna include a way to share that view with friends. So, those are the essentials of what goes into an App Clip. At this point, you're probably wondering, "So, I have an app.

How do I turn my app into an App Clip?" Well, the first step is to focus on a specific task. Let's take this coffee shop app. It's got lots of features. You can order, save your favorite drinks, look up stores near you, you can even create an account. And the way to focus that experience is to narrow it down to just a single feature. Here we have decided to focus the experience to only ordering. The other features, like saving your favorites or looking up other store locations, isn't helpful to the main task of ordering. So, really you wanna simplify the experience and remove elements unrelated to the single task of being able to order and pay for coffee. This means no unnecessary App Clip intros. Resist the temptation to add instructions, introductions and tutorials before getting into the main flow.

Avoid using login or account pages. If you need some type of registration, use Sign in with Apple for speed and privacy.

And with your App Clip being so streamlined, you won't need global navigation or lots of tabs.

And lastly, avoid any type of settings or management. Okay, so those are the basics of how you turn your app into an App Clip. Now let's talk about designing UI for App Clips. More specifically, how to best utilize system components.

App Clips have the ability to send notifications. It's a great way to relay information that's essential to the experience.

By default, an App Clip can send notifications for up to eight hours after it's first used. We think this is enough time to complete most tasks.

However, if your App Clip experience spans more than a day, you can request explicit authorization for an additional week. For example, a car rental company could request explicit authorization for a rental that spans multiple days.

Remember to keep notifications focused on the task. Never send any unexpected or promotional notifications and only send notifications in response to an explicit user action. If the entire experience takes place within the App Clip itself, you may not even need to send notifications at all. If your App Clip has transactions, use Apple Pay. It's the fastest way to take payments and you don't have to reenter credit card information or addresses. And finally, always promote the full app at the right time, and the right time is after the primary task is complete.

That way your app has had a chance to prove its value. Remember, App Clips are not a Trojan horse for your app. They should have value on their own. Okay, so to wrap up, App Clips are native lightweight experiences available instantly. They're in-the-moment experiences that don't stick around and live on the device.

Use App Clip codes in the real world for discovery. Consider what it means to your app to create touch points in physical spaces. And remember to make them highly visible so people can discover them easily.

Focus your App Clip on a specific task and remove all unnecessary elements.

And because of all the different ways App Clips can be discovered, more people can use your app in clip form than ever before.

Finally, I recommend checking out the "Human Interface Guidelines," which includes a section on how to design great App Clips. I'd also recommend all the sessions on App Clips, including the session "Configure and Link Your App Clips," for how to set up getting into your App Clips.

Thank you so much, and I hope you go out there and make great App Clips. [chimes]