空間インタラクションのためのデザイン

♪ （空間インタラクションの設計） こんにちは "空間インタラクションの設計"へようこそ Apple Designチームの デザイナーのPeterです 同僚のArianやTaylor LinusやPedroとともに 空間インタラクションの 設計における考慮事項を いくつか説明します AirTagやHomePod mini およびiPhoneの インタラクション作成時に 学んだことを共有します また独自のインタラクション設計の際に これらの原則を適用するための ヒントやテクニックも紹介します それでは始めましょう デバイスの進化に伴い デバイスとのやり取りも 進化しています 初期のコンピュータは キーボードのみで操作され インターフェイスは完全に テキストベースでした ユーザーは抽象コマンドを記憶し 矢印キーで画面内を移動し 意図を表現していました 近年はほとんどの人が キーボードとGUIおよび マウスを同時に使用しています このような革新技術により 抽象化レイヤがなくなり マウスでポイントやクリック ドラッグをして 意図をより直接的に 表現できるようになりました その後マルチタッチによって デジタル世界が 指先に届くようになり 抽象化された別のレイヤが取り除かれ 音楽や写真 モバイルウェブに 触れられるようになりました 本日は単一デバイスの境界を超えた インタラクションのクラスと 最新のAppleデバイスの機能を使って ユーザーが物理的な環境とより直接的に やり取りするための方法を説明します この中にはスマートフォンで コーヒーを買ったり 決済端末に近づけて利用するなど すでに馴染みある動作もあるでしょう またはスマホの近くにある ケースを開けるだけで AirPodsのバッテリー残量を すばやく確認できます このような 近くのデバイス間で発生する インタラクションでは 抽象化されたレイヤーをなくして ユーザーが周囲とより直接的に やり取りできるようにする 機能があります また最新のApple製品に搭載された U1チップで空間認識が強化され AirTagやHomePod miniおよび iPhoneの 優れた応答性を実現しました また新しいAPIと iOS 15に組み込まれた サードパーティハードウェアとの やり取りが可能になり これらの体験をあなたの製品でも 提供できるようになりました これらのインタラクション設計の際は 距離と能力を考慮して 継続的なフィードバックを提供し 物理的な行動を取り込むことが 重要だと学びました では見てみましょう iOS13では 共有シートに 空間認識を追加することで コンテンツ共有が さらに簡単になりました 目の前または近くにいる人の情報と コミュニケーションの頻度や どれくらい最近かといった デバイス上の知識を組み合わせ ユーザーが共有する可能性のある 相手をインテリジェントに 予測できるようになります これはAppの既存機能を 空間認識でより インテリジェントにする 優れた例です これらの新機能を活用するのに 新しい体験を ゼロから構築する必要はありません 空間認識を既存の機能に 組み込む場合は これらの機能が すべてのデバイスで 利用できるわけではなく 設計がさまざまなレベルの機能に 対応できる必要があります 共有シートを使うと すべてのデバイスが BluetoothおよびWi-Fiで 他のデバイスを検索できます ただし U1空間認識チップ搭載の iPhoneでは 目の前にいる相手 または 非常に近くにいる相手に 優先順位を付けることで さらに一歩進んでいます もちろん 空間認識は既存の体験の 改善だけでなく まったく新しい体験の 構築にも役立ちます 次はこれら同じ概念がAirTagに どう生かされているのかを Arianが説明します AirTagで さまざまな距離や 能力に合わせて調整できる デザインについてお話しします この例では大切なものを 置き忘れたとします 移動履歴を追跡しても アイテムの場所がわかりません iPhoneを使って地図上の どこにあるか わかると安心します 以前はこのアイテムの おおよその周辺場所しか わかりませんでしたが 今ではiPhoneで もっと範囲を絞って 探せるようになりました 非常に助かります 実際 遠くにいるときに 道順を教えてくれたのと同じボタンが 近くで見つけるのに 役立つボタンになりました 適切なスケールでの設計要素の強化は これらの新しい機能を発見して 利用してもらうための優れた方法です iPhoneがAirTagを検出する際 周辺を動いてアイテムを 探すように促されます 一旦つながると矢印が表示され 行くべき方向を直接示します AirTagの方向に合うと デザインが光って強調されます このAirtagの方向を強調し その方向に向いていない場合は ガイダンスを提供します また 距離に基づいても スケールが変更します 距離が遠いと 特定の方向に向かうことが 本当に難しいことがわかりました この問題を解決するために iPhoneが面している方向の 許容度を広め アイテムに近づくにつれ より角度を狭めて より具体的になります ユーザーは気がつく前に AirTagに親切に誘導されます AirTagが手に届く範囲内に到達すると 矢印がフィードバックの形に変わります これは至近距離でははるかに効果的です AirTagがあるかも知れない場所に iPhoneをかざすと 触覚フィードバックが 強調されるデザインです この例のように 非常に遠くからでも ミリ単位でも 距離に基づいて デザインを調整できます あなたの設計が人間として 共有するさまざまな能力に どう対応できるか 考えてみてください 距離のあるときは角度を寛容にして 小規模なスケールでは 主要な フィードバック形式を変更して 最適化しましょう 次はTaylorが インタラクションの設計における こういった継続的なフィードバックの 重要性を説明します ありがとう Arian ここまで画面上でのインタラクションを 流動的かつ動的にタッチ入力に 対応させる方法を説明しました このような継続的なフィードバックが 文字通りユーザーの身体の 延長として機能し 物理的な環境とやり取りする場合 さらに重要になります これらのやり取りの間 適切なフィードバックが 適切なタイミングで適用されれば 設計中の機能を検出可能にし ユーザーに指示を与え 目的が達成されたかを 効果的に伝えられます また私たちの動きが いつでも開始・停止・中断 できることを認識しています ここでは物理的な環境と 視聴覚を通じてやり取りできる フィードバックの活用について お話しします お使いのデバイスの機能に 依存しますが フィードバックには 複数のタイプがあり これらを一緒に検討して 使う価値があります まず視覚的なものとして UIの変更や照明 ハードウェアのインタラクション あるいは両デバイス間で調整された 視覚的フィードバック そして音声や触覚のフィードバック があります また自然な中断やキャンセルが ２つのデバイス間の 正常なやり取りを実現する上での 重要性について説明します まず 各種のフィードバックが HomePod miniへの音楽の転送を どのように直感的 かつ満足いくものにするのか 見てみましょう HomePod miniでは 複数のタイプのフィードバックを使って iPhoneとの物理的な関係を確立し 方向を示し 最終的に音楽が 正常に転送されたことを確認します これを実現するには HomePodの周囲に ２つの境界を作成し 各ゾーンと２つの境界間の 移動に対応します フィードバックはiPhoneが 最初のゾーンに到達し ２つ目のゾーンに到達するまで もっと近くに来るよう指示するか インタラクションをキャンセルする オプションを表示されます 最後にiPhoneが２つ目の ゾーンに到達したら 音楽を確認して転送します フィードバックはiPhoneが 最初のゾーンのしきい値に 達した時から継続的に提供され 画面上では背景ブラーによって作成される バナーの位置 スケール およびモダリティが HomePodからの距離に応じて 滑らかに増えます 視覚的なフィードバックを デザインするときは 画面上の要素が実際の動きに関連するよう アニメーション化することを検討します たとえばこのバナーの動きが HomePodの方向または反対方向に 手を直線的に動かすことと どう関連しているかなどです 触覚フィードバックは ２つのデバイスが 相互に認識していることを 物理的に確認し補完します また近くへの移動を奨励するため 強度が増します iPhoneに関するフィードバックに加えて HomePod miniはスピーカー上部の アニメーションを使って iPhoneが近いことを認識します 優れた空間的インタラクションは 自然な体の動きを使って 確認だけでなくアクションを キャンセルします iPhoneを HomePod miniに近づけると 距離を追跡するフィードバックが 明確かつ継続的に表示され 距離を取ることでキャンセルしたり ジェスチャーを中断できます これによりディスプレイを見たり ユーザーの意図をキャンセル または確認するための 追加のオンスクリーンボタンを 要求せずに 実行できるインタラクションを 作成できました これらのすべての要素は iPhoneをHomePodに 近づけたり遠ざけたりする 身体の動きに反応しています 空間的なインタラクション設計時は 物理的な世界における人の動きと 一方または両方のデバイスで 見たり聞たり感じたりすること との直接的な関係が重要です 次にLinusがAirTagを探す際の フィードバックの提供における 独自の制約について話します HomePod miniは ２つのデバイス間でフィードバックを 調整する良い例です 双方で豊富なフィードバックを 表現できます このような可能性がないデザインでは どちらかのデバイスに依存する 必要があるかも知れません AirTagはなくしたものを 見つけるのに役立ちます そのため どこにあるかわからない場合を 想定して設計されています アイテムを探す体験を 再度見てみましょう 今回はiPhoneの豊富な触覚 視覚 および音響機能を使用して 感覚全体に 継続的なフィードバックを 提供する方法に注目します 空間的なインタラクションが あなたの動きに呼応するとき 使いやすく感じます つまり大きい動きにも 軽微な動きにも 対応するということです iPhoneがAirTagに 接続されている場合でも 私が回転するとインターフェイスも ゆっくりと回転し これから続くインタラクションの 予測ができます これらのドットは 継続的に適応するための 構成要素にもなります 接続するとAirTagとの 距離が表示されます この距離は私がどの方向に歩いても 非常に正確に反応します 距離はすぐに更新され アイテムに近づいているのか 離れているのか伝えます 私が歩き回ると 正しい方向に向けてドットが スムーズに矢印に変わります 同時に繊細な触覚と音で さらに強調され その重要性を表します iPhoneが動くと 矢印が空間に浮いている ように感じられます 先ほど見たように 正しい方向であればインター フェイスがそれを強調します 紛失したAirTagの方向に向かうと 画面が大きく点灯し 矢印が特定の方向にカチッと 収まるのを触覚と音で感じます すべてのステップと 微妙なターンに反応することで 私と周りの空間が デザインに密接に結びつきます 空間的なインタラクション設計時は 人が自分の動きと デバイス上の体験をどう 関連づけるかを考えます 特定の動きを意識して 行動とフィードバックの間に 明確なつながりを持たせてください 矢印のすぐ先に 手の中で振動し始める ドットがあります この振動のペースは 近くになると早くなり 触覚はそれに沿って より鮮明になります この方向から外れた場合 振動は停止し インターフェイスが 軌道修正を促します AirTagから十分離れた場所を歩くと 矢印が分解され シグナルを 失ったことを示します このような瞬間の ニュアンスも重要で 非常に役立つガイダンスを 提供しています フィードバックが多様で 予測不能な人間の動きを どう補完するかに注意し 動きに合わせて柔軟に 変化するデザインを構築します 手の届く範囲に入るとドットが拡大し 振動が継続的な 触覚フィードバックに変わります この触覚フィードバックは 距離に反応して変化します AirTagがありそうな場所で iPhoneをかざし 触覚からより精密な場所を 探し当てます 触覚フィードバックの方が はるかに効果的であるため 体験のこの部分ではサウンドを 使わないことに注意してください 継続的なフィードバックでは 触覚・聴覚・視覚の各要素の 連動を意識してデザインします 普段私たちが 見て聞いて感じている世界を １つの体験として総合的に 捉えていることに通じます インタラクション設計時は 各フィードバック形式の強みと それらをどう組み合わせるかを 考えることが重要です 身体的な動きに関連した 継続的フィードバックの 視覚的レイヤーを提供し 追加のフィードバックで インタラクションの 重要な瞬間を強調します 触覚とサウンドを適切なレベルで 賢く使い 原因と結果の繰り返しにおいて 伝えたい情報を明確にします このようなフィードバック操作に加え デザインが物理的動作を 補完することに 留意しましょう これについてPedroがお話しします HomePodsの場合は 空間認識を使ってスピーカーの 選択作業をより自然にします 私は音楽を聴くことが多いので iPhoneから 音質の良いスピーカーに 移して聴きたいと思います 以前は この曲を別のスピーカーで 再生したければ AirPlayリストに 移動する必要がありました このリストでは自分の近くか どうかに関係なく 自分の スペースにあるすべてのデバイスが 均等に表示されます しかし私が本当に興味があるのは このHomePodです この新しく使いやすい インタラクションでは 画面上のUIの操作を 一切することなく このHomePodに曲を転送できます 音楽が転送されることを示すため HomePodで視覚的 フィードバックを提供します 私の動きに合わせ 光が調節されます 近づくと光が大きくなり 離れると小さくなります

