VisionOS Best Design Practices
VisionOS Best Design Practices
PRINCIPLES OF SPATIAL DESIGN
Familiarity - Navigational elements like the side bar, search bar, etc. all have to be laid out in a logical and familiar manner. These are the primary touch points in any information architecture. It has to be understandable and logical.
Windows are a core element to VisionOS. They are the main screen by which the apps populate in. They mostly have a glass effect. This helps provide a sense of awareness with a users environment and morphs in a more natural way. There are three options for windows. Move, resize, and close.
Sizing in windows are crucial. The default size of any window has to reflect the functionality and deliverance of its content. Safari is tall to accommodate better viewing and Keynote is wide To fit full size presentations.
Tab bars and tools bars (music control at the bottom of app) are a part of windows push outside of the window and sit ‘above’ them for better context of content.
Windows also grow depending on content like if side bar is prompted in Safari. They should remain smaller for the most part however to prevent blocking the users view of the room and prevent clutter. Only display what’s necessary.
You can open up multiple windows as well for multiple viewing and richer content. This can be a side by side view like in Safari or an in-app controller like presentation mode in Keynote. Ideally however try have things accessible from one window to prevent clutter.
Designing in points (pt) is crucial in spacing. Given how flexible and versatile VisionOS is in window scaling, using a point system to size out each buttons and how they relate to the content, and in turn to the window, is crucial. More than just scaling, distance plays a key role in the user experience of VisionOS. Movement changes the size of the window automatically; when a user comes closer to their content, the window shrinks correspondingly and enlarges when they get further.
VisionOS Research 1The Field of View is also important in designing for HCD. Human vision is wide but it focuses narrowly. Because of this, the primary content created should sit neatly within the fovea field of vision. When creating a pop-up grid or multiple windows, have them tilted at an angle towards that field of view instead of fanning them out linearly.
Content should be at a users line of sight and further than arms length. If they do walk around or turn their heads, content should stay where they were placed and only rotate slightly in case they want to glance back to it. Having it move with the users will make it appear static and limiting.
User can move around with Vision Pro but your software unless absolutely necessary or a core part of the experience should require minimal movement. If users do move from say a chair on dining table to a couch, the content will not move with them but pressing and holding the Digital Crown will re-centre content. While content and canvas may be infinite on VisionOS, a persons space may not be. Be mindful of how large and also how restricting your content is relative to space.
Depth is important especially given that you’re interacting with a 3D space essentially. Having shadows and pass through elements as well as hierarchy with the combination of the two will provide a sense of placement and order. Use dimming to help with immersion. By and large regular interactions will still involve the space around peoples area to provide context. However when watching a movie dimming darkens the background and makes the content the focal point of
attention.
This may go without saying but guided transitions for immersion, say dimming the screen for movie time, has to be as smooth and predictable as possible. In Cinema Mode, you can create a pretty convincing atmosphere by simply reflecting the light off of the screen to the floors and ceiling with the same subtle gradients that YouTube uses in their ambient mode. This helps reduce the needs to render all individual details of being in an actual cinema such as chairs, etc.
WINDOWED APPS FOR SPATIAL COMPUTING
Glass backgrounds on windows are a default. It adapts to lighting conditions and surrounding and does not have to distinguish between light and dark appearances (neutral)
Instead of using solid colours for buttons etc, use vibrancy and transparency layers on top of the glass effect to help better blend in both light and dark conditions
Icons and buttons are subtly highlighted when you look at them to grant context and dynamism in the interaction. This is called hover effect.
Tab View - This shrinks the tab bar into a capsule shape the enlarges when you look at it and collapses when you’re not. This keeps content focused and minimal and does not clutter the view. Not like the top image.
Tab bars and tool bars or any interaction element placed outside of the main content window is called an ornament
In-App notifications are placed at the bottom of the window (where the tool bar is)
DESIGNING SHAREPLAY EXPERIENCES
Shared and not shared windows are clearly represented by the ornament on the top.
Consider the ‘entry points’ of your interaction along you UI. When and where in the app do you start this interaction? In the TV app lets say, any play button can start a session. Moreover the top ornament os ‘not shared’ can also do the same function.
Design how your activity starts for everyone. Consider not having to open other windows if there are unfulfilled pre-requisites to SharePlay. If someone needs to create an account first let’s say, it might be worthwhile to redirect them back to a setup account app and then back to the content instead of a bunch of pop-ups. Or even if you need an extra window, close it automatically as soon as the minimum required information is fulfilled.
Like in a real life setting, someone has to be somewhere. These are spatial persona templates. There are three types.
For a singular content with a unified viewing experiences like a movie or whiteboard, have everyone next to each other, shoulder-to-shoulder For an activity that emulates a table-top experience, choose a surround template where the content is placed in the centre and people have a unique viewing angle. For scenarios where something is ambient and in the background like music let’s say, choose a conversational template.
Content feedback both audio and visual has to be unified as well to make it seem as if everything is coming for the same point and is being enjoyed in the same way making things like pointing make sense. This can be done by everyone joining the same mode and having one person make the transition and the rest join.
Users should also be able to set their own audio levels as an element of personalization despite sharing the same content. So while the main view port is shared and the same, elements of personal usage like active tool in a work space, and audio levels in content consumption has to be personal to each user.
During a shared experience, individual users can open their separate unshared personal window, just like bringing an iPad to a group meeting.
Users should be able to join or leave spatial activities anytime with ease and rejoin a session with the same convenience. Having immersive experiences may be best done by not having any spatial personas represented. The bigger question is how do we still monitor other peoples engagement as something plays?
Users can always return to pass through by pressing the digital crown.
Using Apple’s UI Kit again, this is what the SharePlay menu page looks like.
DESIGN FOR SPATIAL USER INTERFACES
Icons are all circular and in 3D. They expand when looked at a recede when they’re not. The best way to do this is by adding layers (up to 3). Each layer is a square image and measure 1024 by 1024 pixels. Both foreground layers should have a transparent background and once uploaded Vision OS animates it for you. Avoid opacity in layers or they will blend with the background blur and look distorted.
Despite the dynamic element of the glass UI with its background, having its own specular highlights and shadows make it stand alone better as well. That way content is still vividly usable despite being in a dark room. Consider it a subtle light
emitting ornament instead of a simple glass pane. Do NOT use opaque windows Consider a window.
The side bar (if not an ornament) is automatically darker for visual distinction. Buttons are then made lighter to call attention and create instantaneous visual contract. And consider using significantly darker elements for standard components like input fields and search bars that are heavy touch points. If done correctly, all texts should default to white and be perfectly legible.
Creating more contrast is great but colour is important. Do not however stack light coloured materials up top the other for this can reduce legibility.
To ensure legibility, type weight has to be a notch heavier than on mobile
Colours are great but coloured text may be hard to read. Consider coloured shapes instead
Content has to be centred always and having them stretch out horizontally over vertically if more space is needed is the standard since it’s easier to look horizontally. Go for a wider aspect ratio if need be.
Tap target area should have 60pt of space (minimum) so its easily selected. Even if your button is smaller, there has to be padding to accommodate touch accessibility.
Spacing between button should be 16pt minimum. This way even though buttons are very small, the 60 can still trigger an input well.
Spacing & padding is also important for hover effects. Have at least 4pt spacing in between.
Remember this simple formula when creating radii in highlight and item. This helps keep content concentric with one another.
Use borderless buttons in ornaments since its clear that they are interactive elements anyway. Ornaments are persistent because access to them is key to navigation (controls) until an immersive mode is enabled.
Ornaments should be placed outside the window by 20pt. This gives a balance appearance of integration and distinction.
Ornaments can also expand to serve up more control without opening a control window
For pop-over on a selected menu, pop-ups are always centred to the main button and the button selected becomes white with black icons. This distinction between a darker button & white icon shows what’s being selected. Avoid using white buttons unless they’re selected.
Sheets are centred on the main window and when popped up, it dims the main window or whatever is behind it, and ‘pushes’ it back by slightly shrinking the window.
Instead of nesting sheets like above, you can also have it navigate to a next page and have the close button morph into a back button. This reduced number of windows open.
Circles and rounded corners are way better than sharp corners because with sharp corners, the eyes tend to focus more on the edges, making it harder to focus your gaze. As well, avoid thick outlines, effects that call attention to the edges, and make sure to centre elements using generous padding. The point is, always guide eyes to the centre of the element.
Use dynamic scale over fixed scale. This way, when users push content backwards, it gets bigger and if closer, smaller, visually making the content the same size. Using a fixed scale makes the object very small when far and huge when close. Not good for window viewing.
By using the standard Apple video playback kit, this is the generic interface that users will get. Pinching the bottom will get you to move the window, pinching the corner, and pinching the corner let’s you resize the window.
Let's build the future together!
© 2024 • Made by Glen Samuel Yausep
Let's build the future together!
© 2024 • Made by Glen Samuel Yausep
Let's build the future together!
© 2024 • Made by Glen Samuel Yausep
