Basics

Read about the basics of designing for gaze UI here:

Let the User Know That the UI is Interactable

Inform the user that a UI element is interactable by presenting the user with visual feedback when they look at it.

This can be done by highlighting the UI element, growing it and moving it toward the user.

Spacing Between Elements

UI elements require spacing between each other to avoid accidental activation and flickering of the visual feedback.

The spacing should allow the user to look at the contours of an element without experiencing issues.

Consider Visual Weight

Make it easy for the eyes to rest within a UI element by avoiding strong outlines and if possible, by putting the visual weight in the middle.

This can be accomplished by having something to focus on in the center of the UI element, for example a text label.

Without a natural focus point within a UI element or if the UI element has strong outlines, the eyes might wander, causing visual flickering and accidental activation.

Animate the Visual Feedback

Having an animation for the visual feedback gives the user time to perceive the change.

Without the animation, the user might not have time to realize that the feedback was presented.

Smooth animations of UI elements makes it easier for the eyes to look around in the UI. Without this, the UI can appear flickering, creating a less pleasant experience for the eyes.

Group UI Elements and Labels

When UI elements have labels, the UI element and its label should be grouped together and form an interactable region.

The interactable region should then act as one interactable, enabling users to select a UI element whether they’re reading the label or looking at the UI graphic.