そしてもちろん 曲の移動は スピーカーから再生される 音楽で確認できます 物理的な動作を統合することで これまでは無形だった経験が 目に見え直感的に 感じられるようになりました 独自のインターフェースが 抽象化されたオプションの リストではなく 自然な物理的動作に 沿うようにします 体験やデザインが身体的な 動きに一致するようにします また"これ"と"それ"の概念を用いて 私たちの認識方法に合った より自然な体験を作成しましょう 両方のデバイスで 即時かつ継続的フィードバックを 提供してください 具体的には ターゲットデバイスで アクションが発生していることを 明確にします ユーザーが自然に注目する 場所だからです 同様になくしたものを見つけるとき 私の注意は私の周りの世界と アイテムがあるかもしれない 場所に向けられます AirTagからサウンドを再生すれば アイテムの場所をすぐに感じ取り 周囲の環境に注意を向けられます

iPhoneでの視覚的 フィードバックについては 画面外でのタスク実施時に そのフィードバックを読めることを 確認してください iPhoneがユーザーの 視野の端にあるような場合 このようにインタフェースを設計します たとえばターンバイターンの 経路案内で 次の曲がり角の場所と タイミングを知らせる タイポグラフィは 画面上の 他の通知よりも大きく 目立つようになります TV Remoteのボタンと アクティブエリアは非常に大きく 目をコントローラーではなく テレビ自体に向ける 設計がされています 計算機の数字と操作ボタンは 大きく太字で表示されます たとえばレストランの請求書で 金額を参照してチップを 計算することがあります これらの例と同様に AirTagを検索するときに使う 距離の文字の大きさは システムの他の部分よりも はるかに大きく設定され UI全体が 巨大な矢印を中心に据えています

