Design widgets for the Smart Stack on Apple Watch

♪ ♪ Hi, I'm Ed, a Designer on the Apple Design team. In watchOS 10, we introduced the Smart Stack on Apple Watch, a new and dynamic way of surfacing your app's content directly over the Watch face. In this session, you’ll learn about how the Smart Stack works, and how to design the widgets that are shown in it in a way that maximizes usefulness while ensuring visual consistency with the design language of watchOS. Over the years, we've seen that one of the best qualities about Apple Watch is its ability to deliver glanceable information with a simple raise of the wrist. This is especially useful with Watch faces that can contain many complications, like Wayfinder, Modular or Infograph. Watch faces like these give you everything that you need, from the weather to your next calendar event, with a simple glance. But sometimes what you want from your Watch face goes beyond just utility. A Watch is just as much an object of personal expression as it is about telling the time. And unlike so many of our other digital products, Apple Watch is worn like a favorite article of clothing or accessory. That’s why Apple Watch offers a diverse collection of Watch faces that can be styled without complications, so that people can more fully express their personal identities and tastes. We designed the Smart Stack on Apple Watch to support and complement both of these use cases. So those who choose faces without complications can still access the information they want and those who love the utility of our complication-rich faces can get even more at a glance.

All it takes is a simple turn of the Digital Crown, and no matter what Watch face a person chooses to wear, they’ll see glanceable widgets spring onto the screen in an intelligently ordered stack. In addition to relevance-based ordering, Smart Stack also provides people with the ability to manually add, remove, and pin their widgets to the top. This means that the Smart Stack can be as dynamic or as fixed as a person wants. With these distinctive behaviors in mind, take a moment to consider how a widget for your app might take advantage of relevance-based ordering or leverage pinning to provide fast access to the most helpful views inside your app. Now that you understand how Smart Stack works, let’s talk about how to design the widgets that go inside of it. We’ll cover Layouts, color and iconography, working with Sessions, and how to leverage the power of Relevancy. Let’s dive in, starting with Layouts.

When it comes to designing widgets, visual consistency is key to providing a smooth and predictable reading experience. To use a book as an analogy, we want to avoid a situation where every page has writing in a different place, a different style, or a different size. And so to encourage that smooth reading experience, our team has created six design layouts that can be used to format your app’s widgets. Using our text-styling classes, you can ensure appropriate type sizes, weights, and margins. For content that is primarily delivering text-based information, we encourage the use of our three line text layout. News uses this layout to deliver a headline and a snippet of the story. If your content has the additional aspect of being part of a group or collection, you can use the second layout to color code the content. Calendar uses this layout to communicate the event as well as the color code of the calendar it belongs to. For content that is graphical but could use extra supporting text, we have two layouts, one with an integrated bar gauge and one with an integrated circular graphic. The Audiobook widget uses the bar gauge layout to quickly give people a sense of where they are in the book, as well as what chapter or section they’re in. The Activity widget uses the circular graphic layout, where seeing your Rings provides immediate value, but text information gives a more nuanced understanding of your calories, exercise minutes, and the hours you've spent standing. If you have content that is largely numerical or utilizes a single word as the glanceable content, you can use this large text layout. This layout is used for the Calendar Month widget, but you might use it to indicate a unique state in your app with a keyword like "high" or "low" or simply a numerical value. Finally, if you have content that is primarily expressing data over time, we have a layout made for charts.

Remember when designing your widgets to only show what is necessary to ensure glanceability. It helps to remember that people should only be spending around ten seconds max engaging with glanceable information on their Watch.

If you’re looking to use these layouts, you can find them in the Apple Design Resources posted online. At this point, it’s worth noting that there are cases where a graphically unique layout might make more sense. Not all content is equal or can be formatted in the same way. For example, a widget I’ve always wanted is one that tracks how many cups of coffee I’ve had and then tells me how long until the caffeine wears out. Something like this might be difficult to execute in our standard layouts. So in these cases, you have the option to explore a unique layout that makes more sense for your app. But even so, we encourage the use of our text classes to achieve a sense of regularity and readability. Think of our layouts as a recommended standard and a helpful point of reference as you design the best widget for your app.

