Designing Great Shortcuts

Session 806 WWDC 2019

Shortcuts allow people to access information and actions on the go or in the Shortcuts app. The best shortcuts take careful design planning to hone in on what can help expedite a person’s workflow with your app. Gain insights as to what makes a great shortcut and how to design the experience to be useful, beautiful, and responsive. See examples of how to map out the Siri dialog flow when using parameters to make your shortcuts flexible and helpful.

[ Music ]

[ Applause ]

Hi. I'm Jay.

I'm a designer on the Siri and Shortcuts team.

And today, we'll be talking about how to design great shortcuts for your apps.

We're going to cover three main topics today.

First, I'll talk about looking at all the use cases of your app, and deciding which ones might make sense as shortcuts.

Then, I'll talk about how to make these shortcuts discoverable in your apps.

And, finally, I'll walk through how to design a great Siri experience for the new interactive capabilities of shortcuts in iOS 13.

Now, stepping back for a moment, shortcuts in general are a great way to bring your app's functionality in front of more users in more places in the OS.

So, let's take a look at the places where your apps' shortcuts can appear to get a feel for what might be useful.

If you tell the system when the user does something in your app, the system can automatically suggest a shortcut when it predicts the user will next want to do that action.

And, these shortcuts can appear in lock screen and search.

Here, this shortcut lets you quickly start a guided workout, you usually do at this time of day.

If a user adds a shortcut to Siri, by assigning it a custom phrase, they can invoke it at any time with their voice.

Here, the shortcut lets them order their usual dinner.

In one quick confirmation step, the user can get some great Mediterranean food.

Another great use for shortcuts with Siri is getting information hands- and eyes-free.

So, to your HomePod, if you have a transit app shortcut, you can say, Hey Siri, bus schedule.

And, Siri will speak out the bus schedule information from your app.

And, you can also incorporate your app's functionality as part of a multi-step shortcut.

Here, the shortcut handles your evening routine, ordering soup in time for your arrival home, playing your favorite music for your car ride, and showing the fastest directions.

So, looking at these examples, we can see that shortcuts are great for accelerating frequently used, useful actions your app can do.

Presenting information at a glance, or with your voice, or as building blocks for powerful multi-step shortcuts, where your app can work alongside others.

We introduced Siri shortcut suggestions in iOS 12, so look back at past sessions for more information on how to develop great shortcuts to be automatically suggested on lock screen and search.

Today, I'm going to focus on how to make shortcuts to take advantage of the new Siri capabilities in iOS 13.

We're going to walk through how to prioritize the features in your app that might make for good Siri shortcuts.

To do that, let's take a look at one of our favorite apps, SoupChef, which lets you order a wide variety of soups for pickup or delivery.

Let's walk through the design process for making a SoupChef shortcut.

List out all the things that your app can do.

When doing so, start thinking about things that a user might want to repeat with their voice.

So, with SoupChef, you can do things like browse the menu of soups.

Order a soup.

Check your order status, or view past orders.

Let's take a look at some of these features one by one.

Browsing a menu is a very visual activity that requires a lot of structured information that won't translate well to voice.

It requires scrolling, tapping, and navigating.

And, it provides information that isn't likely to change from invocation to invocation.

And, it's more of a means to an end, and not a valuable action in and of itself.

So, this might not be a good candidate for a shortcut.

Checking an order status could be something a user might want to do with their voice, getting a quick summary of information from Siri.

But, it's also only applicable for a narrow window of time, right after a user's ordered something.

So, this is something that you could consider allowing users to turn into a shortcut, but maybe only if your delivery periods are long, or have multiple phases.

And viewing past orders is nice to have, but I don't know about you, I'm not regularly checking that.

So, not a great shortcut.

Ordering a soup is a very valuable activity.

In fact, the most important activity of your app.

And, you can imagine it being repeatable if a user has a favorite soup.

So, let's call this a pretty good candidate for a shortcut.

