App Clips

App Clip

App Clip is a new way of interacting with the users. It aims to simplify user interaction with apps, services and more without the need to download the app from the AppStore.

Design elements of an App Clip

An app clip card has different design elements like a title, subtitle, an image for the card that should communicate the app clip’s features, a call to action button and metadata information.

How does it work?

Once you trigger your app clip, a small card will pop up on your device. This clip will show you the necessary information to communicate the app clip’s features, tasks, or content and drive the user to take that specific action.

Access to App Clips

There are different ways to access App Clip - by geolocalization, by scanning a QR Code, an App Clip Code or a NFC, or even by the web. If you have the App, it will open the app.

Title

You can customize the title and the subtitle of the App Clip; make sure to give the right title to your App Clip. There may be people who are using your App Clip for the first time, so it is essential you can explain the app clip’s purpose clearly. If you want to learn more, please refer to Apple's Human Interface Guidelines.

Header Image

For the header image you can create a beautiful imagery. Apple recommends using a 1800px × 1200px PNG or JPEG image without transparency. If the App Clip represents a place or a shop, you can use a photo instead, one that can better explain the service. Try to not fill it out with art, with text or screenshots. If you want to learn more, please refer to Apple's Human Interface Guidelines.

Action

The blue button is the action button of the App Clip. It takes the user to the App Clip's primary purpose, which can be a payment, some media, an app trial, or more. You can also choose the right verb for the action button between Open, View and Play, whichever provides the best context for your App Clip. If you want to learn more, please refer to Apple's Human Interface Guidelines.

App Attribution

It is the bottom part of the App Clip. Once you tap there, it will take you to the AppStore to download the App. Also, in case you need to change the App attribution information, you can do it by changing the App metadata. If you want to learn more, please refer to Apple's Human Interface Guidelines.

Icon

There is nothing special that you need for your icon. Apple will automatically generate the App Clip icon from the original icon of your App and it will add a dash border to the icon.

Distributing Your App Clip

So, when you want to publish your app clip to the AppStore, you cannot submit the app clip on its own. App Clip is part of the app bundle that you submit to the AppStore. Something you need to take into account is that App Clips are not available for enterprise distribution. There is more information that you can read about regarding the distribution of your App Clip.

Further information

There is an excellent video from WWDC 2020 that explains what an App Clip is, what it does and how you can design them. Also, make sure to always refer to Apple's Human Interface Guidelines, since it is the official source and they are always adding updates to the guidelines. If you want to have a taste of App Clips, you can try Scribble's App Clip, which is a neat drawing app. Also, there is another interesting post by Guilherme Rambo where he explains how he created an App Clip for his App.