Designing Type In Space for HoloLens 2

Previous Project Stories

Background

Type In Space for HoloLens 1st gen (2016–2018)

HoloLens 2’s Instinctual Interactions

MRTK: Building blocks for spatial interactions and UI

MRTK(Mixed Reality Toolkit) v2

UX Elements: Text Object

Text Mesh Pro

Near & Far Manipulation

Direct two-handed manipulation with MRTK’s Manipulation Handler

Bounding Box

Bounding Box in HoloLens 2

UX Elements: Menu UI for Text Properties

Button

MRTK’s HoloLens 2 button
MRTK’s HoloLens 2 button provides various types of visual feedback

Hand Menu

Hand Menu for the text properties
Hand Menu Explorations — Pin / Grab & Pull to world-lock the menu
Focal depth switching between the target object and the menu causes the eye strain

In-Between Menu

Minimized focal depth switching between the target object and the menu. The menu automatically scales up/down to maintain the target size based on the distance.
The menu automatically scales up/down based on the distance to maintain the constant size
In-Between menu works well with near interactions too

UX Elements: Main Menu for the global features

Main Menu
The main menu for the global features

UX Elements: Annotation

Annotation Feature
Annotation on the physical objects

UX Elements: Spatial Mapping

Used Spatial Mapping + Surface Magnetism to align the text with the physical surface

UX Elements: Physics

Physics options

UX Elements: Text Input with keyboard and speech

Keyboard and speech input

UX Elements: Grab & Duplicate

Grab & duplicate feature
Layout example

Supporting HoloLens 1st gen and Windows Mixed Reality VR devices

Type In Space on HoloLens 1st gen with Gaze & Air-tap
Type In Space on Windows Mixed Reality VR headset with motion controller input

Screen recordings on YouTube

Microsoft Mixed Reality Dev Days 2020 session recordings — MRTK’s UX Building Blocks

Resources

Twitter

Read my other stories

Designer & Creative Technologist. UX Designer @Microsoft HoloLens. Creator of http://typeinsight.org Opinions are my own. http://dongyoonpark.com