SSPAI Editors SSPAI Editors
October 2, 2026
30 mins read

Beyond the Crease: What Makes iPhone Duo’s Interaction Design So Compelling

From the book metaphor to controls that move with the device, iPhone Duo invites a closer look at Apple’s interaction design. Tracing ideas from the Macintosh to Liquid Glass reveals the thinking behind its changing interface.

***

Editor’s note: A version of this article by 阿斯巴盐 appears on September 28, 2026 on SSPAI with the title “比起折痕, iPhone Duo 的交互设计更加令人着迷”. Translated and published by agreement.

Before the launch, my biggest question about iPhone Duo was whether the crease down the middle would be noticeable—and whether Apple could do better than the foldable phones already on the market. Once its promotional video appeared, though, something else captivated me far more: Apple’s approach to interaction design for a folding device.

Foldables inherently have to accommodate a complicated range of configurations and uses. Back when Microsoft introduced Surface Duo, the official Fluent Design site already offered an elaborate account of its different device poses and the interaction logic behind them.

Five dual-screen layout patterns: extended canvas, master-detail, two-page, dual-view, and companion pane.

That still-immature approach was hampered by sluggish hardware, while Android’s loosely governed ecosystem created problems of its own. Even using the system as its designers intended could be a frustrating experience. Ending the Surface Duo line after two generations was a sensible decision to cut its losses. Still, those early designs helped clear a path for the flexible-screen foldables that followed.

The larger problem remained. Take the interaction patterns of a conventional smartphone, mix in some tablet layouts for the inner display, and add a few relatively simple split-screen interactions: foldable interface design has never quite settled into a coherent set of conventions.

iPhone Duo held open in both hands.

In interviews, Apple’s new CEO, John Ternus, has repeatedly said the company will not release a product before it is ready. After the launch, Apple published its design guidelines and six Tech Talks on its developer site. The thinking behind iPhone Duo’s keynote appearance and promotional videos began to come into focus. To my eyes, its system-level interaction design might actually represent the best approach we have so far.

More interesting still, the thinking behind Duo reaches much further back.

Start with people, then design

After mobile design took off in 2012, the growing body of interaction-design “consensus” seemed to make manufacturers less inclined to revisit first principles. This is part of what made Smartisan, the Chinese smartphone maker, unusually valuable. Mobile design today can feel like assembling Lego: navigation bars, promotional tiles, grids of feature shortcuts. These highly specialized UI modules combine commercial objectives, functional cues, and visual elements. They are products of the evolution of design systems, but they also encourage us to begin with ready-made components rather than with people.

A grid of reusable promotional tiles combining graphics, labels, and color.

Interfaces consequently look and feel increasingly alike. With the arrival of devices with two or even three screens, however, sameness may be the least of our problems. Almost every owner seems to be asking when a particular app will be optimized for a particular phone. Often, that “optimization” amounts to little more than making the spacing and typography look less awkward on the unfolded inner display. Faced with complicated hardware and usage scenarios, manufacturers and app developers alike are aiming for “good enough”: a workaround rather than a solution built around the user.

Cover of the 1987 Human Interface Guidelines: The Apple Desktop Interface.

Apple published its Human Interface Guidelines in 1987. The first chapter was titled “Philosophy,” and one sentence put the relationship between people and tools plainly:

People aren’t trying to use computers—they’re trying to get their jobs done.

—Human Interface Guidelines: The Apple Desktop Interface (1987)

The section A view of the user in the original Apple guidelines.

Those early guidelines discussed people first, then interface metaphors, before deriving principles of direct manipulation, consistency, and feedback. People want to get things done. An interface should let them explore, remain in control, and anticipate the results of their actions. That is the HIG’s basic understanding of the user; windows, menus, and icons make sense within that framework.

Even designers often begin with an established pattern. Yet many problems require us to return to a more fundamental situation and ask what the user intends to do. Where should design begin? How can we create something that genuinely fits a new context without reinventing the wheel? These are questions that iOS, Mac OS X, and iPadOS have all had to address.

When new hardware and new situations emerge, we need to trace the logic and strategy of interaction design back to people, reconsider it, and build from there.

Returning to people as the starting point

I first became conscious of this habit at Apple through designer Chan Karunamuni’s WWDC presentations.

