Designing Widgets for iOS 14 and Android
Tammy Slaughter wrote this article
With widgets front and center on iOS 14’s home screen, ensuring a functional, seamless design is a necessity.
Previously, the iOS interface itself seemed to treat widgets as almost “out of sight, out of mind,” leaving them where they would often languish in Today View.
But those days are gone (except for iPad users for now, it would seem).
Now, users can drag their most oft-used widgets to the home screen for easier access. What’s more, this update has given users all-new customization abilities to alter any widget (and app icon’s) appearance.
On this latest release, Apple says:
“The information your widget chooses to surface can be more up to date and contextual than ever. Drag and drop editing gives people direct control over their widgets in an intuitive and flexible way.”
Apple revealed the latest guidelines for widgets in iOS 14 on their website and at this year’s WWDC back in June.
We’ll explore these, and other best practices when it comes to designing widgets for iOS and Android, in this post.
Getting Started With Widgets
When designing widgets in general, you need to focus on two things:
1. Ideation: The app’s main idea, and what specifically to add to the widget’s design
2. Creation: Implementation of your app idea on a much smaller scale
In the ideation phase, the first thing you need to discern is your app’s guiding principals. Essentially, what keeps users coming back, continuing to use your app?
Perhaps it’s a sentimental connection, a positive feeling your app helps illicit in users.
Or, maybe your app supplies users the information they need, right in the moment they need it.
Finally, maybe it’s all about context. Your app is there to predict needs and provide a specialized service.
Once you’ve quantified your app’s guiding principles, informing the overall user experience, you have a jumping off point to start planning the design and functionality of your widget.
Remember, you don’t want to create a widget who’s sole purpose is launching your app. Your widget should bring some of your app’s value right to each user’s home screen.
Right-Sizing Your Widgets
Widgets for the iPhone come in three sizes: Small, Medium, and Large.
By comparison, widgets for Android devices are completely customizable, with no set standard.
With many apps today designed to perform cross-platform, this typically means one ends up adhering to Apple’s standards across the board.
This helps to create a more seamless brand experience overall, and less time spent in design.
At the same time, if a widget has been designed and built for multiple sizes, users are able to select which size to pin to their home screen with iOS 14.
For Android users, a long press and release will set any resizable widgets into resize mode. Android developers can also choose to disallow resizing of their widgets once downloaded if doing so negatively impacts the user experience.
However, each widget size should be thoughtfully designed to display the right content.
– For Small Widgets: Equivalent to the size of four icons, widgets this size should only contain the most useful pieces of information, likely a single, targeted action taken from the app. Widgets like this function beautifully using Fill style design as recommended by Apple, which supports one tap target.
– For Medium and Large Widgets: Equivalent to the size of eight and sixteen icons respectively, widgets of this size can support more tap targets (2-3 max), and hold more information overall. The Cell or Content styles recommended by Apple work best here.
Rule of thumb? Providing different widget sizes is great, but only when there’s clear value provided in doing so.
It should go without saying that adding more information means using a larger widget format. Larger widget formats can also support more tap points with less usability errors.
If you choose to design your widget for multiple size formats, you should also adapt the content featured by prioritizing the most important info.
On the user side, they can use multiple versions of the same widget in the same or multiple sizes, and stack multiple versions of the same widgets on top of each other with iOS14.
The android standard experience features a customizable screen space of 568 by 344 px with a grid of 5 by 5 for apps or widgets to be installed. This grid is not a square, like on Apple, but somewhat rectangular and widgets are made to fit within a 16px distance of each other.
Entering The Widget Gold Rush
Widget customization options have existed on Android devices for awhile now, but their sudden arrival to the iPhone has created a new kind of gold rush, with users crafting them into custom layouts that can be tweaked, shared, and even sold.
Indeed, customizing one’s iPhone home screen is a new art form, with users everywhere showing off their widget mods for clout on TikTok and Instagram.
Utility app Widgetsmith has been the most popular option users download to help them perfect their craft, and sharing home screen designs and showcasing the skills it takes to create them has become an internet sensation.Going into 2021, there is a huge market for app developers to make it quicker and easier for users to customize their phones aesthetic, especially as more people buy and receive Apple products this holiday season. Click To Tweet
Conversely, many custom widgets are ready-made for download via Google Play.
Widgets reached peek popularity for Android users back in 2017, and today you can find any number of these available with customization options built-in to use at a moment’s notice (no lengthy editing process required).
Most Android users today say they barely pay attention to them, however.
Quick List of Widget Design Do’s and Don’t
– Avoid Using the App Logo/ Icon: Space is limited, and convenient functionality is more important.
– Use Color Wisely: Bold colors are attractive, but they should’t abstract the user from reading the widget content at a glance. Bold and bright colors are recommended by Apple to capture attention and make information and visualizations easy to absorb, however. Color choice is where your brand can truly shine in its smaller widget form.
– Support Dark Mode: This is a given today as increasingly more apps release ‘Dark Mode’ for greater accessibility. Be sure to add color variants to allow your widget to support Dark Mode.
– Limit Use of Fonts: Consider using the SF Pro font (the same one featured on Apple’s iOS interface) to make the widget feel consistent with other widgets and icons on the home screen. Conversely, Android devices default font is Roboto.
Many apps have already jumped at the opportunity to integrate their app’s functionality a bit closer with a user’s daily usage. Here’s one great example of all-new widget functionality users can now rely on instead of Apple’s built-in tools:
ICYMI the iOS14 update lets iPhone/iPad users set DuckDuckGo as their default browser & enable our home screen search widgets that allow you to search privately right from your home screen!
— DuckDuckGo (@DuckDuckGo) October 4, 2020
Thanks to the popularity (and scalability) of cross-platform apps, we’re betting on Apple’s new guidelines regarding widgets having a positive effect on Android’s widget eco-system, too.
With iOS 14’s new smart stack built-in to give users even more accessibility to their favorite apps and widgets, it’s safe to assume the best is yet to come when it comes to widgets.
About ChopDawg.com: Since 2009, we have helped create 350+ next-generation apps for startups, Fortune 500s, growing businesses, and non-profits from around the globe. Think Partner, Not Agency.
Follow us on Twitter
Like us on Facebook
Double tap us at Instagram
Connect with us on LinkedIn
Find us on social at #MakeItAppn®