What's new in watchOS design

Hello and welcome to WWDC.

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 lengthy 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 have 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, and 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 switched 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 Photo 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 a very light background.

In order to make this button legible on any background, we used a white circular container at 85% opacity with a 1 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 in 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 e-mail 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? 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'm 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 e-mail inbox or my personal e-mail inbox. Let's check my Apple e-mail. 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 in the Apple Developer app. Thank you.