Great watchOS apps are simple and direct. Actions should be discoverable, predictable and relevant. This session covers effective strategies for displaying actions in your watchOS app, whether they are primary buttons that begin core tasks, or contextual actions that might be less commonly used but are still important to offer.
For more on implementing actions with the latest UI frameworks, check out "SwiftUI on watchOS."
Hi, and welcome to this session on "What's New in watchOS Design". I'm Jennifer Patton, and I'm a watch designer on the Apple design team.
In this session, I'm going to talk about some of the ways that we added new functionality to native apps on the watch this year and how you can bring some of this same functionality to your watchOS apps. I'm super-excited to share with you some of the things we learned along the way.
So let's get started. We'll start with a few guiding principles. When designing your watch app, keep in mind that watch apps should be lightweight. Like in this example from the Sleep Cycle app, limit link the interactions and be choosy when it comes to functionality. Ideally, you can get all the information from your watch app at a glance. When adding functionality to your app, keep it actionable.
Wikiloc offers a filter option in their list view.
Filtering is a great way to make user interactions relevant to you in the moment you're interacting with your app. And finally, once you've decided that an action is critical to the experience of your watch app, make it discoverable.
Here's a great example from the watch app, Bear, that shows a clear visual button to interact with. This year on watchOS, we did a complete audit of all the gesture-based contextual menus across the entire operating system and native apps.
In previous watchOS versions, actions were placed in a gesture-based contextual menu. In watchOS 7, we've moved all of these actions into the apps in an effort to make the experience more intuitive for every user. In the process, we've created some great new interactions on watch that didn't exist before. We're excited to see how you'll develop these new patterns in your watchOS apps. During the design process, we had these three goals in mind. First, interactions should be both discoverable and predictable.
Secondly, relevant actions should always be visible in the app. And thirdly, eliminate gesture-based contextual menus without removing functionality.
As we brought these sensibilities into our designs, we learned that many of the actions we wanted to display really fall into the category of secondary actions.
The interactions I want to talk about today are not the primary reason you're using a watch app.
Instead they add or increase functionality, provide a secondary but still important action or provide a way to filter, sort or otherwise interact with the primary actions already in the view. Once you've narrowed down the actions in your app to just what is essential for a delightful watch experience, here are some ways to show secondary actions in your app. We'll talk about commonly-used actions like sort and filter menus that can help make long lists easier to navigate. We'll talk about swipe actions that can make a few key secondary actions easily accessible. We'll talk about where to put more options... the value of adding actions to the bottom of a scrolling view... and a new toolbar button for suggesting essential actions in a long list.
We'll also talk about when to use a hierarchical navigation model for changing destinations within an app.
Let's start with sort and filter. A long scrolling list can become much easier to use and more personal if you have the ability to sort and filter to just the information relevant to you in the moment. In watchOS 7, we added this button to the top of the activity sharing list in the Activity app. I share my activity with a long list of friends and family, and maybe I'd like to see who's done the most exercise today. I simply tap on that sort button at the top, and I get a modal view with a linked table view that allows me to sort my list with a single tap, selecting 'Exercise' instead. Dang Molly, it's not even 11:00 a.m.
Here's one more example, and we call this a view switcher. Slightly different from filtering content out, we're just viewing a different set of data in this one. In my Stocks app, I can view all the stocks I'm following at a glance in the list view.
But what if this information just isn't quite relevant to me right now? Let's tap on the button at the top of the list and choose 'Points' instead.
There - that's better. Now I'm viewing points instead of percentages in the list, which is just the information I was looking for.
Sort and filter menus are a lightweight and actionable way to narrow down any long list and make it easier to navigate and more relevant to you in the moment. To create a menu for sorting, filtering or view switching simply nest a picker in a list in SwiftUI. Another API you can use in a list is a swipe action. We use these actions all the time in iOS, and we're starting to use them more and more in watchOS for displaying actions in a list view. World Clock has a perfect example of a secondary action in a list view. In my list of cities, I can swipe a table row from right to left to reveal a clear and recognizable prompt to remove this city from the list immediately.
I can always re-add it again easily with the 'Add City' button at the bottom of the list. The swipe action API is called the onDelete Modifier and is currently available in SwiftUI.
We've talked about adding functionality to a list but what if your watch app has more options that you need to surface in a glanceable view that doesn't scroll? In this Maps example, the entire screen is an active area.
I can move the map with my finger to pan around or tap the Current Location button to snap back to my current location. But we also have a couple of additional actions that we need to show in this non-scrolling glanceable view so we've added another button in the bottom right with the ellipsis glyph in the app's key color that can present these actions. This is known as a 'More' button. By tapping this More button, I can now search this area of the map or toggle between transit and standard views.
The options in this contextual menu add functionality to the viewable area of the map. It's pertinent to what I'm doing in this moment, and it's discoverable and reliable. Inside the modal, you can show a simple set of actions like this one or a more complex list of actions like the one in the Camera app. If I open my Camera app on my watch, I can use my watch as a remote to take a picture with my iPhone camera.
Incidentally, we switch to the three second shutter as the default so I don't get caught in the picture looking down at my watch, which I think is a great improvement.
And now let's say I have my iPhone all set up and ready to shoot another awesome, full-length selfie, and I decide I want to change my flash settings, toggle Live Photos on or off or take some other common actions right from my watch. Tapping on the More button on the bottom-right of the screen gives me a modal table view full of options for my camera settings. This is an example of a sheet API with a pretty robust list of options. Let's focus on the design of the More button for a minute. You can create your own More button using a simple circular container element with the SF Symbol ellipsis centered inside. Refer to Apple's Human interface Guidelines for the recommended hit regions for each watch screen size and add transparent padding around your button, if needed, to ensure that your button is comfortably tappable.
Now the Camera app has quite a few options beneath the More button but what if you have a single secondary action that you need to provide, Like this example in the Photos app? In watchOS 7, we added a button to the lower left so that I can create a watch face directly from the Photos app on my watch. Since there's really only a single action here, instead of the ellipsis symbol, we designed an Apple Watch face glyph. You can design a glyph that families well with the glyph language for your own app or utilize the glyphs available to you in SF Symbols.
This More button needs to work on a very dark and very light background.
In order to make this button legible on any background, we used a white circular container at 85% opacity with a one point black outer glow at 50% opacity. The More button is a perfect way to get to a menu of secondary actions that are pertinent to the content you're currently viewing.
It's especially important to separate primary from secondary actions when you think about using a More button.
Never put primary actions inside a More menu and be sure to be very choosy about which secondary actions you offer there too. Use a More button and a glanceable, full-screen view or in a carousel list like this example in the Workout app when you need to provide contextual options but you don't have a lot of space. Action buttons at the bottom of a detail view may be the most discoverable and intuitive way to show actions in your app.
Here's an example from the Calendar app. In this calendar event that I've been invited to, we've added a button to the bottom of the event detail that allows me to email the sender of the invitation. The actions in the bottom of a detail view should always apply to the content of the view above it.
Here's another calendar event. This is a calendar event that I've created.
At the bottom of any self-created calendar event detail, we've added a button so that I can delete this event from my calendar easily from my wrist.
To avoid confusion, the information in this event detail that's not actionable sits directly on the black background.
Only the action button at the bottom sits in a container and looks tappable.
Use a red text label on the button to indicate a destructive action and add a confirmation alert if the information being deleted is not easily retrievable.
Next, I want to introduce a brand new API called the Toolbar button. We designed this button to solve a specific interaction need on watch. The Compose buttons in Messages and in Mail... Wait... Where is it? Ah... It's tucked beneath the navigation bar, for the moment when I need it.
I likely did not open Messages on my watch to compose a new message.
Instead, my primary reason for navigating here is likely to read a new message that just came in. But if I did open my app to start a new Messages thread, the Compose button is there waiting for me and I can tuck it back away when I'm not using it. You can find this Toolbar Button API in SwiftUI.
Only use it in a scrolling view. Scrolling is what makes this button discoverable, and use it judiciously only for actions that are essential to the functioning of your app but may not be the primary action for the view. So far, we've been talking about simple ways you can add functionality to your watch app with various types of buttons. In watchOS 7, we had another case that we needed to solve where a button just couldn't do the trick.
It needed a different navigational model - hierarchical navigation. In some cases, it makes sense to land one level in when you open a watch app. An example is what we do here in Mail. When I open my Mail app, I am already in my All Inboxes view, ready to read my most recent e-mail. But if I tap the back button in the navigation bar, I'm at the top level of the app, and I can change my destination to visit my Apple email inbox or my personal email inbox. Let's check my Apple email. The title in the navigation bar lets me know which inbox I'm currently reading, and the back button is still right there so I can jump back and switch anytime. In a hierarchical navigation model, the app should remember the destination I chose the next time I open the app. If your interaction doesn't call for that level of permanence then this is probably not the right model to use.
Another example that we added to watchOS this year is in the Home app.
Now when I open my Home app on my watch, I land here in my device list for my house. But tapping back in the top left takes me to a top-level list of destinations. From here, I can simply switch to my design studio, and now I can see and interact with the devices that I have there. The title in the navigation bar has changed to indicate the destination that I am currently in, and tapping back will always reliably take me right back to that same list of destinations.
I truly hope this session on 'What's New in watchOS Design' helps you bring useful functionality to your watch apps. When designing or updating your watch app for watchOS 7, remember with so many different ways to improve navigation in your app, be extra particular about what you put inside contextual menus.
Choose actions that are essential to a delightful watch experience, and once you've decided on which actions to offer, steer clear of gesture-based menus and instead offer a clear visual button or predictable interaction pattern.
By keeping these simple design goals in mind you'll make your app relevant and easy to navigate for everyone who wants to use it. For additional information, be sure to check out the resources listed below this video
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.