Rethinking Adaptive Navigation with SceneStrategy
Improving user experience by thinking beyond screen size.
1Beyond Screen Size
In adaptive UI design, focusing solely on screen size is a common mistake. Instead of considering device types like phones, tablets, foldables, or desktops, it's essential to evaluate how available space is used and whether displaying multiple navigation entries simultaneously would benefit the user. For example, on a narrow screen, list and detail might be shown on separate pages, while on a wider screen, they could be displayed simultaneously.
2Advantages of Multi-Pane Display
Showing both list and detail simultaneously on a phone in landscape mode can significantly improve user experience. This approach shouldn't be limited to landscape mode. For instance, an app running in split-screen mode could display multiple navigation entries even in portrait mode. The key is to question whether the available space comfortably accommodates another entry and if doing so enhances the user experience.
3Adapting to Environmental Changes
Switching from portrait to landscape is just one of many scenarios where available space changes. An app might transition from full screen to split screen, a foldable device might unfold, or window size might change. Each of these changes affects the available space for presenting navigation entries. Therefore, it's important to avoid thinking about adaptive layouts purely in terms of device categories.
4Fundamentals of SceneStrategy
SceneStrategy is an approach used to define different ways of presenting navigation states. A Scene describes a particular way of presenting one or more NavEntry instances. It contains information such as its key, the entries it contains, previous entries, content, and other scene-related metadata. SceneStrategy enables making the most suitable presentation decision based on the current environment and content.
5User Experience-Centric Design
In adaptive UI design, considering current space, content, and user experience is more important than rigid rules based on device categories. For example, if a detail screen only uses the center of available space, the remaining empty area could be used for another navigation entry. This approach allows creating flexible and effective interfaces that better respond to user needs.
6Relationship Between Scene and NavEntry
While a NavEntry represents a destination or content entry, a Scene defines a specific way to present these entries. Scenes are more than just providing composable content. They include information like scene key, contained entries, previous entries, and other metadata. This allows the app to make the most suitable presentation decision based on current environment and content.
7Flexible Presentation Options
Even a single phone can display multiple useful presentation configurations based on current environment and content. For example, it might show a single pane or two panes. The same principle applies to tablets, foldables, and desktop windows. This flexibility ensures users have the best experience in different scenarios.
8Importance of Environmental Information
Device orientation is just one of many factors that change available space. An app might transition from full screen to split screen, a foldable device might unfold, or window size might change. Each of these changes affects available space for presenting navigation entries. SceneStrategy enables dynamically responding to these changes to select the most suitable presentation.
9Flexibility in Design Decisions
In adaptive UI design, adopting a flexible approach rather than rigid rules based on device categories is crucial. For example, a screen might technically have enough space for another pane, but that doesn't always mean it should be used. Similarly, a screen might be classified as compact, but that doesn't necessarily mean we must restrict ourselves to one entry.
10Advantages of SceneStrategy
SceneStrategy allows apps to select the most suitable navigation presentation based on current environment and content. This approach enables creating flexible and dynamic interfaces to improve user experience. By defining different ways to present navigation entries, Scenes help apps deliver consistent and effective experiences across different devices and scenarios.
11Application Examples
SceneStrategy can be used in a wide range of scenarios, from list-detail apps to more complex cases. For example, an e-commerce app could display product list and detail simultaneously. A news app might show news list and reading view side by side. This approach facilitates user interaction with content and enhances overall experience.
12The Future of Adaptive Design
SceneStrategy has the potential to set a new standard in adaptive UI design. As device diversity increases, thinking beyond screen size becomes critical for improving user experience. SceneStrategy helps designers and developers overcome this challenge, enabling them to create more flexible and user-friendly interfaces.