{"id":129289,"date":"2022-10-28T16:00:42","date_gmt":"2022-10-28T16:00:42","guid":{"rendered":"https:\/\/developer.apple.com\/news\/?id=mis6swzt"},"modified":"2022-10-28T16:00:42","modified_gmt":"2022-10-28T16:00:42","slug":"spotlight-on-the-dynamic-island","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2022\/10\/28\/spotlight-on-the-dynamic-island\/","title":{"rendered":"Spotlight on: The Dynamic Island"},"content":{"rendered":"
<\/div>\n

Shape-shifting animations. Effervescent effects. And a downright playful name. \u201cI genuinely wasn\u2019t expecting [the Dynamic Island],\u201d says Christian Selig, developer of popular Reddit client Apollo<\/em>. \u201cThat\u2019s what blew me away: It\u2019s just not something that\u2019s been around.\u201d<\/p>\n

The feature brings liveliness \u2014 and Live Activities \u2014 to the status bar on iPhone 14 Pro and iPhone 14 Pro Max, transforming notifications, alerts, and activities into a fluid and interactive piece of animation. Whether tracking a delivery, following the game, or checking the status of an upcoming flight, the Dynamic Island helps keep people up to date without distraction.<\/p>\n

\u201c(The Dynamic Island is) perfect for us,\u201d says Ryan Jones, developer of the travel-tracking app Flighty<\/em>. \u201cFor travel, which can make you stress about missing something, it offers easy background reassurance.\u201d <\/p>\n

We caught up with five developers \u2014 including Selig and Jones \u2014 to learn how they\u2019re designing and building for Live Activities and the Dynamic Island. <\/p>\n

Citymapper: \u2018It\u2019s what we\u2019ve been dreaming about for years\u2019<\/h3>\n

If you\u2019re an app that wants to help people move around a city, it\u2019s hard to overstate the power of live updating in the Dynamic Island. \u201cLive Activities changes everything here,\u201d says Victor Wang, head of product for route-planning app Citymapper<\/em>. \u201cIt\u2019s what we\u2019ve been dreaming about for years, and it\u2019s a big step toward our vision of being a personal assistant in your pocket.\u201d <\/p>\n

For Citymapper<\/em>, the Dynamic Island is less about transit and more about comfort. On iPhone 14 Pro and iPhone 14 Pro Max, the app\u2019s signature GO feature \u2014 which helpfully lays out the path of your entire journey or commute \u2014 uses the Dynamic Island in place of notifications or simply checking the app.<\/p>\n

It offers a single live-updating view that communicates key information: how long you\u2019ll have to wait for the next bus, how many more stops until you disembark, and when you need to get off the train or bus (and, by association, your phone). \u201c[The Dynamic Island] will show a countdown so you can understand, \u2018OK the bus will be here in 10 minutes \u2014 now 5 \u2014 now 2,\u201d says Wang. \u201cOur hope is that you\u2019ll feel more comfortable waiting.\u201d<\/p>\n

\"Citymapper\u2019s<\/p>\n
\n

Citymapper\u2019s Dynamic Island shifts based on where you are in your journey, in this case on your train (left), at your stop (center), and walking to your destination (right).<\/p>\n<\/div>\n<\/div>\n

iOS designer Jason Hibbs shares that the Citymapper<\/em> team initially thought Live Activities would function as an enhanced set of notifications. \u201cBut we\u2019re actually able to say not just \u2018Turn left,\u2019 but also \u2018Here\u2019s how many minutes you have until the bus arrives.\u2019\u201d<\/p>\n

\n

Live Activities can help you feel more on top of things.<\/p>\n

Victor Wang, Citymapper<\/cite><\/p><\/blockquote>\n

Citymapper<\/em> breaks each trip into four phases: walking to a stop, waiting at a stop, riding, and then walking to your destination. In each phase, Dynamic Island will show a small icon \u2014 like a bus, train, or walking person \u2014 with a countdown to your next destination or transfer. The team discarded other ideas in pursuit of that simplicity \u2014 eschewing, among other things, turn-by-turn directions. \u201cWe didn\u2019t want it to get in your way,\u201d says Wang. \u201cThe idea is that you can still read or play your game or do whatever you\u2019re doing.\u201d<\/p>\n

In short, you can do anything you like \u2014 save for worry about your trip. \u201cLive Activities can help you feel more on top of things,\u201d says Wang. \u201cYou can plan better and have sufficient confidence for the next step.\u201d<\/p>\n

Download Citymapper from the App Store<\/a><\/p>\n

Apollo for Reddit: \u2018It\u2019s kind of hard not to go wild\u2019<\/h3>\n

When he first learned about the Dynamic Island, Christian Selig pounced. \u201cThe way the engineers built the APIs, it\u2019s kind of hard not to go wild,\u201d Selig laughs. \u201cIt\u2019s like you write four lines and the widgets are done. It\u2019s pretty magical.\u201d <\/p>\n

Ideas for Apollo<\/em>, his Reddit client, came almost immediately: \u201cSay a new episode comes out, and you\u2019re following a subreddit and reacting with other fans,\u201d Selig says. \u201cThe Dynamic Island will auto-refresh and show you new content and comments as they come in.\u201d <\/p>\n

\"Apollo\u2019s<\/p>\n
\n

Apollo\u2019s Dynamic Island shows new content and comments \u2014 like fun Easter eggs in TV shows \u2014 as they come in.<\/p>\n<\/div>\n<\/div>\n

If so moved, you could stream the show in one app while tracking new posts on the subreddit through updates in the Dynamic Island. \u201cIn compact presentation, you\u2019ll see the current number of comments. When you go to (the expanded presentation), you\u2019ll see high-performing comments \u2014 like if someone caught a reference you missed.\u201d <\/p>\n

Outside of the Dynamic Island, Apollo\u2019s<\/em> Live Activities are robust as well: You can keep tabs on what\u2019s trending, follow your Reddit karma, and \u2014 this is true \u2014 track the actual physical distance you\u2019ve scrolled in Apollo<\/em> (measured in feet, miles, or by the Eiffel tower). \u201cThis has been one of the more fun experiences I’ve had doing iOS development in quite a while,\u201d Selig says, \u201cand it\u2019s a fun job, so that says a lot.\u201d<\/p>\n

Download Apollo for Reddit from the App Store<\/a><\/p>\n

SmartGym: \u2018I had to focus on staying out of the way\u2019<\/h3>\n

SmartGym’s<\/em> Matt Abras sees the Dynamic Island more as a coach than a static feature: His app is exploring something that displays both your current workout and the rests between each set \u2014 so you know when it\u2019s time to get back to work. <\/p>\n

\u201cIt\u2019s easy to be distracted by your phone during rests, right? A 30- or 45-second break can become a few minutes,\u201d Abras says. \u201cThis is way better than getting a notification that says, \u2018Hey, rest ended.\u2019\u201d <\/p>\n

\"SmartGym\u2019s<\/p>\n
\n

SmartGym\u2019s Dynamic Island shows the type and duration of your current workout \u2014 and prepares you for your next one.<\/p>\n<\/div>\n<\/div>\n

Abras went through a number of iterations when designing Live Activities for SmartGym<\/em>. He\u2019d initially tried using the Dynamic Island to display heart rate and calories during a workout, but it felt superfluous. \u201cIn order to track health data, you need Apple Watch, which is already showing that information,\u201d he says. \u201cWhat\u2019s really<\/em> important to show at that time? Health metrics? A large countdown? How many sets you\u2019ve done and how many you have left? There\u2019s a lot of potential information.\u201d<\/p>\n

\n

What\u2019s really important to show at that time?<\/p>\n

Matt Abras, SmartGym<\/cite><\/p><\/blockquote>\n

Instead, Abras refocused, using the Dynamic Island to share metrics and reps. \u201cWhen someone\u2019s working out, they need to do what they need to do without realizing the app is there,\u201d he says. \u201cI had to focus on staying out of the way.\u201d<\/p>\n

How did he keep that balance between practicality and invisibility? \u201cIt\u2019s all about taste,\u201d he says, with a smile. <\/p>\n

Download SmartGym from the App Store<\/a><\/p>\n

Flighty: \u2018We really have to shine when things go awry\u2019<\/h3>\n

Apps can easily take advantage of the Dynamic Island to quickly spotlight a single nugget of key information. When it came to Flighty<\/em>, however, Ryan Jones wanted to tackle a slightly more daunting project: showcasing multiple<\/em> nuggets of information \u2014 departure times, gate changes, baggage claim numbers, and the like \u2014 that could all change on the fly.<\/p>\n

Flighty<\/em> is at its best when dealing with such \u201cIRROPS\u201d \u2014 the industry abbreviation for irregular operations. \u201cWe really have to shine when things go awry,\u201d says Jones. But that meant accounting for every thunderstorm, equipment delay, or late plane into Dallas.<\/p>\n

\u201cPeople want different data points [like]\u2026 what time is a flight leaving, where is it leaving from, how long until you land,\u201d says Jones. But this information is almost always time-dependent; after your flight departs, for example, you likely won\u2019t need information about your departure gate. <\/p>\n

<\/div>\n
\"Flighty\u2019s<\/p>\n
\n

Flighty\u2019s Dynamic Island helps guide your travel every step of the way, from before you board (above) to after you take off (below).<\/p>\n<\/div>\n<\/div>\n

After exploring a few possibilities for the Dynamic Island and Live Activities, Jones and the team decided to make the information within the Dynamic Island \u2014 well \u2014 dynamic. Before your gate departure, for example, Flighty\u2019s<\/em> information within the Dynamic Island will operate like a departure sign at a big airport. \u201cThat\u2019s our real-world analogy,\u201d Jones says. \u201cThose signs have one line per flight, and that\u2019s a good guiding light \u2014 they\u2019ve had 50 years of figuring out what\u2019s important.\u201d <\/p>\n

In addition to the unpredictable nature of travel, Jones and team must also account for how every single person will, at some point, lose their connection. \u201cWhenever [someone] takes off, we have to assume that we won\u2019t see them again until they land,\u201d says Jones.<\/p>\n

The solve: Once a plane pushes back, Flighty<\/em> is ready to go offline at any minute. From that point on, the Dynamic Island switches over to flight progress bars and counters; the minimal presentation is a simple circular chart that tracks your flight\u2019s duration. <\/p>\n

No matter where someone is in their flight, the Dynamic Island can help them feel confident and comfortable in their travel routine. \u201cThat\u2019s a big change from \u2018I\u2019ve gotta be listening for notifications all the time,\u2019\u201d Jones says. And it\u2019s one that Flighty<\/em> welcomes.<\/p>\n

Download Flighty from the App Store<\/a><\/p>\n

Wakeout: \u2018Like a healthy work coach\u2019<\/h3>\n

Workout-anywhere app Wakeout<\/em> encourages regular breaks during the day \u2014 not only for brief bursts of aerobic exercise, but also for pauses to reduce eye strain, grab a sip of water, or simply clear your mind. \u201cIt\u2019s all about: How can we help people break up their sedentary moments but stay in their flow states?\u201d says developer Pedro Wunderlich.<\/p>\n

Many of these activities take as little as 15 seconds, making the Dynamic Island a reliable resource for helping people using the app. \u201cI want to find the teams behind the Dynamic Island and Live Activities and ask, \u2018Were you thinking of us? Is this a love letter?\u2019\u201d he laughs.<\/p>\n

\"Wakeout's<\/p>\n
\n

Wakeout’s Dynamic Island nudges you to exercise and encourages you to focus.<\/p>\n<\/div>\n<\/div>\n

Wakeout<\/em> has long used push notifications, but the ActivityKit framework in iOS 16 gave Wunderlich a new way to help people stay on top of their routines. \u201cOur customers have actually told us they want more notifications, not fewer,\u201d says Wunderlich. \u201cWe hear, \u2018Wakeout<\/em> is really helpful, but only if it interrupts me.\u2019 So Live Activities is what our customers have been asking for without knowing it.\u201d<\/p>\n

When designing for the Dynamic Island, Wunderlich kept both tiny tasks and longer aerobic breaks in mind. \u201c[It\u2019s] such a great way to maintain a presence and let people know when it\u2019s a good time to hydrate, move, close your eyes for 30 seconds, and do all these healthy little breaks that add up.\u201d<\/p>\n

For smaller pauses, Wakeout\u2019s<\/em> compact presentation in the Dynamic Island shows a countdown along with a small icon (like a water bottle) to remind you about your next task. If that upcoming rest is a brief one and you\u2019re locked into what you\u2019re doing, you can ignore the countdown with no consequence; the alert will simply slip away \u201clike a ship in the night,\u201d says Wunderlich. <\/p>\n

\n

It\u2019s all about: How can we help people break up their sedentary routines but stay in their flow states?<\/p>\n

Pedro Wunderlich, Wakeout<\/cite><\/p><\/blockquote>\n

But if the break is major and there\u2019s a walk, squats, or a set of pushups in your future, the Dynamic Island will spur you to action more insistently. \u201cAn actual exercise break \u2014 which is Wakeout\u2019s<\/em> speciality \u2014 does stop that timer. Our customers generally do 45-minute focus sessions, so that\u2019s the limit of the sedentary period. After that, we say, \u2018OK, it\u2019s time to move your neck, move your shoulders, or stand up.\u2019\u201d <\/p>\n

Wunderlich considers the two approaches entirely separate. \u201cThe healthy moments are passive; if you don\u2019t pay attention, they dismiss themselves,\u201d he says. \u201cThe exercise break is more of a big state change on screen.\u201d <\/p>\n

It\u2019s notifications versus interruptions, or reminders versus celebrations. But they all tie back into Wakeout\u2019s<\/em> goal to keep you firmly on a healthy track throughout your day. \u201cWe\u2019re shifting our focus toward healthy work in a more holistic way,\u201d Wunderlich says. \u201cWakeout<\/em> has become almost like a healthy work coach.\u201d <\/p>\n

Download Wakeout from the App Store<\/a><\/p>\n

Explore Live Activities and the Dynamic Island<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Shape-shifting animations. Effervescent effects. And a downright playful name. \u201cI genuinely wasn\u2019t expecting [the Dynamic Island],\u201d says Christian Selig, developer of popular Reddit client Apollo. \u201cThat\u2019s what blew me away: It\u2019s just not something that\u2019s been around.\u201d The feature brings liveliness \u2014 and Live Activities \u2014 to the status bar on iPhone 14 Pro and […]<\/p>\n","protected":false},"author":2,"featured_media":129290,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[],"class_list":["post-129289","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apple-developer-news"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/129289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=129289"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/129289\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/129290"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=129289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=129289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=129289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}