π 2020.7.2 (THU)
π WWDC2020 | Session : 10103 | Category : Frameworks
π https://developer.apple.com/videos/play/wwdc2020/10103/
π Widgets elevate timely information from your app to primary locations on iPhone, iPad and Mac. Discover the keys to designing glanceable widgets, developing a strong widget idea, and clearly communicating with content, color, sizing, layout, and typography. If you'd like to learn more about the technical implementation for adding widgets into your app, check out "Get Started with WidgetKit" and our three-part code-along series.
In iOS 14, the entire widget has been completely redesigned. At its foundation is an entirely new visual aesthetic, and powerful new capabilities.
One of the things we're really excited about is that people can now add widgets directly onto their home screen pages.
Another feature 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.
When designing a widget there are 2 main parts of process to focus on, Ideation and Creation.
- Personal 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
- Informational 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.
- Contextual Context helps surface the right information at the right moment and allows for better experience that at its best feels like it's magically prediction someone's need and next steps.
Calendar
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 ever and there's no more events, rather than just showing a blank widget when possible we instead start telling your about what is coming up next and happening in your day tomorrow.
Widgets are dynamic and informative, and contextual details make the experience feel very personal and adaptive to person's need.
In iOS 14, your widgets will jiggle just like apps do in edit mode and you can tap on a widget 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 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.
Most of the new widgets in iOS support editing like this and it's a great experience to add and choose different reminders list, stocks, notes and world clocks.
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.
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.
- All about the most useful piece of content from your app in a size that constraints how much content can actually fit in it.
- Small widget supports a single tap target. Tapping it should deep link to the content that's on the widget.
Ex) 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.
Ex) 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.
- 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
Ex) News
 |
|
Tapping either article brings you directly to the News story you tapped on.
 |
 |
 |
- 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.
- Content style is great for when you're selecting a piece of content that lives un-contained in a widget.
The most important part about making your widget come to life is what lives in it. You should think about content and personality when you're designing your widget.
" What are people looking for when they launch my app?"
Also find distinct items of information that people find useful in your app.
When designing 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 come to laying out content in your widget, there were two patterns we found when designing our widget set.
- Layout that expands across all three sizes. like Weather, where we add additional information across each size.
- Layout that is completely unique across each size. like News, 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 large 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.
We recommend only including a max of four pieces of information in the small widget size.
Across the different small, medium and large sizes, there were several common layout patterns that emerged.
There are mix of single item and denser multi-item summary layouts.
These patterns serves 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 layout 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 widget corner radius.
Since the widgets corner radius changes across different device sizes, we provide a SwiftUI container that can assign to shapes in your widget that will make them concentric with the widgets 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.
Every widget must provide a placeholder which is shown when the system has no way of displaying your widgets 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 form place holder to the proper data, the content can replace the static elements without having the layout or color shift around.
You should only use logo in your widget if your app is an aggregator of content from different sources.
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 import 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".