Apple’s iOS 14 introduced widgets on the home screen, creating a whole new market of opportunity for user experience (UX) designers. iPhone widget design is an integral part of any optimized iOS design. If there is a use case, then an iPhone widget should be heavily considered in order to stay competitive in the marketplace. Since its launch, iOS widget design has become a skill set by any seasoned designer.
Previously, widgets solely lived on the Today View in iOS. Since iOS 14, users are now able to add widgets directly to the home screen. Widgets can be mixed in with apps and other home screen elements. Integrating widgets with apps on a home screen allows the user to view and access app content without the need to navigate to another page.
What are widgets?
Widgets, by definition, are small app instances that update in the background and keep up-to-date information accessible directly from your home screen. Widgets currently are designed in three standard iOS sizes: small, medium, and large. Each size suits a particular use case, as developers and designers optimize the amount of information showcased in each size.
The challenge for designers is to decide which features to include in a widget and which to leave in the app. This is where user research comes into play, as it helps designers determine what information users want to have quick access to via a home screen widget. As you complete your research, here are six iOS 14 widget design tips to keep in mind.
iPhone laying on a table upright showing the screen made up of app icons and widgets. Image credit Adobe.1. Keep it focused
Widget iPhone designs must focus on the core idea and main content of your app. The widget should automatically update in the background throughout the day. As the designer, it is up to us to determine how frequently the widget should update to keep the content and data updated and fresh. Users will prioritize your app on their home screen if you present them with new, relevant content each time they see it.
2. Choose the correct size
As mentioned earlier, iPhone widget design comes in three sizes: small, medium, and large. You can design your widget for one of or all of these sizes, but it’s up to the designer to decide which sizes to include in their product. For multiple sizes, allow the user to choose which size suits their needs and available real estate on their home screen. As a rule of thumb, large widgets allow you to show more data while small widgets allow for the opposite. Depending on your use case and the amount of data displayed, choose the best size accordingly. There are many user interface (UI) kits to help you get started. Large widgets are great for data visualization and other robust content. Small widgets tend to have content that needs to be digested in a glance and is extremely focused.
Three sizes for widgets: small, medium, and large. Image credit UXDesign.cc.3. Address friction points
Make sure to consider any necessary setup that might be required to make a widget’s information relevant and useful. For example, an email widget will need the user to sign in first, while a weather app will require them to specify a location first. Design this setup experience as easy and lightweight as possible. For example, if login is required, have the widget prompt the user to log in by launching the app’s login flow when tapped.
A widget with a prompt for the user to log in. Image credit Willow Tree Apps.4. Include deep linking
Tapping areas of your widget should deep link the user into the applicable area of the app. The information launched should reflect the information displayed on the widget, linking the two experiences seamlessly together. The larger the widget, the more tap areas you can define. Maximizing the use of possible tap areas will help streamline users to the information they are looking for. Be thoughtful where your tap areas are, making sure they are not too close, as this causes usability issues. Your users will thank you when they realize they can access various areas of your app directly from the widget.
A large widget with three areas of deep links highlighted. Image credit Willow Tree Apps.5. Branding matters
Make sure to bring out your brand and the spirit of your app through the widget’s visuals and colors. Choose colors and elements that already exist in your design system to link your widget to your brand. Typically, the brighter the colors, the more attention that is captured by the users. Consider adding variants to allow your widgets to be more compatible with Dark Mode. When choosing a font, stray away from custom fonts in your widget as recommended by Apple. Using the system font SF Pro for text helps create a cohesive experience with other elements on the home screen.
6. Leverage Smart Stacks to your advantage
Smart Stacks are groups of widgets the user can flip through from one location on their home screen. By using a Smart Stack, you can keep multiple widgets in one location. There is an extremely useful Smart Stack UI kit from Howard Pinsky to help you get started.
The process of editing a stack on a home screen. Image credit iPhone Tricks.Examples of the best iPhone widget designs
Now that we understand how to design iPhone widgets for iOS 14, let’s see some examples.
Fantastical
Fantastical has become the go-to calendar app for a number of reasons. It is one of the most extensive lists available right now and has quickly become a fan favorite. It provides a clear view of the upcoming events on your calendar, as well as the weather, date, and other pertinent information. If you are looking for a cool iPhone iOS 14 widget design, check out their small icon Fantastical Widget. It is a giant calendar card on your home screen that looks quite appealing.
iPhone screenshots of the Fantastical Widget. Image credit The Sweet Setup.Widgetsmith
Widgetsmith was one of the first iOS widgets to go viral since its launch. Widgetsmith allows you to create your own custom widgets and display things like date, weather, astronomy readings, photos, and more. You can even customize the widgets to switch during the day. For example, maybe you want to see the weather when you wake up, but your event list through the day.
iPhone screenshots of Widgetsmith. Image credit Tools and Toys.HEY Email
HEY Email is a great widget best used inside of its own Smart Stack. It is divided into three main buckets for your email: the Imbox, the Feed, and the Paper Trail. Combining these three into a Smart Stack allows you to quickly flip through each, glancing for new, pertinent information.
iPhone screenshots of HEY Email. Image credit The Sweet Setup.Sticky Widgets
As the name suggests, Sticky Widgets are the widget representation of a sticky note. Fun, playful, and easy to use, they have been heavily leaned upon by users since their release. If you are like me, whenever I have a physical sticky note, I either misplace it or can’t find it when I need it. With Sticky Widgets, I never have to worry about misplacing my sticky note or it losing its sticking capabilities.
This widget lives on the home screen and when tapped, it opens the app and allows you to type in a simple note. Once the app is closed, the widget on your home screen updates with whatever information you wrote. You can also personalize the notes by adjusting the font or color.
iPhone screenshots of Sticky Widgets. Image credit Mac Stories.Shortcuts
Shortcuts is another widget, like Widgetsmith, that became popular due to its customizability factor. This widget provides one-touch access to any chosen shortcut directly from your home screen. The medium and large Shortcuts widgets provide the user with a list of widgets from a specified folder in the Shortcuts app. This allows the user to have instant access to specific workflows directly from their home screen.
iPhone screenshots of the Shortcuts Widget. Image credit The Sweet Setup.Create your own iOS 14 widgets with Adobe XD
Now that you know what to consider when designing your own iOS 14 widgets, you are empowered to jump on your favorite design software and create widget experiences that will take your product to the next level. When in doubt with your widget design, bring it back to your users to validate your decisions before bringing them to market. Once validated, sit back and enjoy the positive reaction by your users.