Thirty-one years after Apple published those guidelines, Chan devoted a substantial part of the opening of his WWDC 2018 session, “Designing Fluid Interfaces,” to the foundations of interaction design. We do not always finish forming a complete instruction before our bodies begin to move. We can stop halfway through a push or change direction when something feels wrong. We watch the feedback and adjust our next move as we go.

Chan Karunamuni presenting at WWDC 2018.

Rather than making people learn how to use a UI, it makes more sense for the UI to accommodate the way people work. To me, the card-based interactions on iPhone X represented a more mature stage of that idea. Cards had arrived with webOS in January 2009—almost a decade before that 2018 WWDC session.

An early webOS promotional image showing Palm phones.

There is no disputing webOS’s contribution to the metaphors of modern interaction design. Chan and Apple took those card interactions further, working through them at a much finer level of detail. Mobile interaction was no longer simply a turn-based exchange of action and response. It was a complex system changing continuously in real time, with software and hardware preparing for the many things a user might do.

“So, it’s not that our interfaces should be fluid, it’s that we’re fluid, and our interfaces need to be able to respond to that.”

—“Designing Fluid Interfaces,” WWDC 2018

A WWDC slide about aligning interfaces with how people think and move.

A machine cannot directly “predict” where someone’s finger will go. But the hardware can observe changes in acceleration as the finger stops: the more abruptly it stops, the more pronounced the change, and the sooner the system can recognize a shift in the gesture. This attention to movement, behavior, and context would later inform many more design details.

A gesture demonstration showing a finger moving an app card.

I began following Chan Karunamuni after that 2018 session. Aside from occasionally posting design examples on Twitter, his most valuable subsequent presentations, in my view, were his WWDC 2023 session on Dynamic Island and his 2025 introduction to Liquid Glass. As an interaction designer, he consistently reveals interesting ways of framing and exploring design problems.

The foundations of change, and the digital texture of glass

There is a small layout detail in Chan’s WWDC 2023 presentation on Dynamic Island that deserves a closer look.

Dynamic Island needs to expand and contract as Live Activities change, accommodating different amounts of information. It is easy for a designer to concentrate on each individual state: how to use the space, where to put graphics and text. Chan points out that designing the expanded view also means considering what it looked like before it expanded:

“When laying out your expanded view, try and maintain the relative placement of things between the two views. That way there’s a coherence between them.”

—“Design dynamic Live Activities,” WWDC 2023

A music activity expanding from the compact Dynamic Island.

On the surface, this is advice about layout. But it connects two moments of perception. The user has just located information in the smaller Dynamic Island; after it expands, the relative positions of those elements can still help them find their way. The UI can grow to accommodate an interaction, and it can show more information, but it should carry forward the understanding of the layout the user has just formed.

Examples of expanded Dynamic Island layouts for different activities.

That distinction matters. The number of shapes a control can take is easy to see. Whether people must identify everything inside it afresh whenever it changes shape is much easier to overlook. Chan explicitly makes that a design requirement.

In the opening of “Meet Liquid Glass” in 2025, he places these accumulated lessons within a longer history:

“It builds on learnings from all the way from the Aqua user interface of Mac OS X, through to the realtime blurs of iOS 7, to the fluidity of iPhone X, the flexibility of the Dynamic Island, and the immersive interface of visionOS.”

—“Meet Liquid Glass,” WWDC 2025

A Liquid Glass interface over a photograph.

Anyone who has followed the visual evolution of the Mac and iOS will recognize the wealth of design experience behind that sentence. Chan is doing more than describing appearances. He places materials, real-time blur, gestures, and controls that change shape along a single line of accumulated experience. Seen this way, Liquid Glass’s relationship to earlier designs goes beyond shared glass effects or highlights. It brings together pivotal moments in Apple’s design history—a synthesis with a sense of inheritance.

The Aqua interface on an early Mac OS X desktop.

This gave me a concrete basis for the continuity I had already sensed. Problems explored in earlier products return to designers’ attention as hardware and circumstances change. A new visual language can become an opportunity to reorganize those earlier lessons.

Of course, these two presentations contain much more. But these passages alone invite further questions. From iPhone X to Dynamic Island to Liquid Glass, which ways of thinking keep recurring? Could the methods beneath the rules—the deeper strategies that repeatedly surface—be more valuable as underlying design principles? Broad aspirations such as “fluidity,” “naturalness,” and “consistency” can feel rather vague. The principles revealed by a practicing Apple designer like Chan, confronting specific problems as hardware, software, usage scenarios, and interaction patterns change completely, are more useful.

