Introduction

Last year, Apple introduced the latest notch design on the iPhone 14 and continued it with the iPhone 15 series, featuring the innovative “Dynamic Island.” This pill-shaped cutout, situated at the top of the iPhone screen, addresses the challenges posed by the traditional notch. This blog entry explores the notch’s origins and its issues raised for designers, and the solution and new challenges brought by Dynamic Island.

The Evolution of the Notch

Image from charlesdeluvio on Unsplash

The notch concept gained popularity with the iPhone X in 2017, influencing other manufacturers to adopt similar designs. While serving vital hardware functions, it presented design challenges due to unconventional screen specifications [1].

Dynamic Island on iPhone 14 Series

Introduced with the iPhone 14 series, Dynamic Island is a pill-shaped cutout housing the FaceID sensor and front camera. It can display notifications and background activities, providing a new way for users to interact with ongoing tasks .

Touch Gestures with Dynamic Island

• Swipe Up: Puts the current open mobile app into Dynamic Island.
• Swipe Left/Right: Allows users to see more apps running if multiple are available.
• Simple Tap: Accesses controls inside Dynamic Island.
• Long Press: Expands the island for more details or controls [2].

Presentation Types of Dynamic Island

There is three types of presentations of the Dynamic Island that are available.

Compact

Image from Apple

The system utilizes the Complact mode when only one Live Activity is currently active. It combines two components: one positioned on the left side of the TrueDepth camera and another on the right side [3].

Minimal

Image from Apple

When multiple Live Activities are active, the system will showcase two at the same time.One will be linked to the Dynamic Island, while the other will be separate from it [3].

Extended

Image from Apple

The extended version of Dynamic Island appears when the user taps and holds a Live Activity that is in Compact or Minimal mode [3].

UX Opportunities and Obstacles of Dynamic Island

Image from SCREEN POST on Unsplash

Opportunities

• Less Intrusive Messages: Notifies users without interrupting the screen.
• Better Visibility: Positioned for improved visibility of ongoing activities.
• Hierarchy: Maintains app hierarchy and user focus.
• Problem-Solving: Aids users in quickly accessing controls at the right time.
• User Control: Allows users to control ongoing tasks efficiently.

Obstacles

• Hard to Reach: Top placement may hinder usability.
• Readability: Collapsed form may make information unreadable for some users.
• Touch Size: Relatively small touch area in collapsed form.
• Interaction Challenges: Potential interference with top navigation bars of mobile apps.
• Tapping by Mistake: Users might mistakenly tap on notifications instead of the island.
• Multi-tasking Concerns: Raises questions about user attention and multitasking.
• No Disable Option: Dynamic Island cannot be fully disabled due to its hardware integration [2].

Design Considerations

Before implementing Dynamic Island, designers must consider key factors:

1. Device Compatibility: Supported on iPhone 14 Pro, 14 Pro Max, 15, 15 Plus, 15 Pro, and 15 Pro Max.
2. User Interaction: Clearly communicate live activities and provide options to end them.
3. User Preferences: Account for users who may disable live activity in iPhone settings [4].

In conclusion, Dynamic Island represents a leap forward in design and user interaction. However, designers and users should carefully consider its pros and cons to ensure a positive impact on the overall user experience.

References

[1] Lawrence, N. (2022, September 8). UI/UX Design: The Dynamic Island. UX-Planet.
https://uxplanet.org/ui-ux-design-the-dynamic-island-ce6e3da925c9

[2] Cordova, M. (2023, June 16). Get to know Apple’s new Dynamic Island: What is it? How can it be used? Is it truly helpful? krasamo. https://www.krasamo.com/apple-dynamic-island/

[3] Lorenzo, B. (2023, September 5). How to use Dynamic Island in SwiftUI. Medium.
https://blorenzop.medium.com/how-to-use-dynamic-island-in-swiftui-4eaa66c7c301

[4] Will, T. (2023). How to design for Apple iOS Dynamic Island. UIUX Trend.
https://uiuxtrend.com/how-to-design-for-apple-ios-dynamic-island/