Design and build apps for watchOS 10

♪ ♪ Jennifer: Hi, I’m Jennifer Patton, a designer on the Apple Design Team. Matthew: And I’m Matthew Koonce, the engineering manager of the SwiftUI team for watchOS.

Jennifer: For the tenth major release of watchOS, we have redesigned the user interface to surface timely information, communicate focused content at a glance, celebrate the shape and fidelity of the display with full screen color and imagery, and make navigation consistent and predictable.

Matthew: And we've also evolved our APIs. SwiftUI is at the very heart of watchOS 10.

In this session, we'd like to walk you through the details of the watchOS 10 redesign. We’ll start with some key design principles.

Then, we’ll look at some new ways to structure navigation in your app.

After that, we’ll talk about the evolution of our layout system, and some updated APIs that help make use of every pixel.

And lastly, we’ll see how color and materials can bring a whole new dimension to apps.

Sound like a plan? Jennifer: Yeah! Let's get right into it.

Let’s start with some Design Principles. The first thing you’ll want to think about when designing for Apple Watch is “What is the most relevant information or experience my app can offer to people in the moment?” Let’s look at the Weather app as an example. Because Apple Watch is a timekeeping device best suited for quick and focused interactions, the first thing you’ll see when opening the app is your local weather for today. With a simple rotation of the digital crown, you’ll get local weather for the rest of the day, and then for the rest of the week. And if I’m looking for the weather in New York, for example, my list of cities is just a single tap away from any of these detail views.

Weather achieves what I like to think of as an “Apple Watch Moment.” When you’re designing your app, try to narrow the focus of the experience to just what’s relevant at the time the wearer raises their wrist. Watch experiences should be highly specialized for brief interactions.

If you had ten seconds of someone’s attention, which information would you surface? On iPhone, News is a multi-tab, multi-level app rich with content.

And on Apple Watch, News is focused on five top stories.

The content is stacked vertically in the feed and expands inline when tapped. Brief interactions are one of the things that I love about designing for Apple Watch.

When you only get a few seconds of people's attention, you need to be concise, like how News focuses the experience on just today's headlines.

And Heart Rate displays finite data first, so it can devote most of the view to a full screen animation. And Activity simplifies a broad experience into single focused views.

So when designing your app, keep it brief and keep it focused.

When we announced Apple Watch in 2014, we also introduced the Digital Crown as being a unique and precise input device that could be used without obscuring the display. In watchOS 10, we are emphasizing the Digital Crown as the way you get to and navigate through apps, to scroll, paginate, and make precise adjustments. While interactions should be anchored to the crown, they should also always be backed up by touch.

You can use the design goal of tying interactions to the digital crown to shape your app’s navigation structure and experience.

When designing for watchOS, consider the journey people will take from the moment they raise their wrist. A great new feature in watchOS 10 is the Smart Stack.

With a turn of the digital crown, glanceable widgets spring onto the screen in an intelligently ordered stack.

When you design your app, you can begin by thinking about which information would make the best Smart Stack widget and then design around those relevant and timely experiences to architect your app.

And definitely check out design widgets for the Smart Stack on Apple Watch by my colleague, Ed. Once you have narrowed the focus of your watch app to bite-sized pieces of information that are relevant in the present moment, your next step will be to stitch those moments together into an easily navigable structure. Matthew and his team have been hard at work developing some incredible new APIs for you to use. Take it away, Matthew. Matthew: Thanks, Jenn.

Let’s take a look at how navigation within apps has been updated with SwiftUI.

First, we’ll look at NavigationSplitView, which provides detailed content at a glance.

Then, some updates to TabView that allow you to tie more interactions to the Digital Crown.

These both sit alongside the NavigationStack as our core navigation paradigms. Picking the right way to structure your app is a fundamental decision, and each has its strengths.

Let’s start with NavigationSplitView. The concept of NavigationSplitView on watchOS is borrowed from a two column layout, like you have in Weather on iPadOS.

On watchOS, the source list and detail view are separated and then recombined, with the source list tucked just beneath the detail view. Now that source list is just a tap away.

Jennifer: Navigation Split View is a perfect option if you have a source list, like a list of cities in Weather or a list of stocks and detailed views of the items in that source list. Land people directly in the detail view when they launch your app.