Following those clues, I arrived at the framework below.

Underlying design principles drawn from Chan’s presentations

Chan is certainly not the sole contributor to these designs. But his explanations give us a way to trace experiences we call “natural” or “fluid” back to actual design decisions. How does a movement begin? How does an intention change? How do we recognize something after it moves? These small questions determine whether an interaction works at all.

Reading these WWDC sessions alongside the earlier HIG and the adaptive designs discussed later, I would group their shared reasoning into several underlying design principles. This is my own synthesis, not an officially named Apple theory. They are underlying principles because they concern the questions that come first: before deciding where a button belongs or how an interface should change, what should those decisions be based on?

Context first: begin with what the person is doing.

The same function may need different designs in different circumstances. What someone is looking at, how they are holding the device, and how long they can spare their attention all influence the interface’s organization. Keeping an old layout or breaking with it should be a decision grounded in those conditions. Familiar designs are worth preserving, but when the conditions of use change, we have to ask whether they still fit.

Continuous user control: people can change their minds after an action begins.

An important premise of Chan’s 2018 session is that thinking and acting can happen together. People pause, test, and change direction as they interact; the interface must keep responding. Dragging, expanding, and switching need to be designed as complete processes. If the person’s hand is still moving, control should not already have passed to an animation they can only wait out.

A WWDC slide listing characteristics of fluid interfaces.

Spatial coherence: forms can change while their underlying relationships remain continuous.

Where a page enters and where it goes when we return; which button a menu belongs to; which content a control affects—these relationships help people understand an interface. Coherence does not require everything to stay at the same coordinates. Dynamic Island can resize and rearrange its contents, but relative positions should still help us recognize the connection between its earlier and later states.

Task continuity: the presentation can change while the work carries on.

This emphasis on continuity needs to go a step further. When space shrinks, some information can temporarily recede, but the content someone is reading, the choices they have made, and the text they have not finished entering all deserve careful preservation. As the interface adapts to a new size, people should be able to continue what they were doing, without finding the content again or rebuilding their understanding from scratch.

Compact Dynamic Island states showing different Live Activities.

Clear feedback: help people understand what their actions are changing.

UI feedback should show that an action has been received, how its target is changing, and what can happen next. Material and motion have a role here too. In his Liquid Glass presentation, Chan treats appearance and movement as a whole. When a button expands into a menu, the continuously changing outline explains their relationship; light and deformation can make an interaction’s response immediate and perceptible. An effect’s value should be judged by what it communicates.

Transfer of familiar experience: let existing knowledge make new interactions understandable.

Someone approaching iPhone Duo is not confronting an unfamiliar screen with no experience to draw on. The inertia of objects, relative distance in space, the act of opening a book, and habits formed through years of using interfaces can all help them anticipate what comes next. Design can borrow useful relationships while discarding the limitations of physical objects. A metaphor gives an unfamiliar action an understandable starting point.

The iPhone Duo Home Screen with controls along the right edge.

These principles also give us criteria for evaluating design. Does the new layout better suit the current situation? Are changes still controllable? Have existing relationships and tasks been preserved? On iPhone Duo, the screen itself changes shape, giving these questions a more complex setting. And a book offers a familiar way to organize that changing interface space.

How the book metaphor reframes Duo’s design

Look back over Apple’s fifty-year history and you will find a deep affection for skeuomorphism. At its heart, this is not about objects for their own sake. It is about carrying experience from the physical world into the digital one, making it more understandable and immersive.

Translucent interface elements illustrating the Liquid Glass material.

It is easy to describe a foldable phone as a phone plus a tablet: use the small screen when it is closed, the large one when it is open. The division of functions seems clear enough. Yet that description mostly captures two completed states. How should the device work halfway open? How should the content on each side remain connected? How should a person understand the space as it changes? Those questions need a more specific organizing idea.

An Apple designer discussing iPhone Duo.

This time, Apple’s designers explicitly chose the book as a starting point. The keynote and promotional videos aimed at ordinary users did not spell out the metaphor. In the tutorials for designers and developers, however, this foundation for the experience and its interactions is laid out directly.

