In the Principles of spatial design session at WWDC 2023, Apple's Design team walked through how to design new and existing apps for a spatial operating system and infinite canvas.
Keep apps familiar
- A new platform offers lots of new possibilities, so try to balance that with what's familiar to people.
- Common UI elements like windows, sidebars, tabs, and search fields are components people recognize and know how to use.
- Place interface elements within windows so people can comfortably see them and use them in spatial computing.
- People can grab the window bar to move windows anywhere around them, but they always turn to face someone when moving.
- Windows are designed to fit within people's view but they can stretch to fit any size.
- Controls like tab bars and toolbars can be layered above the main window, so they're always accessible.
- Windows can be flexible and dynamic, changing their shape and size based on the context.
- Apps can have multiple windows to display content side by side but multiple windows can quickly become a lot for people to manage.
- As people move windows, they get larger as they move away and smaller as they move closer. Design your interface with points and it will work at any distance.
Be human-centered
- When people wear the device, they see the world in front of them. It's easiest to see things in the center and with landscape layouts.
- People don't keep their head perfectly still so you can extend content further for immersive experiences.
- Place your content relative to the person's head in the direction they're facing.
- Mostly place content away from people, a bit further than arm's reach, to encourage people to interact at a distance.
- Avoid anchoring content to people's view -this makes things feel stuck and can be disorienting. Instead, anchor content in people's space.
- Unless it's a core part of your experience, people should be able to use your app without needing to move at all.
- If people move, they can press and hold the Digital Crown to recenter, which moves content back in front of them.
- People's physical space may be limited so design your app to work well in any amount of space.
- System handles how to fit windows into someone's space.
- Dimming is a simple yet powerful way to maximize space and helps people focus on content.
Use dimension & scale
- Giving apps dimension means using depth as a tool for hierarchy and focus.
- Content far away can be large and encourages people to interact at a distance. Nearby objects invite interaction and are easier to inspect at different angles.
- Nearby elements can remain small but still take visual precedence over large objects far away.
- Depth needs to be reinforced with visual cues like light and shadow. Any object that appears to emit light should shine color onto nearby objects.
- Most other objects should cast a shadow, this grounds them and makes them look more integrated into the space.
- Subtle depth between elements is often enough to direct people's attention. Don't overdo it.
- Not everything needs depth. Keep text flat when used as an interface element.
- Try making things really big or try them really small, and see how scale makes it feel.
Immersive experiences
- Try to start your app in a window in the Shared Space. This will give people control over how immersed they want to be.
- Dimming is a simple way to create contrast between your content and people's surroundings without taking them out of their space.
- You can design rich, immersive experiences without taking over someone's entire view, which is helpful if they need to see their hands to use a keyboard or controller.
- Guide people's focus toward parts of your experience that matter the most. This will keep people feeling comfortable and aware of what's happening.
- If your app's in a Full Space, you can use the shape of a room to anchor content or create physical interactions. When you're blending entire scenes into someone's space, make sure to use soft edges to smoothly integrate your app.
- Do more with less. Subtle motion can transform a static experience into something alive and dynamic.
- With Spatial Audio, you can anchor sound to objects in space or create soundscapes that fully surround people.
- If you need to move your immersive app or someone's position within it, make sure to avoid large, fast movement. Fade out content while it's in motion and fading it back in once it's settled.
- Make sure to provide a clear way in and out of your immersive experience with short, helpful labels and recognizable symbols, like expand and collapse arrows.
Feel authentic
- Take advantage of the unique capabilities of the device, the best apps are rich, immersive experiences that make use of people's space.
- Start by focusing on one unique aspect of your app that can only be experienced spatially.
- In the Photos app, when you find a special photo, it grows big in your space and dims your surroundings. Panoramas transport you in a way that's only possible with infinite space.
- By focusing on one special feature, you can make your experience unique and memorable with the content you already have.
- Rich visuals and high-fidelity audio make things feel real.