Designing Type In Space for HoloLens 2

Previous Project Stories

Here are some of my previous stories about type in mixed reality.

This article contains a lot of animated GIF images to explain spatial interactions. Please be patient with the loading time!

Background

As a designer who loves type design and typography, I have been falling in love with holographic type since I met HoloLens back in 2015. Microsoft HoloLens allows you to place and see holographic objects in your physical environment. Just like real-world physical objects, you can place it on a table or wall, you can move around and see it from different angles.

Typography Insight for HoloLens(2016) was my first experiment with holographic types in space. I created an app that allows you to lay out and experience beautiful holographic type in the real-world environment. The composition component has evolved into my new project Type In Space(2018) for HoloLens.

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

Being able to see and interact with a holographic type in the real-world environment is one of the most exciting experiences. Now, with HoloLens 2’s new hand-tracking and eye-tracking input, I can directly touch, grab, and manipulate the holographic type with my hand. This instinctual interaction opens up totally new creative possibilities.

In this story, I would like to share my journey on bringing the Type In Space app from HoloLens 1st gen to HoloLens 2.

HoloLens 2’s Instinctual Interactions

HoloLens 2 is packed with a lot of new technologies such as a completely new MEMS(Micro-electromechanical systems) laser display with larger FoV, and HPU(Holographic Processing Unit) 2.0 with AI coprocessor. However, one of the most exciting new capabilities in HoloLens 2 is the fully articulated hand-tracking input. With hand-tracking input, you can directly interact with holograms by touching, grabbing, and pressing them. This new input interaction dramatically changes how we interact with holographic objects and makes it very natural and ‘instinctual’.

With hand-tracking input, finally, I was able to touch and grab a gorgeous holographic type.

MRTK: Building blocks for spatial interactions and UI

MRTK(Mixed Reality Toolkit) is an open-source project by Microsoft. MRTK-Unity provides a set of foundational components and features to accelerate mixed reality app design and development in Unity. The latest release of MRTK v2 supports HoloLens/HoloLens 2, Windows Mixed Reality, and OpenVR platforms.

MRTK(Mixed Reality Toolkit) v2

Since MRTK v2 is completely redesigned from the ground up, foundational components such as the input system are not compatible with MRTK v1 (HoloToolkit). Since I used HoloToolkit for the original version of my app Type In Space, I started from scratch to create a new version with MRTK v2. It was much faster to start from scratch because most of the core interactions can be achieved with the building blocks in MRTK v2.

UX Elements: Text Object

Text is the most important component in the Type In Space app. The text object is composed of the following elements.

Text Mesh Pro

Since HoloLens has a high-resolution display with 47 PPD(Pixels Per Degree), it can display sharp and beautiful text. To properly leverage this high-resolution, it is important to use a properly optimized text component. Unity’s TextMesh Pro uses SDF(Signed Distance Field) technique to display sharp and clear text regardless of the distance. For more details, see Typography guideline and Text in Unity on Mixed Reality Dev Center.

Near & Far Manipulation

Being able to directly grab and manipulate the holographic type is one of the most important core interactions. MRTK’s ManipulationHandler script allows you to achieve one or two-handed direct manipulation.

ManipulationHandler also allows far-field interactions with hand rays in HoloLens 2. You can use two hand rays to grab/move/rotate/scale objects.

Direct two-handed manipulation with MRTK’s Manipulation Handler

Bounding Box

The bounding box is a standard interface for the precise scale and rotation of an object in HoloLens. For Type In Space app, I used it to indicate currently selected text object by displaying the corner handles. MRTK’s Bounding Box provides various configurable options for the visual representation of the handles as well as the behaviors.

UX Elements: Menu UI for Text Properties

Button

The button is one of the most foundational UI components. In HoloLens 2, you can directly press buttons with hand-tracking input. However, since you are essentially pressing through the air without any physical tactile feedback, it is important to amplify visual and audio feedback.

MRTK’s HoloLens 2 button

MRTK’s HoloLens 2 style button provides rich visual/audio cue and handles complex logic for the speed/trajectory/direction of the finger movements. Visual feedback includes proximity-based lighting, highlight box, compressing front cage, hover light on the surface, pulse effect on press event trigger, and the fingertip cursor.

Since it prevents back-pressing, it could be used for overlay menus too. (examples below in the hand menu videos) I used the HoloLens 2 style button prefab for all menu UIs including fonts and colors list.

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

Hand Menu

In the original version, I had a floating menu with tag-along behavior. It followed the user so that it can be accessed anytime. In HoloLens 2, there is an emerging pattern called ‘hand menu’. It uses hand tracking to display quick menus around the hands. This is very useful to display a contextual menu when it is needed then hide and continue to interact with the target content. To learn more about the hand menu, see Hand Menu design guidelines on Mixed Reality Dev Center.

I started using this UX pattern for the text property menus and tested them. Below are the Mixed Reality Capture videos from HoloLens 2 device.

Hand Menu for the text properties

As you can see, it works quite well. You can quickly raise your palm to display the menu, change the properties. Since it could cause muscle fatigue if you want to change multiple properties and adjust details, I have added an additional option to make the menu world-locked. Tried a pin button and drag-to-pull out behavior.

Hand Menu Explorations — Pin / Grab & Pull to world-lock the menu