The video “Design for iPhone Duo” uses the comparison explicitly:

“It can be used partially folded, like a book.”

—“Design for iPhone Duo”

The book metaphor runs through the visual design, the interactions, and the implementation.

Building around the book metaphor

When we pick up a book, we do not first decide on a standard angle at which to open it. Two pages can hold one photograph across a spread or display separate content. The spine connects the two sides and affects how we see them when the book is partly open. Halfway open may be just right for holding and reading; laid flat, both pages come into view together.

“Raise the bar with iPhone Duo”

These ordinary experiences rarely need explaining. On a foldable screen, though, they correspond to concrete design questions: how the device opens, how content is distributed, what the curved central area affects, and how the two sides remain connected as they change.

“Phone plus tablet” is a useful extension of familiar experience. It tells people how the screens relate to one another. The book metaphor goes further, providing a richer model for opening and closing, the relationship between the two sides, and the way the device is held.

To me, this is why the book can serve as Duo’s central design idea. Questions previously scattered across hardware, visuals, and interaction can be considered together. Apple explicitly invokes a book in its tutorials; connecting that analogy to the unfolding animation and the controls along the side is my own analysis of that thread.

Outlines of folding devices in several poses.

This continues the early Macintosh tradition of using familiar things to make digital interfaces understandable. A metaphor does not, however, require us to import all the limitations of the physical object. The 1987 HIG makes an important caution:

“The metaphor need not be taken to its logical extremes.”

—Human Interface Guidelines: The Apple Desktop Interface (1987)

An excerpt from the original HIG discussing the desktop metaphor.

A book’s spine may obscure a photograph running across two pages. In a digital interface, content and controls can move out of the way. Paper can only show what is printed on it; a digital interface can collapse a list or expand controls to suit the task. Borrowing the experience of a book helps people understand the space, but the arrangement must still serve digital content and interaction.

The Dock’s position therefore needs to account for content space and reach, while the glass material needs to communicate the presence and layering of controls. These elements can all serve a “book” that opens, without each one requiring a literal paper counterpart.

Using animation to make virtual space feel real

The unfolding animation makes this sense of space particularly tangible. It is also one of the details in Duo’s demonstration that I most wanted to watch again.

As the device opens, the half of the inner display corresponding to the outer-display side initially shows a wash of softened light and color. The blur diminishes as the device opens further. Dunes and ridgelines emerge, finally joining the other half to form the complete Lock Screen. The two sides are not equally sharp throughout the demonstration: the side unfolding toward us undergoes the more visible transformation.

“Leverage multiple displays and scenes on iPhone Duo”

As the user opens the device, the image unfolds with it. Hardware movement and software change correspond during this brief sequence. Instead of simply switching on a complete large screen, the transition gives us time to see how content extends from its original display area into a new space.

The book and Liquid Glass offer two complementary kinds of experience here. A page rotating around its spine and gradually facing the reader explains the sequence of unfolding and what becomes visible. The changing light and color of glass seen from different angles suggests a material quality for that process. The effect evokes opening a real book while fitting the material character of Liquid Glass.

A partially blurred interface on the inner display.

This is not a complete reproduction of paper’s optical behavior. A page does not necessarily blur as it turns, and tilting glass alone cannot explain everything in the demonstration. What matters is the software’s choice to bring the image gradually into focus, making the unfolding virtual 3D space feel as if it really exists.

A clear multicolumn interface across the inner display.

In “Meet Liquid Glass” in 2025, Chan discusses how transparent objects communicate their presence, shape, and movement by bending light. He also explicitly treats appearance and motion as a unified design problem. Describing how the material appears and disappears, he says:

“Instead of fading, Liquid Glass objects materialize in and out by gradually modulating the light bending and lensing, ensuring a graceful transition that preserves the optical integrity of the material.”

—“Meet Liquid Glass,” WWDC 2025

Viewed in this light, Duo’s changing blur and sharpness can be understood as a visual explanation of a surface changing its pose. I am drawing a connection between design methods here. The available material does not explain the animation’s rendering algorithm, nor does it establish a precise relationship between blur and hinge angle.

