Alteruna UI

UI DESIGN & PROGRAMMING

TEAM TRAINING

3 weeks

1

Team Training is a Virtual Reality application for the Oculus Quest, where medical professionals and students can practice different procedures in VR.

Menu and UI interaction is achieved through a "laser pointer" system, which is explained below.

BREAKDOWN

CANVAS INTERACTION

Canvas interaction is achieved through a custom VR Input module, handling interactions like hovering and clicking using a raycast. The raycast is then illustrated to the player through a line renderer.

BUTTONS & MANAGER

Buttons are treated as empty containers and only contains information about what kind of button it is as well as its various customizable colors, icons, etc.
A menu manager then recieves events from the buttons and executes the logic and updates layouts and button appearance.

TOOLTIP & RETICULE

The pointer, together with responsive hover colors on interactive elements, offers a reticule which is filled in when the player can interact with an element.
An optional tooltip can also be offered for each UI element, clarifying its funtion.

UI INTUITIVENESS

The interface has support for hand switching, allowing the user to switch to whichever her dominant hand is, by pressing the trigger, otherwise also used for button presses.
To confirm the user's actions, haptics and matching sound cues are used on hovering and clicking interactible elements.

PERFORMANCE OPTIMIZATION

The menu is split up into several canvases, categorized as either static or dynamic, preventing batch re-generation of the entire menu content when only some elements are changing. Dynamic elements are also not set to be pixel perfect.

Since this menu mainly uses color switching for interactions, Unity does not even have to rebuild an entire canvas for all changes.

Menu animations are done using a tweening library, since using regular animatiors dirties their elements (causing a rebuild of the canvas) even when no animation is playing.

LOCALIZATION SUPPORT

Each piece of text in the UI is entered as a key string, which is then used as a key in the currently selected language's dictionary. The dictionary is generated from an XML file (one per language) consisting of pairings of keys and translations.

STYLE GUIDE

All UI design (as well as web layouts, presentations etc.) is based on an established Style Guide, outlining typography, colors, shape language, etc.
This style guide is updated to meet the needs of the UI design and implementation.