Widgets in iOS 14

The new operating system by Apple iOS 14 was announced at WWDC 2020 and introduced to us developers something we can take advantage of: widgets! In several ways, the idea is similar to Android Widgets, they are a convenient way to access an app’s information at a glance. This new feature allows us to create more valuable content and helps in the creation of engaging products. 

What is a Widget? 

Widget is a component that can be used to display relevant information where people can see it at a glance on iPhone, iPad, and Mac. Can also help people customize their iPhone Home screens in a unique way. Something worth noting in the WWDC talk is that the presenter specifically says that widgets are not mini apps. It’s just the content on the home screen, nothing more. If the user has to interact with a button or other component on the widget, the widget is likely not glanceable enough. 

Why they are important? 

We’ve got a lot of apps on our devices. Widgets are a new way to stand out, to get our apps noticed, and to maintain the interest of our users. 

There are three important things about a widget. 

Glanceable 

Usually, many users spend some time on the home screen until the desired application is opened, so a well-built widget doesn’t interrupt or distract the user but gives them the relevant information. 

The stock app is a great example of how to update the user on real-time price changes. It takes less than a second for the user to consume the contents of the widget and extract meaningful information. The content is the focus. 

Relevant content 

The widget in the apple standards should display relevant information to the user with minimal user interaction. Keeping the same example, the stock app is constantly updated to show the most relevant changes based on the current time. 

If the user wants to see more detailed information, they will have to click on the widget and go to the app. Just to emphasize, widgets are not mini-apps, the purpose of which is to provide relevant information quickly without requiring interaction. 

Personalized for users 

Widgets should be customized to the maximum. A very simple example would also be an investment application that only shows stocks for users who invest in them. This widget would be much less useful if it showed an investment of X to a person who had invested in Y. Aside from just allowing the user to set their investments, you can go a step further allow the user to customize the size of the widget to display more information if they choose to do so. Users can choose to use a larger widget if it is important for them to track more invested shares.  The key here is reachability. 

Technical aspects

Before building a widget, remember that there are some limitations on-screen and widget functionality compared to normal applications. You can not use ScrollViews, and you must decide how many UI elements will be displayed according to the customization of the user. 

The widget design is divided into three sizes: small system, medium system, and large system. You can support all three of them or stick with just one size by defining this option in your code. 

Split into files, sharing the code between the widget and the application code itself can lead to unnecessary additions to your widget. So make sure you use the shared class between the two targets (widget extension and parent app). 

Try to conform to the SOLID principles for modular architecture. In my opinion, one class was dependent on another class, and that class in turn depended on some other class. As a result, the code keeps giving compile errors because those classes are not shared with the widget extension. 

If you need to update a particular piece of shared data to a widget, you can do it in two ways: Use the Timeline Provider to update data between time intervals using the get Timeline (in: completion:) method to make a new timeline for a widget request so that it can display refreshed data. Also, instead of waiting for the timeline to refresh itself based on the date you provided, just use the Widget Center notification system to request a new timeline. 

Conclusion 

Following Apple’s guidelines and making your widget with the three items mentioned above ensures a great experience and increases the chance that a user will keep it on the screen. 

If you have the opportunity, I strongly recommend watching the live session to get a deeper dive, as well as reading the documentation if you are interested in building one yourself. 

Featured Image from Freepik.