導入事例 - マイ最初の年、HoloLens の設計チームCase study - My first year on the HoloLens design team

2016 年 1 月で HoloLens デザイン チームに参加するときに開始、3 D ワールドに 2D flatland からへ。My journey from a 2D flatland to the 3D world started when I joined the HoloLens design team in January, 2016. チームに参加する前に 3D の設計でごくわずかなの経験がありました。Before joining the team, I had very little experience in 3D design. 千マイルの今回はその最初の手順が閏日点を除いて、1 つの手順を以降の旅の中国語ことわざのようなことでした。It was like the Chinese proverb about a journey of a thousand miles beginning with a single step, except in my case that first step was a leap!

2D から 3D にクラウドがかかっていますTaking the Leap from 2D to 3D
2D から 3D にクラウドがかかっていますTaking the leap from 2D to 3D

"感じましたなものとして、車を導く方法を知ることがなく主導権をジャンプする必要があります。負荷がかかることが怖いまだ非常にフォーカスがあるとします"。“I felt as though I had jumped into the driver’s seat without knowing how to drive the car. I was overwhelmed and scared, yet very focused.”
— Hae Jin Lee— Hae Jin Lee

過去の年にしまいましたスキルと知識を同じですが、まだ学ぶ速度。During the past year, I picked up skills and knowledge as fast as I could, but I still have a lot to learn. ここでは、4 つの観測を 2D から 3D の相互作用のデザイナーへの移行は、文書化ビデオ チュートリアルを作成しました。Here, I’ve written up 4 observations with a video tutorial documenting my transition from a 2D to 3D interaction designer. 私の経験を他のデザイナーを 3D に移行を実行するきっかけと思います。I hope my experience will inspire other designers to take the leap to 3D.

終わりのフレーム。Good-bye frame. 空間こんにちは/diegetic UIHello spatial / diegetic UI

ポスター、雑誌、web サイト、またはアプリの画面をデザインするときに、定義済みのフレーム (通常は四角形) は、すべての問題のための定数をしました。Whenever I designed posters, magazines, websites, or app screens, a defined frame (usually a rectangle) was a constant for every problem. HoloLens、またはその他の VR デバイスでは、この投稿を読んでいる場合を除いて、 、外部からこれを見て2D 画面のフレーム内で保護された安全に使用します。Unless you are reading this post in a HoloLens or other VR device, you are looking at this from the outside through 2D screen safely guarded within a frame. コンテンツは、外部にします。Content is external to you. ただし、Mixed Reality ヘッドセットフレームを排除し徹底解剖からコンテンツを追いコンテンツの領域内であるため、します。However, Mixed Reality headset eliminates the frame, so you are within the content space, looking and walking through the content from inside-out.

概念的には、これを理解しましたが、単に 2D の考え方を 3D 空間に転送の過ちを犯しては最初に。I understood this conceptually, but in the beginning I made the mistake of simply transferring 2D thinking into 3D space. 明らかにしていないため、うまく動作 3D 空間がある (ユーザーのヘッドの移動に基づく) ビューの変更など、独自の一意のプロパティと快適性の要件が異なる(を使用して、人間とデバイスのプロパティに基づくその)。That obviously didn’t work well because 3D space has its own unique properties such as a view change (based on user’s head movement) and different requirement for user comfort (based on the properties of the devices and the humans using them). たとえばを 2D の UI デザイン領域に画面の隅にある UI 要素にロックは非常に一般的なパターンがこの HUD (ヘッドをディスプレイ) スタイルの UI が MR/VR エクスペリエンスで自然に感じはありません。スペースにユーザーの immersion の妨げになってし、ユーザーの不安をによりします。For example, in a 2D UI design space, locking UI elements into the corner of a screen is a very common pattern, but this HUD (Head Up Display) style UI does not feel natural in MR/VR experiences; it hinders user’s immersion into the space and causes user discomfort. 処分するたい場合は、眼鏡の面倒な場合、ほこりパーティクルをできるようになります。It’s like having an annoying dust particle on your glasses that you are dying to get rid of. 時間の経過と共に、3 D 空間でコンテンツを配置して、コンテンツに従って相対の固定距離にあるユーザーは、本文ロックの動作を追加するより自然な感じることがわかりました。Over time, I learned that it feels more natural to position content in 3D space and add body-locked behavior that makes the content follow the user at a relative fixed distance.

本文ロックBody-locked
本文ロックBody-locked


世界ロックWorld-locked
世界ロックWorld-locked

フラグメント:優れた Diegetic UI の例Fragments: An example of great Diegetic UI

フラグメント、によって開発された最初のユーザーの犯罪 thriller Asobo Studioの HoloLens は優れた Diegetic UI を示します。Fragments, a first-person crime thriller developed by Asobo Studio for HoloLens demonstrates a great Diegetic UI. このゲームでは、ユーザーはメインの謎を解決しようとした探偵文字になります。In this game, the user becomes a main character, a detective who tries to solve a mystery. この謎を解決するために極めて重要なヒント、ユーザーの物理的なルームでのさまざまな箇所を取得、多くの場合、独自の既存のではなく、架空のオブジェクトの内部に埋め込まれたです。The pivotal clues to solve this mystery get sprinkled in the user’s physical room and are often times embedded inside a fictional object rather than existing on their own. UI Asobo チームが巧みに仮想の文字の視線方向、サウンド、光、およびガイド (ヒントの場所を指す矢印など) を含む多くのキューを使用するために、UI の本文がロックされているよりも見つけにくいする傾向にありますこの diegetic ユーザーの注意を取得します。This diegetic UI tends to be less discoverable than body-locked UI, so the Asobo team cleverly used many cues including virtual characters’ gaze direction, sound, light, and guides (e.g., arrow pointing the location of the clue) to grab user’s attention.

フラグメントの Diegetic UI の例Fragments - Diegetic UI examples
フラグメントの Diegetic UI の例Fragments - Diegetic UI examples

観測 diegetic UI についてObservations about diegetic UI

空間の (両方本文ロックおよび世界ロック) の UI と diegetic UI は、独自の長所と短所があります。Spatial UI (both body-locked and world-locked) and diegetic UI have their own strengths and weaknesses. デザイナーをできるだけ多く MR/VR アプリを試すおよびメソッドを配置するさまざまな UI の独自の理解と感情を開発することをお勧めします。I encourage designers to try out as many MR/VR apps as possible, and to develop their own understanding and sensibility for various UI positioning methods.

恣意と魔法のような操作の戻り値The return of skeuomorphism and magical interaction

恣意、現実世界のオブジェクトの形状を模倣したデジタル インターフェイスがありません「クール」デザイン業界での過去の 5 ~ 7 年間です。Skeuomorphism, a digital interface that mimics the shape of real world objects has been “uncool” for the last 5–7 years in the design industry. 最後に、Apple は、iOS 7 でフラット デザインする方法を指定、ときに恣意がインターフェイスのデザイン方法論として最後に停止しているように思われました。When Apple finally gave way to flat design in iOS 7, it seemed like Skeuomorphism was finally dead as an interface design methodology. 次に、新しいメディア、MR/VR ヘッドセットが市場に到着し、恣意が再度返されるように見えます。But then, a new medium, MR/VR headset arrived to the market and it seems like Skeuomorphism returned again. : ): )

ジョブ シミュレーターの場合:Skeuomorphic VR 設計の例Job Simulator: An example of skeuomorphic VR design

ジョブのシミュレーター、という風変わりなゲームを開発したOwlchemy Labs skeuomorphic VR デザインの最も一般的な例の 1 つです。Job Simulator, a whimsical game developed by Owlchemy Labs is one of the most popular example for skeuomorphic VR design. このゲームでプレーヤーは将来、ロボットは人間を置き換えるし、人間には、1 つの異なる 4 つのジョブでの日常のタスクを実行するは、ように感じること博物館を参照してください転送します。自動整備士、グルメ Chef、ストアのクラークまたはオフィス ワーカーです。Within this game, players are transported into future where robots replace humans and humans visit a museum to experience what it feels like to perform mundane tasks at one of four different jobs: Auto Mechanic, Gourmet Chef, Store Clerk, or Office Worker.

