iOS 14 Widgets- Possibilities, design good practices and limitations
Since iOS 14, widgets finally allow users to customize (a little) their iPhone Home screens.
Through this series of articles focused on widgets, we’ll present to you all the possibilities they provide as well as the best practices or limitations that they impose to us.
Summary
- Possibilities, design good practices and limitations
- Xcode 12 generated widget code overview
- Create a basic widget — Coming soon
- Create an advanced widget — Coming soon
What are widgets for?
It’s important to understand what purpose do widgets serve.
In a general manner, widgets are meant to give the user a snippet of information from your app (partially because of their rather small size, they can only contain so many things). It’s a bit of personally relevant content that allows them not to open the app.
For example, the weather app’s widget usually displays today’s weather only, in the location selected within the app. By showing this small bit of information, the users don’t have to open the app to find out what the weather is: in one glance, they know if they should take an umbrella or not.
That’s what a widget should do: display a bit of useful content that can be absorbed easily, in a glance.
With iOS, widgets come in 3 sizes: small (taking up the space of 2x2 app icons), medium (2x4 app icons) and large (4x4app icons). For the first time, they can live within the user’s home screen. This allows another level of customization for the users, allowing them to choose what piece of information they want to see on the get-go. Even better, with Smart stacks and Siri suggestions, the widgets displayed can vary depending on the moment of the day, just so that the users get the right information at the right moment. Early morning ? Let’s show you the weather. Work time ? Maybe your calendar and appointments could be useful to you.
How does it work?
The whole mechanism of widgets is based on time management (and sometimes the goodwill of the system).
The developers define several states as well as the next display steps and give them dates (dates when the system should refresh the widget to display new informations). As it is not always possible to predict when the widget should refresh, it is also possible to force the refresh of it directly from the app.
Ultimately, a widget is just one (or more) pieces of information to display on a certain date for a certain period of time. It will adapt its display according to the data it receives from the application assigned to it.
Widgets design good practices
Content
- Choosing and sticking to one idea: As stated earlier, widgets shouldn’t display too many information at once. First, because of their limited size. Second, because it should display information that can be digested quickly. Third, because it is meant to highlight a key feature of your app. With this in mind, sticking to one idea will help you create a widget that gives meaningful content to the user.
- Dynamic content: Widgets show information relevant to the users. They’ll be more likely to use it and place it on their home screen if it the content shown changes depending on the time of the day, or current events… It keeps the information interesting and delightful. Be one step ahead of the users, and give them the right information at the right moment.
- Only use different sizes if it brings value: You don’t have to make your widget available in every size. Take in consideration the degree of focus every size offers: the small widget has a greater content focus than the large widget. Maybe your concept works best with two small widgets, or maybe a medium and a large one are better.
- Pay attention to your micro-copy: Again, since you can only display so much, your micro-copy should be well written and thought. In very few words, you have to convey a clear message around your concept. If there’s an error, they have to understand what to do immediately, etc.
Visual identity and design
This one can be tricky as multiple parameters come to play.
- Fonts: If your identity uses particular fonts, consider using Apple SF fonts for your widget. As it will be placed on the users home screens, it will visually fit best if it uses the same font as the rest of the interface. With that said, custom fonts are ok, but have to be used sparingly.
- Colors: Colors are okay to use! Just take in consideration the fact that bold colors can take the attention away from the message you’re trying to convey. Try to use them as clues of your identity, or to drag the eyes of the users to the data you’re showing them.
- Identity: As the name of your app will be displayed below your widget, you don’t have to include it within the design. Instead, use color clues or a small version of your logo.
On a broader spectrum…
- Make sure it’s legible: This goes along with everything that has been said already, but when designing your widget, you have to find balance with content. It should show enough content so that it doesn’t look visually empty or useless, but not so much content that it looks too busy and isn’t easily readable. Again, users should understand the information given to them in a glance. Margins play a huge role in this: Apple suggests using standard 16 pt margins, allowing tight 8 px margins to help make graphics that contain a lot of information easier for people to read.
- Font sizes: Consider using sizes included between 12 pt and 15 pt. If displaying data or highlighting a very short amount of characters, you can up the size to about 30 pt.
- Dark Mode: Consider supporting dark mode, whether or not your app supports it. This will avoid any kind of friction with your user.
Usage
- Deep-linking and tap targets: Your widget can and should link to parts of your apps (it shouldn’t simply serve the purpose of launching your app). A small widget can display only one tap target, but medium and large widgets can display more. Although you could fill the surface with different tap targets, avoid offering too many, so that the users can tap the one they want with no trouble.
- Friction points: List every pain point that your user could encounter while using your widget: loss of connection, need of authentication, no content to display… and prepare your design, your copy accordingly, just so that the user knows what is happening and what to do. This includes designing a placeholder for your widget, for example.
What are widgets limitations?
Widgets are very useful for quickly showing information to the user and adding some quick actions to that information, but they also have their limitations:
- A widget is first of all linked to an application; it is not possible to create a widget without a parent application.
- Each touch on the widget will necessarily open the application, no matter what. However, it is possible to redirect the user in the application via deeplinks.
- The widget cannot ask for authorization from the user (like bluetooth for example). In this kind of case, it will be up to the application to manage all the associated mechanism and to request the widget refresh.
- The size of a widget cannot be changed; it is not possible to scroll inside them for example.
Keep in mind that widgets are made primarily for displaying data, nothing more.
Conclusion
In very few words: Keep it simple.
A widget is a mean to highlight key content of your app without having to actually open the app. It should display clear information that can be digested in a glance and details that can be read with a longer look. Design wise, it means a somewhat minimalist design to push your content forward without creating too much noise on the screen. It means crafting a meaningful experience for your users, allowing them to customize their device further with your app and what it has to offer.
🎁 Bonus
Here you can find a Sketch file with some useful templates for iOS 14 widget.
Feel free to share it!
What’s next?
See Xcode 12 generated widget code overview, Create a basic widget (Coming soon) or Create an advanced widget (Coming soon) if you want to learn more about Widgets.
And don’t forget to “clap” this article if you like it and want to see more content like this! 👏
Thanks for reading,
Authors: Charlotte Jacquot (UI/UX) & Alexandre Cools (iOS Developer)
Lunabee Studio is a company creating premium mobile Apps in the Alps. We love mobile UX, iOS and Android. Follow us to keep up with our latest publications and news.
