Principles of spatial design

♪ Mellow instrumental hip-hop ♪ ♪ Nathan Gitter: Welcome to our session on the principles of spatial design. I'm Nathan Gitter. Amy DeDonato: And I'm Amy DeDonato, and we're designers on the Apple Design team. Today, you'll learn how to design for a spatial operating system. Here, the world around you is an infinite canvas for amazing new apps and games. Nathan: With depth, scale, natural inputs, and Spatial Audio, you can create experiences that were never possible before. You can enhance an existing app with key moments, or create something entirely new. You can go to a new place or share an experience with someone special. Amy: There's a lot to learn, and we're here to help you get started. Nathan: We'll help you make your ideas a reality and create experiences people will love. Today, we'll talk about how to make great spatial apps. We'll start with the basics, learning how to keep your apps familiar. Next, we'll talk about what it means to be human-centered. Then we'll learn how to use dimension to take advantage of the space and push apps even further with immersion. Last, we'll learn how to make apps that feel authentic to the platform. Let's jump right in. With so many new possibilities, strike a balance with what's familiar. Common elements like sidebars, tabs, and search fields help people find the music they're looking for. On a spatial platform, people should be able to find their music just as reliably, using elements they recognize and know how to use. We place interfaces within windows so people can comfortably see them and use them. People are familiar with app windows, but on this platform, windows live in your space and feel like part of your surroundings. In this first section, we'll talk about windows, learn how to find the right size for them, and discuss the points system. Let's start with windows. We've designed windows with a new visual language. The glass material provides contrast with the world, gives people more awareness of their surroundings, and adapts to different lighting conditions. The system provides controls to move, close, and resize windows. People can grab the window bar to move windows anywhere around them. Notice how they always turn to face someone when moving. This keeps interfaces easy to read and easy to use. When they release, the window stays in its final position. Next, let's talk about how to choose a size for your windows. Windows are designed to fit comfortably within people's view but they are super flexible, stretching to fit any size. Choose a comfortable window size based on your content. For example, Safari is tall so people can see more of the web page, and Keynote is wide to fit full-size presentations. Windows can have flexible shapes too. Use tab bars and toolbars to push outside the window, like here in the Music app. These controls are layered above the main window, so they're always accessible and provide more room for the content. Or use multiple sections to separate controls from content. Here in Safari, the navigation bar is set apart from the web page to let the page take the focus. And windows can change size too. When the sidebar is opened in Safari, the window grows, showing more controls without covering the web page. Windows aren't bound by a screen, so they should remain smaller when possible to avoid blocking too much of people's view. Think about how your app can be flexible and dynamic, changing its shape and size based on the context. Designing apps for this platform is a ton of fun. If you need a larger canvas, you can give yourself a larger canvas. And like other platforms, apps can have multiple windows, which are useful in certain cases. They can display content side by side, like viewing multiple web pages at once, or show distinct actions meant to be used together. Here in Keynote, when playing a presentation, the slides are in one window, large and far away, while the presenter display is in a smaller window nearby. This lets people place the presenter display where they want while keeping the slides nice and large. Ideally, keep your app's interface in a single window. Multiple windows can quickly become a lot for people to manage. Next, let's talk about points. To make sure our interfaces scale well, we design with points. This is a concept you're probably already familiar with. Points are the way we specify the size of interface elements, describing our interfaces in a way that adapts to other screens. On this platform, as people move windows, they scale larger as they move away and scale smaller as they move closer to them. This keeps interfaces legible and usable. And if you're used to points on other platforms, they're a familiar way to set the size of interface elements like buttons with the same units you already know. Design your interface with points and it will work at any distance. Learn more about designing interfaces in the session "Design Spatial User Interfaces". Next, let's talk about how we can design apps that are human-centered. Good design is always human-centered, but now this takes on a whole new meaning. People wear the device, use their eyes and hands to interact, and experience apps through their own view in their own space. When designing spatial apps, think about what someone can see and how they might need to move. Let's start with what people can see. When people wear the device, they see the world in front of them. This is their field of view. It's easiest to see things in the center, so place the most important content there. And the field of view is wide, so use landscape layouts. Here's an example. In Safari, when people want to see all their tabs at once, we spread them out in a grid. This layout is wide to match people's field of view. The tabs scale down so they're not too far from the center, and the tabs on the sides turn inward so they're easier to read. But people don't keep their head perfectly still, they look around. This means we can extend content further for immersive experiences, but in general, keep your main content within the field of view, or else it's difficult to read or comprehend all at once. Designing with people at the center also means to design with ergonomics in mind. The placement of your content has a big effect on how people react physically. So place objects comfortably in all dimensions. By default, windows are placed along a natural line of sight to encourage a healthy and comfortable posture. When placing your own content, place it relative to the person's head in the direction they're facing. This helps people see and interact with your content and accounts for people of different heights and in different positions, like laying back on a couch. Most of the time, place content away from people, a bit further than arm's reach, to encourage people to interact at a distance. Avoid placing content behind people or extremely high or low unless it's part of an immersive experience. Not everyone will be seated in a way where they can move around to use your app. And avoid anchoring content to people's view. This makes things feel stuck and can be disorienting. Instead, anchor content in people's space. This gives them the freedom to look around naturally. While wearing the device, people can also get up and walk around. But we recommend creating stationary experiences that require minimal movement. This makes your apps easier to use for everyone. Unless it's a core part of your experience, people should be able to use your app without needing to move at all. Sometimes people do move to a new seat in their room or to face a different direction. When they settle, they can press and hold the Digital Crown to recenter. This moves content back in front of them. Your app doesn't need to provide a special way to bring back windows or reset the scene. Instead, rely on this system as a way to reposition your app's content. Next, let's talk about giving your app dimension. We'll discuss the space that's available for your app, and after that, how to use depth and scale. Let's start with space. Great apps take advantage of the space around people. And while the canvas is infinite, people's physical space may be limited. Design your app to work well in any amount of space, because you don't know where someone might be using it. Also be careful not to constrain your app by the physical space available. Let's see how this works with the TV app. Here, a window is moved through a chair in the room. The chair is still visible while the window is moving to make it easy to place. When the window is released, the content becomes visible so people can see and use the app. With windows, you don't need to worry about how they fit into someone's space since the system handles this for you. When it's time to watch a movie, the video takes over the entire window and passthrough is darkened. Dimming is a simple yet powerful way to maximize space. Even though the movie might overlap the physical room, dimming helps people focus on the content. This is a great balance. People are still aware of their surroundings without being limited by them. And at any time, people might open an Environment extending beyond the dimensions of their physical room. And if your app needs more space to fit big content, you can create your own larger-than-life experience. Here, we created an immersive cinema to fit a huge movie theater. We'll talk more later about Full Space experiences like these. Giving apps dimension means using depth. On this spatial platform, depth is a new variable. It's a powerful tool for hierarchy and focus. Let's look at some examples. Depth affects how we relate to objects in space. Content far away can be nice and large and encourages people to interact at a distance. Nearby objects invite interaction and are easier to inspect at different angles. A small movement allows us to see the object from all sides. A great use of depth is to create hierarchy. Let's take another look at the TV app. In the immersive cinema, the playback controls are placed small and nearby. Even though they're small, it's still clear that they control the movie. If they were placed on the movie screen, they would look too large and out of place. Nearby elements like these 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. Some objects emit light, like the movie screen we just saw. The light shines onto the floor and ceiling, highlighting its position in the room. Any object that appears to emit light should shine color onto nearby objects. And most other objects should cast a shadow, like this window over the table. This grounds them and makes them look more integrated into the space. Any custom objects in your app should cast shadows too. In most cases, prefer subtle depth. It's easy to overdo, making things look distracting or unrealistic. Subtle depth between elements is often enough to direct people's attention. Notice how when a modal appears, the window pushes back slightly to bring attention to it. The depth is subtle, but effective. And not everything needs depth. Text, for example, can be distracting and difficult to read when it's 3D, especially at an angle. Keep text flat when used as an interface element. Like depth, scale is a new way to emphasize your content. Small objects feel personal and lightweight. Large objects feel impressive, like a giant movie playing over a lake. Increasing the scale completely changes the feeling of the movie. Some objects are best viewed at their real-life scale. For example, a shopping app may want to display products as they appear in real life. Explore different scales for your content. Try making things really big or try them really small, and see how scale makes it feel. To push your app even further, it's time to leverage immersion. To tell you more, here's Amy. Amy: Thanks, Nathan. Now let's talk about how to make your app immersive. Immersive experiences extend beyond a window and transform the world around you. We'll explore the immersion spectrum, essential tips for creating great immersive apps, and how to keep people comfortable. First, the immersion spectrum. On this platform, an app can be dynamic. It can fluidly transition between different states of immersion, depending on where people are in your experience. This spectrum offers so much flexibility. You can enhance someone's view or bring them to a new place and everything in between. Your app can be within a window in the Shared Space alongside other apps. Or if it needs more room, it could run in a Full Space, where other apps are hidden. Try to start your app in a window in the Shared Space. This will give people control over how immersed they want to be. Let's look at an example. In Keynote, the app opens in a window. But when it's time to play the slideshow, we use dimming to bring focus to this presentation. Dimming is a simple way to create contrast between your content and people's surroundings without taking them out of their space. When it's time to rehearse the presentation, we can bring people onto the big stage fully immersing them within the theater. Life-size experiences like these require more room, so Keynote is now in a Full Space and other apps are hidden. Here the app takes someone to a new place that they can see all around them. But Full Space moments might not take someone to a new place. They can exist within their own space as well. Here it feels like you're looking out over the ocean while you still see your surrounding room. You can design rich, immersive experiences without taking over someone's entire view. This is also helpful if they need to see their hands to use a keyboard or controller. Immersive apps can also feel connected to people's physical surroundings. Here, a big welcome moment casts a shadow across the table, making "hello" feel like it's really there. If your experience relates to someone's physical surroundings, remember to keep your design flexible. Not everyone's space is the same, and spaces tend to change over time, so make sure your experience can adapt to work well anywhere. Now, some essential tips for creating great immersive apps. When designing immersive experiences, there's a new consideration. People can look around and pay attention to different things, but if too much is happening all at once, they might feel overwhelmed or unsure of what to do. Which is why it's important to guide people's focus toward parts of your experience that matter the most. In the Mindfulness app, your focus is guided toward a single object in space. While you could look in any direction, your attention is drawn here, through motion, spatialized audio, and colorful materials. When it's time for deeper reflection, we gently expand the flower to fully surround you. Remember to design smooth, predictable transitions like these to create continuity between different states of your experience. This will keep people feeling comfortable and aware of what's happening. Another important tip is to blend thoughtfully with reality. If your app's in a Full Space, you can use the shape of a room to anchor content or create physical interactions. An awareness of someone's surroundings allows you to blend your content meaningfully within it. When you're blending entire scenes into someone's space, make sure to use soft edges to smoothly integrate your app. This avoids abrupt transitions and keeps people focused on your content. The most inspiring experiences make things feel alive. Subtle animation can bring liveliness to a scene, like water rippling on a lake or clouds floating through the sky. Subtle motion can transform a static experience into something alive and dynamic. And to enhance things even further, create atmosphere with sound. With Spatial Audio, you can anchor sound to objects in space... ...or create soundscapes that fully surround people. To learn more, check out the session "Explore Immersive Sound Design". One last tip: do more with less. You can create big impact with small effects. In the cinema, a subtle light reflecting on the floor and ceiling gives a convincing sense of space. You don't need to render all the details of a real theater to convey the feeling of being in one. Last, let's talk about keeping people comfortable and in control. If you need to move your immersive app or someone's position within it, make sure to avoid large, fast movement. This could feel disorienting. Instead, we recommend fading out content while it's in motion and fading it back in once it's settled. This will keep people feeling steady. If people physically move in their space, immersive experiences will also fade out. This shows people their physical surroundings while they're in motion.

