インタラクティブなスニペットのデザイン

Hi my name is Ray and I’m a designer on the Apple Design Team. Today, you’ll learn about designing interactive snippets.

Interactive snippets are compact views displayed by App Intents.

They show updated information and offer quick actions directly from your app.

Snippets can appear from anywhere App Intents are supported.

This includes Spotlight, Siri, and the Shortcuts app. This integration expands your app’s reach and utility in the system.

Snippets always appears clearly at the top of the screen, overlaying other content. This makes them useful without taking people out of their context. They remain until confirming, canceling, or swiping away.

This makes snippets a great way to surface simple, routine tasks and information from your app.

Snippets feature rich visual layouts that can reflect your app's unique identity. Now they also support elements like buttons and display updated information, adding a new level of interactivity to App Intents.

With that, we’ll start by discussing the appearance of your snippet’s content and layout.

Then, we’ll learn how to make concise and useful interactions.

Finally, we’ll cover how to use different snippet types, including results and confirmations.

Snippets are designed with App Intents for quick, in-the-moment experiences, so it’s important for the content to be easy to read and understand. A key aspect to making the snippet glanceable is type size. Text in snippets are larger than system defaults. Larger type draws attention to the most important information in the moment. Make sure to provide enough space between elements to avoid cluttering the layout.

When arranging content in snippets, keep consistent margins for the content around the view to make the layout clear. This keeps the snippet organized, allowing people to focus on what matters. You can use the ContainerRelativeShape API to ensure these margins are responsive and adapt correctly across different platforms and screen sizes.

The use of larger text also means limited space. Avoid including content past 340 points in height, which will require scrolling and introduce unexpected friction. Instead, keep the content concise with only the most important information.

If people might need more information, your snippet can link to the relevant view in your app to show everything they need.

When designing experiences that appear above other content, vibrant backgrounds based on your app's visual identity can help your snippet stand out. However, sometimes this can make content difficult to read. It’s especially important to check for contrast when the snippet is viewed from a distance, going beyond standard contrast ratios. If the content is hard to read, try increasing the contrast between the content in the layout and the background. This will help keep the snippet clear, even when using vibrant backgrounds.

So that’s how to make your snippet easy to read and understand.

Next, let’s talk about interaction. Interaction makes snippets more stateful and actionable.

This means you can incorporate buttons, allowing people to perform simple and relevant actions directly when they use the Intent. Snippets can also show updated data, reflecting the latest information from your app.

To learn how to use interactivity, let’s look at this example of a water-tracking intent. By adding a simple button to add water, the information is more actionable while maintaining a lightweight experience.

The data is updated with a scale and blur. This provides clear visual feedback for the action.

By updating the data within the snippet itself to confirm that the action was successful, people can build trust in your App Intent for their routines. Your snippet can also include multiple buttons and updated pieces of content at the same time.

For example, an equalizer snippet can show updated audio settings while providing a few different presets to choose from in the moment. Make sure your snippet offers clear, relevant actions to supplement the main task.

Even without interactivity, snippets can animate in the latest information from your app.

Now let’s talk about snippet types. There are two types of snippets: results and confirmations. Result snippets present information that’s an outcome of a confirmation or doesn’t require further action. Because there are no follow-up tasks or decisions needed from this snippet, the only button at the bottom of the view is “Done”.

Result types are great for snippets such as checking on the status of an order. Next is confirmation snippets. Use confirmations when the intent needs an action before it can show the result. For example, let’s take a look at this coffee-ordering intent. Although there are buttons to change the amount of espresso, the snippet is a confirmation type because the coffee order cannot be placed until people take action. The action verb in the button makes it clear what’s next, such as “Order”.

The verb in the confirmation can be changed to any of these pre-written options, or you can write your own if these don’t fit the intent.

After confirming the order, such as the latte with 2 shots of espresso, the result snippet then shows the outcome of that choice. This pattern helps people understand they’ve started an intent and then see it completed.

Now let's talk about when to show dialog: Dialog is what Siri speaks for the App Intent. It is essential for voice-first interactions. For example, if someone is using their AirPods and not looking at their screen, they can still hear the dialog from a result or reply to a confirmation.

Although the snippet can appear with dialog, challenge yourself to make your snippet understandable on its own, even if the dialog isn't shown or heard. The snippet should clearly communicate the purpose of the intent without relying on dialog. This helps remove redundancy and makes the snippet more intuitive.

Use confirmations and results to ask for action or show an outcome. Let’s wrap with what we learned, and what’s next. Design lightweight, routine snippets using a glanceable appearance, simple interactions, and the right snippet types.

To learn more about what’s new with building app intents for Shortcuts and Spotlight, check out “Develop for shortcuts and spotlight with app intents,” and “Explore advances in app intents.” We can’t wait to see your snippets! Thank you!