Outcome

This is the compilation of the outcome of our work. Although designing on Hololense is still an unexplored teritory, below are some of the key design learnings from the project.  

User flow

The inspiration to structure flow and contextual information come really close to design for web pages. However there are are few key differences.  

1. Hololense 1 offers a narrow field of view of 35 degrees, so one need to design UI elements within that contraint.

2. Unlike single web page screen layout, in Hololense one could pin multiple windows in the spatial space which gives flexibilty on how to design flows

UI Prototyping

Both Adobe Xd and Unity(C#) together to create the UI.

Home screen workflow

Tool Tip prototype. (Unity renders are used directly into Adobe Xd to visualise the flow) 

Microinteractions of the side panel

Colours and Materials

HoloLens use color-sequential see-through RGB displays to render holograms. Holograms are created by adding light to the real-world light. This means that white will appear bright, while black renders transparent.

Some of the design learnings,
1. Use dark colours for background and white for text.
2. Every colour is always slightly transparent.
3. Using full Black R0 G0 B0 will result in transparent colour.
4. Using transparent white outline around the 3D UI elements for enhanced visibility

Sound Design

The design for sound is often overlooked on mobile and web applications. However, the sound feedback complements visuals on HoloLense in giving a compelling Hologram expereince. Because mixed reality exists in 3D space, sounds should reflect the same.

For example, a simple button in various states (No Gaze, Gaze, Tap) should not only have a unique visual look but a different sound as well.

No Gaze to Gaze to Tap sound experience

Thank you for watching