So, in summary, a great use for shortcuts will be something that is valuable, or interesting to repeat.

Doable with your voice by not relying on visuals or tapping.

And, invokable in many contexts.

So, the shortcut isn't just applicable during a small window of time.

So, now that we know that we want users to be able to reorder soup with shortcuts, let's take a look at how we might make that discoverable in your app.

We provide a standard Add to Siri button, that makes it easy for users to see what features in your app can be turned into a Siri shortcut.

But use it thoughtfully.

Don't do this, where you put an Add to Siri button on every item on your main menu.

As beautiful as the button is on its own, repeating it like this looks ugly, and it's not really relevant here.

The user's probably just trying to make an order in the first place.

And, these buttons are getting in the way.

And, these could be items that the user has never ordered before.

So, it doesn't make sense to suggest reordering them just yet.

Instead, look at opportunities where you can present it in a focused UI, where you have a clear signal that a user might want to repeat something.

For example, it might be better to show an Add to Siri button right after a user has ordered something.

The logic being, if a user's found it good enough to order before, the user's more likely to want to order it again.

And, you're not interrupting anything a user's trying to do.

They just finished their order, so this is a good opportunity.

To make the Add to Siri button fit in to your app's visual appearance even better, you can now customize the corner radius of the button.

And, you can have its appearance automatically change based on the user's light or dark mode preference.

Now, if you've tried really hard, like really hard, and the button's visual style doesn't fit into your app, you can make your own button.

But, you should replicate all of Add to Siri's functionality.

The standard Add to Siri button shows the user's shortcut phrase once configured.

And, this is a good way to remind the user what they can say to run the shortcut.

Tapping on it will reveal a standard sheet which allows the user to edit or delete the shortcut.

If you want a centralized place in your app where you list all your shortcuts, it might be too much to have the Add to Siri button on every row, like we saw earlier.

So, instead, you're free to use standard UIKit elements.

Just make sure that when a user sets up a shortcut, just like the Add to Siri button, you show the phrase the user has set up the shortcut with.

Tapping on it should also reveal the sheet, where you can edit or delete the shortcut.

So, let's get back to users setting up the shortcut for the first time.

Once the user taps on the Add to Siri button, they'll see the Add to Siri sheet, where the user can choose what phrase to use to invoke the shortcut.

In iOS 13, your app can pre-fill a shortcut of your own choosing.

And, most users will probably just assign this phrase if you provide it, so make sure you provide a good default.

Order Soup is a good, short, memorable phrase in this case, that the user might want to genuinely want to use for the shortcut.

Let's take a look at another example, and take a break from soup for a while.

Checking the bus schedule.

While this might look like a sensible phrase, given how relatively short it is, there are plenty of opportunities for the user to forget words, or switch words around.

They might try to say, Look up the bus schedule.

Or, the bus schedule for the 35.

Or, just drop the "the" altogether.

While Siri will do its best to match these to the phrase, users can still get pretty creative when trying to recall longer phrases.

So, this might not be the best suggested phrase.

Instead, keep it short, at around three or fewer words.

Try limiting it to a proper noun, or just a verb and an object.

This reduces the chance that users will mix up word order, or use different prepositions.

OK.

A user wants to set up a shortcut for ordering tomato soup.

But, what if the user wants the shortcut to do something slightly different every time, like order a different soup.

In iOS 13, users can tap on the cell under the Do area, and customize how much information is pre-baked into the shortcut by simply tapping on one of the fields.

The user can choose to leave certain fields blank, like the type of soup itself.

And, when they do that, Siri can ask for this missing information on your app's behalf.

Now, ideally a shortcut has very minimal interaction.

After all, it should accelerate people to something that they do frequently.

So, when you present the ad to Siri sheet, the action should include as much information as possible, to run the shortcut with just one or two steps.

In this case, this shortcut goes straight to the confirmation screen, because everything is already specified.

But, what happens when a user chooses to leave everything blank, and wants to specify all of the details of their order in an interaction with Siri?

