Info for Developers of Microsoft HoloLens

HoloLens 関連イベントと情報共有に努めるブログ

(日本語訳) Case study - 3 HoloStudio UI and interaction design learnings < Case studies < HoloLens Documentation - HoloLens 技術情報

この記事は、公式技術情報 Windows Holographic - Documentation の Case study - 3 HoloStudio UI and interaction design learnings の拙訳です。正確な情報は公式ドキュメントを参照してください。

ケース スタディ - HoloStudio UI と 対話デザインから学ぶ 3つの事柄

HoloStudio は、Hololens 用の最初の Microsoft アプリでした。そのため、我々は 3D UI と対話デザインの新しいベスト プラクティスを作成する必要がありました。我々は、この点について多くのユーザー テストとプロとタイピング、トライ & エラーを行いました。

 

我々は、この種の研究を行う上で誰もが存分な知識を持っているわけではないことを知っているので、我々のシニア ホログラフィック デザイナーである Marcus Ghaly に、HoloStudio の開発にあたり HoloLens アプリのための UI と対話デザインに関する3つの事柄を学んだことを共有してもらいます。

参照ビデオ

問題 #1: 制作物を歩き回って観察しようとしなかった

HoloStudio の作業台は元々、現実世界でよく見かけるように長方形としてデザインしました。この長方形の形の問題点としては、人間はこれまでの生活で培われた経験で、コンピュータの前やデスクに座っているかように感じてしまうことが挙げられます。すなわちそれは、長方形の作業台では、周囲を歩き回って、3D 作成物をあらゆる角度から観察する気が起きないということです。 

The rectangular design of the workbench in HoloStudio dissuaded users from moving around and seeing their creations from all sides.
HoloStudio の作業台の長方形デザインは、ユーザーに、作成物を様々な角度から観察させる意欲を削ぎ落とします。

 

そこで、我々は作業台を円形にすることで、どこが "正面" なのか、また、どこが観察するには正しい位置なのか明確にしないことにしました。円形の作業台をテストすると、ユーザーはすぐに作成物の周りを歩き回り観察し始めるのです。 

The circular workbench design encouraged users to walk all the way around their creations.
円形の作業台はユーザーを成果物の周りを歩き回らせる意欲を掻き立てます。

 

学んだ事柄

ユーザーにとって何が心地よいのか常に考えること。物理空間の良い点を考慮することは他のデバイスではできない HoloLens ならではの機能です。

問題 #2: 強制ダイアログ (モーダル ダイアログ) はホログラフィックの領域じゃない場合がある

ユーザーはたまに、あなたのアプリで見てほしい所とは異なる方向を見ている場合があります。PC 上であれば、ダイアログをポップアップさせれば良いですが、3D 環境において顔の目の前にダイアログを出してしまうと、邪魔な障害物のようになってしまいますね。あなたはユーザーにメッセージを読ませる必要がありますが、ユーザーの本能は障害物を避けようとします。危険回避の反応はゲームをプレイしているときには役立ちますが、仕事用の場合は理想的ではありません。

様々なことを試しましたが、最終的に我々はダイアログに "泡型吹き出し" システムを利用することにして、吹き出しのしっぽをアプリの注意を仕向けたい場所に辿れるように追加することにしました。また、しっぽを脈打たせることで、ユーザーに目的の方向がわかりやすいようにしました。 

The &quot;Thought Bubble&quot; system included pulsing tendrils which provided a sense of direction, leading users to where their attention was needed in the app.
The "Thought Bubble" system included pulsing tendrils which provided a sense of direction, leading users to where their attention was needed in the app.

 

学んだ事柄

3D においてユーザーに注意を仕向けるよう呼びかけるのは高難度です。空間音響 (spatial sound) や、光線、泡型吹き出しなど注意喚起物を使用することでユーザーを必要な所へ導くことを検討しましょう。

Problem #3: Sometimes UI can get blocked by other holograms

ユーザーが何かホログラムに対して UI コントロールを行おうとした場合に、他のホログラムが目の前にあることにより妨害されてしまう場合があります。我々は HoloStudio を開発するにあたり、この問題を解決するためにトライ & エラーを繰り返しました。

 

A UI control associated with a hologram can become blocked if there is another hologram between it and the user wearing the HoloLens device.
ホログラムに紐付いた UI 操作は、他のホログラムが HoloLens デバイスとの間にある場合、妨害されてしまいます。

 

はじめに、我々は UI コントロールをユーザーに近づけて妨害されないようにしましたが、この方法では遠くのホログラムを操作する際にも同時に目の前の UI コントロールを行う必要があるためぎこちなさがありました。かといって、UI コントロールをユーザーに最も近いホログラムに寄せると、実際に操作が反映するホログラムから離れているように感じてしまいます。

最終的に我々は、ユーザーからホログラムとの同距離の場所に UI コントロールのゴーストを配置することで、ホログラムの UI コントロールが接続されているように思わせるようにしました。この方法を使用することで、ユーザーは、本来隠れている UI コントロールを利用して対話することができます。

 

