What are Live Activities?

Live Activities allow apps to display real-time information directly on the iPhone's lock screen and Dynamic Island. These interactive notifications keep users up to date on ongoing events, such as the status of a food order, the score of a game, or tracking a route through the countryside. All without the need to open the app in question.

What are Live Activities for?

Live Activities make information visible without interrupting or complicating the experience. They are perfect for apps that use real-time events, as they reduce friction and manipulation of the phone by providing relevant information and actions without the need to open an app.

Some examples where Live Activities prove to be an ideal complement:

• In a delivery app like Just Eat, where you can see the status of your order at all times without having to log in.
• If you are running with Strava, you can see your distance and pace without unlocking your phone.
• Instead of receiving three notifications about the status of your Cabify ride, you simply see the real-time update on the lock screen.
• At a soccer game, you can see the score in real time without opening the sports app.

In these examples we clearly see that there is less friction for the user to avoid opening an app to get information. In addition, there is a reduction in the number of notifications received when you have multiple status changes.

What types of apps use Live Activities?

Live Activities are ideal for apps that handle real-time events, where the user needs up-to-date information without constantly opening the app. These are the main types of apps that can benefit from the use of Live Activities

Transportation and mobility apps

Ridesharing apps like Cabify, public transport apps like Citymapper or flight and airline apps like Flighty or AENA. In all of them, real-time monitoring of the car's position change, knowing the next stop or which is the new boarding gate are key parts of the experience.

Delivery and ordering apps

Delivery platforms such as Uber Eats, Glovo or Just Eat, online shopping and shipping platforms such as Amazon or Shop. In all of them, the possibility to see live the progress of the order, the position of the delivery person or the status of the package, avoids the need to constantly open the app, keeping the user informed without interruptions.

Sporting events

In live score applications such as ESPN, FotMob or NBA, event and ticketing applications such as Ticketmaster or Eventbrite, this component allows quick access to key information such as updated scores or event details.

Entertainment

For music streaming apps or podcasts like Spotify and Apple Music is very interesting for the possibility of having continuous access to playback control without having to open the app. In this case, the MediaPlayer framework is used instead of Live Activities.

Fitness and health

Exercise and running apps such as Strava, Nike Run Club or SmartGym, wellness and meditation apps such as Calm and Headspace, and sleep tracking apps such as Sleep Cycle. In each, real-time visualization of progress, active sessions or rest analysis facilitates use without distractions or unlocking the mobile.

Productivity and profitability

Tools such as Clock and Forest for timers and alarms, Things and Todoist for task and habit management. HomeKit or Tesla for smart device control. All offer immediate access to essential information, from the status of a timer to monitoring connected devices.

Anatomy and design specifications for Live Activities

Live Activities, apart from appearing on the lock screen, can appear within the Dynamic Island, but this is only available only on iPhone 14 Pro and later models as it is dependent on certain hardware requirements.

Live Activities presentation modes

Presentations at Dynamic Island

The most reduced form of this component is the minimum presentation. Multiple Live Activities can be displayed, one attached to the Dynamic Island and one separate. The separate Live Activity can be circular or oval in shape, depending on the size of the content. It is preferable to display some activity information rather than just the app logo.

Then we have the compact presentation. This component is divided into two areas, which are the two sides of the camera. The sides should have consistent layouts using similar colors, fonts and spacing, keeping the content adjusted to the camera to occupy the minimum space and not hide important information from the status bar.

When you press a compact or minimal live activity, the expanded presentation. A short or tall height should be used, avoiding intermediate sizes that are difficult to process visually. It is also important to maintain coherence between compact and expanded presentation with equal colors, typography, structure and spacing, adjusting the content to maximize the use of space and minimize its visual presence.

For optimal design, the Live Activity should generally blend in with the shape and the opaque black background of the Dynamic Island. Preferably, bold colors are used to reinforce the app's identity and ensure quick brand identification. It is essential to use legible text, with an appropriate size and uniform margins to avoid visual clutter. In addition, dynamic animations can highlight important updates, making the experience even more immersive and interactive.

