Design Principles
SAP Fiori for visionOS / Design Principles
The Apple visionOS platform offers a standalone user experience for applications, similar to what you would find on an iPad or iPhone. Users expect to interact with apps that let them complete tasks while leveraging the unique spatial and interaction capabilities of the software and hardware.
Running on visionPro devices, the visionOS platform delivers spatial computing experiences that seamlessly blend virtual elements with the real world, as well as a fully simulated virtual reality (VR) environment. Users can control the degree of blending, except in the case of fully immersive applications, where the VR environment takes precedence.
User Interaction
The visionOS platform, combined with visionPro, introduces gaze (eye tracking) and spatial input (hand and finger tracking) as the primary methods of user interaction. Alongside Apple's UX guidelines, here are several key recommendations to keep in mind when designing your application UI:
- Define activity regions carefully to avoid overlap and ideally include sufficient padding. This ensures the device can reliably track the user's eye intent, preventing erroneous inputs.
- Test the main activity regions in custom UI components or layouts early to avoid major rework later on.
- For complex or densely packed activity areas, consider providing onboarding guidance for hand gestures using Apple’s TipKit.
- visionOS offers a robust set of accessibility features that can augment or replace default gaze and spatial input methods. It's highly recommended to test and optimize your application's UX to leverage these accessibility capabilities, especially for custom or densely packed layouts.
- visionOS supports mouse and keyboard usage, similar to iPadOS and macOS. The visionPro hardware is designed for use while standing or sitting. Consider supporting scenarios like desk usage with mouse and keyboard, particularly for data entry or manipulation tasks.
- Spatial audio is crucial for the UX of spatial and immersive applications. Use audio effectively to direct the user’s attention and integrate visionOS experiences into the physical world. In immersive experiences, audio is mandatory to provide a coherent user experience that matches the physical appearance of objects and the environment.
Adaptive Design
Designing a 2D spatial application for visionOS often requires adaptive and responsive UI behaviors due to the flexible and smooth scaling of the UI surface on the x and y axes. Programmatically, you should limit the minimum and maximum length for each axis, keeping in mind the default behavior of visionOS views. Consider the content your application is showcasing, especially in the case of complex data grids, to determine the minimum dimensions. For more information, see Adaptive Layout.
Additional visionOS-specific guidance:
- Apps can function as a single-pane experience (like a regular window) without hierarchical navigation logic, similar to the Mail or Notes app. This approach simplifies the UI and allows users to multitask by keeping other application windows in view.
- Using a tab bar for primary navigation is suitable for applications with simple information architecture and distinct content or functional categories (e.g., opportunities vs. sales contracts). However, for multi-object applications, the sidebar should be the default navigation method to facilitate easy content discovery, flatten hierarchies, allow quick context changes, and provide an escape route for deep navigation.
- Ornaments are a unique control for visionOS and should not be used for navigation. Learn more about Ornaments.
- Avoid automatically resizing or positioning windows, as it takes control away from the user and can be disorienting in a 3D spatial layout.
Application Window Management
In visionOS, applications can open multiple windows to display content and provide access to actions. However, managing multiple windows across various applications is already challenging for users, and adding more windows from a single application could complicate things further. It’s generally better to design 2D spatial applications as single-window applications, similar to designing for iPad. This not only simplifies development by reusing the same SwiftUI code base but also makes the application more user-friendly.
There are certain scenarios where a multi-window approach can be beneficial:
- Allowing users to "extract" specific objects from an application window and pin them nearby. For instance, business users might find it useful to keep information cards or charts in view while analyzing related objects in the main window.
- Using the main window to create a personalized view from a repository view shown in a second window.
- Tool palettes: Attaching action panes to the main application window can enhance efficiency by decluttering actions from the main content area.
Design for Spatial UI
Creating UI design specifications for 2D spatial applications in visionOS with Figma is a great way to get a preview of the final look of the UI.
Here are a few recommendations to keep in mind due to the unique rendering of UI elements in visionOS:
- Consider the z-axis when deviating from standard UI elements or behaviors. Many UI components in visionOS, such as ornaments, toolbars, and tab bars, have specific offsets on the z-axis to create a 3D layering effect and draw the user’s attention. When designing custom elements or additional windows/tool-panes, include the z-axis definition in the design specifications.
- visionOS user interfaces don’t use a light or dark mode but rely on glass materials to reflect the environment’s lighting conditions. The UI automatically adapts to the luminance of objects and colors behind it, helping to blend virtual objects with the real world. Due to this glass material, it's recommended to use a background image (e.g., a living room or office with muted colors and simple shapes) when sharing UI mockups or specifications.
- Utilizing developer mode in Figma can simplify the specification process by reducing the need to position 3D coach marks manually.