#31 Learning Spatial Design - 5 Design Principles
23:30 Share

How do you design for AR or for spatial design? This is the big question that we are all wondering and this podcast episode will share five guidelines for designers who want to design or create for the Apple Vision Pro for spatial design.

Hello friends and welcome back to the future of UX podcast where we explore the future of design and have a look at the design industry and see what AI, AR and VR metaverse technologies have to offer for us as designers. My name is Patricia Reiners and I'm an innovation designer based in Berlin.

And in this episode, I'm honestly really excited about that. We will talk about spatial design and how to design for the Apple Vision Pro, how to design for augmented virtual reality. Yeah, in a little summary. And I'm going to share...

five guidelines with you easy to follow easy to use that actually apple released with the apple vision pro for designers as a little guideline i'm also going to share the video in the description so you can have a look but still very helpful to listen to the podcast episode because i am doing a little summary of the little steps so hopefully that will be very helpful to you

So I would say let's get started with the first topic. And the first topic is familiar. So familiar is something that we are all familiar with if we are designing because there are some certain rules that if you design something new then you should have a look at anything that people might already know and make it familiar.

So when we are looking at the Apple Vision Pro, we can find a lot of familiar elements. Very common elements like

They're having a sidebar on the side, they have tab bars, they have search bars and everything is already known by the user. So what they have actually done is they took the windows and the design elements from the 2D space of our devices that we're using in the day-to-day basis like our phone or our MacBook or laptops and they just transformed that into the three-dimensional space.

So when you compare an app on your mobile phone, your MacBook, you will see that it looks, the Apple Vision Pro looks very, very similar. And I think that's super interesting. So this consistency in the end really helps the user to recognize and navigate the interface. So familiarity wins.

Also what you can see is that they use windows. So interfaces are typically displayed within certain windows. I mean we all know that, we are all designing in windows. Which makes it very clear that they belong together and are separate from their surrounding. So for example if you have opened the Spotify app, if you are listening on Spotify then Spotify is in a certain window.

And on the Apple Vision Pro you have the same windows for certain software or for certain apps. And these windows are presented with a glass material, with some kind of like a milky glass.

that blurs the background, providing users with a better sense of their surroundings because the material also adapts to different lighting conditions. So you kind of can still see through but not 100% so it kind of like blurs the background but it makes sure that you can see the content on top. It looks very chic I would say but still very accessible.

what's also really interesting is that users can resize these windows and fit them to their preferences and also surrounding environments so there's not just like one size but a little bit on your you know on your laptop for example if you have different windows open you can also resize them make them bigger make them small and also like rearrange them but on the apple vision pro of course you have just more space right because like the world is your canvas then so

Keynote and Safari are examples of apps that adapt the size to maximize content visibility. So Keynote allows for like, you know, imagine you're using the Apple Vision Pro and then first of all you have like a very basic view that's in front of you with the Keynote where you are creating the presentation. Then you can also allow full-size presentation.

with maybe like a little sidebar or a little window on the side where you see the next slides. But you can also maximize it and then see, for example, the audience in the background so that you have like a three-dimensional view. So tab bars or toolbars are often located outside of the window. So if you have a certain...

window that includes navigation elements, then you would usually find that outside of the window. Positioned on top of the original window for example and this placement really ensures easy accessibility. For example, Safari's navigation bar is located outside of the window and positioned just like a few inches away.

And that really allows users to focus on the content within the Safari window, but helps them to find the navigation elements super easily because they're just like outside of the window. Generally, the pages are flexible and adjust when new content is added. So if you have like a window in the center, like a Safari window, and then like a sidebar is coming from the side and the whole window,

moves, they're still in the center and like the page really remains centered, ensuring that the surrounding space is not obscured. And while some apps utilize multiple windows, for example, like one for navigation, one for the content and one for, I don't know, analytics or something like that, it's generally much better to keep content within a single window because as multiple windows

can quickly become overwhelming for many users. I mean, we all know that, right? We need focus, we need less distraction as possible. And then point number two, human-centered and the field of view. Let's start with that one. Because you always need to consider what users can see and how they can move within the app. So when users wear a device,

their field of view is primarily focused on what's in front of them. Makes totally sense, right? So therefore it's very effective to place the most important elements in the center of their field of view. If the field of view is white, landscape layouts are often used and definitely much better.

So, we tend to, or what I have seen in a lot of case studies, is to have like multiple windows and a lot of content all over. But it's much better to have the most important content in the center and not too much distraction. So if you still have multiple content pieces,

for example certain images. Then what is really helpful is to have the most important ones in the center still, but the ones on the left or on the right slightly tilted and slightly turned towards the center to enhance readability. So some kind of like in a circle.

