Notification Center Widgets

A widget is an extension that displays a small amount of timely, useful information or app-specific functionality in the Today pane of Notification Center. For example, the Stocks widget lets you monitor the performance of your favorite stocks and the iTunes widget lets you view and control the currently playing track. Widgets are highly customizable and can contain buttons, text, layout customizations, images, and more.

Design a glanceable experience. People use widgets to get brief updates and perform very simple tasks, so it’s essential to deliver the right amount of information and interactivity. Wherever possible, provide tasks that can be completed in a single step. Panning and scrolling within widgets isn’t supported.

Show content quickly. People spend very little time looking at widgets and shouldn’t need to wait for content to load. Cache information locally so you can always show recent information while getting updates.

Provide ample margins and padding. Avoid extending content to the edges of a widget. In general, use the default margins provided by Notification Center. Content tends to work well when lined up with the center of your app icon at the top of the widget. If your app offers a grid-style layout, make sure you provide sufficient and equal padding between grid items. If possible, limit grids of icons and buttons to four per row.

Be adaptable. The height and information displayed by a widget depends on whether it’s collapsed or expanded (not all widgets support expansion). A collapsed widget is the height of roughly five table rows. An expanded widget is ideally no taller than the height of the screen. When collapsed, a widget should show essential information that can stand alone. When expanded, a widget should show additional information that enhances the primary information. The Weather widget, for example, shows the current weather conditions when collapsed, but adds the hourly and weekly forecast when expanded. If you need a table view in your widget, be sure to use a fixed-size table view (that is, a table view that doesn’t include a scroll view).

Avoid customizing the background of a widget. The light, blurred widget background provided by the system is designed for consistency and legibility. Use it whenever possible.

In general, use the system font and system colors for text. The system font is designed for legibility. Choose colors that reflect the semantic meaning of your text, such as labelColor for primary text and secondaryLabelColor for less important text. When you use these system-provided colors, your text automatically adopts the appropriate appearance. See Color and Translucency.

When appropriate, let people jump to your app to do more. Your widget should operate independently from your app. However, if people might occasionally need to do more than what your widget offers, make it easy to do so. Don’t include an Open App button that takes space away from your content. Instead, let people click the content itself to see or edit it in your app. In the Calendar widget, for example, you can click an event to open it in the Calendar app. Never use your widget to open other apps.

Pick a good widget name. An app icon and a title appear above each widget’s content. In general, your widget’s name should match your app’s name. If your app offers multiple widgets, consider using your app name for the primary one and clear, concise names for the others. If you use a custom title, consider prefixing it with your app name. The inclusion of your app name instills confidence that the widget is in fact provided by your app.

Let people know when authentication adds value. If your widget provides additional functionality when someone is logged into your app, make sure people know about this. For example, an app that shows upcoming reservations might include a message that says “Sign into the app to view your reservations.” when people aren’t logged in.

Whenever possible, let people configure your widget in Notification Center. Forcing people to leave Notification Center to configure a widget creates a disconnected experience. For example, the Stocks widget includes an edit mode that lets people quickly find and add market symbols they want to track. An Info button is automatically added into the header area of an editable widget. When this button is clicked, the widget’s interface changes to present any available editing options and the Info button changes to a Done button.

For developer guidance, see App Extension Programming Guide.