Let's take a look at how we might design a complete ordering soup interaction with Siri.

Think about what information you need to know in order to carry out a soup request.

Like, the kind of soup it is.

Whether you're ordering for delivery or pick up?

And, if you're ordering for delivery, what location are you delivering to, and if you're ordering for pickup, what you're picking up from.

To start thinking about the order and manner in which you might collect this information, you should think of your app's interaction as a conversation between your user and Siri.

And, one way to visualize this conversation is with a script, which is useful for quickly jotting down one conversational path.

Of course, there isn't just one path you can go down.

You should write down all of the possible paths in which the conversation might go.

For example, a user could say an option that's not supported by your app.

In that case, Siri should probably indicate that to the user.

Now, handing over a book of scripts might get unwieldy as a design specification, so, at the end of the process, you'll probably end up with something more like this; a flow diagram that covers all the possible states and transitions within a conversation.

Now, there are specific ways that Siri can present choices, and handle user input, so let's dive straight into the conversational patterns you have at your disposal.

The first pattern that you have is the prompt.

This is the most open-ended way you can collect a value from the user.

You should write your prompt as a question, and phrase it in a way that sets the user up for a well-formed response.

When a user says something that might mean multiple things to your app, you can present an option list which allows the user to specify which one they meant.

This is called a disambiguation prompt.

You can minimize disambiguation prompts, which add another step to your conversation, by presenting an option list up front.

Notice that the user has said their shortcut phrase, Order Soup, and went straight to the list.

You should use this instead of a free-form prompt if there's a constrained list of options to choose from.

Make sure your prompt dialog encourages choosing from a list.

Questions that start with the word "which" work really well here.

When using s shortcut without a display, Siri will read out options.

Like on AirPods, on HomePod, or when the user says Hey Siri.

And, Siri will read these out as you would provide them in your visual UI.

But, you can imagine that this could get verbose, especially if a lot of the options are similar.

To improve this experience, you can separately specify how Siri reads your options out loud, by providing pronunciation hits that you can add to each option.

Let's take a look at a slightly different example.

The user has asked for Noodle Soup.

And, there are two kinds.

Instead of saying Beef Noodle Soup, or Veggie Noodle Soup, you might want to just say Beef or Veggie?

So, consider only reading out the details that differentiate between each item.

Now, conversations are a two-way street, so you also have to account for what the user might say.

And, the user may not use the exact words that you've labeled the option with.

To handle natural variations in responses, for each option, you should provide Siri with synonyms that mean the same thing as that option.

So, when the user just says Beef, it'll match to Beef Noodle Soup.

When coming up with these synonyms, you should also keep in mind that the phrasing of your question impacts the way the user may respond.

So, if you have a more casual way of describing the options, like the one with meat, or the vegetarian one, you should make sure that you recognize the user repeating that kind of phrasing back to Siri.

If a user provides a response that you want to be extra sure about, like a value of particularly high consequence, you can provide a parameter confirmation prompt.

But, use this judiciously, and only for truly exceptional cases, as this slows the user down.

One alternative way of using a parameter confirmation prompt is if your app has its own logic for predicting what a user might want.

You can present your best guess to the user, and they can either confirm it, in which case, yay, they don't have to provide additional details.

Or, they can deny it, in which case you can fall back to a more open-ended prompt.

If you can guess what the user wants, it's a great way of making your shortcut interaction even faster.

At the end of the flow, consider using a confirmation prompt that applies to the action as a whole, particularly if the action itself is of high consequence.

In this step, you can confirm all of the details of the action about to be performed that's relevant to the decision, like price and delivery time in a visual user interface that you can fully customize.

Note that for actions in the ordering category, the system requires the user to confirm.

So, make sure, if you fall under that category, you provide a great confirmation experience.

But, remember that your shortcut can be run by a user not looking at a screen, so you should provide dialog for voice-only experiences.

In this case, we provide additional dialog to help the user make a choice.