This brings us back to Chan’s premise from 2018: people observe feedback as they move and adjust their next action accordingly. A demonstration of one smooth unfolding sequence does not prove that pauses and reversals will feel equally responsive. But it does give opening and closing a visible response. Before we touch a button in an app, opening the device is already an interaction.

The book gives this space a familiar organization; material and motion make the process of unfolding understandable. The next questions are more practical. Where will people put their hands? Content can spread across the screen, but where should the controls we have used for years go?

Why move the Dock and toolbars?

Returning to the launch presentation, some of the most conspicuous changes were the vertical Dock and the navigation and tools relocated to the side.

Most previous iPhones had relatively tall, narrow screens. Navigation went at the top, tabs and tools at the bottom, and content in between. That arrangement became so deeply ingrained that most of us would never think to replace it.

Home Screen layouts with a horizontal Dock and a vertical Dock.

Why a vertical toolbar and Dock on the right make sense

The book is Duo’s organizing metaphor, just as cards were the conceptual foundation of webOS, digital paper is the central metaphor of Material Design, and liquid glass is the key to Liquid Glass. When we hold a book, we tend to grip one side—particularly the right—even with something as small as an A7-sized passport or passport holder.

An unfolded iPhone Duo is much like an open passport. A Dock at the bottom is hardly in the most natural place to reach.

An unfolded iPhone Duo held like a small book.

The outer display is wider when Duo is closed. Continuing to place control bars at the top and bottom would consume some of its already limited vertical space. The thumb holding the phone does not magically grow longer just because the screen gets bigger. Moving controls to the side makes much more sense.

A diagram labeling controls along the outer display’s right edge.

Keeping buttons in their old positions may look familiar, but changed conditions mean the same positions may no longer work well. The top and bottom are not sacred. If people can still find the controls, reach them, remember where they are, and use them comfortably, moving them is good design.

A Notes screen with navigation and tools arranged on the right.

The clever part is how the interactive components traditionally located above and below the content are separated out and brought together on the right, where the thumb holds the screen. It is almost as if the top and bottom strips were cut off, rotated 90 degrees, and attached to the side. The content area, where we scroll vertically, stays where it was.

Code and interface examples showing controls in different arrangements.

In “Raise the bar with iPhone Duo,” Apple cites preserving vertical content space and improving reach as direct reasons for moving control bars to the side. The session discusses in-app navigation bars, toolbars, and tab bars. These serve different purposes from the Dock, which opens and switches apps, but on this device they all place access to actions along an edge.

“Raise the bar with iPhone Duo”

This gives established iOS app components a clear destination and developers a clear direction for adapting their apps. The result need not be crude scaling or extra whitespace, nor must every developer invent a different solution and leave users with wildly inconsistent results.

Continuity between the inner and outer displays

What matters even more is the continuity across opening and closing.

How the Fitness app adapts to the inner and outer displays.

Compare the closed outer display with the inner display opened in landscape: frequently used controls remain along the right-hand outer edge. The screen becomes wider and content can gain another column, while access to actions stays in the same place—on the right.

But iPhone Duo faces a problem common to foldables: the folding state and orientation keep changing. Each pose seems to demand another adaptation of the toolbars and interaction patterns. Turn the open inner display to portrait, for example, and the control bars return to a horizontal arrangement instead of staying on the right. The interesting question is therefore how common situations connect, rather than how to impose one fixed layout on every pose.

Six layouts showing how interface orientation changes across device poses.

The camera and Dynamic Island, which present notifications and status; the shared toolbar for frequent actions; the edge closest to the thumb and the web of the hand—these form the anchors carefully chosen by the design guidelines. As the device rotates and folds, the toolbar arranged around the camera remains a stable reference in the great majority of situations. It is almost like making a mark on a moving boat to keep your bearings: the reference travels with the hardware.

Safe-area diagrams for landscape and portrait layouts on the outer display.

In the example above, the shared toolbar expands on the outer display in landscape while continuing to follow the same organizing logic around the camera and Dynamic Island.

“Because controls on the vertical axis stay aligned with the hardware, they hold the same position relative to the camera on the outer display, and stay on the same side in right-to-left languages.”

—Apple HIG: “Designing for iPhone Duo,” “Vertical controls”

Two apps side by side with mirrored controls on the outer edges.

Even when two apps run side by side on the inner display, their toolbars adopt mirrored positions, reinforcing the arrangement around the outer edges and the camera or Dynamic Island.