Use location, recency, frequency, or some other indication of user intent to inform which detail to surface first. Strive to make your detail view so unmistakable at a glance that it doesn’t need a title.

Matthew: One really slick feature of Navigation Split View that we built right into SwiftUI is the transition between the detail view and the source list.

You can, of course, tap the list icon, or even better, interact with your finger.

Jennifer: And the source list is an excellent tool for showing comparative data.

It’s 10:09 a.m. in Cupertino and it’s 7:09 p.m. in Budapest.

There is no need to title the source list and no need for a close button or navigation controls.

This allows the source list to use a shorter navigation bar, showing more comparative data on screen at a glance.

Matthew: The API for NavigationSplitView is the same on watchOS as it as on other platforms.

You can set up a source list and initialize it with a selection.

Always initialize the selection to a value so SwiftUI can automatically launch to the detail view. Next, let’s talk about TabView, which has received some really fantastic updates and is my new favorite way to navigate apps on my Apple Watch.

Tab view can scroll between views, and new in watchOS 10, a single tab can expand and resize as needed. Jennifer: Aside from allowing content to expand in-line, this also allows a design that fits on a single screen by default to support localized text and large type if needed.

Matthew: Let’s take a closer look at how we’re using TabView in Activity.

Activity has a tab for each of the ring detail views, and it’s using the new “vertical page” style.

Activity also features this new blur transition between each tab.

Combine this transition with the container background modifier for a seamless blend between views.

The last page in Activity is a scrolling list of recently completed exercises. Adding that list is as easy as, well, adding a list! TabView will automatically detect any scrolling content, and will expand to accommodate it. So that’s how we can quickly build a layout similar to Activity, but TabView has one more trick up its sleeve.

Jenn: Have you noticed the cool animation that occurs when you scroll to the move tab? Watch the Activity Rings as they scale up into the top left corner.

This achieves our design goal of tying interactions to the digital crown, while also keeping the Activity Rings permanently in view.

Matthew: Now you may be wondering, “Can I do that, too?” And the answer is, you can! Let’s take a look.

In watchOS 10, you can now drive animations based on the selection value of the TabView.

One really neat trick is to hook this up to a matched geometry effect.

The Activity Rings appear in both the TabView and in the toolbar.

By adding the matched geometry effect to each of these two views, SwiftUI will automatically animate from one position to another.

Jennifer: Navigation Split View and Tab View are really capable, but they’re not necessarily right for every app.

If your app can’t do what it needs to do by pivoting between a detail and source list, or in a few vertically paginated tabs, consider using a NavigationStack.

Matthew: Yep, that’s totally right.

We’re using NavigationStack in many apps like Workout, Calendar, and Music. We’ve even refreshed the navigation push animation! It now highlights and moves the view you selected.

Jennifer: The NavigationStack is still the clearest way to lead people into and back out of a hierarchy of views.

Use a large title on the first view, but not on any of the subviews where a back button is present. When designing your app, choose a navigation structure that accomplishes your “Apple Watch Moment” in as few interactions as possible.

Matthew: So that’s navigation on watchOS 10.

NavigationSplitView, TabView, and NavigationStack make the experience consistent and predictable across all apps.

Jennifer: Now that you have chosen the best navigation structure for your app, let’s talk about the resources you can use to build each view.

As the Apple Watch display and hardware have evolved, the display has gotten consistently larger and more rounded.

While designing for an increasingly rounded display over the years, we have developed a flexible grid system that defines the size and placement of controls, labels, and content.

To accommodate different types of content, we designed three foundational layouts.

Dial-based Views, Infographic Views, and Lists.

All of these layouts are designed to adapt automatically to the different Apple Watch sizes supported by watchOS 10.

Dial-based views are great for dense information delivered at a glance.

The use of full screen color and imagery, like weather conditions, can help to add additional context. Dials also allow you to add up to four different corner controls without obscuring content.

The infographic view is ideal for charts, graphs, and other data visualizations that are paired with a block of text and metrics.

And Lists makes it easy to scroll through content and find exactly what you need.