The purpose of this additional dialog is to provide information that can't otherwise be displayed in a visual user interface.

So, think of this extra dialog as a spoken equivalent of the most important information you would otherwise draw in a display.

Finally, your response.

Siri will indicate the status of the action.

You can provide a visual UI summary here to describe additional details, like who's going to be delivering your soup, and the latest estimated delivery time.

Notice that we just say, "OK.

Ordered" here, because we're using a display to show the additional information.

For voice-only experiences, you should specify a more descriptive dialog.

And, again, think of this extra dialog as a spoken equivalent of the most important information of the response UI you would draw on a display.

When you're thinking about your confirmation and response dialog, you should keep in mind that you'll need to select a category for your shortcut.

When you define your shortcut in Xcode, select the category that is the closet match to your shortcut's functionality.

In our SoupChef case, it's pretty clear that the order category fits the bill.

In confirmation prompts, Siri will provide the question itself, based on the category you select.

So, don't include a question as part of the confirmation dialog you customize, highlighted in white here.

In response dialog, Siri will provide a status that is appropriate to the category.

Your custom dialog gets appended to the end of the dialog Siri provides.

Voice interactions should also be as robust as possible, to avoid forcing the user to open the app to continue manually.

For example, you should provide clear error messages if a parameter value is invalid.

Siri will then automatically re-prompt for that value.

You should also avoid getting yourself into this scenario in the first place.

If you're presenting option lists, make sure you don't present any options that you know to be invalid at runtime.

You should also consider opportunities to dig users out of holes.

Users may include values like delivery location in their shortcut, since it's usually just their home, and so they get used to not saying their delivery location to Siri.

One day they might use the shortcut when they're far from home.

You should check for that case, and prompt for a different location.

And, for whatever reason, users might want to continue running the shortcut in your app.

They can tap anywhere in your UI to do that.

So, when you present UI, keep in mind that the whole area is one big button that opens your app.

So, don't draw elements that look individually interactable.

They can't be.

Make sure that when a user does tap this area, your app opens up to the right place, with all of the information the user has already provided up until that point, filled out in the app.

And, finally, we encourage you to take time when writing dialog.

It's not something that you can just do a quick pass at, to have something to demo, and then leave in your final shipping product.

Remember, that in a voice interaction, language is the user interface.

So, you should treat the words in your Siri interaction with as much respect and care as you do the pixels in your app.

With that said, let's walk through a small set of guidelines.

Don't be overly polite or inject too much personality.

Users who want to customize their soup will hear this non-essential dialog every time they run this shortcut, which will get irritating.

When in doubt, test it.

Listen to Siri speak your dialog.

How does your dialog feel to you after the third time hearing it?

What about the 10th?

If parts of it feel annoying, it might be a good signal that you should reduce the verbosity of your dialog.

Dialog should be concise, neutral, and communicate the type of response that you're expecting.

Don't include your app name in your dialog.

Your app will already be attributed, visually, via your confirmation and response UI, and occasionally via Siri's own additions.

So, just take your name out.

Don't worry, your brand is safe.

Similarly, you shouldn't include your user's name in your dialog.

Siri may at times speak the user's name on HomePod to verify their identity.

If your app does so as well, it might sound repetitive and annoying.

So, just take your name out.

Avoid using first-person pronouns, since Siri isn't performing the action, your app is.

It's a subtle distinction, but it's an important one.

By saying "I" or "we" in Siri's voice, users might think Siri has a better understanding of your app's capabilities than it does, and might try to take follow-up actions that your app and Siri can't understand.

Instead, present options neutrally, using words like "here" or "there are a few options."

So, what have we learned today?

Shortcuts are meant to elevate your app's most repeatable features.

You should use the Add to Siri button to make sure users know what they can turn into a shortcut from inside your app.

You should make your Siri interactions logical, concise, and robust.

And, you should take extra care when writing dialog.

Thank you.

[ Applause ]

Apple, Inc. AAPL
1 Infinite Loop Cupertino CA 95014 US