Spatial UI Design Concept for Apple Vision Pro — Case Study
Exploring the new area of UI — Spatial Design turns out to be more fun and rewarding then I initially expected.
When Apple announced that they’re launching Apple Vision Pro, instantly I knew that this would revolutionize the whole VR/AR industry and I decided to make it a personal challenge to come up with a cutting-edge spatial design of a popular app that is custom-built for the platform, and I opted for Gen Z’s (and Millennials, too) favorite streaming platform, Netflix.
Before diving into the canvas, I started this project by lots of reading and studying Apple’s VisionOS guidelines, watching tutorial videos, studying other case studies on spatial design and analyzing Netflix’s current UI on both desktop app and mobile device.
The main goals of this project is to:
- Come up with an authentic, intuitive, familiar, and immersive viewing experience
- Elevate Netflix’s current UI by capitalizing on spatial design capabilities
- Enhance user experience and content interaction based on existing UI
Understanding
I started off by analyzing the structure and pattern of Netflix’s current UI on both desktop and mobile, as well as VisionOS design pattern. This includes things such as placement of the elements, structure of their movie/show thumbnails, and the color palette & typographic scale.
Defining
This stage includes defining the set of colors and typographic scale that I will be using throughout the project, and how spatial design can improve the overall user experience while also considering factors such as intuitive navigation and users’ familiarity with the platform.
Since Apple encourage the design to use as much system components as possible, I decided to go with Apple’s SF Pro Display instead of Netlix Sans for the main typeface.
Ideation
After getting the foundation done, I brainstormed and drew some sketches to come up with ideas on how to implement the existing UI & UX into spatial design and make the design authentic without losing the brand’s identity. Since VisionOS’ windows are designed in glassmorphic style, I based all light source to be from the top left corner.
I wanted to implement VisionOS’ tab bar and toolbar into the main interface. The tab bar consists of the same menus as the mobile app, while the toolbar is designed to contain the menus in the header navigation of the desktop app. These two elements got reworked in the later phases of the design.
The home screen will be a flat-window to make the interface familiar. When a movie is played, the window stretches to cover 180 degrees of the users field of view, making the experience more immersive and taking advantage of spatial design capabilities.
When users tap on a thumbnail, an overlay window showing more information about the selected show pops up mimicking the desktop experience. The main window gets dimmed and pushed back on the Z-axis, temporarily disabling the main window and prompting users input.
Wireframing
I drew a wireframe for the home window and for the overlay window. A little fade gradient is placed in absolute positioning on the bottom of the main thumbnail to increase contrast between the background and the actions.
Implementing the wireframe into Figma, this is what I came up with.
I moved the search bar onto the top of the thumbnail to make the toolbar looks cleaner. The overlay is pretty much identical to the desktop UI with some minor rearrangements of the elements.
Final Interface
I moved the search bar (once again) into the tab bar to make it as accessible as possible for users, while also making the main thumbnail looks cleaner and stands out more.
The toolbar overlaps the main window by 20pt to add a sense of depth without distracting users from the primary content.
When users tap on a show’s thumbnail this overlay window will pop into view. The surroundings will get dimmed along with the main window to focus users’ attention.
Design Considerations
Ergonomic Consideration
The UI is mostly kept in user’s field of view without placing it too far up or down to prioritize physical comfort and avoid any neck strains.
Light Source
As shown in the previous sketch, I modified the strokes’ gradient paths of the glass panels to match the light source. This creates a subtle realism effect and add more to the immersion.
Interactive Elements
Following Apple’s design guide for VisionOS, I set the minimum target area for all interactive elements to be 60x60pt so that they can be easily selected, while the UI elements themselves can be optically smaller (44x44pt for standard buttons).
Each element needs at least off 8pt of empty space in all 4 directions to fulfill this requirement. For smaller buttons like a caret for dropdowns, the optical UI area can be smaller such as 28x28pt, while the target area is still 60x60pt.
System Components
I used VisionOS Design Library and Resourrces for most of the basic elements, and only create custom components or use custom icons when absolutely necessary to ensure the best user experience and consistency throughout the design.
Tab Bar & Toolbar
Following Apple’s Guidelines on Designing for Spatial Interfaces, the tab bar should provide access to top level navigations of the app while the toolbar a should act as an additional control panel that is easily accessible, placed using depth to create hierarchy.
I took the mobile’s navigation menus + the desktop’s “My List” and the search bar as the tab bar options. I figured that the rest of the categories such as “Shows”, “Movies”, “Trending”, etc. could be placed inside the toolbar instead.
I added two menus onto the toolbar which are the “For You” section, which shows Netflix’s recommendation that are customized for each user based on their search and watch history to make the experience feel even more personalized, and the settings page (gear icon) so that users can access it directly without having to go through their profile page.
Element Placement
In the initial stage I placed the show rating beside the mute/volume button to follow the desktop UI’s pattern. Since the show rating is not an interactive element, I decided to move it to the show description to avoid confusing users.
The placement for the close button is on the top right corner for overlay screens in the desktop interface. I moved the button to the top left instead to comply with VisionOS native design pattern and ensure consistency across the app.
My Thoughts
The goal of the project is to create a Netflix experience that is authentic to the platform and work on possible room for improvements in the current UI, instead of just replicating the existing design on top of glass panels.
Even though the implementation of features and aspects that are exclusive to the VisionOS such as the floating toolbar and tab bar may take some time for users to adjust to, I believe this would improve the overall user experience in the long run.
Capitalizing on the fact that spatial design is not bounded by screen, interface designs of many apps can be hugely improved by implementing minimalistic design to emphasize users focus on the main content and move the actions & navigation menus outside of the primary canvas.
…
Thank you for taking the time to review my work! Let me know your thoughts and leave a comment or suggestion :)