That brings me back to the book metaphor.

A book can open, turning one visible page into two, while its edges continue to provide a reference for holding it and finding our place. The vertical Dock readily suggests a bookmark attached to the edge of a page. What makes that association interesting is the persistent, easy-to-find point of access amid changing content—much as a bookmark remains an anchor for returning to where you left off.

This does not mean the Dock records reading progress like a bookmark, nor does it prove that a bookmark inspired the side layout. It is simply one way I use the book metaphor to understand this interface.

Clear anchors and coherent space

Chan discussed a related problem in 2018: an interface in motion must preserve spatial consistency. When a page enters from the right and exits to the right as we go back, that path helps us understand where it sits in virtual space and anticipate our next gesture. Elements can move, but their movement needs to respect the spatial understanding already established.

“Designing Fluid Interfaces”

That corresponds to one of the principles I drew from Chan’s presentations earlier:

Spatial coherence: forms can change while relationships we already understand remain continuous.

Seen this way, the spatial references worth preserving on Duo include not just the routes pages take, but also access to the most frequently used actions along the side.

As iPhone Duo opens and closes, the center of the screen, the width of its content, the number of columns, and its orientation can all change. Yet the most-used controls continue to follow a familiar edge, much as we instinctively look to the top and bottom on earlier iPhones. What persists is the expectation that “the action I need is in the sidebar beside my right hand,” rather than an immutable coordinate for every button—or a new arrangement dependent on each developer’s flash of inspiration.

A Mail interface showing the relationship between columns and controls.

The new guidelines are not entirely rigid, of course. Positioning controls along the edge—usually the right—is only one frame of reference. A tool also has a relationship to the content it acts on, and that cannot be broken arbitrarily.

The HIG states the requirement directly:

“Locate controls near the content they affect.”

—Apple HIG: “Designing for iPhone Duo,” “Vertical controls”

Tools for managing a list of emails should visibly belong to that list; actions on a single email should not be mixed up with them. In a multicolumn interface, not every control moves to the far right merely to make a tidy sidebar. The control-bar session likewise emphasizes keeping controls associated with their containers.

Together, these two requirements largely explain the logic of the side layout. Controls can move when the device changes shape, but the relationships people use to find actions and identify what tools belong to retain clear anchors and familiar spatial organization. Screen dimensions, app layouts, and toolbar sizes change, while the broad relationships between spaces and components remain understandable. The interaction logic stays clear and continuous.

The toolbar is collapsed while the tab bar remains visible, illustrating how navigation can take priority when space is limited.
The tab bar is collapsed while the toolbar remains visible. Compared with the preceding image, this shows how task priorities affect which controls are displayed.

This is where I find the most useful connection between Duo and Chan’s earlier presentations. Returning to the user’s circumstances means reconsidering familiar positions: which are still convenient, which need to change, and which points of reference should survive that change? A screen that offers more freedom of layout also demands greater care with the understanding users have already formed.

A moving hinge asks more of the interface

iPhone Duo adds more than a flexible inner display. It adds a crucial element of interaction: the hinge.

As the hinge turns, it introduces another layer to the problem. It receives the user’s action while changing the shape of the screen. Opening the device reveals more than a larger display area. The viewing angle, touch targets, and usable space are all changing throughout the same action.

That is what makes Duo’s interactions more complicated than adapting to different dimensions. Closed, partly open, and fully unfolded are merely a few states that are easy to name. Pausing between them, reversing direction, and continuing to unfold are just as much part of actual interaction, each with its own conditions and context.

The hinge is both a pivot and an input

Apple provides apps with two kinds of hinge information. One identifies whether the device is closed, partly open, or fully unfolded—a set of discrete states. The other continuously reports the hinge angle. The first is useful for determining the device’s current configuration; the second lets an effect follow the movement of the user’s hands.

The video “Leverage multiple displays and scenes on iPhone Duo” offers a vivid example: a virtual guitar. The hinge acts like the guitar’s whammy bar, continuously changing pitch with its angle. A slight turn of the wrist changes the screen angle, and the sound changes immediately. Reverse direction midway and the pitch needs to drop with it. The angle becomes part of the performance itself—a clear demonstration of the hinge’s potential as an input variable.

A virtual electric guitar used to demonstrate hinge input.

