Design / UI Guidelines Interface Design

We’ve discussed the ideal placement of the UI and content, now let’s go over some guidelines for interface design within the AR environment. Spatial UI’s should draw on visual cues from our physical world in order to make the experience as intuitive as possible. Guide the user to interact with the UI by leveraging affordances, depth cues, and visual/audio cues and physical behavior, indicating states of the interaction being performed.

Depth Cues

The real world offers us many depth cues that enable us to discern where an object is positioned relative to ourselves. In AR, because objects are projected on a screen as a 3D stereoscopic pair of images, we must use more visual depth cues. Doing so will reduce ambiguity for the user and create more successful interactions.

Here are a few visual depth cues to consider while designing:


Figure 5. Scene showing an example of Occlusion
 

Occlusion occurs when an object partially or completely blocks another. This visual cue helps the user determine the spatial relationship between UI elements and/or objects.


Figure 6. Scene showing an example of light and shadow
 

Lighting

As in any 3D scene, lighting is an integral part of establishing volume. Lights define volumetric objects clearly, and subtle shadows play a main role in establishing position and scale.

Using Light

As with any 3D scene, physical or computer generated, lighting helps establish volume and the perception of depth. Avoid using unlit shaders whenever possible. Without proper lighting, it is harder to discern context within a scene and how objects/UI relate to each other in position, rotation and scale.

To get the most out of your lighting setup, use models that have beveled edges that catch the light at different angles and establish better volume, and texture maps that highlight specific areas of the model based on the material’s properties. For example, a matte metal finish will shine differently than a polished metal finish.

Interaction Feedback

Giving the user feedback when they interact with an object is best practice across all interfaces, but it is especially important when we don’t have tactile or haptic feedback. Feedback establishes better depth perception, more believability, and a more predictable outcome for each interaction.

Every object and UI element can have visual and audio cues, as well as physical behaviors that indicate its possible state of interaction.

Typically these states are broken down into the following:

  1. Default / Idle
  2. Approach
  3. Engage
  4. Release

Below we explore examples of feedback that can be utilized in achieving these states.

Visual & Animated Cues
Visual and animated cues are the starting point for building a responsive UI. Visual cues for the states listed above can be provided in a variety of forms such as color changes, glows, animations, transitions, and lighting effects. Careful consideration of how these are applied can provide increased accuracy in an interaction, and a higher visual design fidelity.

Something to consider: these cues can be applied to your input device/hands as well as an object/UI element. 

Physical Behavior
An object's physical property should dictate how it responds to forces applied to it. For instance, a soft rubber ball may be squishy to the touch and bounce unlike a hard plastic sphere. As a general rule of thumb, we recommend mimicking real-world properties on interactions by:

  • Design the physical response to the action so that it is consistent with the material of the object
  • Avoiding intersecting geometry as that breaks the believability and physical properties of the objects
  • Leverage physics and colliders in Unity to create realistic movement
  • As an alternative to an object moving as it collides with another, apply anchors that pull the object back to its original positions once the force stops being applied

Text Legibility

Reading at distance requires both physical effort (keeping your neck steady) and cognitive effort (focusing on a small target at a distance). Aspects such as lighting, background contrast, font type and size all play a part in legibility. Because designers must balance all of these things in the context of the UI, there are no hard and fast rules. Instead, we have a few recommendations to keep in mind.

Font Size
As a general rule of thumb, we have found that using a minimum font size of 1cm in height when the distance of the text is 0.5 meters from the user’s eye, results in good legibility.

It is important to note that choosing font size will also be a function of the angle you are viewing it at.

Contrast
Presenting typography with high contrast helps with legibility. Black is essentially transparent in the AR space so you may need to select a different font color. We recommend placing text on backgrounds to minimize potential conflicts with the physical world.

Placement
Because of resolution differences between the center and periphery of the Field of View (FOV), text is most clear in the center of your (FOV). We recommend keeping text in shorter columns versus long lines.

Font Type
Generally speaking, we suggest steering clear of novelty fonts with excessive details, swashes, unusually narrow/wide proportions, extreme serifs, etc. We favor fonts which are more monoline in proportion, have less thick-to-thin contrast, and have a higher x-height.

 

Previous Next