Spatial UI Design: Tips and Best Practices
- 448 shares
- 1 year ago
Field of View (FoV) in extended reality (XR) refers to the extent of the observable, virtual or augmented world that is visible through a headset or device at a given moment. FoV is like the visible area you can see through a pair of binoculars.
In virtual reality (VR), a wider FoV means you can see more of the virtual world at once, which can make it feel more real and immersive. In augmented reality (AR), digital images are overlaid onto the real world, so the FoV determines how much of your surroundings can have these digital enhancements. Essentially, FoV is the window to the virtual or augmented world.
FoV in VR is often wider than AR, as the medium allows for a broader view, which can enhance immersion and make the virtual environment feel more realistic. In AR, MR or XR, FoV determines how much of the real world can be augmented with digital overlays. A larger FoV can offer a more comprehensive and engaging experience, but technical limitations often require a balance between a wide FoV and factors like device size, comfort, and processing power.
In this video, UX Design Consultant Frank Spillers discusses FoV in augmented reality.
Here, Frank talks about FoV in virtual reality.
FoV in AR typically ranges from 30 to 50 degrees. This narrower scope is due to the complexities of overlaying digital images onto the real world, a process that involves sophisticated optics and display technology. This limited FoV can constrain immersion but is generally sufficient for practical AR applications like data overlay or navigation assistance.
As discussed in the video, an AR experience that goes beyond the more natural 30 to 50 degrees can be tiresome or uncomfortable for the user.
VR offers a substantially wider FoV, usually between 90 degrees and 110 degrees, with some high-end models reaching up to 120 degrees or more. As Frank mentions above, wider isn’t necessarily better. It’s important to consider how a wider field can enhance immersion. However, immersion must not come at the expense of the user’s comfort. For example, if the user experiences neck strain, they won’t value the immersive content.
It’s easier to achieve a broader view in VR, as a designer can render a fully digital environment. However, it does require more powerful processing, which can lead to bulkier VR headsets. Designers should aim to strike a balance between immersion, realism and comfort for their users.
Field of View (FoV) significantly impacts user experience in both VR and Augmented Reality (AR) in several ways:
Immersion: In VR, a wider FoV makes the virtual world feel more encompassing and realistic, as it fills more of the user’s natural field of vision. This can make users feel like they are truly “inside” the virtual world. On the other hand, a limited FoV can lead to a “tunnel vision” effect, where the user is constantly reminded that they are looking through a device.
Comfort and Presence: An optimal field of vision makes the user feel comfortable. A very wide one might cause neck strain, dizziness or cybersickness since the user will need to move around a lot. A narrow FoV might strain the user’s eyes since they’ll need to concentrate on a very small area all the time.
Spatial Cognition: A broader FoV helps improve spatial awareness in VR. Users can navigate more naturally and interact more effectively with the environment. In AR, a narrower FoV might mean that users won’t see as much augmented content without turning their head.
User Interface and Interaction Design: The FoV influences how content and interfaces are designed. In a narrow FoV, important elements must be centrally located, whereas a wider FoV allows for a more spread-out arrangement of elements.
Realism in AR: The FoV impacts how convincingly digital content can be integrated into the real world. A narrow FoV might make the augmented elements feel more like they’re floating in a small window of space, rather than a seamless part of the user’s environment.
Motion Sickness: Users might suffer motion sickness if there’s a mismatch between what the user sees and what they expect to see based on their movements. Hence it is vital that the FoV setting in VR matches the user’s natural FoV.
Accessibility: A wider FoV can be more inclusive as it accommodates users with a wider range of visual capabilities and preferences, but it also has to be balanced with considerations like the weight and comfort of the headset.
Despite unlimited screen size in AR/VR, designers must recognize human physical limits to deliver a smooth experience.. For an optimal user experience, it’s important to position content within a comfortable visual range to avoid excessive head-turning. This approach minimizes fatigue and ensures users don’t miss key animations or audio cues. For activities like conversations with virtual characters or watching extended animations, keep the content within a natural range of motion.
To reach the ideal FoV, designers have to consider the average head rotation, which is about 30 degrees to each side from the center. Content shouldn’t be placed beyond this range, as neck rotations further than that are uncomfortable for most people. Vertical content placement is equally vital. Most content should be positioned around the horizon line or slightly above, within a 40-degree angle downwards and about 10 degrees upwards from the horizon to ensure it falls within the user’s comfortable line of sight.
This content placement strategy is similar to the design of cinemas, theaters, and concert venues. Distance is also a key factor; ideal content placement is between 1.25 and 5 meters away. This range ensures all elements and animations are clearly visible and appropriate animation triggering (the initiation of animations or interactive elements based on the user’s location and actions within a specific distance range). Content shouldn’t be placed too close as it could lead to discomfort or immersion-breaking issues, for example, 3D models might intersect the user.
An optimal FoV ensures a successful XR experience. The optimal FoV depends on what medium or device a user will experience the product. Here are key strategies and considerations to achieve a user-friendly and immersive experience.
Maximize Immersion: Aim for a wide FoV, between 90 degrees and 110 degrees, to enhance the feeling of presence and immersion. Design content that leverages this breadth and encourages users to explore the environment.
Balance with Comfort: Be aware that a very wide FoV might lead to discomfort or motion sickness for some users. Design content that minimizes rapid movements or extreme peripheral action.
Effective Use of Limited FoV: Design elements should be central and easily visible within AR’s limited view.
Context Awareness: Integrate digital elements with the real world smoothly and safely. Ensure that important information or interactions don’t require users to move their heads excessively.
Content Placement: Place important information and interactive elements within the central area of the FoV. This is especially important in AR, where the FoV is more restricted.
User Testing and Feedback: Conduct extensive user testing to understand how different FoV settings affect user experience. Pay attention to feedback regarding comfort, immersion, and usability.
Adaptive Design: Design content that can adapt to different FoV settings, to accommodate a variety of devices with varying FoV capabilities.
Minimize Fatigue: For prolonged use, design experiences that minimize the need for constant head movement, which can be tiring or uncomfortable.
Visual Hierarchy and Clarity: Establish a clear visual hierarchy. Place critical interactive or narrative elements prominently within the FoV.
Consider Peripheral Vision: In VR, use peripheral areas for non-essential or ambient information, which can enhance immersion without causing discomfort.
Guidance and Onboarding: Provide clear guidance and onboarding for users to understand how to navigate and interact within the given FoV.
Accessibility: Take into account users with different needs. Ensure that the experience is accessible and comfortable for a diverse audience.
Work with Developers and Engineers: Collaborate closely with technical teams to understand the limitations and possibilities of the hardware, and to implement designs effectively.
Iterative Design Process: Employ an iterative design process, using prototypes to test
Take our course on UX Design for Augmented Reality and UX Design for Virtual Reality.
See UX Planet’s graphic detailing field of view guidelines in How to start designing for AR/VR.
Read more about spatial design for AR in Creating Augmented and Virtual Realities: Theory & Practice for Next-Generation Spatial Computing.
Field of View (FoV) in VR and AR devices is typically measured in degrees—it represents the extent of the observable world at any given moment. It's calculated based on the optical design of the headset, including the lens and screen properties. The higher the degrees, the wider the FoV.
Learn more about AR and VR in our courses, UX Design for Augmented Reality and UX Design for Virtual Reality.
Increasing FoV presents technical challenges such as the need for more powerful processing to render wider scenes, potential distortions at the edges of the display, and the requirement for more advanced optics, which can increase the cost and complexity of the headset.
Learn more about AR and VR in our courses, UX Design for Augmented Reality and UX Design for Virtual Reality.
A limited or overly wide FoV can contribute to motion sickness in VR environments, as there's a disconnect between the motion perceived by the visual system and the lack of corresponding vestibular feedback (balance and spatial orientation).
Learn more about comfort and other elements of AR and VR in our courses, UX Design for Augmented Reality and UX Design for Virtual Reality.
Some high-end VR/AR headsets offer adjustable FoV to cater to different user preferences and applications. However, this feature is not universally available across all devices.
Learn more about AR and VR in our courses, UX Design for Augmented Reality and UX Design for Virtual Reality.
VR typically requires a larger FoV for an immersive experience, as it replaces the real world with a virtual one. AR, on the other hand, overlays digital information onto the real world, so a smaller FoV may be sufficient.
Read more about immersion in What is Immersion?
A wider FoV can enhance spatial perception in virtual environments—it makes the experience more immersive and realistic by aligning more closely with human vision.
Learn more about AR and VR in our courses, UX Design for Augmented Reality and UX Design for Virtual Reality.
FoV plays a critical role in immersive storytelling in VR and AR by determining how much of the virtual world is visible to the user, thus affecting the narrative and engagement level.
Learn about storytelling in VR in the article, How to Use Narrative as a Design Tool.
To design content for varying FoV, factors such as how much of the scene is visible at a time and how to ensure important elements are within the user's immediate field of view have to be considered, especially in devices with limited FoV.
Learn more about AR and VR in our courses, UX Design for Augmented Reality and UX Design for Virtual Reality.
In UI design, FoV impacts how and where information is presented. A larger FoV allows for more content and interactive elements to be displayed without causing discomfort or disorientation.
Learn more about AR and VR in our courses, UX Design for Augmented Reality and UX Design for Virtual Reality.
FoV interacts with other sensory feedback (like audio, haptics) to create a cohesive experience. The synchronization of the visual field with other sensory inputs is crucial for maintaining immersion and reducing disorientation or motion sickness.
Learn more about AR and VR in our courses, UX Design for Augmented Reality and UX Design for Virtual Reality.
Learn more about XR in our Master Class, How to Craft Immersive Experiences in XR.
Do you want to improve your UX / UI Design skills? Join us now
You earned your gift with a perfect score! Let us send it to you.
We’ve emailed your gift to name@email.com.
Do you want to improve your UX / UI Design skills? Join us now
Here’s the entire UX literature on Field of View (FOV) in Extended Reality by the Interaction Design Foundation, collated in one place:
Take a deep dive into Field of View (FOV) in Extended Reality with our course UX Design for Virtual Reality .
Virtual reality is a multidimensional universe that invites you to bring stories to life, transform digital interactions, educate with impact and create user-centric and unforgettable experiences. This course equips you with the skills and knowledge to embrace the possibilities and navigate the challenges of virtual reality.
UX Design for Virtual Reality is taught by UX expert Frank Spillers, CEO and founder of the renowned UX consultancy Experience Dynamics. Frank is an expert in the field of VR and AR, and has 22 years of UX experience with Fortune 500 clients including Nike, Intel, Microsoft, HP, and Capital One.
In UX Design for Virtual Reality, you’ll learn how to create your own successful VR experience through UX design. Informed by technological developments, UX design principles and VR best practices, explore the entire VR design process, from concept to implementation. Apply your newfound skills and knowledge immediately though practical and enjoyable exercises.
In lesson 1, you’ll immerse yourself in the origins and future potential of VR and you’ll learn how the core principles of UX design apply to VR.
In lesson 2, you’ll learn about user research methods, custom-tailored for the intricacies of VR.
In lesson 3, you’ll investigate immersion and presence and explore narrative, motion and sounds as design tools.
In lesson 4, you’ll delve into interface and interaction design to create your own user-friendly, compelling and comfortable VR experiences.
In lesson 5, you’ll gain insights into prototyping, testing, implementing VR experiences, and conducting thorough evaluations.
After each lesson you’ll have the chance to put what you’ve learned into practice with a practical portfolio exercise. Once you’ve completed the course, you’ll have a case study to add to your UX portfolio. This case study will be pivotal in your transition from 2D designer to 3D designer.
We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!