恣意の利点は明らかです。The benefit of Skeuomorphism is clear. 使い慣れた環境とこのゲーム内のオブジェクトより快適さと仮想空白文字であると思われる新しい VR のユーザーに役立ちます。Familiar environments and objects within this game help new VR users feel more comfortable and present in virtual space. また、オブジェクトおよび対応する物理反応と使い慣れた知識と動作を関連付けることによってコントロールがされているように感じになります。It also makes them feel like they are in control by associating familiar knowledge and behaviors with objects and their corresponding physical reactions. たとえば、コーヒーを飲み、人だけ必要がありますコーヒー マシンをボタンを押して、cup ハンドルをドラッグして現実の世界でしまうと、口に傾けます。For example, to drink a cup of coffee, people simply need to walk to the coffee machine, press a button, grab the cup handle and tilt it towards their mouth as they would do in the real world.

ジョブのシミュレーターJob Simulator
ジョブのシミュレーターJob Simulator

MR/VR がまだ開発中であるためは恣意度を使用して MR/VR テクノロジを説明して、世界各地のより多くのユーザーに紹介するために必要なは。Because MR/VR is still a developing medium, using a certain degree of skeuomorphism is necessary to demystify MR/VR technology and to introduce it to larger audiences around the world. さらに、恣意または現実的な表現を使用してが手術またはフライト シミュレーションなどのアプリケーションの特定の種類な役に立ちます可能性があります。Additionally, using skeuomorphism or realistic representation could be beneficial for specific types of applications like surgery or flight simulation. これらのアプリの目的は、開発および現実の世界で直接適用できる特定のスキルを絞り込むであるために近ければ近いほどシミュレーションが実際には、譲渡できません。 またより知識は。Since the goal of these apps is to develop and refine specific skills that can be directly applied in the real world, the closer the simulation is to the real world, the more transferable the knowledge is.

その恣意がのみ 1 つの方法に注意してください。Remember that skeuomorphism is only one approach. MR/VR 世界中の可能性がはるかに超えて、およびデザイナーが魔法のようなハイパー自然の相互作用を作成するよう努力する必要があります: MR VR/世界で一意に可能な新しいアフォーします。The potential of the MR/VR world is far greater than that, and designers should strive to create magical hyper-natural interactions — new affordances that are uniquely possible in MR/VR world. 開始、として基本的な自分たちの希望を満たすためにユーザーを有効にする通常のオブジェクトへの魔法のような電源の追加を検討してください: teleportation 周到など。As a start, consider adding magical powers to ordinary objects to enable users to fulfill their fundamental desires—including teleportation and omniscience.

Doraemon の魔法のようなドア (左) と Ruby slippers(right)Doraemon’s magical door (left) and Ruby slippers(right)
Doraemon の魔法のようなドア (左) と ruby slippers(right)Doraemon’s magical door (left) and ruby slippers(right)

VR で恣意の所見Observations about skeuomorphism in VR

「Anywhere ドア」Doraemon、オズのハリー ポッターで「Maurader のマップ」の「Ruby スリッパ」では、人気のある架空の魔法のような能力の通常のオブジェクトの例が数多く存在します。From “Anywhere door” in Doraemon, “Ruby Slippers” in The Wizard of Oz to “Maurader’s map” in Harry Potter, examples of ordinary objects with magical power abound in popular fiction. これらの魔法のようなオブジェクトでは、実世界と新機能となる可能性の間、すばらしい機能間の接続を視覚化するのに役立ちます。These magical objects help us visualize a connection between the real-world and the fantastic, between what is and what could be. 魔法のようなまたは surreal を設計するときに、機能、エンターテインメントのバランスを取るように 1 つのオブジェクトが必要に留意してください。Keep in mind that when designing the magical or surreal object one needs to strike a balance between functionality and entertainment. 新奇のための純粋な魔法のようなものを作成するという誘惑に注意してください。Beware of the temptation to create something purely magical just for novelty’s sake.

さまざまな入力方法を理解します。Understanding different input methods

中程度の 2D のデザイン時はタッチ、マウス、および入力のキーボードの相互作用に注目する必要があります。When I designed for the 2D medium, I had to focus on touch, mouse, and keyboard interactions for inputs. MR/VR デザイン領域で、当社の本文になり、インターフェイス、ユーザーは入力方式の広範な選択を使用することが: 音声、視線、ジェスチャ、 6 自由度のコント ローラー、しより直感的な直接接続に余裕がある gloves仮想オブジェクトです。In the MR/VR design space, our body becomes the interface and users are able to use a broader selection of input methods: including speech, gaze, gesture, 6-dof controllers, and gloves that afford more intuitive and direct connection with virtual objects.

