In order to start designing in AR/VR, we have to understand that we are no longer constrained to a particular device “size” but rather designing for the human eye itself.
This FOV (Field of View) exists between the human eye and viewport surface.
This is key, because while your interactions are not confined strictly to the viewport’s size, your user’s ability to see them absolutely is.
Imagine it like this:
Your user has a total field of view, but your design needs to fit reasonably within their comfortable cone of standard vision.
This is to say that, for the lion’s share of users, zones one and two respectively, will be the greatest for conveying important, immediate information.
Let’s go over the viewing zones in more detail:
‣ Zone 1: Great (central) view
Zone 1 is defined as the central-most view of the user, and is where you should put the most important and/or immediately necessary information.
‣ Zone 2: Decent view
Zone 2 exists from the edge of the central view to about 10–15° degrees away from the eye’s central line of sight. This area is good for somewhat important and immediate information, that is not absolutely critical.
‣ Zone 3: Rough view
Zone 3 exists from the edge of the decent view to about another 10–15° away radially. This area is good for information that is not absolutely necessary but the user should have access to if they want to glance at it.
Note that in this zone, a user starts losing their ability to recognize symbols.
‣ Zone 4: Nope
Finally, we have Zone 4 which is a no-go, or as I like to call it, the Nope Zone.
Generally speaking, you want to AVOID putting anything the user needs to be able to see, or interact with, outside of about a 30° radius from the eye’s central line of sight, as this constitutes the average maximum rotation that the human eye is capable of.
That said, I wouldn’t push it, and would stay WELL within 25° at the most to leave some decent padding.
Approaching the design
One way that can help with approaching the UI is to clearly define your limits.
Personally, I sometimes like to box my AR designs in a way that allows for maximum usage with minimal potential for eye strain.
This is a little rough, but I think you get the gist, you want to:
- Make sure the user can see what they’re working with
- Clearly knows where their interactions will be taking place, and
- Can easily see what they need to see without having to strain their eyes.
There’s also a great video about setting up your artboards for AR/VR as well here: