Design great App Clips

Highlight

Apple allows App Clip to serve as a lightweight native experience for a complete App, launched in specific scenarios through App Clip Code, NFC, QR code, Maps, Safari and Messages, and requires the design to focus on a single task, the shortest process, clear cards and complete App guidance after task completion.

Core Content

App Clip design starts with a specific task. The minimal process in the coffee shop example is to browse the menu, place an order, pay with Apple Pay, and then prompt to download the full app after the transaction is completed. (16:08) The minimum process in the parking example is to pay for a period of parking time, send a notification before expiration, and remotely delay the time after the user clicks the notification. (16:33)

The product details page in Safari is another type of entrance: Etsy can put a Smart App Banner on the details page to allow users to directly enter the corresponding App Clip. (08:16) Apple also emphasized that the Safari portal should automatically open the part of the App Clip corresponding to the web product, saving the user the step of navigating back to the product again. (09:56) When extracting the App Clip from the complete App, the introduction page, login page, global navigation, tab, settings and management entrance must be deleted. Sign in with Apple is only used when registration is required. (18:56)

App Clip is positioned exactly the opposite. It is a lightweight version of a full app that uses native technology to appear where and when users need it. It can be entered from App Clip Code, NFC tag, QR code, Maps, Safari, Messages. After the user uses it, wipe it away and the system will clean it up; if you want faster access or more functions, download the corresponding complete App. (01:01)

The focus of this session is on design decisions. App Clip should not shrink the complete app and fit it in. The physical tag needs to change the entrance context to the default state: the store tag directly selects the store, and the table tag directly brings out the table number. (06:08)

Safari portals also retain context. The Etsy example will go directly to the App Clip section where the product is located, avoiding taking the user to a generic homepage. (10:04)

Before entering the experience, the App Clip card must first explain what it is, what it can do, and why it is worth opening; it is similar to the App Store product page and is the introduction that users see before deciding whether to open the App Clip. (10:49) After entering the experience, the process only retains the steps required for a single task: the coffee App Clip is responsible for the menu, ordering, Apple Pay, and download prompts after the task is completed; the parking App Clip is responsible for payment, expiration notification, and remote delay. (16:08) (16:33)

Detailed Content

The discovery entry must carry the task context

(05:02) App Clips are discovered on-site, not through App Store searches. Physical entrance includes App Clip Code, NFC tag and QR code. Apple emphasizes that each method of entry should correspond to a clear task context.

Key points:

• The App Clip Code can contain an NFC tag in the middle, and the outer circle is a scannable visual code. It is suitable for placing on desktops, billboards, posters, or places that are out of reach of users.
• Different stores of the same coffee shop should use different tags to allow the App Clip to automatically display the current store menu.
• Different tables in the same store can also use different tags, so that orders can be automatically bound to table numbers.
• This saves location selection and table number selection, and also reduces the risk of users selecting the wrong location.

(07:00) App Clips can also be associated with locations. Once linked, it may appear in the place card in Maps. The example clearly given by session is food apps such as Panera Bread: users can make a reservation or order takeout before even visiting the store. If an App Clip is useful enough in a particular location, it might also be suggested in Siri Suggestions or Spotlight.

Key points:

• The Maps entrance in this example corresponds to the dining location, which can support pre-ordering or takeout.
• Siri Suggestions are suitable for high-frequency, location-related experiences.
• When designing, it should be assumed that the user may not scan any code, but still needs to directly enter the task page of the corresponding location.

Safari and Messages are suitable for purely digital scenarios

(08:16) Some experiences have no physical location and users can enter the App Clip from the Safari Smart App Banner. The Etsy example of session is the product details page, and the banner can take the user to the corresponding App Clip.

(09:24) Apple also cited several types of experiences that are difficult to complete on the Web and are more suitable for App Clip to undertake: recording and editing videos, connecting Bluetooth devices, and displaying interactive 3D scenes in augmented reality.

Key points:

• The Safari banner should appear on App Clip pages that provide a better native experience.
• If the full app is installed, the banner will open the full app.
• After the App Clip is opened, it must drop to the specific content corresponding to the web page, and users cannot be asked to search again from the home page.
• When sharing the same link in Messages, the recipient can also directly open the App Clip.

App Clip card is a very short self-introduction

(10:49) Every time before opening the App Clip, the user will see the App Clip card first. It takes on part of the responsibilities of the App Store product page: telling users who this experience comes from, what it can accomplish, and what happens when they open it.

Key points:

• The title usually uses the app or brand name; if the experience only focuses on a single function, you can put the function in the title.
• The subtitle should explain App Clip’s mission since many people are encountering the brand for the first time.
• The header image should use location photos, service photos, brand graphics or logo-related graphics, and avoid screenshots and long paragraphs of text.
• The operation buttons are selectable from Open, View, and Play, which are suitable for general tasks, information viewing, media, or games respectively.
• The bottom attribution link back to the complete app, where the privacy policy, developer information and download entrance are all entered.