HoloLens で使用できる入力Available inputs in HoloLens
HoloLens で使用できる入力Available inputs in HoloLens

「すべてが、何かに最適と他の情報を最も不適切です。」“Everything is best for something, and worst for something else.”
Bill BuxtonBill Buxton

たとえば、ッドマウント デバイスでのベア手の形とカメラのセンサーを使用して入力ジェスチャをコント ローラーを保持または sweaty gloves、ソックスを着けずにからユーザーの手の解放が頻繁に使用される物理疲労 (別名、gorilla arm) が発生することができます。For example, gesture input using bare hand and camera sensors on an HMD device frees users hand from holding controllers or wearing sweaty gloves, but frequent use can cause physical fatigue (a.k.a gorilla arm). ユーザーは、視野; 内で維持する必要があります。カメラは、手を参照してくださいことはできません、手が使用できません。Also, users have to keep their hands within the line of sight; if the camera cannot see the hands, the hands cannot be used.

音声入力は切り抜けるには 1 つのコマンドを使用して入れ子になったメニューにユーザーを許容するために、複雑なタスクを走査 (たとえば、"Show me による Laika studio 映画") でも非常に経済的なその他のモダリティと組み合わせると (など、使用するコマンドの"直面 me"、。ホログラム ユーザーが見るユーザーの方に)。Speech input is good at traversing complex tasks because it allows users to cut through nested menus with one command (e.g., “Show me the movies made by Laika studio.”) and also very economical when coupled with other modality (e.g., “Face me” command orients the hologram a user is looking at towards the user). ただし、音声入力ノイズの多い環境で正常に機能しない、または非常に非表示の領域で適切でない可能性があります。However, speech input may not work well in noisy environment or may not appropriate in a very quiet space.

ジェスチャと音声認識、だけでなく携帯用追跡コント ローラー (、Oculus タッチなど、Vive など) に使いやすく、正確で活用してユーザーのために非常に一般的な方法で入力はproprioception、パッシブ ハプティクス的な手掛かりを提供します。ただし、これらのメリットは、ベア手にして、完全な本の指の追跡を使用することができなくての犠牲が伴います。Besides gesture and speech, hand-held tracked controllers (e.g., Oculus touch, Vive, etc.) are very popular input methods because they are easy to use, accurate, leverage people’s proprioception, and provide passive haptic cues. However, these benefits come at the cost of not being able to be bare-hands and use full finger tracking.

Senso (左) と Manus VR(Right)Senso (Left) and Manus VR(Right)
Senso (左) と Manus VR (右)Senso (Left) and Manus VR (Right)

中されません一般的なコント ローラーとして、gloves は、もう一度、MR/VR wave に協力してくれた勢いが。While not as popular as controllers, gloves are gaining momentum again thanks to the MR/VR wave. ヘッドセットを EEG または採用されているのでのセンサーを統合することで仮想環境のインターフェイスとして乗れずに脳/注意入力を開始した最も最近、(たとえば、 MindMaze VR)。Most recently, brain/mind input have started to gain traction as an interface for virtual environments by integrating EEG or EMG sensor to headset (e.g., MindMaze VR).

入力方法の所見Observations about input methods

これらは、単なる MR/VR の市場で使用可能な入力デバイスのサンプルです。These are a just a sample of input devices available in the market for MR/VR. 引き続き、業界の成熟して同意したら、ベスト プラクティスまでの急増にします。They will continue to proliferate until the industry matures and agrees upon best practices. それまでは、デザイナーは常に新しい入力デバイスの認識と、特定のプロジェクトの特定の入力方法に精通する必要があります。Until then, designers should remain aware of new input devices and be well-versed in the specific input methods for their particular project. デザイナーは、クリエイティブなソリューションものデバイスの長所を再生中に、制限内で検索する必要があります。Designers need to look for creative solutions inside of limitations, while also playing to a device’s strengths.

シーンをスケッチし、ヘッドセットのテストSketch the scene and test in the headset

