Another way you can extend your app beyond your actual app is the widgets. A widget is an extension that displays a small amount of timely, useful information or app specific functionality. For example, the US widget shows top headlines. calendar provides two widgets, one that shows today's events, and one that shows what's up next. Notes lets you preview recent notes and quickly create new notes reminders, folders and drawings. widgets are highly customizable, and can contain buttons, text layout, customizations, images, and more.
Widgets appear above the quick action least when you apply pressure to an app icon or the homescreen using 3d touch. People also add the widgets they care about to the search screen, which is accessed by swiping to the right on the homescreen and the lockscreen. Your goal should be to design a widget that people want To add to the search screen. Now let's go over the guidelines. design and create 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 tap. panning and scrolling within widgets isn't supported. Also 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 the widget. In general, provide a margin of at least a few pixels between each edge and the content. Use the app icon at the top of your widget for alignment guidance. Content tends to work well when lined up with the center of this icon. If your app offers a grid style layout, make sure you provide sufficient and equal padding between grid items is possible limit grids of icons and buttons to four per roll.
The height and information displayed by a widget depends on whether it's collapsed or expanded. Although not all widgets support expansion. A collapsed widget is the height of roughly two and a half table rows. And expanded widget is ideally no taller than the height of the screen. The quick action list only shows widgets in a collapsed state When collapsed, a widget shows essential information that can stand alone. When expanded, a widget shows additional information that enhances the primary information.
The weather widget, for example, shows the current weather conditions when collapsed, but as the hourly forecast when expanded, avoid customizing the background of a widget. The light colored widget background provided by the system is designed for consistency and eligibility. Use it whenever possible. Never use a photo as a background, as it may clash with lock and homescreen wallpaper. In general, use the system font in black or dark gray for text. The system font is designed for legibility and dark colors work well with the standard widget background when appropriate, let people jump to get up 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, people tap the content itself to see or edit it in your app. In the calendar widget, for example, you can tap 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 the title appear above each widgets content. In general, your widgets name should match your apps name. If your app offers multiple widgets, consider using your app name for the primary one and clear concise names for the others. Use Custom titles, considerations fixing them with your app name. For example, the maps widget for showing nearby locations is titled maps nearby. 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, a widget that shows upcoming reservations might include a message that says sign into the app to view your reservations when people aren't logged in. Choose a widget for the quick action list. If your app has multiple widgets, be quanta appear in the quick action menu that appears when someone applies pressure to your app icon on the home screen using 3d touch. We discussed this before.