Live Activity in banner form

On iPhones without Dynamic Island, the Live Activity is presented as a banner at the top of the screen, appearing temporarily only when there is a relevant update.

On the lock screen, it is displayed at the bottom with a layout similar to the expanded view, while on the home screen or within other apps, it briefly overlaps to notify important changes.

To optimize your lock screen layout, it is advisable to use a custom background color with adjusted opacity to ensure good contrast, especially on Always-On devices with reduced brightness. In addition, the standard 14-point margins should be respected to maintain proper alignment with the notifications, avoiding cluttering the edges and ensuring a clear and orderly presentation.

Live Activity in StandBy Mode

On iPhones with StandBy Mode (iOS 17 and later), the Live Activity is displayed in full screen when the device is in landscape and plugged in, or in a compact format at the top, leaving room for other widgets. If the user taps the minimized version, the system expands the lock screen to twice its size.

If a custom background color is used, it is automatically stretched across the entire screen to achieve a uniform design. To avoid visual breaks, it is advisable to respect the standard margins and to use lines or container shapes instead of extending elements to the edges.

In addition, dispensing with the background color in StandBy Mode allows the Live Activity to better integrate with the bezel of the device. In Night Mode, the system applies a red tint to the interface to reduce visual fatigue, so it is essential to ensure good contrast to maintain the readability of the information.

Does my app need a Live Activity?

To know when to add Live Activities to our app, we must ask ourselves a series of questions to help us evaluate the context of the user and the purpose of our app to make good use of Live Activities.

• Does my app have live events that have a defined start and end?
• In what contexts will users use my app?
• Which mode of presentation is the most useful in each context?
• What is the essential information that must appear in each presentation mode?

On the other hand, try to avoid these situations with Live Activities:

• Use them for events lasting more than 8 hours, as the status update period is too long for an “in-live” context.
• Do not use this space to display ads or promotions, your users may disable your Live Activities on their device from the system preferences.
• Avoid entering personal or confidential data. Remember that Live Activities are displayed on the lock screen. Anyone near the cell phone will be able to see the information at a glance.

Live Activities design best practices

Here are some tips on how to make the most of the space available in Live Activities and make a more effective design.

Create a design tailored to your information

• ✅ Design a specific layout for the Live Activity information.
• ❌ Do not copy the format of a standard notification.

Make the design as compact as possible

• ✅ Adjust the elements so that they use only the necessary space.
• ❌ Don't waste space by leaving scattered elements.

Allows the height to change dynamically

• ✅ Reduce the height when there is less information and expand it when there is more content.
• ❌ Do not maintain a fixed height if the content varies.

Adapt the design to different devices and screens

• ✅ Make sure that the Live Activity looks good on all screen sizes.
• ❌ Don't assume it will look the same on all devices without optimizing.

Separates blocks of content with internal lines or shapes

• ✅ Use rounded shapes or thick lines to organize information.
• ❌ Do not place content up to the edges of the Dynamic Island.

Maintain consistent margins and concentric alignment.

• ✅ Use equal margins and place elements harmoniously.
• ❌ Do not leave uneven spaces or misaligned elements.

Correct placement of text and non-rounded elements

• ✅ Keep text and graphics within proper margins.
• ❌ Do not put elements that protrude from the rounded shape.

How to implement Live Activities

Implementing a Live Activity is easy, since Apple provides all the necessary Frameworks to work with it. Here is a brief simplified guide on how to develop a Live Activity for iPhone:

1. Define the attributes and struct of your activity to be performed
2. Requests user permission to display Live Activities
3. Initiates an activity by passing all the information defined in step 1
4. Update the activity when new information becomes available.
5. To pause the activity, you just need to update it again.
6. Ends the activity at the user's request or automatically
7. Prepare the Live Activity Widget UI for your activity and its different statuses

In a separate post we will tell you in depth how to develop Live Activities for iOS.

Redesigning Wikiloc Live Activities

