foto/photo @Apple inc
Let people use elements that they recognize and know how to use them. Such a design makes people feel familiar and reliable.
image source：https://developer.apple.com/videos/play/wwdc2023/10072/
1. Design within windows
Vision OS plays interfaces within windows to let people see and use them comfortably and clearly. Using frosted glass in the windows allows for a natural contrast with the environment and a more natural look for the user. The frosted glass also allows the window to blend into the environment to a certain extent, adapting to different light changes.
The overall language of Vision OS window design is to make windows live in our space and feel part of the user’s surroundings. In this case, they’ve designed windows with a new visual language.
Using the glass material can provide contrast with the world so that the window will be changed as the environment changes.
image source：https://developer.apple.com/videos/play/wwdc2023/10072/
How the user interacts with the window
Windows in Vision OS can be moved, closed and resized by the user’s control, which is the most basic need for users to interact with windows.
Using the glass material can provide contrast with the world so that the window will be changed as the environment changes.
image source：https://developer.apple.com/videos/play/wwdc2023/10072/
Secondly, the user can change the window according to how they want it to change with the orientation of their head. Users can grab the window bar to have the window follow their head as they rotate it to the user-facing position, and when the user releases the window bar, the window is fixed in the last position it moved to. This allows the user to view the window clearly and comfortably. Combining the head view and hand control makes the operation more user-friendly.
Window size base on content
Window size is designed for the user’s visual comfort. And the window is very flexible and can be scaled to different sizes!
image source：https://developer.apple.com/videos/play/wwdc2023/10072/
The window size should be designed according to what the user is viewing. For example, when users enter text in Microsoft Word, they want to see more up-and-down content. But when they browse the slideshow, they want to see more left-to-right content. Therefore, the size and width of the window can be adjusted according to the user-oriented content, which is more convenient for users to read and operate the content.
Use tab bar and tool bar to push outside the window. Those controllers are layered above the main window.
Source：https://developer.apple.com/videos/play/wwdc2023/10072/
Use multiple section to separate controls from content
Source：https://developer.apple.com/videos/play/wwdc2023/10072/
” Those controls are always accessible and provide more room for the content, which lets the page take the focus. “
From Apple developer principles of spatial design
Apple design - layers
The design space brings more possibilities in the distinction and integration of windows and controls. As a result, Apple uses a lot of blurring and overlaying to show the hierarchical heights of the different modules, and the partitioning of the blocks gives the individual units a greater sense of wholeness. At this stage, I like Apple’s spatial window design solution, which can be effectively reflected and applied in spatial interaction design.
When the user doesn’t need those controls, some can be hidden behind the window, avoiding blocking too much of people’s view. Based on our discussion, consider how your app/website might look. And how could the user interact with it?
Apps can have multiple windows and display content side by side, like viewing multiple web pages at once.
Source：https://developer.apple.com/videos/play/wwdc2023/10072/
2. Spatial design
Filed of view of people
Remember to keep your main content within the filed of view. Ergonomically speaking, users are always used to focusing on the center of their field of vision. It’s a good idea to put our most important content in the center, but of course, we can also choose to expand our secondary content in the landscape, as users will also be turning their heads.
In the field of view of people, it’s easier to see the contents in the center. So you know to place the most important things.
Source：https://developer.apple.com/videos/play/wwdc2023/10072/
Design ergonomics in mind
When designing and presenting content, we should consider what position the user is in. Different viewpoints will give the user different physical and visual sensations. We need to place the content in a healthy and comfortable area for the user, so this considers ergonomics. We also need to take into account the user’s own physical condition, such as height.
” Designing with the people at the center, also means to design with ergonomics in mind “
From Apple developer principles of spatial design
Fix the window in its place in the environment to avoid disturbing the user and misdirecting it.
Source：https://developer.apple.com/videos/play/wwdc2023/10072/
Minimize users' movement
When designing applications for MIXED REALITY, consideration should be given to allow the user to complete the operation with minimal effort and movement, which will increase the usability of such applications. Unless the user’s movement is the core function of our app, let the user try not to move.
Consider that the user may be at different locations in the space and that our window is fixed at a particular location. Apple’s vision pro is designed with a Digital Crown that allows the user to press and hold to bring the window back to the visual center of the current position. Therefore, for Vision OS developers, our app doesn’t need to be designed with a dedicated button for the reset window.
3. Giving App Dimension
” Great apps take the advantage of space around people”
From Apple developer principles of spatial design
Enhance the viewing experience by dimming the light to allow the user to focus more on the content in a film-watching scenario.
Source：https://developer.apple.com/videos/play/wwdc2023/10072/
Dimming for content
When designing the presentation, make good use of dimming to accommodate different content and allow users to focus more on the content. Dimming that is integrated with the environment tends to be more user-friendly.
Using the depth of space to realign the relationship between the film and the control panel.
Source：https://developer.apple.com/videos/play/wwdc2023/10072/
Hierarchy and focus
Space depth is a new variable in interaction design for MR spaces. While we used to do design in two-dimensional depth, the three-dimensional presentation of space can bring more design possibilities. Proper spatial depth relationships can create interactive experiences, empowering and differentiating the content. For example, more profound and farther away content is more suitable for viewing and browsing. In contrast, content that is closer to us and has a shallow spatial depth is more suitable for interaction or perspective change.
Using light and shadow to build dimensions of content in space
Source：https://developer.apple.com/videos/play/wwdc2023/10072/
My very favourite idea has been realised by Apple. Can provide a more spatial shopping experience
Source：https://developer.apple.com/videos/play/wwdc2023/10072/
4. Sense of immersion
Content that surrounds the user
This is one of the features of apple vision that brings a more immersive experience by increasing the angle of content around the user. It also means that some immersive content can be developed with this feature.
Enhance the user’s vision or bring them to bring a new place.
Source：https://developer.apple.com/videos/play/wwdc2023/10072/
Like some monitor designs, curved screens bring the user a more immersive visual experience. It also allows us to put in more content horizontally. But at the same time, it should be noted that the immersive experience may bring the user a sense of disorientation, and too much horizontal content will cause users to misinformation. Therefore, it is necessary to consider the use of immersive experience scenes.
Establishes a connection to the user’s physical surroundings.
Source：https://developer.apple.com/videos/play/wwdc2023/10072/
” Use soft edge to smoothly integrate your app”
From Apple developer principles of spatial design
5. Principles of spatial design
Simply put, it's all about human-centered design. Design thinking is centred around the spatial variables of mixed reality.
Both the general design and the details are closely related to the user’s experience. As an interaction designer, we also need to think about spatial interactions, as well as the possibilities and experiences inspired by human eye and gesture interactions. We are committed to human-centred design as the basic spatial design principle to design a better app or interactive experience for users.
