Tobii XR Devzone > Learn > Interaction Design > Fundamentals >

Visual Feedback

The Need for Visual Feedback

It’s advised to let the user know which elements are gaze interactable with visual feedback.

Without visual feedback, the user might feel the experience is inconsistent and be unsure about what triggered a specific action.

  • You can hint to the user which elements are gaze interactable by differentiating them from other types of elements, like static elements, by giving them a special color.
  • You can let a UI element grow and increase its opacity when looked at. An NPC can react to being looked at by turning its head towards the user.

Keep in mind that the state of the element with the visual feedback is likely how the element is perceived by the user. When the user is not looking, they can’t see the element clearly.

For 3D objects, it is difficult creating a visual feedback without altering how the 3D object is perceived. For example, changing the color or opacity of the 3D object might make it confusing for the user what kind of 3D object they are looking at. One way to handle visual feedback for 3D objects is to have an outline. This does not change the visual style of the 3D object and makes it clear for users that it is gaze interactable. Avoid this for UI elements where we have more control of the visual weight since an outline might draw the eyes to the outskirts of the element.

Test the feedback on users to find a balance between non-distracting but still perceivable visual feedback.

Use Transitions if Possible

Visual feedback which is instantaneously toggled when looking at an element runs the risk of the user not perceiving the difference between the different states, as the state of the object with visual feedback will likely be perceived as the normal state.

Feedback which progressively transitions when looking at an element and transitions back when looking away allows for the user to perceive this difference.

Transitions also allow for:

  • Subtle feedback which can still be perceived when focused on
  • Avoiding visual flickering when elements’ visual feedback is turning on and off quickly when looking between elements
  • Looking around without being distracted when gazing past elements and their visual feedback turns on and off

Transition times of around 100-200ms has worked well from our experience, but find values that works for your implementation and make sure to test it on your users.

Don’t Visualize Gaze Directly

If you want to visualize gaze for the user or other viewers, visualize a bigger region, like a circle, as visualizing the gaze directly with gaze points can be distracting.

If the accuracy is not perfect, visualizing gaze points can lead to you chasing the gaze point visualization because it drifts away when your eyes are drawn to it. Visualizing gaze points also gives the wrong expectation of the gaze being pixel perfect.

Keep in mind that any type of gaze trace visualization directly to the user will be distracting, so in most cases it’s better to only visualize the gaze trace to other viewers or by playing a recording for the user.