Now that we know when to use and how to design Live Activities, let's see a fictitious example of the Wikiloc app, in which we are going to redesign its current Live Activities following all our recommendations.

What is Wikiloc?

Wikiloc is a mobile application that allows users to discover, share and follow outdoor routes for activities such as hiking, cycling, running, kayaking, among many others. Users can record their own GPS routes, add photos and descriptions, and explore routes created by others anywhere in the world.

It is especially useful for nature and outdoor sports enthusiasts, offering detailed maps, turn-by-turn directions and the ability to navigate routes offline with its premium version.

There are two types of activities to perform within the application. On the one hand, you can simply record a route indicating the exercise you are doing. The application will track you and then generate a route that you will have the possibility to save with all the data of kilometers traveled, slope, speed, distance.

On the other hand, it also functions as a community of routes. Users can upload their routes so that others can follow those paths.

How do Wikiloc Live Activities work?

The application currently has a Live Activity to keep the user informed of its activity at all times.

When the user is following a pre-established route, this module provides a relief with the information of the distance covered and the remaining distance. In addition, the time taken, the type of physical exercise (e.g. hiking) and the wikilok logo are displayed.

On the other hand, when you are recording your route, the remaining distance data changes to positive elevation gain but the interface remains practically the same.

This banner offers valuable data for the user that improves and facilitates the use of the application, but... Are the possibilities offered by the live activities being used to 100% to generate the best possible experience? Is this banner correctly adapted to all versions of Live Activity?

We wanted to give a twist to the component, taking into account the good design practices described above.

We have identified two main problems:

• Something that is missing in this module and that could improve the user experience would be the possibility to pause, resume or end the route directly at any time without having to access the application.
• The visual differentiation between the two activities (route recording and route following) should be greater.
• The way of adapting the banner to the different formats of the live activities can be improved.

Wikiloc and Live Activities

First of all, we have analyzed the different activities of the application and the data provided to know what to show in the module.

The first version in which we will work will be the Expanded version of the Dynamic Island, since here we will be able to check the specific space where to place all the data we want to incorporate.

The most relevant information when recording a route would be the distance traveled, time in motion, elevation and type of sport. You can pause the route and while paused, resume or finish it.

When you are following a predetermined path, you have more information to display. In addition to the distance traveled, time in motion, elevation and type of sport, you should visually differentiate the path traveled from the one that remains to be traveled, always indicating where the user is. It is also interesting to incorporate the different reference points (waypoints) indicating the name and distance to the next point. Also from here you can pause, resume and end the session.

The most important things to take into account in the design of this version are the margins, that the information you offer is as compact as possible while maintaining legibility, keep enough space so that the Dynamic Island does not cover any data and always maintain the identity of the brand using the same colors and typography (remember that it must have a black background).

With this finished design we can make compact and minimal versions of it. We will arrange the elements in such a way that when passing from one version to another, a coherence in the elements is maintained. Facilitating the native transition in a progressive way for the user.

In this case, since the elements are not rounded, we will have to be especially careful with the margins.

The same module will be used for both activities, as this is the maximum information that can be offered in this space.

For the live Activity banner we have generated a more compact design to reduce space and interfere as little as possible with other activities.

The background color must be different from that of any other notification, so we will use the green marking color.

Finally, we have the Stand By. We will be able to incorporate more detailed information as we will have more space but we will keep the same structure. We will remove the background color we used for the banner but we will incorporate it in the typography.

With these settings we have managed to take full advantage of all the possibilities of the Live Activities in the Wikiloc app.

Conclusions

Live Activities represent a new and dynamic way of interacting with our applications, allowing users to stay informed in real time without the need to constantly open the app. Their integration must be consistent with the identity and functionality of the application, offering a fluid and accessible experience.

To this end, it is essential that they are easily identifiable and provide immediate value, showing only the most relevant information in a clear and concise manner.

If you would like to learn more about best practices and recommendations for implementing Live Activities, please refer to the official Apple documentation and resources at the following link: Apple Live Activity - WWDC 2023.