The hand menu worked well with the target text object in the near-field interaction range. However, I found that it becomes problematic for far-field interaction. Since I had to look at the target text at a distance and the hand menu in the near-field, my eyes had to continuously switch the focus/depth. It quickly caused eye strain.

Focal depth switching between the target object and the menu causes the eye strain

A solution could be attaching the text related menus to the target text object. However, for the text far away, to make the menu usable with a pointer (hand ray or gaze cursor in HoloLens 1), the size of the menu should be very large. It will be visually overwhelming the target text which should be the hero object of the experience. (Content is King, Content before Chrome — sounds familiar? :)) I also wanted to keep the menu directly interactable with fingers when I interact with the text objects in the near-field.

In-Between Menu

My solution was to place the text property menus between the target object and my eyes(headset). Of course, closer to the target text object, since the goal is to minimize the focus/depth switching. After playing with the values, I made the menu placed 30% far from the target object. (70% far from my eyes) This allowed me to directly interact with the menus easily with the text objects in the near-field. This menu positioning/sizing also works well with HoloLens 1st gen’s smaller FOV size.

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

Fortunately, one of the MRTK’s awesome Solvers called ‘InBetween’ provides the positioning mechanism. Using InBetween Solver, you can easily position something between two objects and specify the distance % ratio from those two.

To maintain the target size of the menu regardless of the distance, I used MRTK’s ‘ConstantViewSize’ Solver. As you can see in the video, the menu automatically scales up when it moves far and scales down when it is moving into the near-interaction range. This makes the menu easily interactable with both direct finger press and hand ray pointer + air-tap/pinch.

In-Between menu works well with near interactions too

UX Elements: Main Menu for the global features

Main Menu

For the buttons that provide global(non-object specific) features, I left them in the hand menu. As described before, you can easily grab and pull out to make the menu world-locked.

The main menu for the global features

The main menu includes:

  • New Text | Clear Scene | Save & Load Scene
  • Spatial Mapping | Mesh Visualization | Snap to Surface
  • Physics: Rigid Body | Kinematic | Slider UI for gravity(force)
  • Grab & Duplicate Toggle
  • Random Composition (similar to Holographic Type Sculpture)
  • About

UX Elements: Annotation

Being able to place text object in the physical space means that you can annotate physical objects. To help visual connection to the target object I have added an optional line and sphere component. By simply grabbing and moving the text object(anchor) and the sphere(pivot), you can easily create annotations with a connected line between the text and sphere. For this feature, I used MRTK’s Tooltip component.

Annotation Feature
Annotation on the physical objects

UX Elements: Spatial Mapping

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

Spatial Mapping is one of the most exciting features in HoloLens. With Spatial Mapping, you can make the holographic objects interact with the real-life environment. In the original version of the Type In Space app, I used the Gaze cursor to move the text on the physical surface. In the new version for HoloLens 2, I was able to use the hand ray’s endpoint to attach the text and follow the surface. Placing and moving state is toggled by air-tap.

To use Spatial Mapping in MRTK, you can simply turn on the Spatial Awareness feature. This gives you the spatial mesh of the environment. Surface Magnetism solver is a convenient utility which can make any objects snap to surface.

UX Elements: Physics

With Spatial Mapping, I have physical surfaces that I can use. How about applying gravity force to make the type fall or fly and let them collide with the physical environment? I already had a simple ‘gravity’ option in the original version. In the new version, I have added a slider so that the user can control the amount of the force as well as the direction.

Physics options

UX Elements: Text Input with keyboard and speech

HoloLens 2’s direct interaction with holograms dramatically improved the text input experience too. Just like using the physical keyboard, you can use your fingers to type in the text with the holographic keyboard. Of course, you can still use the speech input for dictation. The system keyboard has a built-in speech dictation input button. MRTK provides great examples of using system keyboard and speech input.

Keyboard and speech input

UX Elements: Grab & Duplicate

The original version had a simple duplicate feature which allows you to quickly create a new text with the same text properties. To make the duplicated text visible, I made the duplicated text placed with some offset position. This created an interesting visual effect with an array of instances.

I have modified this feature to make it duplicatable by simply grabbing and moving with the hands which is much easier than keep pressing the duplicate button. World-locked trails of the holographic text look gorgeous.

Grab & duplicate feature
Layout example

Supporting HoloLens 1st gen and Windows Mixed Reality VR devices

One of the benefits of using MRTK is cross-platform support. MRTK’s interaction building blocks and UI components support various types of input such as HoloLens 1’s GGV (Gaze, Gesture, Voice) and Windows Mixed Reality immersive headset’s motion controller.

The text properties menu (In-Between menu) works well with GGV input without any modification. Since it is always displayed on the right side of the currently selected text object, even with HoloLens 1’s smaller FOV, it works well. Interacting with the motion controller’s pointer in VR also works well.

Since I cannot use hand-tracking for the hand menu, I made the Main menu as a floating tag-along menu with a toggle pin/unpin option. Other than this small modification, I was able to publish the app for both HoloLens and HoloLens 2 with a single Unity project.

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

Thanks for reading!
I hope you can experience beautiful type in space with HoloLens 2!


*I work at Microsoft as a User Experience Designer. Type In Space is my personal project. All experiments and related opinions are my own.

Get Type In Space on Microsoft Store (on HoloLens and HoloLens 2)

Screen recordings on YouTube

I have recorded the process of the building core UX elements using Unity and MRTK.

Resources

Twitter

Read my other stories

Yoon Park (박동윤)

Written by

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade