No Nonsense Roadmap to Spatial/XR Design
Are you also facing this situation where the world is moving towards something but no one is talking about how to actually learn it? It’s the same case with learning spatial design or becoming an XR/Spatial designer. Everyone is just blabbering about guidelines, and theory which is easy to find but nobody is providing a map to it. If yes, then my friend we are all on the same boat.
A lot of my mentees ask me the same question. Now that we know what this fuss is all about, how to navigate further?
Now because you are already in the rush to learn let me make it easy for you.
Roadmap:
1. Differences & Consideration (Basically understanding what you are getting into..best of luck!)
- The first and foremost thing you need to understand is that you are no longer stuck on the screen. Your canvas has expanded and so should your skill and thinking expand in the same manner.
- When you use your mobile, you are interacting with your mobile and the mobile is interacting with you but In XR, there are 3 major components that interact with each other — User, Volume, and object. While designing any experience you will have to understand how all these 3 factors can affect user experience.
- When you come out of the screens you will understand that you have to now understand how human senses work, what comes intuitively to the users, How users respond, what input methods users are comfortable with and what can kill that immersion…okay let me take a step back because this is not a short topic to explain. The More Complex, The Better It Is.
- Use AR apps, and try to find similar patterns. See what other AR apps, VR Games, Google AR, and Amazon AR are doing. Understand the gaps there are bridging. It is always better to learn from other's mistakes because this online world is a farrago of nonsense.
Read a few of my words below and you will be ready to jump to the next part of this roadmap.
We have been interacting with computers for more than decades, and it has always been one of our concerns about how we can create more intuitive and easy-to-use user interfaces. And the more we get advanced in technology, the more we have more freedom in order to come up with more innovative ways to interact with computers. The more we can remove the boundary between the digital world and reality, the more intuitive and natural way we will have in order to interact with computers.
So this concept that we can interact with the computer and digital world in our real environment removed a lot of physical limitations that we had with the old devices.
A while ago Apple released this new product, Apple Vision, which most probably all of us heard about it.
This is not a really new innovation. We had the concept of augmented reality and virtual reality. However, the big difference is that they introduced a systematic way in order to design and develop applications for these devices, which will help us to create a better experience for our users.
So in this article, I’m going to cover the basic principles of spatial design, which all designers need to get familiar with slowly. It is the future of the human and computer interactive system.
In order to understand the spatial user interface better, we need to get familiar with the immersive spectrum.
We can have our application in the shared space. Our application is going to appear in the real environment that is around the user. On the other hand, we can have a full-screen experience, which is going to impress the user the most. Our application can be run in the shared space in the full screen or something in between. It’s better we start our application in the shared space. In this way, the users are going to be aware of their environment first, and then they have the freedom to switch to the full-screen experience.
Now let’s get familiar with the very basic user interface element that we have in the spatial user interface. And that’s going to be the windows.
A window is basically a frame with a glassy effect, which we can position our user interface element within that. We are using Windows basically in every user interface. And that’s bringing me to this point. We need to use familiar user interface elements in order to create a better experience for the users. We can count this technology as a really radical innovation, which means it requires a little bit of effort from the user side in order to get used to some of the changes. And if we use the user interface elements that the users are already familiar with, it will kind of ease this process for them.
Now let’s talk about the size of the windows. Unlike the other devices that we have so far here, we are free to choose any different size for the windows that we need based on our content.
This means if our content needs a little bit wider screen or wider window, then we can have a kind of horizontal orientation for our window. And if our content needs more vertical space, then we can stretch our windows in the vertical direction. Also, we can have a dynamic sizing for our windows, which means if we have some changes in our content, which requires more space, then we can expand our windows in each direction that we would like to have. This is something new that we never had before in the devices that we are used to working with, such as smartphones, with limited screen sizes.
The next parameter is the scale. The first point related to scale is that we need to use points in order to define the sizing measurement. We need to scale down the elements that are closer to the users and scale up the elements that are further from the users. And that’s why we use point to keep all user interface elements in proper sizing and proportions.
And it’s a good time to talk about the depth. The closer one element is, the smaller it should be. And it will give the feeling to the user that it’s more interactive. And the further one element is, we can make it a bit bigger and it’s more for observation and kind of impressing the users. We can use depth in order to create a visual hierarchy in the 3D environment around the users. One way to create the feeling of the depth was position of the element in the 3D world. Another way is to use dimming. Dimming is one of the easiest ways to create depth in the environment.
we can have multiple windows for one application. But the thing is, we should avoid having a lot of windows in the field of view of the users. The users might get frustrated by having a crowded environment around them. And also we need to make sure that all the windows are facing toward the users.
Now let’s talk about the positioning of the window. First of all, it’s very important that we kind of position the initial window of our application in the centre of the field of view of the user. In general, anything in the middle of the field of view of the user is going to grab the maximum attention from them, which means we should make sure that we don’t have any windows behind the user, which they can easily ignore. As I said, all the elements should face the users. We need to design our application in a way that requires no movement from the users.
We should avoid anchoring the windows to the user’s views, which will give the feeling to the users that the element is kind of stuck in front of their eyes. Instead of that, we need to make sure that we are anchoring the element into the environment. We all know that different users are going to use our application in the same environments, which means we need to make sure that our application is going to work well, regardless of the environment in which the users are going to use our application.
These were some guidelines taken from Apple VisionOS — Design for Spatial User Interfaces guidelines which can be used for other headsets too…
Okay now that you have a little hold let's continue with our roadmap…
2. How to learn User Experience for XR/Spatial design (Introduction to a whole new world…thank me later)
Listing down some resources which helped me plenty and I’m sure it will help you too.
Articles you should read immediately:
https://medium.com/punchcut/xr-design-scenes-not-screens-13143e06d170
https://medium.com/prototypr/the-ar-design-cheat-sheet-42df5375fd70
People to follow:
https://medium.com/@jeremiahalex
https://medium.com/@avibarzeev
https://medium.com/@damian.hill
Videos to watch:
https://youtu.be/WTWkF9wj_VE?si=SKY2WjdA3WFqWLen
https://youtu.be/f4GVG4C2BcE?si=OB-syG6uivd4tdBt
https://youtu.be/ZW2iJVfagAs?si=x639-YKWUmu0swJN
https://youtu.be/T04NWajsYr0?si=TtPqmnDU5tLiUpEk
https://youtu.be/pff7WdU3ViI?si=F4HP5S4B9COQKaC-
Courses to enroll:
Courses for learning how to prototype:
3. Bring everything to use (Show it to the world!)
Knowing it and not being able to tell anyone is equal to not knowing. Everything you will learn bring it to use, make case studies, experiments and exploratory projects, put them out get feedback and repeat until you are confident.
Take your time play around with designs, and read more and more as you unfold spatial design in detail. Whenever you find an opportunity to sit with developers, game developers and 3D artists don’t lose it. Spatial design is only successful when it’s collaborative.
Now you are ready my futuristic friend! go ahead, take a leap.
4. Feedback time (It’s always good to have a guiding light)
There are tons of mentors and instructors waiting for you to ask for help, the only catch is you will have to extend your hands first.
Reach out to them on LinkedIn, ADPlist or through cold emails.
If you want to get my feedback (I’m easy to reach) follow these links below:
