Design great widgets

Hello and welcome to W.W.D.C. Welcome to Design Great Widgets. My name is Mac and I'm joined later by my colleague Christian and we both work on the human interface design team here at Apple. We're really excited to talk through the process of how you can design amazing widgets for your own apps. But before we get started let's take a quick look at what's new.

In iOS 14 the entire widget experience has been completely redesigned. At its foundation is an entirely new visual aesthetic, and powerful new capabilities. The information your widget chooses to surface can be more up to date and contextual than ever and drag and drop editing gives people direct control over their widgets in an intuitive and flexible way. One of the things we're really excited about is that people can now add these new widgets directly onto their home screen pages. This enables an all new way for users to experience widgets and likewise a whole new set of considerations to think about as you approach designing them. Another feature we've created is Smart Stacks. These let you add several different widgets into a single location and quickly flick between the different widgets inside. But what is really powerful is that smart stacks dynamically change and adapt to how you use them. Based on your behavior and context, a smart stack will automatically rotate to show you the most relevant widget at a given time. So the information you're looking for is already there before you even have to lift a finger. For example, when I wake up I like to know what the weather is going to be for the day. When I'm on my way to work I always play some of my favorite recent music. Later, in the afternoon, I often check how much traffic there is and how long it might take me to get home. And in the evening I like to catch up and read through some of the top news stories from the day. These are just some examples from my own widget stack, but the widgets and behaviors of the Smart Stack are different for each person based on the way they use their device and the information that matters most to them. This was a super quick look at some of what's new but it's important to remember all of these different ways someone can interact with your widget and we'll revisit certain features more deeply as they pertain to different sections of the design process. When designing a widget there are two main parts of the process to focus on, ideation and creation.

In this first section we're going to cover some principles to help guide your ideas and also look at some of the new features that are important to consider at this step in the process. Starting with design principles, the new widget system is all about content. To create a great widget you need to understand what the most useful information and experiences are that people return to your app for. Three useful principles we've found to focus on when thinking about ideas is to look for things that are personal, informational and contextual. We want to look for things that are personal because they can allow for a deeper emotional connection with a piece of your app or an experience that it enables for someone. Widgets provide a great way to see a top level overview of information from a variety of sources on someone's device. Surfacing the right information can save people from doing commonly repeated actions in your app. People have their devices with them throughout the day and there are tons of signals to infer a person's circumstances. Context helps surface the right information at the right moment and allows for a better experience that at its best feels like it's magically predicting someone's needs and next steps. Let's take a look at how some of these principles informed our decisions and ideas while designing some of our own widgets. For calendar, just like the app icon, it shows the day of the week and the current date, your next meeting or event was the most important piece of information to surface from within the app. Glanceable details like the start time and event location save people a potential step in opening the app to find this information. If you have a busy schedule with lots of events it collapses some of the less relevant information and prioritizes the single most important piece of information from each event. When your day is almost over and there's no more events rather than just showing a blank widget when possible we instead start telling you about what is coming up next and happening in your day tomorrow. This is a great example of thinking beyond just the context of the current moment and broadening the scope of contextual relevance by the hour, day, or even week. A more personal detail is the holiday calendar for the country that you live in. It adds a nice reminder on special holidays. And when it's a contacts birthday we show a present glyph and elevate it at the top, so right from your home screen you can feel a personal connection to them during the birthday.

The photos widget is a great example of just how personal a widget experience can be. We found that the most delightful experience was to surface the best photos instead of just the most recent ones. In addition to photo memories we also surface featured photos. And another way of taking advantage of context was to show you photo memories from the current day in years past. In the weather widget, we surface the city name, current temperature including the high and low and what the forecast will be for the rest of the day in your current location.

Weather is a really great example of how contextual a widget can be. We display unique weather events such as high wind, thunderstorms, and if and when it's going to start raining. And if it does we can contextually increase the resolution of the next hour's forecast. So you can see up to the minute detail of when there might be a break in the downpour or when it will stop raining.