The solution: we ghosted the UI control, which both allowed interaction with the control and made it feel connected to the hologram it was affecting.
解決案: UI コントロールをゴースト化させることで、UI コントロールと影響があるホログラムが接続されている感覚で対話することができます。

 

学んだ事柄

ユーザーは、妨害されている UI コントロールにも簡単にアクセスできなければならず、ホログラムが現実世界のどこにあっても、ユーザーが作業を完了できるような方法を確立する必要があります。

著者について

Marcus Ghaly, Sr. Holographic Designer Marcus Ghaly is a Sr. Holographic Designer working on everything from holographic UI, to 3D user input, 2D design, and volumetric interactions. He received his Bachelor of Arts from the University of Washington and spent nearly a decade in the games industry working as a character artist, technical artist, and environment co-lead. He received his Master’s degree in design while in Sweden and has been a holographic designer and researcher ever since.

See also

 

以下翻訳時の公式ドキュメント (2016/9/30 確認済)

Case study - 3 HoloStudio UI and interaction design learnings

HoloStudio was one of the first Microsoft apps for HoloLens. Because of this, we had to create new best practices for 3D UI and interaction design. We did this through a lot of user testing, prototyping, and trial and error.

We know that not everyone has the resources at their disposal to do this type of research, so we had our Sr. Holographic Designer, Marcus Ghaly, share three things we learned during the development of HoloStudio about UI and interaction design for HoloLens apps.

Watch the video

Problem #1: People didn't want to move around their creations

We originally designed the workbench in HoloStudio as a rectangle, much like you'd find in the real world. The problem is that people have a lifetime of experience that tells them to stay still when they're sitting at a desk or working in front of a computer, so they weren't moving around the workbench and exploring their 3D creation from all sides.

 

The rectangular design of the workbench in HoloStudio dissuaded users from moving around and seeing their creations from all sides.
The rectangular design of the workbench in HoloStudio dissuaded users from moving around and seeing their creations from all sides.

 

We had the insight to make the workbench round, so that there was no "front" or clear place that you were supposed to stand. When we tested this, suddenly people started moving around and exploring their creations on their own.

 

The circular workbench design encouraged users to walk all the way around their creations.
The circular workbench design encouraged users to walk all the way around their creations.

 

What we learned

Always be thinking about what's comfortable for the user. Taking advantage of their physical space is a cool feature of HoloLens and something you can't do with other devices.

Problem #2: Modal dialogs are sometimes out of the holographic frame

Sometimes, your user may be looking in a different direction from something that needs their attention in your app. On a PC, you can just pop up a dialog, but if you do this in someone's face in a 3D environment, it can feel like the dialog is getting in their way. You need them to read the message, but their instinct is to try to get away from it. This reaction is great if you're playing a game, but in a tool designed for work, it's less than ideal.

After trying a few different things, we finally settled on using a "thought bubble" system for our dialogs and added tendrils that users can follow to where their attention is needed in our application. We also made the tendrils pulse, which implied a sense of directionality so that users knew where to go.

 

The &quot;Thought Bubble&quot; system included pulsing tendrils which provided a sense of direction, leading users to where their attention was needed in the app.
The "Thought Bubble" system included pulsing tendrils which provided a sense of direction, leading users to where their attention was needed in the app.

 

What we learned

It's much harder in 3D to alert users to things they need to pay attention to. Using attention directors such as spatial sound, light rays, or thought bubbles, can lead users to where they need to be.

Problem #3: Sometimes UI can get blocked by other holograms

There are times when a user wants to interact with a hologram and its associated UI controls, but they are blocked from view because another hologram is in front of them. While we were developing HoloStudio, we used trial and error to come to a solution for this.

 

A UI control associated with a hologram can become blocked if there is another hologram between it and the user wearing the HoloLens device.
A UI control associated with a hologram can become blocked if there is another hologram between it and the user wearing the HoloLens device.

 

We tried moving the UI control closer to the user so it couldn't get blocked, but found that it wasn't comfortable for the user to look at a control that was near to you while simultaneously looking at a hologram that was far away. If, however, we moved the control in front of the closest hologram to the user, they felt like it was detached from the hologram it should be affecting.

We finally ended up ghosting the UI control, and put it at the same distance from the user as the hologram it's associated with, so they both feel connected. This allows the user to interact with the control even though it's been obscured.

 

The solution: we ghosted the UI control, which both allowed interaction with the control and made it feel connected to the hologram it was affecting.
The solution: we ghosted the UI control, which both allowed interaction with the control and made it feel connected to the hologram it was affecting.

 

What we learned

Users need to be able to easily access UI controls even if they've been blocked, so figure out methods to ensure that users can complete their tasks no matter where their holograms are in the real world.

About the author

Marcus Ghaly, Sr. Holographic Designer Marcus Ghaly is a Sr. Holographic Designer working on everything from holographic UI, to 3D user input, 2D design, and volumetric interactions. He received his Bachelor of Arts from the University of Washington and spent nearly a decade in the games industry working as a character artist, technical artist, and environment co-lead. He received his Master’s degree in design while in Sweden and has been a holographic designer and researcher ever since.

See also