目立つ色の変化は目の端でも 読み取れます 音は鍵となる瞬間や状態を 補完します 距離が縮まっていることを 画面を見なくても感じられます これは自然なポーズにも応答します

手の届く範囲になると 画面を目で確認しなくても 触覚フィードバックが近くまで 案内してくれます

大きく目立つUI要素により 多様なユーザーが 体験を利用できます 複数のフィードバックモードを採用し それぞれが明確に理解できるよう 目立たせてください 情報を伝達するのに 必要以上に注意を引いたり 主なタスクと競合したりしないよう 注意します 空間的インタラクションの プロセスでは 望ましい状態を補強し 目的達成に向けた進捗を促し インタラクションが補完する 物理的な行動を常に考慮します ではPeterに戻します！ 今日はたくさんのことを扱いました 新しい体験や既存の体験が デバイスのコンテキストや 周辺を考慮することで インテリジェントで関連性の 高いものになります 応答性と継続的なフィードバックが 新しい体験の発見と利用に どう役立つかを学びました 最後に 画面を凝視しなくても 周りの環境に注意を払いながら 効果的に体験できるデザインの テクニックを見てきました 空間認識によって デバイスとユーザー そして物理的な環境との インタラクションを よりシンプルで直接的なものに できることについて 皆さんもワクワクしていることでしょう 詳細については developer.apple.comをご覧ください 空間的インタラクションのための Human Interface Guidelinesと これらのインタラクションの 実装方法に関する技術情報が 提供されています 皆さんが次に構築するものを 楽しみにしています ♪