[WWDC23] 空間での入力デザイン講演 翻訳＆まとめ
こんにちはKeijiroh（@keijirohn）です。
WWDC 2023でApple Vision Proが発表されました。
Design for spatial inputという、空間コンピューティングのインプットについての講演を翻訳＆まとめます。
講演してくれたのは、Israel Pastrana (@is__real)とEugene Krivoruchko (@crookookoo)のお二人です。
イントロ
IsraelとEugeneがお届けします。
Apple Vision Proの入力方法である、Eyes（眼）とHands（手）を使ったインタラクションについて紹介します。また私達のプラットフォームでのベストな使い方をお伝えします。
基本操作
シンプルにボタンを見て、人差し指と親指でタップすることで選択します。手は膝の上に置いてリラックス状態で操作出来ます。UIから離れていても快適に操作出来ます。
キーボードのタイピングの様に指先で直接操作することも可能です。
直接操作のように腕を空中に持っていき操作するのは疲労します。しかし、一定のユースケースにおいては直接操作の方が良いこともわかっています。
また皆さんがこれまで使っていたボイス、キーボード、トラックパッド、ゲームコントローラーの操作方法も使用することが出来ます。
EyesとHandsを使った操作
眼の動きと手のジェスチャは各個人それぞれ違います。デバイスの中と外にあるカメラがプライバシーに考慮しながらあなたの動きを捉えます。
センサーが広い領域を認識することが出来るので、手を体のそばに置いたまま自然な状態で操作することが出来ます。
デバイス自体でデータをフィルターし変換することで、正確な入力情報をあなたのアプリケーションで使うことが出来ます。
眼を使ったインタラクション
まずはEyesのインタラクションから。
空間コンピューティングでは、Eyesはターゲットするインプットとして使います。見ているところを選択します。眼でターゲットするのに難しくありません。どれだけ遠くに離れていても簡単にターゲッティング出来ます。
あなたがアプリを開発する時に、ユーザーが快適で、簡単にターゲッティング出来て、動作していることがユーザーにもわかり、眼でユーザーの意図をレイアウトに反映するかを説明します。
快適性
まずはComfortableの説明から。
360度のコンテンツを作ることが出来ますが、ユーザーが見える範囲はField of View内に限られます。真ん中が一番快適で、端に行くほど快適でなくなります。なのでコンテンツをField of View内に作る様に心がけましょう。首や体の動きは最小限にします。
アプリのメインコンテンツはField of Viewの真ん中に持ってくる様にしましょう。それが眼にとって一番快適な場所です。端を見ることでユーザーは疲れます。なので端はあまり見る必要のないコンテンツを端にもってきましょう。
例えばメインコンテンツではなく、メニューなどのサブコンテンツはメインコンテンツを邪魔しないかつ、端に行きすぎない様に配置しましょう。
繰り返しますが、首と眼にとって快適となるように、できるだけField of Viewの真ん中にコンテンツをもってきましょう。
空間コンピューティングならではの、Depthについても考慮しなければなりません。コンテンツを近くや遠くに置くことで、ユーザーに違った感覚を与えることが出来ます。しかし眼は一つの距離しか焦点を合わすことが出来ません。何度も焦点を合わす距離を変えると、眼に負担を与えます。
同じDepthにコンテンツを配置することで、複数のUIを行き来する時に眼への負担を減らします。
モーダルビューを見る時は、メインビューをZ方向に押してからモーダルビューを表示させます。これにより、ユーザーは最初に見ていたメインビューと同じ距離でモーダルビューを見ることが出来ます。これにより、ユーザーが焦点距離を変えることなくUIの切り替えが出来ます。
例えばタブバーが左側、セグメントコントロールを下側に置きます。メインコンテンツと意図的にDepthを変えることで、これによりDepthを意味ある形で使えます。もちろん眼の疲労も防げます。
使いやすさ
次にEasy to useです。ユーザーが眼でUIにターゲッティングを成功させるポイントがあります。
人間はオブジェクトの真ん中を見る習性があります。丸やカプセル型、角丸の長方形など丸い形のオブジェクトを使いましょう。シャープな角のオブジェクトは避けましょう。シャープな角のオブジェクトを使うと、ユーザーはオブジェクトの外側を見る習性があります。そうすると眼でのUI選択する正確性が低くなります。
またオブジェクトに輪郭をつけたり、アテンションを外側につけることも避けましょう。
また周りの縁が一定になるように中に表示させるオブジェクトを選択しましょう。
眼をUIの中心に持ってくるように心がけましょう。
最小のターゲットエリアは60ptです。
しかしUIのエレメントに関しては60ptより小さく出来ます。エレメントのサイズとエリア内のスペースも考慮しましょう。
これらのサイズとスペースを守ることで、眼で速く正確にターゲッティングすることが出来ます。
最小限のエリアは60ptということを忘れないようにしましょう。
この標準コンポーネントを使うと速く正確にターゲッティング出来るので、できる限りこれを使いましょう。もし自分のコンポーネントを使う場合は、私達のサイズに関するガイドラインに従う様にしましょう。
詳細はセッション”Design for spatial user interfaces”をご確認下さい。
次はスケールに関してです。例えばwindowを遠くに移動させる時は大きく。近くに移動させる時は小さくスケールを調整します。ダイナミックスケールによりターゲットエリアのサイズ一定にします。
スケールを固定すると、ユーザーから見た大きさが変わります。そうすると眼での操作が難しくなります。
眼でのターゲッティングをいつでも出来る様にするためには、UIにはダイナミックスケールを使う様にしましょう。
またUIに角度があるとターゲッティングが難しくなります。なのでいつでもユーザーの正面にwindowが来るようにしましょう。
空間コンピューティングのwindowについての詳細は、"Principles of Spatial Design"を御覧ください。
反応
次にユーザーの動作に対して反応があることです。そうすることで、ユーザーは眼でインタラクションをしていることを理解します。
見ている箇所をハイライトします。これを僅かなホバーエフェクトで行っています。目は素早く動くので、目立つエフェクトではなく僅かなエフェクトにします。
犬の画像を見ている時も、目立たない僅かなエフェクトを表示させることで、ユーザーが何を選択しているか理解できます。
どの様なUIインタフェースであっても、自分で作ったコンポーネントを使う場合でも、ホバーエフェクトフィードバックを使うようにしましょう。これにより、ユーザーが眼での選択がうまくいっていることを理解します。
眼で見ているものから意図を理解することは、とてもセンシティブな情報です。私達はプライバシーをトップの優先事項としています。ホバーエフェクトはアプリ外のプロセスで実施されており、開発者はジェスチャーにより鳥があった時のみどこを見ているかの情報を得ることが出来ます。
意図
最後にユーザーの意図です。眼でUIの上をホバリングすることは、ユーザーがそれに注目しているという意図があります。長い時間同じものをみると、ユーザーがそれに興味があると理解出来ます。そうすると、さらにそのものについての情報を提示しても良いかと考えます。
例えばタブバーにフォーカスすると、メニューが広がりそれぞれのラベルが表示されます。
検索窓に焦点を当てると、ボイスサーチのレイヤーが表示されます。これにより眼と声で検索できます。
プライバシーに考慮しながら、眼での意図をアプリに組み込めるという利点があります。
眼での滞留でも選択出来ます。エレメント上で滞留すると選択することも出来ます。その時は手でのタップジェスチャも不要です。
Eyesまとめ
手を使ったインタラクション
ハンドジェスチャ
Eyeでのターゲッティングと合わせて、ハンドジェスチャも主要なインタラクション手段です。
手を膝の上に置きながら親指と人差し指タップで決定。
またタップして少し上に動かすと、スクロール。
両手でタップして広げたり狭めたりすると、拡大縮小が出来ます。また回転のジェスチャも対応しています。
フィードバックを与えることで、ジェスチャがシステムと繋がっていることを理解できます。
ジェスチャはシステムを通して、同じ意味で動作します。マルチタッチのロジックと似ています。これにより、ユーザーは操作について考えずに、体験に集中できます。
人々の予想に合うように、これまで使っているパターンのジェスチャをそのまま使いましょう。
時には、これまでのジェスチャとは別の意味のジェスチャを使うときもあります。そういったカスタムジェスチャを作る上のチップをまとめました。
ジェスチャは簡単に説明出来て、操作出来るものとする。
標準のジェスチャや日常生活で使うジェスチャと混同するようなジェスチャは避ける。
正確に反応できるジェスチャを使う。それにより、誤反応や疲労を防げる。
誰がこのアプリを使い、アプリでどの様にジェスチャが使われるか考慮する。アクセシビリティの詳細については、"Create accessible spatial experiences"のセッションをご覧ください。
意味が明白なジェスチャを使うこと。人によっては違う意味に捉えられることもあるので、あなたが意図しないメッセージを届けることにならないか考慮する。
眼と意図
Eyesを意図のシグナルとして使えることが、この入力システムの中でのポイントです。Eyesとハンドジェスチャと組み合わすことで、他のプラットフォームでは出来ない、正確で満足度の高いインタラクションを生み出します。
例えばZoomで見てみましょう。見ているポイントがオリジンポイントとなり、両手でのタップと外側に手を移動でZoomとなります。オリジンポイントを中心に拡大することが出来ます。100%期待通りの操作になっています。見ている箇所が自然とインタラクションの意図がある場所となります。
カーソルがある箇所で文字などを描くことが出来ます。
目線を別の場所に移しタップすると、その箇所にカーソルが移動し、その場所で描くことが出来ます。これにより正確さが増すだけでなく、大きなキャンバスを素早く移動しながら描くことが出来ます。
眼はエレメントのターゲッティングだけでなく、インタラクションのための細かい粒度の位置情報を提供します。
直接タッチする
システム全体を通して、直接指の先でインタラクションすることができます。
例えば、Safariのwindowを自分の近くにもってきて、ページを直接触ってスクロールすることが出来ます。
両手でバーチャルキーボードの操作が出来ます。
直接３Dコンテンツに触れて、移動、回転、拡縮などの操作が出来ます。
長時間操作する時は、少し距離を離して操作することで疲労が発生しずらいです。眼で簡単にターゲティングして、手を楽な姿勢で最小限のジェスチャで操作出来るからです。直接操作をユーザーにさせる場合は、手が疲労することを考慮しましょう。
直接操作をする時は、オブジェクトの操作をする時や、現実世界の操作と近い操作をする時、フィジカルな操作が体験の中心となる時などです。
現実世界で直接何かを触る場合、手は知覚に重要な様々なフィードバックを受けています。バーチャルオブジェクトに直接触る場合は、触覚フィードバックが無いことも考慮しましょう。
触覚フィードバックなどの情報の欠落を何か他の方法で補完しなければなりません。
キーボードの例で見てみましょう。ボタンは直接押せると感じてもらうために、少し浮いています。指がキーボードの上にある時は、その位置でハイライトします。そうすることで指がどのボタンに近づいているか理解できます。
ボタンを押した時は、ビジュアルの状態を素早く変化させ、それに応じたスペーシャルサウンドエフェクトを発生させます。
これらのレイヤーのフィードバックは、欠落した触覚フィードバックを補完するために大変重要となります。さらに信頼性があり満足度の高いインタラクションとなります。
バーチャルコンテンツとインプットつなげるため、オーディオは特別な役目を果たします。より詳細は"Explore immersive sound design"をご覧ください。
手でのインタラクションまとめ
最後に
デザイナと開発者には、快適に操作出来る体験を作る責任があります。デバイスで開発を進めることで、ユーザーがあなたのアプリを空間で動作させることを受け入れるでしょう。
ソフトウェアはスクリーンだけの体験から、ユーザーのいる現実空間でのユーザーの自然な動きを使った体験に変わってきます。多くのユーザーは使ったことがないので、ガイドしユーザーに慣れさせることが重要です。
良い入力インタフェースは、考える必要がないものです。これからは自然な体の継続的な動きと、インタラクションの意図が完璧に一致することです。
我々が使っている眼は、入力モデルの基礎となるものです。これが空間コンピューティングの新しいインタラクションを生み出すことを期待しています。
Next Step
この記事が気に入ったらサポートをしてみませんか？