And make sure to provide a clear way in and out of your immersive experience. Guide people with short, helpful labels and recognizable symbols, like expand and collapse arrows. Our last principle. Let's talk about how to make your app authentic to the platform. When creating any great app experience, it's important to take advantage of the unique capabilities of the device. On this platform, the best apps are rich, immersive experiences that make use of people's space. Apps shouldn't be quick things you jump into for a minute. Freeform, for example, puts you in a big creative space where you can see all of your content at once to focus on your project. Think about how you can make your app worthwhile, engaging, and distinct enough that people will welcome your experience into their space. Before we wrap up, let's apply the things we covered to your own app. You might be starting with a new idea or extending an existing one to the platform. With so many possibilities, start by focusing on one unique aspect of your app or game that can be spatial or immersive. To do that, find a key moment that can only be experienced spatially. Let's look at how we did this in the Photos app. We looked at core features of the Photos app people were already familiar with on existing platforms. Browsing your Photos library, rediscovering special memories, and reliving a place through panoramas. We thought finding your favorite photos should be easy. A window interface and familiar navigation help you get to what you're looking for quickly. But when you find that special shot, the photo grows big in your space and dims your surroundings. These are the same great memories on your iPhone, but seeing them at a lifelike scale is truly magical. And when it's time to view a panorama, we have a key moment, taking you back to a special place to feel like you're really there. Here, panoramas transport you in a way that's only possible with infinite space. Think about a key moment in your own app. By focusing on one special feature, you can make your experience unique and memorable with the content you already have. Could you enhance a moment with depth and scale or transform someone's space? Help people focus on a task or evoke a feeling? You can create memorable experiences like reliving a moment in the past or seeing from someone else's perspective. Rich visuals and high-fidelity audio make things feel real. We covered a lot of new things. We learned how to use the space around people to create immersive experiences that are authentic yet familiar. To learn more about spatial design, other sessions dive deeper into topics like input, user interfaces, SharePlay, and sound.

Nathan: There's a whole new universe of possibilities, and we hope these principles will guide you on your journey. Amy: Thanks for joining us. ♪