私は、2 D で作業した、ときに、コンテンツだけはスケッチほとんどの場合。When I worked in 2D, I mostly sketched just the content. ただし、複合現実の領域で十分でした。However, in mixed reality space that wasn’t sufficient. ユーザーと仮想オブジェクト間のリレーションシップを想像するシーン全体をスケッチする必要があります。I had to sketch out the entire scene to better imagine the relationships between the user and virtual objects. シーンをスケッチする開始は自分の空間的な考え方をするシネマ 4 D場合がありますでプロトタイプを作成する単純な資産を作成Mayaします。To help my spatial thinking, I started to sketch scenes in Cinema 4D and sometimes create simple assets for prototyping in Maya. HoloLens チームに参加する前にいずれかのプログラムを使用したことはありませんし、私もは、初心者がこれら 3D プログラムを使用する確実に役立ったなどの新しい用語、慣れてできますシェーダーIK (逆関数キネマティクス)します。I had never used either program before joining the HoloLens team and I am still a newbie, but working with these 3D programs definitely helped me get comfortable with new terminology, such as shader and IK (inverse kinematics).

"3d シーンをスケッチしたはどの程度近いかに関係なくヘッドセットで実際の経験がほとんどないスケッチの場合と同じです。その理由はターゲット ヘッドセットにシーンをテストすることが重要"— Hae Jin Lee“No matter how closely I sketched out the scene in 3D, the actual experience in headset was almost never the same as the sketch. That’s why it’s important to test out the scene in the target headsets.” — Hae Jin Lee

HoloLens のプロトタイプ作成にあるすべてのチュートリアルを試しましたMixed Reality チュートリアルを開始します。For HoloLens prototyping, I tried out all the tutorials at Mixed Reality tutorials to start. 再生を開始した、 HoloToolkit.Unity holographic アプリケーションの開発を加速する開発者にマイクロソフトが提供しています。Then I began to play with HoloToolkit.Unity that Microsoft provides to developers to accelerate development of holographic applications. 何かでスタックしたに自分の質問を投稿HoloLens の質問と回答フォーラムします。When I got stuck with something, I posted my question to HoloLens Question & Answer Forum.

HoloLens のプロトタイプ作成の基本的な理解を取得するには、後に他の非占めるを自分でプロトタイプを支援する考えました。After acquiring basic understanding of HoloLens prototyping, I wanted to empower other non-coders to prototype on their own. したがって、HoloLens を使用して単純な光線を開発する方法を示すビデオ チュートリアルがしました。So I made a video tutorial that teaches how to develop a simple projectile using HoloLens. 簡単に説明の基本概念をでも HoloLens の開発に 0 個の経験があれば、作業を進めるにできる必要があります。I briefly explain the basic concepts, so even if you have zero experience in HoloLens development, you should be able to follow along.


自分のような非プログラマのためこの簡単なチュートリアルを行いました。I made this simple tutorial for non-programmers like myself.

コースを VR プロトタイプを作成しましたVR Dev 学校、所要時間も仮想現実の 3D コンテンツの作成Lynda.com にします。For VR prototyping, I took courses at VR Dev School and also took 3D Content Creation for Virtual Reality at Lynda.com. VR Dev school には、コーディングの詳細な知識と詳細 Lynda コース提供 me VR の資産を作成する便利な概要が提供されています。VR Dev school provided me more in depth knowledge in coding and the Lynda course offered me a nice short introduction to creating assets for VR.

移行を実行します。Take the leap

1 年前、落としたような少し反響は大変大きかったのです。A year ago, I felt like all of this was a bit overwhelming. 今すぐお伝えできます労力を費やす価値の 100% が。Now I can tell you that it was 100% worth the effort. MR/VR は子供の頃の中でも、非常に多くの興味深い可能性を実現するを待機しています。MR/VR is still very young medium and there are so many interesting possibilities waiting to be realized. インスピレーションと残念な気分を将来の設計に 1 つのごく一部の再生できるようにします。I feel inspired and fortunate be able to play one small part in designing the future. 3D 空間に旅に合流を願っています!I hope you will join me on the journey into 3D space!

執筆者紹介About the author

Picture of Hae Jin Lee Hae Jin LeeHae Jin Lee
UX デザイナー @MicrosoftUX Designer @Microsoft