The minimal process starts with a task

(15:12) What excellent App Clips have in common is simplicity, speed, and focus. Before designing, determine the single task it is to complete, and then delete content other than the task.

Key points:

• The minimal process of the Coffee App Clip is to browse the menu, place an order, and pay with Apple Pay.
• The minimum process of parking App Clip is to select the parking duration, pay, and notify the user before expiration.
• The minimum process of e-commerce App Clip is to browse products, add to shopping cart, and complete the transaction.
• Restaurant tableside App Clip needs to distribute an independent App Clip Code to each table, and order and pay directly after scanning the code.
• AR App Clip can only provide camera view, surrounding information annotation and sharing entrance.

(18:24) When extracting an App Clip from a full app, Apple’s recommendation is to pick a specific task first. Coffee apps may have functions such as placing orders, collecting drinks, finding stores, creating accounts, etc., but App Clip only retains orders.

Key points:

• Delete portals that are not relevant to a single task, such as favorites, nearby stores, settings and management pages.
• Avoid opening introductions, tutorials and welcome pages. Users already have a clear purpose when entering.
• Avoid login pages and account pages; when registration is required, use Sign in with Apple to reduce input costs.
• No need for global navigation or lots of tabs because App Clip only serves a short task.

System components need to serve the current task

(19:32) App Clip can send notifications. By default, it can send notifications for 8 hours after first use; if the experience spans multiple days, you can request explicit authorization to extend the notification capability for a week.

Key points:

• Notifications should only respond to explicit user actions, such as parking is about to expire; if the task spans multiple days, such as renting a car, explicit authorization can be requested to extend the notification capability.
• Don’t send promotions or surprise notifications.
• If the entire task is completed within the App Clip, notifications do not need to be sent.

(20:17) Prioritize using Apple Pay when making transactions. It saves users from having to re-enter their bank cards and addresses. The promotion of the complete app should be placed after the main task is completed, and let the App Clip prove its value first.

Key points:

• Apple Pay is suitable for ordering, parking, e-commerce shopping and table checkout mentioned here.
• The download prompt for the full app should explain additional revenue; in the restaurant example, the full app could offer ordering ahead, takeout, and delivery.
• Saving favorites and receiving sales notifications are part of the benefits of offering Sign in with Apple after an online store transaction and should not be confused with full app download prompts.
• The App Clip itself must have independent value and cannot just be used as an entrance to download the complete App.

Core Takeaways

• What to do: Make a table ordering App Clip. Why it’s worth doing: The session mentioned that each table can use different tags, and App Clip can automatically know the store and table number. How ​​to get started: Generate an independent URL for each table, scan the QR code to open the menu directly, and use Apple Pay for checkout. After completion, you will be prompted to download the full app to obtain takeout and delivery capabilities.

• What to do: Make a parking extension App Clip. Why it’s worth doing: The parking example shows the expiration reminder through a notification after payment, and then the remote delay from the notification back to the App Clip. How ​​to start: Arrange a task notification within 8 hours after payment. The user clicks on the notification to enter the renewal page.

• What to do: Connect the product details page to Safari App Clip. Why it’s worth doing: Safari Smart App Banner allows specific products on the webpage to enter the native purchase process, eliminating the need to search for products again. How ​​to start: Only display the banner on the details page suitable for native experience. App Clip reads the product URL and directly displays the same product, and retains the upgrade path from the web page to the complete app.

• What to do: Make branded App Clips for small businesses. Why it’s worth doing: The session uses ice cream delivery as an example to illustrate that small merchants can provide their own brand experience through a larger platform while retaining attribution to the platform app. How ​​to start: Prepare an independent card title, header image and entrance URL for each merchant. Only the ordering or delivery process of the merchant is displayed in the App Clip.

• What to do: Make a scene-oriented AR App Clip. Why it’s worth doing: The session’s mountain peak recognition example shows that App Clip can use cameras and AR in short-term, location-specific experiences. How ​​to start: After opening it, enter the camera view, superimpose the names, descriptions and share buttons of the surrounding mountains, and keep the sharing entrance as the end of the task.

Related Sessions

• Explore App Clips — First, understand the positioning, trigger entry and relationship of App Clips to the complete App as a whole.
• Configure and link your App Clips — Learn URL, App Clip Code, NFC, QR code, Maps, Safari, associated domains, and App Store Connect configuration.
• Streamline your App Clip — Continue to optimize App Clip’s task focus, transaction flow, notifications, location confirmation, and complete App upgrade path.
• Create App Clips for other businesses — Learn how a platform app can provide customized app clip experiences for multiple merchants.