Designing for Mixed Reality

How to think about 3D space in HoloLens

Todd Williams
Dec 7, 2016 · 6 min read

Holographic computing is a powerful thing. The amount of data we can absorb in three dimensions is astounding. Experiencing things in an immersive context speeds up our understanding, helps us make decisions faster, and hard-codes our memories in spatial awareness.

The design implications that stem from such a rich environment are equally astounding. Think about your favorite map app. On a 2D screen, we spend a lot of time panning, zooming, and switching views to understand things like elevation, depth, and proximity. Now imagine that same map in HoloLens 3D. Suddenly, everything that our minds previously had to stitch together — different views and angles arranged like a Lego map — is now instantly understood. It’s alive, it’s complete, it’s right there in front of you. Experiencing something digital in the same way we understand the physical world is pretty magical.

As designers, this real-world understanding is a constant and relatively new challenge. How do we translate our knowledge of pixels and resolutions to the physicality of 3D realms? How can UI designers confidently iterate across different “worlds”? How does design thinking evolve from here?

Get into the space

The distance challenge: legibility and accuracy

Distance magnifies motion and reduces content visibility.

Depth perception is a huge challenge in 3D design. It affects every piece of information and object the user interacts with. The mind perceives things as smaller at a distance, which means details at a distance are more difficult to decipher, especially text. The amount of muscle control required for the eye to focus on objects at a distance is much greater than focusing on elements closer to the user. The slightest movement of the head affects perception. Reading small text from far away requires the muscles in the
neck to hold the head as still as possible. The eyes need more time to focus, so they must remain motionless while blinking intervals are increased. Basically — human eyesight is a cool but complex thing. All these processes are happening automatically, but prolonged reading at a distance can cause fatigue. This is why the humble road sign is so great. It presents the exact right information at various distances, quickly and effectively. Referencing real-world patterns like this creates powerful virtual world solutions.

In line with legibility, virtual spaces require precision. We’re imperfect — we misjudge distances, we move awkwardly, we can’t focus on too much stuff at once. Being precise in your design considerations means overcoming the natural movement of the body, especially at a distance. Imagine a tiny button ten meters in front of you. You walk forward, maybe you start talking to someone next to you, you miss the button. You have to recalibrate for a moment, try again.

As a designer, you can change that interaction. In the virtual space, you’re free to dictate the size of fonts, buttons, and any other bits of information that need to be observed. Create designs based on how far the content will be from the user. Keep in mind that to maximize effectiveness, the bulk of primary content should stay between one and two meters from the user. Elements closer than one meter can cause nausea, especially if they’re connected to the user’s gaze.

The user feels confident when they can easily absorb the information required to make choices. Swiftness and accuracy replace fatigue and frustration. The goal is to be responsive and always provide the right amount of feedback in reply to the user’s input. An experience that has a flexible workflow, makes the user feel confident, understands intent, and responds with the desired result is rewarding and engaging.

Think like a game developer

Start building

Adobe Illustrator Texture Template

All about typography in HoloLens

HoloToolkit-Unity

On the developer side, here is a list of all the tools you may need to develop applications for HoloLens.

Holographic Academy

Microsoft HoloLens Dev Center

Microsoft Store

If there’s anything I missed, let me know in the comments below. I can’t wait to see what you build!

To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.

Microsoft Design

Stories from the thinkers and tinkerers at Microsoft

Microsoft Design

Stories from the thinkers and tinkerers at Microsoft. Sharing sketches, designs, and everything in between.

Todd Williams

Written by

Visual designer, front-end developer & game creator. Because our relationship with technology should be inclusive, productive and fun. UX designer @ Microsoft

Microsoft Design

Stories from the thinkers and tinkerers at Microsoft. Sharing sketches, designs, and everything in between.