visionOSのホバーインタラクションのデザイン

こんにちは Apple Designチームの デザイナーのNathanです 本日の内容は visionOSの ホバーインタラクションの デザインについてです ユーザーの視線に応答する この新しい方法により アプリをより生き生きとしたものにし 念じるだけで操作できるような感覚を ユーザーに与えることができます

本日の内容は次の通りです まず 視線入力の基礎をおさらいします 次に カスタムエフェクトを解説し 視線でコンテンツをスクロールさせる方法や 重要なコントロールを 維持する方法を確認します では 始めましょう ご存知のように visionOSでは ユーザーは視線と手を使って操作します 要素を見て 人差し指と親指を タップすることにより 要素を選択できます 視線と手によるアプリ操作を 簡単にするための留意点がいくつかあります ユーザーにとって見つけやすく 使いやすいよう 重要なコンテンツは 前面に配置してください インタラクティブな要素には 丸みを帯びた形状を選びましょう 例えば 丸、カプセル型、 角丸長方形などです これらの要素は見やすく 形状の中心に視線を引きつけられます

正確なインタラクションが 必要な場合 各要素に 60ポイント以上のスペースを充てます 要素自体はこれより小さくできますが 各要素の占めるスペースは 60ポイントである必要があります

スケールが固定された3Dオブジェクトでは 60ポイントは角直径でいうと 約2.5度に相当します これは1メートル離れた場所で 約4.4cmに相当します

すべてのインタラクティブ要素に ハイライトを適用しましょう このメニューのような標準コンポーネントは 自動的に強調表示されます

カスタムコンポーネントの場合 ハイライトエフェクトを追加し ハイライトの形状と コンテンツの形状を合わせます

選択可能な3Dオブジェクトにも 同様にハイライトを適用できます

その他の基本事項については 2023年のセッション 「Design for spatial input」をご覧ください

今回は アプリで使える より強力なインタラクションを紹介します 最初はカスタムエフェクトです 標準のハイライトエフェクトは 多くの場合うまく機能しますが 独自のアニメーションで エフェクトを 拡張または置換できます これらを カスタムホバーエフェクトといいます カスタムホバーエフェクトはvisionOSの 様々な場所で使用できます

タブバーでは バーが開いて 各タブの名前が表示されます 戻るボタンでは ボタンが広がり 前のページの名前が表示されます スライダでは 可能な操作を示すノブが表示されます

ボタンの下にツールチップが表示され 機能を説明します

Safariでは ナビゲーションバーが広がり ブラウザタブが表示されます ホームビューでは 環境アイコンが大きくなって 景色がもっと見えるようになります

これらのカスタムエフェクトを アプリにも追加できます

カスタムエフェクトを使うことで フィードバックを提供する際に アプリの個性や ゲームのビジュアルスタイルも表現できます まずはそれらの仕組みを もう少し見てみましょう ユーザープライバシーの保護のため システムはホバーエフェクトを アプリのプロセスの外で適用するので ユーザーの視線の情報を アプリは取得しません ホバーイベントに直接応答する代わりに ビューでは 次の2つの状態を定義します 標準時の外観と ホバーされたときの外観です ユーザーが視線を向けたりそらしたりすると システムが 状態をアニメーションで切り替えます

先に見たように カスタムエフェクトは アニメーションの再生には 効果的ですが アプリ内でアクションを 実行するためには使用できません どういうことかお見せします 例えば 写真閲覧アプリをデザインする際 お気に入りの写真を保存できるよう ダウンロードボタンを追加するとします

カスタムエフェクトによる 視線を向けた時のダウンロードサイズ表示は アニメーションだけなので可能です 一方 ボタンを見るだけで ダウンロードを実行させるのはできません エフェクトがいつ適用されるか アプリが知る必要があるからです

代わりに ユーザーは タップジェスチャで 写真を保存する必要があります

カスタムエフェクトは アニメーションに使用できますが どのようなアニメーションが 最適でしょうか 一般的にアニメーションは インスタント、遅延、ランプの 3つのグループに分類されます インスタントアニメーションは ユーザーがビューを見るとすぐに始まります

マインドフルネスでは ボタンに矢印アイコンが表示され ユーザーは別の選択肢が あることがわかります

標準のビデオプレーヤーでは 再生ヘッドを見ると タイムスタンプが表示されます この情報は小さく コンテキストに応じて 変化しますが インタラクティブではありません インスタントアニメーションは応答が速く ユーザーが周りを見ただけで 起動することがあります これを避けるために 遅延アニメーションを使えます 遅延アニメーションは 通常 少し遅れてコンテンツを表示します