A final note on layouts. The combo widget comes default in every Smart Stack. It has a unique layout that supports three circular complications of a person’s choosing. It’s great for housing circular app launchers, but it’s even better when the complications in it provide rich data, and better yet when all three complications work together as a set, like three weather complications where I can see temperature, UVI, and AQI. Perfect for a hot summer day. My personal favorite is to put each of my family members in as a Contact complications so I can quickly contact any of them with ease. Hopefully these examples give you a good place to start formatting your app’s widget, whether that’s using a standard layout, something more bespoke, or taking advantage of the Combination widget to present a thoughtful set of circular complications. The layout of a widget is what helps with consistency and readability, but it’s also important that your widget is recognizable and distinctive. That brings us to color and iconography.

Unlike complications on a Watch face, which are tinted based on your Watch face color, widgets in the Smart Stack don’t need to defer to the style of a Watch face. This means designers and developers have more flexibility in making widgets more recognizable and stylistically tied to their apps. By default, every widget will have a dark material background with white text on top of it, but we encourage designers and developers to go beyond this, and to choose a color for their widget background that assists in app recognition or conveys informational meaning. For example, the Weather widget shows a dynamic gradient to communicate changing climate conditions, the Stocks widget shows red or green based on performance, and the Audiobook widget shows the book cover, just out of focus, to set an ambient tone. In addition to a colored background, choosing thoughtful iconography that represents your app function further assists in setting your widget apart and setting context for the content inside of it. For example, we add an SFSymbol in front of many of our widgets, so you know the kind of content that’s being represented. If you aren’t using an SFSymbol, we recommend using vector icons, as they lock together well with text and complement the broader visual language of widgets. So whether you’re choosing a vibrant background or placing a descriptive icon, we encourage you to think about how to make your widget a distinctive and representative window into your app’s experience. Now let’s talk about Sessions. But first, what’s a Session? A Session is an active state in an app that has a clear start and end, like when a song is being played in Music, or when you’re counting down a timer, running a stopwatch, or tracking an ongoing Workout. A key feature of the SmartStack is the system-generated Session Control widgets. These are special widgets that automatically appear on the top of your SmartStack if you have an active Session going. For example, if you start playing Music, the system would generate one of these. For this reason, if you’re designing a widget that is related to a Session, like a Music widget, or a Workout widget, we encourage you to focus on offering helpful content that might lead into a Session, or come after it, as a complement to the generated Session Control widget. For example, suggesting a Music track to play, or showing today’s planned Workout. Focusing on these experiences will not only reduce redundant function with the Session Control widgets, but will also enable your widget to continue to be useful even during a Session by allowing you to do things like change the music to a different song, or start a new timer. As previously mentioned, the Smart Stack intelligently orders the widgets in it so that the most relevant one floats to the top. In this section we’re going to focus on how to design for this capability.

When you’re designing the content that goes in your widgets, it's just as important to consider when your widget should be prioritized in the Stack. Here are five helpful moments to consider: when a time and date is imminent, when a location has been reached, when headphones are detected, when a person wakes up or when they're going to bed, or when a person starts or ends a Workout. Let’s talk about a few of these. The Calendar widget leverages time and date so that an event that's occurring in the next hour increases its relevancy, bringing it to the top of the Stack. The Reminders app uses location to populate the widget with the most relevant content and to prioritize its order in the Stack. You can either use a specific location, which is GPS-based, or an inferred location, that doesn’t require requesting GPS coordinates, like Home, Work, or School. The Audiobooks app responds to when headphones connect to determine when to prioritize its widget to the top of the Stack. So listening to your favorite book becomes as easy as popping your AirPods in and turning the Digital Crown. The Activity widget use the presence of an active Workout to prioritize its order in the Stack so that when you finish your run, you can turn the Crown and see how all those miles helped in closing your Rings.

I hope that gives you an idea of what you can do by leveraging relevancy with widgets. The more thoughtfully apps utilize these signals, the smarter the Stack becomes. We think the Smart Stack on Apple Watch is going to be a major way people interact with apps on their Watch. So take time to think about how you want your app to show up there. And when you’re ready to start building, I invite you to check out our code-along session: "Build widgets for the Smart Stack on Apple Watch," which will get you up and running in no time.

Thanks for joining me, and I look forward to seeing your widgets in the Smart Stack.