空間入力のためのデザイン

♪ ♪ ♪ こんにちは 「空間入力のためのデザイン」へようこそ 私はIsrael 隣にいるのはEugeneで Apple Design Teamのデザイナーです Eugene: 今日は 目と視線を使った操作のデザインについて お話しします これらの入力方法の特別な部分と Appleプラットフォームで 最適に使用する方法をご紹介します Israel: では利用可能なすべての 入力モダリティを見てみましょう 空間入力では ボタンを見て 2つの指を合わせてタップして選択します 腕は膝の上でリラックスさせます 私どものシステムは離れた場所から快適に UIを操作できるようにデザインされています 一部のケースでは要素を直接操作できます たとえば 指先を使用して バーチャルキーボードで入力できます 手を宙に浮かせたままだと疲れますが 一部のタスクには直接操作が 適しています 目と視線は新しい空間入力ですが 音声検索のような なじみ深い入力方法を 使用すればタイピングする必要はありません またはキーボードやトラックパッドは 作業を完了するためのすばらしい手段です また ゲームコントローラを接続して お気に入りのゲームで遊ぶこともできます 本日焦点を当てるのは期待の 最新の空間入力「視線と手」です 視線と手を使用して操作することは いくつかの部分で特徴的です まず パーソナルである点です 目の動きや手の動きは 個人によって異なります デバイスの内外にある一連のカメラは プライバシーを尊重した形で ユーザーの 自然な動きについての詳細をすべて捉えます 次に 快適であるという点です デバイスがユーザーの周辺を広範囲に 捉えるため 手を休めておくことができます 最後に 精密な空間操作を行える点です デバイスは すべてのデータを フィルタリングし ユーザーがアプリで使用できる 正確な操作に変換します そのため 空間入力は パーソナルな入力であり 快適に操作しながら すばらしい精密さで操作を コントロールできます 今日は視線と手を使って 自然にアプリを操作する方法を ご紹介します では視線から始めましょう 視線は空間体験における 第一のターゲティングメカニズムです システムのすべてのインターフェースは ユーザーが見る場所に反応します 要素がどれほど遠い場所にあっても それを見るだけで どんな要素でも難なく ターゲットにすることができます では 快適に操作できるアプリを 作成する方法について 視線で簡単に狙いを 定められるようにする方法 プライバシーを尊重しながら インターフェースを ユーザーが見る場所に反応させる方法 そして 視線の意図がレイアウトを簡素化し 独特な支援オプションを提供する 方法について説明します 目に快適なアプリを構築するには コンテンツがデバイスに表示される 方法を考慮する必要があります 最初に次のことを考慮します アプリに無限のキャンバスがあったとしても 目に入るのは 視野に入るコンテンツのみです 視野の中では 中央を見るのが最も快適で 端を見るのはあまり快適ではありません ですので視野に収まるアプリをデザインし 首や体の動きを最小限に抑えましょう アプリの主要なコンテンツを 目に最も快適な 視野の中央に配置しましょう 視野の端を見ることは 目の疲労につながる場合があるので このような領域は 常に必要でないコンテンツを配置します アクセシブルですが 主要なコンテンツの妨げにならない 二次的なアクションなどがそうです アプリではコンテンツを視野の中に収めて 目と首の快適さを必ず最大化しましょう また 目の快適さを考えた場合 奥行も考慮するべきです 奥行は空間体験の独特な特徴です コンテンツを近く または遠くに配置することで プロジェクトで異なる感覚を 作ることができます しかし 目は一度に1つの距離に 焦点を置くので 焦点深度が頻繁に変わると 目の疲れにつながります インタラクティブコンテンツは 奥行を同じにし UI間の切替が楽だと 感じれるようにしてください たとえば モーダルビューを表示すると Z軸上でメインビューが後方に押され モーダルビューが元の場所に配置されます 同じZ位置を保つことにより 視線を新しい距離に調整する必要が なくなります 奥行をわずかに変更して この例のように 階層感を伝えることができます タブバーが左側にあり セグメントコントロールが下部にあります この方法なら 意味のある方法で奥行を使うことができ 目の不快感を避けることができます アプリを快適にする方法を 理解したところで 視線をつかって簡単に 扱えるようにする必要もあります 目は非常に精密ですが ある性質が 目がUI要素にうまく狙いを 定めるのに役立ちます 目は物体の真ん中に注意を誘導するような 形状に自然と集中します 目が注意を引きやすくなるように 円やピル型 丸みを帯びた長方形などの 丸い形を使用します エッジが鋭い形を使用するのは避けましょう 鋭いエッジの形を使用すると 目は外側に集中を向け 精度が低下する可能性があります また 形は平らにして太い輪郭や 端に注意がいくような効果は避けましょう 最後に 十分なパディングを使用し テキストとグリフを要素の 中央に配置します このように UIは常に 視線を要素の中央に誘導するように デザインしてください 要素の中央に注目できるように なったところで コントロールの適切なサイズについて 見てみましょう 目が要素に焦点を置くために 必要な最小の大きさは 60ポイントです しかし要素は 60ポイント未満にすることができます 間隔を組み合わせることで 最小のターゲットエリアを実現できます レイアウトの要素間に 十分な間隔をあけましょう そうすることで 目で正確にすばやく 狙いを定めやすくなります 繰り返しますが 最小60ポイントの ターゲットエリアを 確保し サイズと間隔を組みあわせて UIの見た目をよくし　視線で 使いやすくすることは非常に重要です すぐに使える 標準的なコンポーネントでは 狙いを定めやすいサイズが使用されています できる限り これらのコンポーネントを 使用してください 独自のものを使用する場合は 必ずAppleのサイズ設定の ガイドラインに従ってください ポイントとレイアウトの詳細については 「空間ユーザーインターフェースのための デザイン」をご確認ください 視線のターゲットエリアの重要性を 理解したところで このターゲットエリアを 空間のあらゆる位置で 維持できる必要があります それには UIをスケーリングする方法を 理解する必要があります そこで2つの異なるスケーリングの メカニズムを見てみましょう システムはアプリのウインドウに対し 動的なスケールを提供します ウインドウは遠ざかると大きくなり 近づくと小さくなる様子がわかります ダイナミックスケールでは UIは同じ視野を満たし ウインドウがどの位置にあっても ターゲットエリアの大きさを維持します 代わりに固定スケールを使用すると UIは遠ざかるにつれて 小さくなります 固定スケールは インターフェースの大きさを変え アプリを見づらくします この2つを比較してみましょう ダイナミックスケールはUIとターゲットエリアを 同じ大きさに保ち 固定スケールは 大きさを変更し ターゲットエリアを 小さくしてしまいます カスタムUIを作成する場合は ダイナミックスケールを使用して 目がすべてのコントロールを ターゲットできるようにしましょう スケールに加えて 方向性も アプリの使用性に影響を与えます インターフェースが斜めに向いている場合 読みにくく 使いにくくなります システムウインドウが常にユーザーに 直面しているのはそのためです しかし アプリにカスタムウインドウを 作成する場合は UIが視聴者に面していることを 確実にしてください これまでの説明のように ウインドウとUIの 正確なスケールと方向性は 視線の正確性を 確保するための基本です このプラットフォームのウインドウが 動作する方法の詳細については 「空間デザインの原則」をご確認ください 視線は非常に新しい入力方法ですので インターフェースが 視線に確実に反応するように デザインすることは非常に重要です インタラクティブな要素が ハイライトされると 目が操作が行われていることを 理解することができます 一連のボタンを見たときに 何が起こるかを見てみましょう それぞれのボタンを見ると ハイライトされるのがわかります インタラクティブな要素は すべてハイライトされる必要があり ホバーエフェクトを使ってこれを実現します しかし 視線はすばやく移動するため この効果はさりげなく機能し お気に入りの写真を見るときのように すべてのコンテンツで機能し 目立たずに意図を強調できる 必要があります ホバーエフェクトのおかげで システムが提供するすべてのコントロールは 見た瞬間にハイライトされます アプリにカスタム要素を作成する場合は ホバーエフェクトを使用して 視線のフィードバックを提供し 要素が応答していると 感じられるようにしましょう 視線の意図は非常に繊細な情報です Appleは視線データの処理において プライバシーを最優先しています アプリはホバーエフェクトを処理しないため みなさんが得る情報は ジェスチャによりトリガーされる 要素の操作において どの要素に焦点が置かれていたかという 情報のみです 視線を要素に合わせることは 意図を示す合図です 何かを長時間見ていると それに興味があることがわかります それについての詳細を 提供するための絶好の機会です たとえば ボタンを見た場合に ツールチップを表示することができます また タブバーにフォーカスすると展開し 各タブのラベルが表示されます 最後に システムが提供する 検索フィールドの マイクのグリフにフォーカスすると Speak to Searchが起動し このレイヤが表示され 視線と声だけで 検索を実行できるようになります これらの要素は 必要なときに追加情報を提供し フォーカスされていない場合 UIはクリーンな状態が保たれます アプリを作成する際にぜひご利用ください プライバシーを考慮して構築されているので フォーカスされていない情報が アプリに送信されることはありません 視線の意図は支援テクノロジーに対しても 絶好の機会を提供します たとえば 滞留コントロール機能を 使用すると 視線だけでコンテンツを選択できます この例では ボタンに 短時間フォーカスすることで 滞留コントロールUIを表示して ボタンを選択できます 手でタップするジェスチャは 必要ありません 視線による操作のデザインについて これまで何を学んだでしょうか コンテンツを視聴者の前に配置し 視野内に収め 奥行を正しく使うことで 目にやさしいアプリを作成する方法を 学びました その後 使用が簡単な インターフェースをデザインする方法と 要素の中央に視線を誘導する方法を 学びました また コントロールでは最小60ポイントの ターゲットエリアを確保する重要性についても 説明し 常に双方向のコミュニケーションを使用し ホバーエフェクトを要素に追加して ターゲティングを強化する方法も 説明しました さらにUI要素を利用して 視野の意図に追加情報を 提供する方法も学びました すばらしい内容でしたが お伝えすることはまだあります 視線がすばらしいターゲットメカニズムで あることを確認しましたが 手の動作と組み合わせることで より強力になります ではEugeneにバトンタッチします Eugene: ありがとう Israel では 手についてお話ししましょう 視線と組み合わせて ターゲティングすることで 手の動作はシステム全体に対する 主要な操作方法となります 2本の指をつまむことは 携帯電話の画面を 押すことに相当します システムはその他の同様の ジェスチャにも対応します たとえば ピンチとドラッグで スクロールしたり 両手で拡大や回転などを行ったりできます これらのすべてのケースで UIは手の動きに合わせて 継続してフィードバックを行うので ジェスチャとの 接続性に役立ちます ジェスチャはシステム全体で 同じように機能し マルチタッチジェスチャと 同様のロジックに従います これにより ユーザーは 操作方法を考える必要がなく 体験に集中することができるので 体験をデザインする際は 慣れ親しんだパターンを 使用する必要があります また ユーザーが期待する方法で ジェスチャに反応するようにしてください ある場合では みなさんが提供する体験の一部は 動作が独特で 標準的なジェスチャでは 表現できない場合があります そういう場合は カスタム ジェスチャを定義しましょう カスタムジェスチャをうまく定義するには 次のヒントがあります まず ユーザーが 使い方をすぐに覚えられるように 説明と実行が簡単なものにしましょう ジェスチャの競合を回避することも 重要です カスタムジェスチャは 標準的なシステムセットや 会話で使われるような手の動きとは 明らかに違うものにしてください ユーザーが緊張や疲労を感じることなく 反復できるものである必要があり 誤作動の確率が低いものである 必要があります システム全体で支援テクノロジーを使用する ユーザーに配慮し そのような場合にジェスチャが どう動作するかを考慮してください アクセシビリティの詳細については 「アクセシブルな空間体験の実現」 セッションをご確認ください ジェスチャの意味は 人それぞれで違うので 意図としないメッセージを 送るようなカスタムジェスチャは 避けましょう バランスを保つのは簡単ではないので UIアフォーダンスの形のフォールバックを 考慮することをおすすめします 入力モデルの最もエキサイティングな 側面の1つは 意図のシグナルとして視線を使用することです 視線の方向と手の動作を組み合わせることで その他のプラットフォームでは不可能な 正確で満足度の高い操作を実現できます 拡大のジェスチャで それを示してみましょう ジェスチャを開始する時点で 拡大ポイントの原点は 視線が その時点で画像内のどの部分に フォーカスしているかで決定されます その結果 ズームインすると 特定の領域が拡大され 中央に配置されます 周辺を見渡して このジェスチャを行うだけで 簡単に画像を移動できるようになります これは魔法のようですが それと同時に100％ リアルです 視線を置く部分が操作の意図を 自然に示します この動作のもう1つの例に マークアップのカーソルの移動があります 絵を描くときは マウスポインタと 同じように ブラシカーソルを動かしますが キャンバスの反対側を見て タップすると カーソルがちょうど見ているところに ジャンプします これにより正確さを感じることができ 大きなキャンバス中を すばやく移動できます このように 視線の方向を利用して単純な動作を より正確で満足度の高いものにできます 視線は要素を ターゲットするためだけでなく その操作に対するより精密な箇所を 暗黙的に提供します これは入力モデルの強力な側面であり よりインテリジェントな方法で 操作に反応することができます 次はダイレクトタッチについてです システム全体で 手を伸ばし 指を使って操作することができます たとえばSafariを自分に近づけて ページを直接スクロールできます 両手を使って バーチャルキーボードを打つこともでき 手の届く範囲で 3Dコンテンツを操作するなど より空間的な体験も可能です 離れた場所からだと 長時間快適に操作できます 視線でコントロールを ターゲットしやすくなり 最小限のジェスチャで 手を休ませることができるからです 直接操作ができるようにデザインする場合 手を宙に浮かせたままだと しばらくすると疲れてしまうことを 忘れないでください それでも一部のアプリでは ダイレクトタッチ向けに 手の届く範囲にコンテンツを 配置するメリットがあります 何かを間近で見たい場合や 操作する場合 実世界体験からの筋肉の記憶の上に 構築される操作の力学などや 一般的に身体的な活動が 体験の中心にある場合は メリットがあります 直接操作をデザインする際は 触覚応答の欠落も考慮してください 物理的世界では 何かに触れると 手は多感覚のフィードバックを 受け取ります これは知覚に対して重要です バーチャルコンテンツに触れても これは起こりません 従って そのような操作が機能するには 欠落している触覚情報を その他の種類のフィードバックで 補う必要があります Appleがキーボードボタンで この課題に どのように対処したか見てみましょう ボタンは直接押すことができるように プレートの上に盛り上がっています 指がキーボード上にある間 ボタンはホバー状態になり ボタンの表面に近づくと明るくなります これは近接の合図となり 指がボタンをターゲットするのに 役立ちます ボタンに触れた瞬間に すばやく反応し 空間的な効果音がなります このような追加のレイヤーは 欠落している知覚情報を 補うため 信頼性と満足度の高い直接操作を 実現するために重要です オーディオはシステム全体で 入力情報を バーチャルコンテンツとつなげるための 重要な役割を果たします その詳細については 「イマーシブなサウンドデザインの詳細」の セッションをご確認ください 手を使った操作をデザインする方法を まとめてみましょう ユーザーが操作ではなく コンテンツに集中できるように システム全体で一貫した ジェスチャ言語を作成すること カスタムジェスチャは 標準のセットで希望する動作が 実現できない場合にのみ使用しましょう 視線を意図の合図として使用し 操作を改善するように取り組みます 直接操作は提供する体験の 中心となる場合にのみ使用しましょう 使用する場合は 欠落する知覚情報を補うために 豊富なフィードバックを提供する 本日は視線と手を使った空間操作の デザインに関する原則のいくつかを ご紹介しました 快適さと人間工学について いろいろお話ししました このプラットフォームでは さまざまな方法で ソフトウェアの見た目 動作 反応を入力できますが デザイナーやデベロッパは 快適でアクセシブルな体験を 提供するための さまざまな責任があります アプリをデバイスで実行することで ユーザーはみなさんの作品を 自身の空間に取り入れ 完全な注意を払います ソフトウェアは 画面内に包含される代わりに ユーザーの物理的な環境の より大きな部分に存在し 自然な身体の動作に 反応できるようになります 手を使用してバーチャルコンテンツを 操作することは ほとんどのユーザーにとって 新しいことです そのため 明確なフィードバックを提供し 慣れ親しんだインタラクションパターンに 依存することが重要です 他の複数のプラットフォームを デザインしてきたことで 優れた入力体験は 考える必要がないものだと 私たちは認識しています ソフトウェアの反応は身体の動作からの 自然な延長線となり 意図とする操作に完全に一致するべきです 視線を使用する能力は 入力モデルの 基礎として 魔法のような正確さで 操作に反応する機会を提供します これは非常に強力な機能であり みなさんがこれを利用して 快適で斬新な空間という媒体向けの インタラクションを 作成することを楽しみにしています このトークで言及した 以下のセッションもお見逃しなく ご視聴ありがとうございます Israel: さようなら！ ♪