HoloLensに最適なメニュー構成を検討する（素案のためご意見歓迎）

# HoloLensのUIを考える
HoloLens 2の発表もありましたがMRで色々UIを考える事は最終的にUXの満足度にも影響を与える要素になるので操作性を考慮して検討する必要があります。そこで今回はよくあるメニュー機能を搭載するにあたって使いやすいものは何かを考えて仕立て見ました。今回はコードの話はなく（後日入れる予定です）どういう考え方でこういうUIにしたかを紹介したいと思います。

## HoloLensでメニューを作る
HoloLensでアプリケーションを構築するとなるとコンテンツによってどうしても欲しくなるのが「メニュー」です。HoloLens 2では描画域が従来の２倍近く広がるとはいえ描画できる領域は限られているのでできるだけシンプルに活用できるものが欲しい事は変わりません。

### どのように実現するか
HoloLensでメニューを作りたいと考えた場合、その機能によっていくつかの実現方法があります。

1. Gazeを活用する  
一番オーソドックスな方法です。HoloLensは注視点が描画域の中央にあります。これを使ってメニューを選択していくという方法です。  
2. 音声認識を活用する  
HoloLens標準のマイクを活用してメニューコマンドを発話することでメニューを実行する方法です。
3. ジェスチャーを活用する  
ハンドジェスチャーを駆使してメニュー操作する方法です。HoloLensでは手の位置をある程度認識することができます。またいくつかのジェスチャーはイベントを発生させることができるのでこれらを駆使することでメニューを制御します。

現状HoloLensでは上記３つの仕組みを利用してメニューを構成することは可能です。

#### 機能ごとに実現するメニューの考察
HoloLensでは３つの機能を活用してメニューが構成できそうですがメリットデメリットがあると考えています。
具体的には以下のようなものがあるのではないかと私は考えています。

|機能|メリット|デメリット|
|:--:|:--|:--|
|Gazeを利用する|操作方法としてはわかりやすい|メニュを選択するためには画面の描画域の中心にメニューが来るようにしなければ操作ができない|
|音声認識を利用する|音声入力のためGazeのような描画域での制約を受けにくい。|周囲が騒がしい場合誤認識率が高くなる。音声認識に時間がかかるため多少のタイムラグが発生する。|
|ジェスチャーを利用する|Gazeとは異なり任意の場所でメニュー選択を行える|HoloLensはジェスチャーが少ないためメニューでジェスチャーを使うとメインコンテンツで困る場合があるかも。|

このようにどの方法も一長一短といって形で単純な方法ではうまくいかないケースが多いかと思います。

#### どの機能で実現するか
できるだけ正確に処理させる/外部環境の影響をできるだけ低減するためには「2.音声認識を使う」方式は若干不安が残ります。メニューコマンドがうまく認識されないとユーザの不満は高くなるためあくまで補助的に活用する方が良いと考えます。  
「3.ジェスチャーを利用する」については比較的安定した機能を提供できそうです。最初にハンドジェスチャーを「Ready」状態にして、「Tap&Hold」により「メニューを表示」、「Release」時に選択したメニューを選択というアプローチであれば描画域も占有せずにうまく実現できると思います。ただ、この方法はHoloLens 2からかなと個人的には思っています。というのも作成するコンテンツ次第とは思いますが、もともとHoloLensは認識できるジェスチャーが少ないためメニューにジェスチャーを使うと操作が複雑化する可能性が高くなります。特殊なオペレーションを追加すればするほど、操作が複雑化するのでできれば避けたいところです。
そうなった場合消去法的に「1.Gazeを利用する」となるのですが、メニュー選択時には描画域のほぼ真ん中にメニューが鎮座することになるためGazeを使う場合はひと工夫が必要になると考えています。

### メニューとして必要な要素
どの機能もそれだけでは使い勝手が悪い部分がどうしても出てしまいます。そこでメニューとして必要な要素、つまりどういうメニューであれば扱いやすそうか検討して見ました。

1. 操作はできるだけシンプル  
メニュー操作があまり特殊でHoloLensの基本機能から大きく逸脱すると利用者は困惑します。そこであまり操作としては特殊なことをしなくてもよいそのままの機能を活用することを考えます。
2. メインコンテンツの制約にならないようにする  
本来これから作るコンテンツでメニューに対する機能がコンテンツを作るうえで制約になるような状況は本末転倒です。あくまで実現したいコンテンツに影響を与えない機能群でメニューを実現すべきと考えます。

上記を加味してあると良さそうなメニューを考えると以下のようなものになると考えました。

1. メニュー選択はGazeで実施する。
2. メニューの確定はAirTapまたは、GazeSelectorのような視線のみで確定
3. メニューを使わないときは邪魔にならないようにする


## 最終的に実現した１つのアイデア
先ほど考えたメニューとしてして良さそうな要素をまとめた結果以下のようなUIになりました。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">HoloLensでメニューを作りたくて考えたアイデア。<br>必要な時だけGazeを行い選択できるメニュー。<br>使わないときは勝手に隅っこに移動し、視界の中についてきてくれる。UIのベースはMRTK.<a href="https://twitter.com/hashtag/HoloLens?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens</a> <a href="https://twitter.com/hashtag/MixedRealityToolkit?src=hash&amp;ref_src=twsrc%5Etfw">#MixedRealityToolkit</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://t.co/FQoI3o4Vt7">pic.twitter.com/FQoI3o4Vt7</a></p>&mdash; takabrz@xR頑張るマン (@takabrz1) <a href="https://twitter.com/takabrz1/status/1098278618407391232?ref_src=twsrc%5Etfw">2019年2月20日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


機能的なものは以下の通りです。

* メニューにGazeを当てるとサブメニューが表示される。
* ボタンをエアタップするとメニュー選択
* メニューの選択が終わる or メニューからGazeが外れると折りたたまれて所定の位置に移動
* 移動や振りむきなどでメニューが描画域から外れると自動的に所定の位置に移動
* メニュー選択するためのGazeの移動を除き一定時間たつと所定の位置に移動

ちなみに、HoloLens 2の場合Eye TrackingがあるのでGazeを視線で選択する方式にすれば最適化されそうな気がします。そのあたりは実機が出てから検討する要素になりそうですね。

## 実装方法などなど

（後日公開予定）

## まとめ
Mixed Realityでコンテンツを作る際には、提供する機能によってUI/UXは色々出てくると思います。作るコンテンツ次第でどういうものがいいかは変わってくると思うので、時々試行するのは大事だと思います。