ツールチップがよい例です 少し遅れるので 表示前にボタンを押すことができ 長い間注視した場合のみ ボタン名が表示されるようにできます

別の例はSafariの プロファイルボタンです これも同じパターンに従いますが レイアウトは異なります

最後はランプアニメーションです 遅延アニメーションと似ていますが 最初に兆しを示せるほか 展開速度を調整できます このホームビューの環境アイコンの例では アイコンに視線を向けると アイコンが徐々に広がり始め 急に開いて 景色がもっと見えるようになります この徐々に大きくなるエフェクトにより 見続けるとアイコンが展開されることを 暗示しつつ ユーザーの意図が明確になるまでは 開かないと明確に示せます グリッド全体を見回している時に アイコンが開いてしまうことはありません

別の例を見てみましょう このカードは展開して 全文が表示されます ランプアニメーションは このように インスタントと遅延の利点を両立して ユーザーの気を散らさず 即座にフィードバックを提供できます

ランプアニメーション作成時は このような展開速度がおすすめです 最初はゆっくりと緩やかに始めて その後 100%まで 一気にジャンプさせます ビューを拡張して コンテンツを表示する場合は このような展開にするとうまくいきます これらのエフェクトを アプリに取り入れる際の ベストプラクティスをいくつか紹介します まず アンカー要素を組み込みましょう カスタムエフェクトでは ビューの一部を固定すべきです このタイトルのような アンカーされた静的要素は ユーザーにコンテキストを提供し どこが変化したかわかりやすくします

ビューを見た時に テキストが動いてしまうと 読む妨げになるかもしれません テキストの位置は固定するようにしましょう

同じ要素がまったくないビューに 変化させると 多くの場合 ユーザーは何を見ていたか わからなくなります

ホバーエフェクトは必ず 見えている要素から始めましょう 何がどこにあるのかを示すヒントがないと 見つけるのが難しくなるほか 不意に表示された時に驚きます 非表示の要素を使う場合 既に見えている 要素を見た時に表示されるようにしましょう 例えば ウインドウの隅を見た時に サイズ変更コントロールを表示すると 探しているコントロールが 見つけやすくなります

カスタムエフェクトは慎重に使いましょう

カスタムエフェクトは場所次第で このコンパスのようにフォーカスを示したり この位置情報ステータスのように 追加情報を表示したり

この滝のアニメーションのように アプリに魅力を追加できます

ユーザーが周りを見回した時 変化が多すぎると問題です 各ピンの名前を表示するなど エフェクトが多すぎると コンテンツから気がそれたり 目の疲れにつながったりすることがあります ちょっとしたエフェクトでも ツールバーボタンやテーブルセルなど よく使うビューには適しません 視線を向けようとしているものが動くと 気が散るためです このようなビューでは 標準のハイライトエフェクトを使いましょう

エフェクトは抑え目にしましょう

先ほど見たダウンロードボタンのように カスタムエフェクトは小さなビューに さりげなく使うことが推奨されています この写真全体のような大きなビューに カスタムエフェクトを適用しないでください 動きが大きくなり 何が起こっているのか ユーザーが理解しにくくなります このような画像では 色を白っぽくさせる エフェクトは避けてください

即座にフィードバックを提供し 徐々に消えるような ハイライトエフェクトを使えば 写真の実際の色が損なわれません この植物のような 3Dオブジェクトでも同様です ハイライトしてから徐々に消せば 実際の色を表示できます

最後の点ですが 予期しない動きは避けましょう これは自分もよく経験します よいアイデアを思いついても 副作用があれば台無しです その例を紹介します Safariのタブの概要では 開いたタブが グリッド状に表示されます ここでよいアイデアを思いつきます すべての閉じるボタンを デフォルトで非表示にして ユーザーがタブを見た時だけ 表示するようにしましょう きれいに見えますよね でも タブを見た時にボタンが表示されると 視線が無意識にボタンに向きます そのため タブを選択するために タップジェスチャを 行う時に 視線が閉じるボタンに向いてしまい 誤ってタブを 閉じてしまう可能性があります この場合 次のようなエフェクトを使えます ユーザーがタブを見た時に ボタンが ゆっくり半分までフェードインし ボタンを見ると完全にフェードインします

タブをグリッド状に大きく表示した時の 視覚的なノイズを減らしながら ユーザーが誤って タブを閉じることも防げます これらのエフェクトを実際のデバイスで 試すことも重要です エフェクトは視線に応じて反応するので 動画だけでは実際に試せません visionOSのSimulatorも 悪くはありませんが 実際のデバイスを用いた テストの代わりにはなりません

カスタムエフェクトのデザインは インターフェイスの他の部分より 反復の多いプロセスです 多くのオプションがあるので 1つずつ 時間をかけて試し 最適なものへと調整しましょう