For maps it's useful to be oriented geographically and see what's around you. But we build on top of this base spatial awareness. When you're not at home and you've driven somewhere, we show where your parked car is. And if you have a scheduled event we show how long it will take to get there and contextualize the map so you see the route you will take and what's on the way. And when you're not at home we show the E.T.A. for how long it will take to get back. You can see how in all of these examples the widgets are very dynamic and informative, and the contextual details make the experience feel very personal and adaptive to a person's needs. One of the new capabilities is the ability for people to edit widgets. This is an important concept to think about in the ideation phase because it might change how much information you try to put into a single widget. Let's take a look at how editing works for the weather widget. In iOS 14, your widgets will jiggle just like apps do in edit mode and you can tap on a widget here to flip it around and see what it allows for you to edit. Here, the weather widget lets me change what location it's displaying the weather conditions for. By default it adapts to your current location so that when a person adds a widget they don't have to do any additional work. If I tap on the location field I get a list of all my favorite weather cities as well as the ability to search for other locations.

I'm going to change the location display on this widget to Tokyo and when the widget flips back around it's now displaying the weather conditions and information for that city, but what is really cool is widgets in iOS 14 let you add as many additional widgets as you want and edit each one to show a different set of information. Here I'll add a second weather widget and change this one to show San Francisco's conditions.

One of the best parts of this feature is that it eliminates the need to create complex widget layouts that represent different entities of information combined into a single widget and instead lets a person choose how much information they want to see from your app by adding several widgets and editing them to show just what they want to keep track of. Now I can have both cities side by side. Most of the new widgets in iOS support editing like this and it's a great experience to add and choose different reminders lists, stocks, notes and world clocks as shown here. This is one of the main use cases of configuration, but there can be others too. Consider what options you could offer to people that would maximize the utility and flexibility that people might get out of your widget. Another thing to consider in the ideation process is deciding on if you should offer multiple widgets. For stocks, we had two different ideas: to offer a widget that shows a glanceable compact summary of your watchlist information but also the ability to add a single stock symbol as a separate widget to keep track of it at a higher resolution just like weather did for cities in the previous example. Several other apps in iOS 14 offer multiple widgets, including news which lets you follow top news from a specific topic and notes that lets you pin a favorite note or add a shared note folder. Now that we've taken you through some important principles and considerations to think through when coming up with ideas for your widgets, in the next part, Christian is going to talk through the process of how to take these ideas and form them into beautiful widgets that express all that your app has to offer in an elegant and consistent way. Thanks Mac! My name's Christian and I'm excited to take you through how to make your widgets come to life. Let's jump into the details of creating your widget. There's three things we're going to cover as part of creation, the first is sizes and interactions. The new system supports three sizes that you can design with: small, medium and large. We designed the small widget to be all about the most useful piece of content from your app in a size that constrains how much content can actually fit in it. The small widget supports a single tap target. Tapping it should deep link to the content that's on the widget. Where you deep link to will depend on how your app is structured. Let's look at some examples. For our small Calendar widget, since the widget is always showing what event is coming up next, we thought it made the most sense to bring you to the latest event in the app's Day View.

When you tap on the widget, the Day View scrolls to the latest event and gives you a nice glimpse of the rest of your day around it. For our small News widget, since it previews a rich news story that you might be interested in reading, tapping it brings you directly to that news story and the app.

