Product Design

A Designer's Perspective: How to Create Useful iOS 14 Widgets

Image Source: Apple

What’s New with Widgets in iOS 14

Up to this point, widgets only have existed in the Today View on iPhones. In iOS 14, widgets will be available to add directly to the home screen, mixed in with apps and other home screen elements. On the iPad, widgets will continue to live in the Today View side panel.

Rather than being siloed on a separate page of the device, widgets on the home screen allow users to instantly view and access app content. iOS 14 widgets offer users another way they can personalize their devices and put important information and key functionality surfaced from apps at their fingertips.

How to Design a Useful Widget

Widgets can be added to any home screen pages on user’s phones, but there is still only so much space for so many widgets. To help ensure your app’s widget gets a top spot on user’s devices, here are some tips for designing a useful and high-quality widget.

1. Keep it Focused and Dynamic

A widget should be focused on the core idea and main content of your app. Widget content should be dynamic, changing throughout the day. Consider how frequently your widget should update information to keep content and data fresh. Users will be more likely to prioritize your widget on their device’s home page if it displays relevant, new content each time they see it.

2. Consider Sizing Options

widgets image 1

Widgets come in three sizes: small, medium, and large. You can design your widget to be any or all of these sizes. If a widget has been designed and built for multiple sizes, users can select which size to display on their home screen. Each size should be thoughtfully designed to display the right content and visual for the widget size. Larger widgets allow you to show more data and information, so consider utilizing the space for data visualizations and other more robust content or delightful elements. Small widget content needs to be glanceable and extremely focused.

3. Address Possible Friction Points

widgets image 2

Setup on the user’s end might be required to make a widget’s information relevant and useful to the user. For a weather app, users would need to specify a location to receive weather information for. Keep this setup experience lightweight and easy. If your widget has additional functionality when users are authenticated, add brief messaging on the widget that helps them understand they need to log in to see personalized information in the widget. When a user taps on your widget with this messaging, they can be taken directly into your app’s login flow.

4. Utilize Deep Linking

widgets image 3

Tapping on the widget deep-links into the app. It should launch into content and actions that reflect the information displayed in the widget. Medium and large widgets can have multiple tap areas defined. Making use of different tap areas will help get users to the information they’re looking for faster from your widget. Be thoughtful about how many interactive elements are in the widget and don’t put tap areas too close together to avoid usability errors.

5. Bring out the spirit of your app and brand

widgets 4

Help your widget standout on screen and make information easy to parse through it’s visual design. Evoke the spirit of your app and brand through the widget’s visuals and colors. Bold and bright colors are recommended by Apple to capture attention and make information and visualizations easy to quickly absorb. Make sure to add color variants in order for your widget to support Dark Mode. If your app uses a custom font, Apple recommends using it sparingly within the widget. Using the system font SF Pro for text within the widget can help ensure the widget looks cohesive with other elements on the home screen.

divider 600

By thinking about the type of content displayed and visual design of your widget, coordinating content and visuals to suit each widget size, considering which elements should be tappable and ensure they deep-link to relevant pages of the app, and balancing a lightweight and personalized experience, widgets can be created that are a useful addition to user’s home screens.

Learn more about Product Design experience and practices at WillowTree

View Our Design Services

Privacy and iOS 14: 4 Key Steps to Build Trust with Your Users

Users are increasingly worried about apps using their personal information in ways...

Read the article