The grids are based on the shape of the active display area. We start with the curvature of the display, and use that to mathematically inform the sizing and position of the elements in the view. These layout grids are available in the Apple Design Resources.

I hope you’ll find them useful in designing your app.

Matthew: The layout grids created by Jenn and the Design team form the foundations of watchOS 10, and they provide the underpinnings of many of our APIs.

For example, use scene padding to get the insets you need to build a dial view. Or use the new “top bar trailing” placement to add a button to the toolbar at the top right of the screen.

When you use this placement, the time moves out of the way and centers on screen. The now playing view really makes use of the updated toolbar In addition to using the “top bar leading” and “trailing” placements, Now Playing adds its control buttons to the bottom bar.

SwiftUI is using the same layout grids that Jenn just described to align these buttons. No need to add any additional padding.

Also in the bottom bar is the pause button.

You can use the control size modifier to make this button larger and more prominent. It’s never been easier to build a Now Playing screen! These toolbar placements unlock new opportunities for focused interactions by allowing more controls on screen at a time.

Jennifer: We developed the layout grids to utilize every pixel and make the experience of using Apple Watch more consistent and predictable across apps.

I also hope they’ll inspire you to design great apps for many years to come.

Matthew: Next, let’s talk about how color and a full suite of materials, give the people a sense of place inside the hierarchy of views. Jennifer: One of our design goals for watchOS 10 is to emphasize the shape and fidelity of the display with full screen color and images.

To that end, we added four vibrant full-screen background materials that affect background content at different blur levels, like Ultra Thin, Thin, Regular, and Thick. Matthew: And you can use the same SwiftUI APIs on watchOS as you might already do on other platforms.

Jennifer: We also added a full screen background gradient that you can tint with your own accent colors.

In Activity, we use the accent colors for Move, Exercise, and Stand to differentiate three consecutive tabs that have similar layouts at a glance.

Another great use of full screen color is to set tone, like this calming blue background in Sleep. You can use color to convey information at a glance, like in World Clock where we use solar gradients to show the time of day.

You can also use full screen color to convey a state change.

In Timers, the background is black when the timer is counting down, and then, bright orange declares that my egg timer is done. To make sure foreground elements look great over all of these backgrounds, we added vibrant fill materials to controls and platter cells, and vibrant text labels, in Primary, Secondary, Tertiary, and Quaternary prominence levels for creating information hierarchy in typography. We also added vibrant versions of all the system colors that ensure legibility over full screen backgrounds. Matthew: It’s so cool to have all of those new materials available on watchOS! So how does it come together in an app? Let’s use the Noise app as an example. We’ll start with the full screen background gradient.

This comes from the “container background” modifier, which is new in watchOS 10.

Noise passes the color green with a gradient applied.

The unfilled bars of the chart and the X-axis labels, are using the secondary foreground style.

The secondary style provides some vibrancy and allows the background color to come through.

The filled bars and the rest of the text labels are using the primary style. With that, the view is complete! When you update your app for watchOS 10, you’ll notice a few other changes.

Presentations throughout the system now use a full screen thin material. This give the wearer additional context about where they are in the app.

You can see a hint of green just beneath this view.

In fact, all of SwiftUI’s controls, labels, and List content have been updated to look amazing when placed over a material background.

Jennifer: And the navigation bar has a beautiful new variable blur.

This provides a gentle transition as content scrolls underneath the navigation items.

That was a lot to cover! We walked through our design principles, entirely new ways to navigate in apps, brand-new layouts, and how to use color and materials.

watchOS 10 is a major leap forward for the design of Apple Watch apps. Matthew: And we have so much more to talk about with all of the changes! Jennifer: Check out “Meet watchOS 10” for an overview of everything that is new, as well as “Design Widgets for the Smart Stack on Apple Watch” to learn how to design beautiful widgets.

Matthew: If you already have a watchOS app, “Update your app for watchOS 10” is for you! We’ll walk through updating an existing app with all the SwiftUI APIs we showed here.

watchOS 10 was only possible because of deep collaboration between design and engineering.

And this is just the start! Jennifer: That’s so true.

watchOS has never been a more vibrant platform, and there’s never been a better time to design and build your Apple Watch app.

♪ ♪