So the second topic for human centered is ergonomics, of course. You know, like the primary goal is to position objects comfortably in all dimensions. So by default, windows should be positioned within the user's line of sight relative to their head direction. Makes total sense, right? And content should also be placed further than arm's reach to ensure easy visibility and access.

But also avoid placing content too high or too low, which would make it difficult to see and read. So nothing like behind the user or too far on the side, but really in the center so users are aware of what is going on, where are the elements, where's the different types. What also might be very helpful is, and I had some discussions around that topic on LinkedIn as well, is anchoring content within the user's view.

What does that mean? So if you anchor content, for example, at a certain place or a certain lamp in the center and the user still looks on the side, the content is not moving with the user, but it stays where it is.

So imagine like a user is sitting on their desk and they placed the screen right in front of them. They want to look on the right side because there's a window just like a quick view outside to get some new ideas, to think about something else for a moment and then look back the window is still there. Of course you can re-anchor the content with like a certain knob on the side

But anchoring content is very helpful for the user to not feel followed or still having like the feeling of knowing where all the content actually is. This also allows like natural head movements and the ability to, as I mentioned, just like look outside of the window, for example.

And the third point for a human centered is of course the movement. In our design experience is that we require minimal movements since many users might have limited mobility. So not like crazy arm movements or something like that, but like very small movements. Also some people might sit at a desk where they can't move that much or where they in the future may be sitting in a bus or in a plane or something like that. So minimal movement is definitely helpful.

Also, I already mentioned that, but users can recenter the window with a little reel or a knob if they change positions. So if they are sitting at their desk and then they want to move to the kitchen, they can just walk without turning or removing the Vision Pro and they can just recenter the window that they're using or that they're looking at with this little knob. That's really helpful. Okay, let's get to point number three.

which is dimensional. And then we will also talk about different topics. The first is space, because great apps really take advantage of the space surrounding the user. For example,

In a movie app, the surrounding space may be dimmed to focus on the content, right? So you always need to make sure what is the right surrounding for a certain app. Do the user need to see and be fully aware of what is going on or can the user be more immersed in the space? The second point is depth.

Adding depth to apps really create a sense of dimension, hierarchy and focus. Something that we all have already seen at the material design guidelines from Google, right? So they are also using this kind of like depth structure, using that different kind of shadows in their design system. Super helpful. I can highly recommend to check it out. I will also link it in the description box so you can have a look at it. Very similar idea.

Because hierarchy can definitely be established using depth. So thinking about the elements that are more in front are more important, right? And the areas or the elements that are a little bit more far are less important. So from the hierarchy level a little bit down.

And also depth can be reinforced through the use of, of course, lighting and also shadows. So for instance, a movie screen may cast a light and shadow on the floor and ceiling, right? So when you're in a really dark room and you still see the floor and then you see like the little shadows or the light from the movie that's playing in front of you on the floor, which gives like a very natural and like, yeah, good and good feeling of the environment.

So most objects should cast shadows to integrate them into the space effectively. So even if you're placing a certain screen on top of a table for example, then you should see of course a shadow on the table that it looks natural.

And of course using a very subtle depth for UI windows or elements that may not necessarily be important for text or something like that because it can be very confusing. But for any kind of UI elements that you feel there's like a certain millimeters that they're not just like fully flat but like having a little bit of dimension.

Okay, and now get to point number four, which is immersive. So the immersive spectrum. An app can dynamically and fluidly transition between different stages of immersion, depending on the user's position in the experience. I already mentioned that at point number one. So for example, during a preparation of a keynote presentation,

the immersion level may be low. So imagine you're sitting at your desk, you have a screen right in front of you, you still see your surroundings, you're preparing the keynote presentation like the certain slides. But then you click on playback and the background may be a little bit more dimmed or the user may also experience like a full immersion, you know.

such as being in a virtual reality conference room for practicing it. So you choose the level of immersion and it also makes sense to adjust it based on the user's outcome. So if you really want to practice, it's definitely more helpful to have the focus on the screen or more practice to have some kind of like a three-dimensional all-around experience. And here are some essential tips.

Genuinely, but we already know that from UX design, from any kind of design, when too much is happening, people tend to feel overwhelmed and unsure of what to do. Same with every website that we are designing, with every app that we are designing, there needs to be a clear call to action and some kind of like a guidance so users know what to do at all time.

So the goal is definitely to guide the user's focus towards the most important experience. Like I mentioned, similar to a call to action CDA on a webpage.

Or let's take the mindfulness app, for example. This is also what Apple used and I think it's pretty interesting. Edit position in the center of the viewpoint with a dimmed background and users only see flower-shaped items. For meditation, with a certain sound that guides them through the meditation and the certain breathing or something like that.

