Max Rudberg
Apps
Themes
Icons
Wallpapers
Blog
    Sep17

    Designing and Developing for Siri Shortcuts

    iOS has been on a path since its inception to allow apps to become more than just a world hidden behind an app icon. Apps have been carefully allowed to seep into the OS itself.

    We’ll be using our app Lita as an example throughout this post. Lita lets you easily plan a week of vegetarian cooking. It has one main use-case that’s relevant to access outside the app; checking and being reminded about today’s meal during a planned week of cooking.

    A Brief History of OS Integration of Apps

    Push notifications for third party developers shipped in iOS 3, allowing third party to surface events directly on the lock screen. The most current inception allows for Rich Notification that upon a 3D Touch reveal a glimpse into the app along with a few select actions.

    A few years later, when iOS 9 came around, we got Quick Actions and Widgets that allows you to see bits of information of an app by 3D-touching the app icon. Widgets can also live to the left of the home screen and home screen, in the Today view.

    Widgets have a clear drawback since the user has to actively add them to the Today view, otherwise they remain hidden in hard discover menus (Quick Action or the round Edit-button).

    Widgets also occupy space when they have no value except as a shortcut to open the app, displaying only an empty state to the user. This is by design as Apple’s own widget does the same. In our case however, we could’ve presented a random recipe to keep it relevant. Something for a future version, perhaps.

    There are additional areas where apps seep into the OS such as Spotlight where you may surface relevant search results, or the Share sheet where an app may offer to perform a very specific task.

    Siri Shortcuts

    With Siri Shortcuts in iOS 12, Apple continues this trend. Siri has effectively been opened up to all apps — before, only a select few type of apps were allowed (such as messaging, ride booking and workouts). The only caveat is that it’s up to the user to record the activation phrase.

    

    For Lita we designed and developed the ability to record the phrase “What’s for dinner” as a shortcut. Now we can respond to user requests via Siri.

    The interface presented to the user should be quite simple as you cannot interact with it except to tap it and go into the app. This is similar to the Rich Notification presentation and we opted to use the same UI, which is based on the cards we use for today’s meal.

    Onboarding is Important

    Siri Shortcuts isn’t something a regular user will likely be familiar with. Hopefully Apple will improve the awareness through advertising and a system level onboarding.

    We try to make users aware of the feature already on the App Store with an additional screenshot. The new max number of ten screenshots help here.

    Most importantly, we wanted to inform the user of this new feature using an onboarding screen in our app. We tend to stay away from modal onboardings unless we really think that the users might benefit from the interruption.

    The Siri sphere and large header quickly informs the user of the feature. A short paragraph explains the feature in more detail. The call to action is obvious. And of course the user can skip creating a shortcut if they don’t want it.

    This version has been approved for the App Store and for now our fears of app rejection for using the Siri sphere has been extinguished. Our fallback would be a generic microphone icon, but we far prefer this approach and we hope this is a signal that it’s OK to use the sphere in your explanation of the feature to users.

    We’re not doing any special logic to decide when to show the user this onboarding. It pops up a couple of seconds after launching the app for the first time after updating to the latest version of Lita on iOS 12 (or the second launch if the user is new to the app).

    Tapping “Add to Siri” opens up the built in INUIAddVoiceShortcutViewController (or INUIEditVoiceShortcutViewController) system interface where the user can record, edit and delete a shortcut.

    Show It Prominently in the UI

    We prominently display Siri Shortcuts in our Settings UI to help with discoverability.

    After a few iterations, we decided that tapping the Shortcut Phrase would take the user to a separate screen where we had room to explain the feature to the user.

    Apple provides a UIButton subclass, INUIAddVoiceShortcutButton, that you can use to display a button that shows the recorded phrase for any given intent. Unfortunately one cannot style that button from what we could find, and we wanted the design of our Siri related elements to blend in better with the rest of the app.

    Let us introduce you to INVoiceShortcutCenter. It’s a singleton class that you can query for intents related to your app. You can also give it suggested shortcuts, so that the user don’t have to trigger the intent in your app to have it show up in the “Siri & Search” section of Settings.

    We wrote a little wrapper around the shortcut center to easily fetch the recorded phrase for a specific intent type. That made it easy to:

    1. Show the user’s recorded phrase in the UI to remind them of the feature and their Siri trigger.
    2. Display the correct view controller, add or edit, when the user taps the button to record a phrase. Otherwise the user might end up with duplicate shortcuts, which is confusing.

    We won’t go into too much technical detail here. But feel free to checkout the linked Gist and comment with any questions or suggestions you might have.

    Surfaced on Lock Screen

    As we mentioned at the beginning, iOS widgets occupy space even when displaying just an empty state. Shortcuts are smarter than this and will only surface to the user when deemed relevant. This relevance is determined by previous user behavior. So if a user goes into Lita to look at their planned dinner each day around 17 pm when they leave work, eventually Siri Shortcuts will just present that action directly on the lock screen.

    Shortcuts inside Spotlight Search

    

    Shortcuts are presented in search results, but may also be presented directly in the top level of Spotlight if the system deems it relevant, based on previous user behavior. Tapping a shortcut may lead into a relevant part of the app, but may also present an interface directly — the same UI that is shown in Siri.

    Settings App

    

    All available shortcuts can also be added, edited and deleted from Settings > Siri & Search. This will help with users discovering the new functionality inside your app.

    Shortcuts App

    Shortcuts will also be able to form powerful combinations that the user can create through the Shortcuts app. Shortcuts app will be an optional download from the App Store. If you want to dive deeper into the possibilities, we recommend keeping your eyes peeled on MacStories.

    Accessible from AirPods, Apple Watch and HomePod

    In addition to these different areas of iOS, your app will also be accessible from other Apple hardware. You can speak the shortcut phrase to Siri using your AirPods and she will speak the response or you. The HomePod will get a software update to allow the same functionality. You could be biking from work and prepare yourself for what to cook when you get home. Or ask HomePod in the morning.

    Apple Watch will surface shortcuts on the Siri watch face, as well as respond to the recorded shortcut phrase.

    Final Words

    Siri Shortcuts feel like the most powerful OS integration of apps yet, and we look forward to seeing how other apps seep in the OS. Feel free to download and try Lita and our Siri Shortcuts functionality.

    Wallpaper in screenshots is from Simon Stålenhag and Marc Edwards of Bjango.

    We hope you enjoyed this post! Feel free to tweet at us with your comments.

    Simon & Max of Filibaba


    1. designaddict reblogged this from maxrudberg
    Copyright