Widgets in 2022, iOS 16 and that Island

Widgets since their introduction back in iOS 13, not counting the swipe left new feed style function which been around since iOS10 if not before. Has always kept me really interested in designing for iOS out side of my App projects. Just to see what ticks and API hocks you could integrate with to allow you to dream up new interactions.


From the very start when I wanted to make to use the many iOS API’s we could integrate with such as Search results APIs for example allowing using to search their app without needing to go into the App has been a key idea over the years. This has always been a key mission when working with brands to explain the PO/Business what users are doing on their phones and how can we be in the same place.

When widgets for iOS the home screen were first launched I primarily focused on seeing what was the user value in these small apps that now live on the home screen of the iPhone/iPad’s. It was in fact very similar to designing small interfaces such as WatchFaces – what key information could and should be displayed for both the user and the brand.

This brings us up to date. Over the releases we’ve seen Widgets being added from iOS home screen, then next to iPadOS home screen and now the addition of widgets for Lock screen as something similar to Complications in WatchOS which makes all the sense that does for the ecosystem experience but what a-lot people including my self were surprised about was the Notch UI exploration. – How to take an technical disadvantage and turn it into a feature.

Prototype: Dynamic Island

Simple prototype to better understand the function and how it works exactly. Click below to expand. Use the island as you would on iPhone 14 Pro – Tap on the island only.

So i started taking a quick exploration into what the dynamic island would mean for me and clients. From iOS design/dev POV there doesn’t seem to be much, what the Dynamic island is offering is a another way into a widgets. Keeping the widgets logo will be enough to encourage brands to develop widgets since for them it will be front a centre opportunity.

How the Dynamic Island works

A long press on Dynamic Island expands that app’s widget with some basic controls. For timers, you can pause or stop them directly from Dynamic Island. The same applies to apps like Music and FaceTime. Some system actions like enabling a Focus mode or putting the iPhone in the charger also trigger animations on Dynamic Island.”

iPhone 14 Pro Dynamic Island supported apps and features

Time will tell and I will read all the human interaction guidelines to see the real details but for now this is a great system level addition to surfacing content for users and allowing brands to be present. There is a complete list of what can triggered first party functionality.

System alerts and notifications:Live Activities: Now Playing:
Incoming call
AirPods connected
Face ID
Apple Pay
CarKey
AirDrop
Watch unlock
Low battery
Charging
Silent switch ON/OFF
NFC interactions
AirPlay
Focus changes
Shortcuts
Airplane mode/no data alert
SIM card alerts
Accessories connect
Find My
Ongoing call
SharePlay
Music/Now playing apps
Timer
Maps directions
Voice memos
Screen Recording
Personal Hotspot
Microphone indicator
Camera indicator
Spotify
Stitcher
Audible
Amazon Music
NPR One
Overcast
Pandora
YouTube Music
SoundCloud
CallKitUpcoming
WhatsApp
Google Voice
Instagram
Skype
Live Activities API

Some developers are taking advantage of the new feature in a different and more fun ways. While reading a researching what could be done with the island function I came across this “Hit The Island,” which is inspired by the classic game Pong. However, this time the goal is to hit the Dynamic Island with the balls to score points. During gameplay, more balls appear simultaneously on the screen, and they get faster.

Once a ball hits the iPhone’s Dynamic Island, the game even creates a cool animation around it. But if you don’t have an iPhone 14 Pro, don’t worry. The game also has a gameplay mode ready for iPhone models with the traditional notch.

As I find and research more I will add it to this article.