慣れると うまくいくものといかないものが 直感でわかるようになりますが よいアイデアがあるならまず試しましょう うまくいくかもしれません 次に 別の強力な インタラクションについて説明します Look to Scrollです Look to Scrollでは 視線を向けるだけでスクロールできます 例えば Safariでは ページの一番下に視線を向けると 滑らかに上にスクロールします

ミュージックでは 最後のプレイリストに視線を向けると 中央に向かってスクロールします

コンテンツに目を向けるだけで ビューに引き込まれるように動くので 簡単に閲覧できるようになります 手によるスクロールとともに利用できる 軽量なインタラクションです

スクロールはユーザーが ビューの端付近を見ると始まります 垂直スクロールビューでは 上下の端付近を見ると始まり 水平スクロールビューでは 左右の端付近を見ると始まります

スクロールビューが多数あるアプリもあり Look to Scrollは デフォルトで有効ではないので 適用するビューを選択する必要があります 選択の際には次の点を考慮してください

まず ビューが主に読んだり閲覧したり するものである場合は適用します Look to Scrollは Safariのようなアプリで 記事を読んだり TVのようなアプリで 次に観る番組を 探したりするのに最適です

しかし 設定などのアプリでは 素早く目を通して 目的の項目を見つけたいので ユーザーはリストを1つずつ 読んだりしません そのため Look to Scrollに向いていません 一般的に ビューのほとんどが UIコントロールである場合 Look to Scrollには適しません

コンテンツを考慮しましょう 一般的に Look to Scrollはアプリの 主要なコンテンツに適しています 例えば メモアプリでは テキスト自体は 端を見るとスクロールしますが 左側のリストはスクロールしません 先ほどの 設定アプリの パターンに従っています

最後の点として アプリ内での一貫性を考慮しましょう

例えば TVアプリでは 関連する番組のリストがあります これはメインライブラリの リストのように見えるため Look to Scrollが機能することを ユーザーは期待します

どのスクロールビューに 機能を適用すべきか説明できたので 次に スクロールを自然かつ期待通りに 感じさせる方法を紹介します

Look to Scrollを有効にした スクロールビューでは ビューをウインドウの左右と上下 いっぱいまで広げましょう スクロール用のスペースを十分確保でき 視線を向けるべき端も明確になります

スクロールビューが ウインドウの端から離れた 位置にある場合 明確な境界を設けて 見るべき場所を示します

アプリで スクロール位置を使用して 異なる 速度でアニメーションを再生する場合や 視差エフェクトを適用する場合 カスタムアニメーションを使う場合は 通常の速度でスクロールするよう デザインの調整を試みましょう それらのビューにLook to Scrollが 適さない可能性もあります

ウインドウ全体がスクロールビューで 端がはっきりしており 普通にスクロールするなら ユーザーはスムーズかつ 期待通りに閲覧できます 最後に 持続的なコントロールについて 見てみましょう ちょっとした機能ですが 大きな違いを生みます これはvisionOSの 標準のビデオプレーヤーです タップすると再生コントロールの 表示／非表示が 切り替わり 表示にしても しばらくすると自動的に非表示になります これは便利ですが ユーザーがまだ見ているのに 非表示になることがあります そこでユーザーが見ている間は コントロールの表示を維持し 視線がビデオに戻ると消えるようにしました あまりに期待通りに動作するため 最初は気づかないかもしれません

アプリで標準のビデオプレーヤーを 使用する場合 これらの機能は インライン、ウインドウ、 イマーシブのどれでも無料で利用できますが カスタムのビデオコントロールを使用する アプリではこれらの機能の有効化が必要です 嬉しいことに ビデオアプリ以外でも同様で 対象は FaceTimeでは通話コントロール

マインドフルネスでは セッションコントロールです しばらくすると自動的に非表示になる UIがある場合はいつでも ビデオとイマーシブ体験の どちらかに関わらず この持続的な動作を導入してください ホバーインタラクションを使用して アプリに精彩を与える 方法を多数紹介しました カスタムエフェクトで インターフェイスに動きを加え

視線のみでビューをスクロールさせ

メディアコントロールを維持できます

これらを念頭に置いたアプリのデザインでは 最初にアイデアを複数試し 何が効果的か検討しましょう カスタムホバーエフェクトを アプリに適用できる機会を探しましょう エフェクトの作成には SwiftUIやRealityKitを使います ビルド方法の詳細は 画面下部に示す 2024年のセッションをご覧ください Look to Scrollと 持続的な動作を有効にする方法は developer.apple.com/jpの ドキュメントでご確認ください ご視聴ありがとうございました