How to design an impactful widget on iOS 14

Glovory Design
7 min readMar 12, 2021
Illustration by Rafika Aulia

Apple has introduced its newest operating system while releasing its latest products at WWDC virtual event in September 2020, just a few months ago. Yap, they introduced iOS 14 for the worldwide iPhone and iPad users. The newest operating system brings some fresh air to their users including the app widget that now can be shown on the home screen. Unlike the previous operating system version that can only display the widget on today’s view, now the users can place the widget on their home screen alongside their apps. Apple may seem to be late about putting widget feature than Android has done it years ago, but in fact, Apple did listen to their users recently to add this feature after settled it with more precisely appealing and have better functionality for their users. According to eyerys review, Android may have it years ago but they have a lack of development through the feature which caused it began to fall in the interest of Android widgets on their users. Apple tried to simplify and make it a better feature before they releasing it in iOS 14, iPad OS 14, and macOS 11. It makes the feature had a more appealing sense in the user’s experience while using it.

Widget features constantly change the way iOS users can gain experience on their devices. Apple had an annual event to upgrade their operating system by adding more features that can help their users on their daily basis. By having widgets on the home screen, now we can have a glance at information that appears on the home screen without open the app itself. It eases users to see any points they may need without spending more time to fully-access the app. Take an example when you are in a hurry for a meeting while on the way to it, you can easily remember the points of meeting material just by seeing at the note widget you already wrote before without open the app. Or you can also have a piece of quick information about the weather with a tiny box of widget information about specific area weather and today’s forecast at a glance. It just simplified your interaction and the information you needed from the device.

Photo by Omid Armin on Unsplash

Providing a widget feature for an iOS app is like giving shortcut access to key points or information to the user. Can it elevate the content of the App? Bring more usability? Better home screen layout? Or it just sits right there without any purpose? It needs to be precisely designed so the users won’t lose their attention from using the widget. If the widget had a lack of key points the users may be left it behind as they didn’t find any helpful feature given by it.

There are a lot of possibilities that can be filled into a widget. It depends on what app do you really work on. But you need to know what could be applied and avoided during designing an app widget on iOS. Here I want to share with you some tips that could help you to make an impactful widget design.

  1. Focus on the Idea
Photo by Kelly Sikkema on Unsplash

The main idea of the widget feature is to provide users a piece of useful information at a glance of the eye. So you need to make a widget with a more simplified concept that allows the user to get what they needed effortlessly. So, getting your scope at giving a piece of specific and personally related information in the widget is the most crucial step in your design thinking process.

The design thinking process you apply in the widget design is similar to the other digital production process. But in this case, you can simplify it into ideate the design you want to apply as a problem-solving process to provide a simple useful information for the user. Then define what kind of related and useful information may need for this simple feature. For example, if you were making a widget for a fitness app, you may put the most significant information that the user needs the most from that app. It could be the rate of calories burning during the workout, so you can provide numbers of total calories that burned with a little information of additional goals beneath it. This tiny glance information could ease the user to continue their workout session without getting much distraction to fully open the whole app.

As the amount of information given can fulfill the need of the user, the widget could reach its functionality as it is used to be. It could emerge the user’s subconscious to kept their widget as the helpful platform. They will make a new habit to gain information from the widget itself. It means you have successfully brought the widget main ideation from the app to the user.

2. Sizing

Small Widget
Medium Widget
Large Widget (source: Apple)

There is three iOS widget size based on Apple design guidelines. They are small, medium. and large widget size option that the user could choose to put on their home screen. So designers need to know these three types of widget design before creating one of them. Both of these three widget sizes deliver different values and amounts of information given to the user. These sizes can be used for separate purposes and functions based on the app itself.

The small-sized widget may deliver a tiny amount of information that represents the key points of the app. It could be a little important content or notification shown within the small widget. When middle-sized and large widget could deliver multiple contents that the user needs without spoiling too much and unnecessary information.

3. Lookout for a better User Experience

Photo by Rob Hampson on Unsplash

A good design is a design that attractive yet still had functionality as it is used to be. Designing a widget needs to be implemented what really matters for the user at first. Is it just for giving a glance at information that needed the most? or it also could be brought any further interaction that could be done by the user to take more action from the widget to the app. Consider the friction and flow of buttons or any other interaction design from the widget until it reaches the original app.

The configuration in the widget should be concerned by the designers as the user commonly wants to rearrange the widget appearance and functionality based on their personalities. By making a customizable widget, users are likely to have the widget to be more “theirs” that fitted with their needs. Personalization may be brought a better user experience for them, thus why the design has given should represent how the app actually was to behave with the users.

4. Keep users attention

Vishnu Prasad on Dribbble

To keep user attention toward the widget you design for them, you need to choose which kind of content that is delivered throughout the widget. Users may be bored with a widget that repetitively showing the same content/information again and again. This is why updating the content in the widget is crucial to maintain their interest in the widget usage. Imagine having a browser widget that shown news that never changed in weeks. Most of the users may be thrown away that non-useful widget from their home screen already. If you want them to stay, make the widget contents stay updated with the latest things based on their functionality. But some widget functionality doesn’t need any updated content, just like the music player widget that shows the users the last song they already played before.

Keeping user attention is also needed when you make the visual appearance of the widget itself. You need to keep the widget design in-line with the original app design guidelines. From the colors, tone, style, and font used in the original app. As Apple had strict guidelines for designing in their product environment, you also need a deep understanding of the do and don’ts of it. The widget design you provided must be aligned with the Apple standard so it keeps the design consistent and still appealing for most iOS users.

There are vast creative ways to create an impactful widget on iOS 14. If you want to explore more about designing a mobile app and its peripherals, you can visit our website at glovory.com to collaborate or send us an email to info@glovory.com for further detailed information.

Contributor: Abdul Hamid

--

--

Glovory Design

A global brand and experience digital product design agency that builds digital products to move at the speed of culture.