Our medium and large widgets are familiar shapes. Both sizes fit more content and support multiple tap targets. Tapping a piece of content in a medium or large widget should also deep link you to the displayed content that's on the widget, like here in this News example. Tapping either article brings you directly to the News story you tapped on. There's three different tap styles supported in the widget system: Fill style is best for when you're deep linking into a single piece of content. Every small widget uses fill style since it only supports one tap target. Cell style is best for when you're selecting a piece of content in a widget that lives in its own shape, like here in our Files widget. And content style is great for when you're selecting a piece of content that lives un-contained in a widget. Next is all about Content and Personality. The most important part about making your widget come to life is what lives in it. You should think about content and personality together when you're designing your widget. Ask yourself questions like "What are people looking for when they launch my app?". Also find distinct items of information that people find useful in your app. Let's look at a few examples of thinking about content and personality together. When designing our widget set, we looked at finding personality through how our apps look. For Weather, we used the familiar weather condition background, as well as the iconography from the app. For News, we took inspiration from the rich story images that you see in news stories. And for Calendar, we took inspiration from its simplistic look and familiar red tint color, focusing all on what events are coming up next. Another approach for finding personality is taking inspiration from your app icon. Like Notes, where we took on the icons notepad illustration style. Podcasts, where we use the icon's purple gradient. And Tips where we use the icons yellow gradient. When it comes to laying out content in your widget, there were two patterns we found when designing our widget set. The first is a layout that expands across all three sizes, like Weather, where we add additional information across each size. The second is a layout that is completely unique across sizes, like News here. The small widget prioritizes rich content that fills up the whole space, while the medium widget focuses on showing more news stories.

When you're designing for each size make sure not to scale up your smaller widget into your larger widget. Think about the information you're working with and what makes the most sense for each size. For the large Screen Time widget, since we had more useful information that we could include and more space, we increased the size of the chart and also included category and app details. If you don't have more information to show in your larger sizes though, it's fine to only support specific sizes of your idea. All sizes for an idea aren't required. You might come up with an idea like these examples here where you want to pack a summary of information in a small widget. We recommend only including a max of four pieces of information in the small widget size. Now let's go into some more detail about widget patterns.

As we designed our widgets, there were several common layout patterns that emerged. Here they are across the different small, medium and large sizes. There are mix of single item and denser multi-item summary layouts. These patterns serve as a helpful starting place and a good way to try out an idea in a format that already works well. When designing your own custom layouts, follow the default sixteen point layout margins across all sizes to make sure the content in your widget feels consistent when it's place next to other widgets. For layouts with graphical shapes like circles and inset platters use tighter eleven point margins across all sizes. Shape corners that sit close to the edges of your widget should appear concentric with the widgets corner radius. Since the widgets corner radius changes across different device sizes, we provide a Swift UI container that you can assign to shapes in your widget that will make them concentric with the widgets corner radius without needing to manually specify corner radius values.

For type. You should use SF Pro or other variants of San Francisco that are available like SF Mono and SF Pro Rounded. If a custom font is important to how your widget represents its brand or personality make sure it's applied in a way so that your widget still feels at home alongside other widgets. A widget should look great in both light and dark appearance modes. For Calendar, the whole widget changes between light and dark appearances just like its app does. For Podcasts, since the whole background is a gradient it already works nicely in both modes and for Notes, it has a mix of bold colors and white so we adopt the note contents for the darkened appearance mode to reflect how the note appears in the app. Every widget must provide a placeholder which is shown when the system has no way of displaying your widget's data. You should show the base graphical elements in this state and block in areas of text where your information is shown in the layout.

This way, when the system goes from place holder to the proper data the content can replace the static elements without having the layout or color shift around. The last thing we want to go over are a handful of tips to keep in mind when you're designing your widgets. You should only use a logo in your widget if your app is an aggregator of content from different sources like these examples here. To keep this treatment consistent across different widgets, your logo should always sit in the top right corner. Avoid using word marks in the space and anywhere else in your widget. Another thing to avoid is putting your app icon in your widget. Also avoid putting your app name in your widget as it will feel redundant with the app label that already appears underneath of it on the home screen. Don't put text that instructs a user or talks to them, instead, if you feel there's something important to communicate do it in a graphical way. When displaying chronological information on a Widget, don't use language like "last updated" or "last checked".

We've talked through where to start with your idea, how you should surface the most useful information from your app and all the details about how to bring your ideas to life. We're really excited to see what experiences you create with the new widget system in iOS 14.