The striking unfolding animation discussed earlier suggests another straightforward use of hinge-angle information: in my reading, the changing blur appears to follow the device’s opening motion. As noted above, though, the available material does not establish the precise mapping or implementation.

Four stages in the unfolding animation.

More broadly, continuous angle data bridges the different folding states. It gives changes to individual UI controls a concrete basis during the transition from one state to another.

Continuous user control takes on a more specific meaning here. Design must account for the whole movement while deciding which changes deserve immediate feedback and which parts of the UI should remain stable. Responsiveness and stability are not contradictory. Together, they let people control the action and see what to do next.

A book that changes needs flexible controls

On a device with inner and outer displays, merely fitting the screen dimensions will always be a stopgap. Making interactions work across them is inevitably more complicated. This digital book will not sit passively like a printed volume waiting to be read. Every app must respond thoughtfully to the changing space between displays and to the inner display’s shifting angle and state. Apple’s current solution may not be perfect, but in many situations I think it already represents best practice.

Apple designers demonstrating with a physical book.

When the device is partly folded, the middle of the inner display becomes a curved region that is less suitable for presenting and reading content. In “Strike a pose with adaptive layouts on iPhone Duo”, a real book and a photograph spanning its pages illustrate the difficulty. Content and controls crossing Duo’s fold encounter a similar problem.

A diagram marking the curved region down the inner display’s center.

The simplest response would be to push everything near the center toward the sides. Apple’s subsequent demonstrations make finer distinctions. A dialog centered on the flat display moves to one side to remain readable. An image and its associated menu, meanwhile, move to opposite sides of the hinge but remain close to it, emphasizing their relationship. This is clearly an application of spatial coherence.

An image and its associated menu placed on opposite sides of the fold.

Articles, feeds, documents, and lists receive different treatment. They already scroll vertically, so content near the crease can move out of the central region as the user scrolls. Making an entire article jump to one side—or abruptly splitting its layout—to accommodate a small portion of affected content would interrupt reading. How much adjustment is needed depends on whether the content remains legible and touch targets remain usable. Which elements should move together depends on their existing relationship.

A content grid displayed across the inner screen.

The movement of alerts offers an especially clear example. An alert is centered when the device lies flat. When it is partly folded like a book, the alert moves to the right, near the shared toolbar. Close the device in portrait and it returns to the center, like an ordinary phone alert. More interestingly, when Duo sits on a table like a laptop, the situation changes again. The upper half now provides the best viewing angle, so the alert, carrying important information, naturally moves there.

An alert on the upper half of a device resting like a laptop.

During playback, however, the video is the main thing being consumed. Playback controls are used less often and can sit on the lower half, which does not face the viewer directly. This division also follows the principle of context first.

Video on the upper half and playback controls on the lower half.

By this point, “context” has become very concrete. How far away are the viewer’s eyes? What are they mainly looking at? Which part of the screen are their fingers using? Which content do the controls belong to? How are pages organized when the device lies flat? What collapses when it closes, and what remains visible? These are the considerations driving the design.

An article tracing these ideas back to their origins cannot cover every design detail. The references below include the relevant guidelines, WWDC sessions, and Tech Talks for designers and developers.

Closing thoughts

We may need six months, or even a year, before we can form a sufficiently clear and measured judgment of iPhone Duo as a phone. My first concern was whether its crease would really be less noticeable. Yet the results of Apple’s investment in design may be easier to see than its hardware advances.

From Macintosh to Chan’s presentations to the adaptation of iOS for Duo, I see more than “design evolution.” I see an ability to keep asking familiar questions anew. Cards remain a conventional way of organizing information, but longstanding toolbars need their accessibility and usability reconsidered. A simple act of opening or closing creates complex situations, including the need to pause, reverse course, or carry on working.

An iPhone Duo product lineup showing closed and open configurations.

The book metaphor gives these changes an understandable starting point. From there, iOS must give its components good reasons to transform, collapse, or move aside, so people can read the feedback, continue interacting, and change their minds at any moment. Only then do the principles outlined at the end of the first section become concrete actions.

Reading the guidelines and watching the official videos makes the complexity of the new system unmistakable. Working through it can be a little headache-inducing—but it is also a great deal of fun.

References and further reading

Share:

Leave a comment

Your email address will not be published. Required fields are marked *