And then the immersion changes based on the goal. For instance, when users need to focus on very deep reflection, the flower dissolves into like a very smooth, slow transition, you know, places all the little flower pieces all around the users so that the user really goes into like this deep focus states with like full immersion.

And these transitions are really important to prevent users from feeling unaware or disoriented. So they need to be very smooth and calm. And yeah, smooth and calm. I think that's a good description. And yeah, definitely also really blend thoughtfully with reality by using the shape of the room and anchoring content. Super helpful.

These kind of subtle animation can bring elements to life, transforming a very static experience into a very dynamic one. Because we can use 3D content, we can use animated content, and that's super helpful. And the next tip for the immersion topic, point number four, is also comfort.

generally avoid any kind of fast movement of content, fade out content during motion to ensure the user is comfortable. So maybe you know that from 3D movies or so on.

What happens there very regularly and I personally absolutely hate it when things happen super fast and you know you get like frightened or shocked or scared or something like that because it's like a very fast movement or something like that or like something you know is jumping into the screen from the side like a cat in a dark room where someone is exploring something. Really annoying.

It might be fun for a movie or something like that, but not for a device like the Vision Pro. People want to focus, they don't want to feel scared, they want to feel that they're in control of everything. And let's come to point number five, which is authentic.

And I think this is also like a quick one, but a very important one, because when you think about how users are going to use these kind of devices, it will be used very differently than your iPhone, for example. So when you compare that,

Sometimes you look at your iPhone just for a couple of seconds where you check news, where you check your emails, where you have a quick look at something, where you want to use the calculator for a second, where you want to do something very quickly and then you close the app again and leave it. Or also close, like lock the phone and leave the phone. This will be very different for the Vision Pro.

The Vision Pro, although it takes more time to get it on and get adjusted, people will spend more time in a single session using it.

So what's helpful is to also adjust the spaces in a way that the user already have everything they need for it. So think about these kind of like focus stages where people spend more time on it, certain tasks. They need everything for this kind of session, for this kind of goal that they want to achieve at this place. They will stay there longer. They're not going to jump in really quickly to check their mails or something like that because that doesn't make sense.

They will stay there for longer tasks and goals. So they need everything that is authentic and real within the surrounding. So imagine that they are having like a certain task or example, preparing a keynote. So they need all the single steps. There may be inspiration on the side, but no distraction and having everything that they need there.

So I hope this was helpful to you. Let's summarize that real quick. The first topic is familiarity. I mean, we all know that from design. Using elements that people already know and are comfortable with using. We're seeing that especially with the ways how the interface is structured. They basically used all the elements that we already know from our web experience, from our app experiences.

and transfer that into like a 3D space with the, you know, like the toolbars, the sidebars, the search bars, the different windows, et cetera. Then of course it needs to be human centered. I mean, we all know that as UX designers, so that shouldn't be a surprise, but really think about

what like human centered mean in an ergonomic way, how and where to position the different elements that it feels comfortably within all dimensions. Also like the field of view, where can the user see the best? Where can I place the content without overwhelming the user? And also the whole topic of movement, not only moving content, but also how the user is moving and placing the elements.

Number three is dimensional. There I'm definitely thinking about like the 3D elements, like the space, the depth and also the immersion. You know, space is how can you really take advantage of the surrounding of the users, but also adding depth within hierarchy. So placing some elements a little bit more in front, others a little bit more in the back and then playing with shadows and light to make it visible how the hierarchy is actually displayed.

And then point number four is of course immersive. Yeah, like make sure that it's dynamically and fluidly transition between the different stages of immersion. We like depending on the user's position in the experience, but also some, you know, like essential tips, like really guiding the user with a clear call to action. We all know that, but it's important to bring that into the 3D space as well. And of course,

the comfort, so make sure that all animations, movements are fast and calm and that the user really feels comfortable using it. The last point is authentic.

Make sure that the design that you create for these kind of devices feel authentic to the user's goal, that they are comfortable in the space, that they have everything they need. Because the goal is very different than comparing that to a phone where you check something very quickly, you will stay there much longer. So you need everything that helps you for this certain task at one space. Okay, I hope that's helpful. If you want to learn more about

Design for the future. Feel free to sign up for my newsletter. I'm sharing free resources there every Thursday, so you can sign up, get the resources right into your inbox. It's free and a lot of insights for you.

Thank you so much for listening. And yeah, you can always reach out if you have questions, recommendations. You can find me on Instagram at ux.patricia. I'm super happy to connect and to have a chat. And yeah, I would say see you all or hear you all next week with another exciting topic about the future of design. So hear you in the future, my friends. And bye bye.