Interactive Canvas のデザインには主に 2 つの側面があります。
- 会話をデザインする
- ユーザー インターフェースをデザインする
ユーザーは、アシスタントに話しかけるか UI をタップすることで、Interactive Canvas を使用するアクションを操作できます。発話された会話と UI を相互に補完し、ユーザーがアクションを簡単に進められるようにする必要があります。このセクションでは、最適なユーザー エクスペリエンスを実現できるように会話と UI をデザインする方法を説明します。
Interactive Canvas は自分のアクションに適しているか
デザインを始める前に、自分のアクションが Interactive Canvas とうまく連携するかどうかを考えてみます。次のような場合は、Interactive Canvas の使用を検討してください。
- フルスクリーンで視覚的にリッチなエクスペリエンスをアクションに生かすことができます。 インタラクティブ キャンバスは、臨場感あふれる音声駆動型ゲームなど、豊かなビジュアルを活用できるフルスクリーン エクスペリエンスに最適です。
- アクションが直感的な会話フローになっている。アクションを通じたクリティカル パスは、音声だけで操作できなければなりません。描画アプリのように空間的精度を必要とするアクションは、困難なエクスペリエンスを提供する可能性があり、それに対応する直感的な会話フローのデザインが必要になる場合があります。
- 既存のコンポーネントやカスタマイズでは不十分である（既存のアシスタント ビジュアル コンポーネントやカスタマイズを超える必要がある場合など）。Interactive Canvas は、独自の視覚的なブランド属性、動的な要素、アニメーションなどを紹介するのに最適です。さらに Interactive Canvas を使用すると、ユーザーが会話を進めるのに合わせて単一のビジュアル インターフェースを更新していくこともできます。
要件
Interactive Canvas は馴染みのあるウェブ開発環境ですが、アクションを設計する前には考慮すべき要件がいくつかあります。
ヘッダー
すべてのキャンバス ウェブアプリの上部には、ブランド名が表示されるヘッダーがあります。この予約領域の高さは、モバイルで 56 dp、Home Hub で 96 dp、スマートディスプレイで 120 dp です。必ず以下のヘッダー要件に従ってください。
- 重要な情報やインタラクティブな要素がヘッダーの背後に隠れないようにします。
getHeaderHeightPx()メソッドは、ヘッダーの高さを決定します。
制約
Interactive Canvas を使用してアクションを設計する前に、次のような制約について考慮してください。
- データのローカル ストレージがない。アクションが Cookie を保存したり、Web Storage API にアクセスしたりするのを防止します。この制限を踏まえ、アクションは Webhook で状態を管理し、AppRequest の
userStorageフィールドを使用してユーザーデータを保存することをおすすめします。 - ポップアップやモーダル。Google ではアクションでポップアップ ウィンドウやモーダルを表示することを禁止しています。また、キーボードやページ分けなど、通常ウェブアプリで見られる他の標準的なナビゲーション UI 要素は使用しないよう強くおすすめします。
会話をデザインする
まず、アクションの会話をデザインする必要があります。Interactive Canvas のエクスペリエンスは現在も音声主体であるため、アクション全体を通してユーザーを会話で効果的にガイドすることが重要です。Interactive Canvas を使用したアクションは、わかりやすい視覚効果を備えた会話と考えることができます。会話の設計の詳細については、会話デザインサイトのスタートガイド ページをご覧ください。
ガイドライン
最適なユーザー エクスペリエンスを実現するには、次のことに注意してください。
会話デザインサイトで概説されている、会話デザインのプロセスとベスト プラクティスに従う。そのためには、とりわけ以下のことを行う必要があります。
- アクションのエクスペリエンスが会話に適合することを確認する
- ブランド ペルソナを作成する
- 会話内のエラーを処理する
- 画面でどう見えるかを考える前に、音声のみのエクスペリエンスを試してみる
タップ操作と音声で同じ機能を提供できるようにしてください。 可能であれば、画面をタップしてできることはすべて、音声でも行えることを確認してください。
アクションのクリティカル パスを音声で実行可能にする。 ユーザーが音声のみで、アクションの主なパスを移動できるようにする必要があります。
ユーザーが音声なしでアクションを使用できることを確認します。モバイル デバイスでは、ユーザーが音声をオンにしていない場合があります。このため、ユーザーが操作できるように、アクションに文字起こしを追加することを検討してください。
認知負荷を考慮してください。ユーザーの認知的負荷を下げるため、過度に長い音声レスポンスは避けるようにします。
UI をデザインする
会話が完成したら、それを補完するように UI をデザインできます。設計する際には、自然な対話がユーザーに提示するビジュアル インターフェースにどのように役立つかを考慮してください。スマートディスプレイ用にデザインを行う場合は、スマートディスプレイ用のデザインの具体的な考慮事項をご覧ください。
ガイドライン
最適なユーザー エクスペリエンスを実現するには、次のことに注意してください。
- レスポンシブ デザインを作成する。デザインが横向きと縦向きのいずれでも機能し、小型スマートフォンから大画面まで対応できるようにします。ユーザーがサーフェスのタイプごとに UI を簡単に判読できる必要があります。
- 認知負荷を考慮してください。ユーザーに負担をかけないよう、画面に表示する情報やコンテンツはすっきりと整理して簡潔にします。
- 画面に合わせて音声出力を調整します。単に発話されていることを書き出すだけではなく、視覚表示をどのように利用して音声を補完するか、ユニークに工夫してみてください。画面を利用できる場合は、そうでない場合よりも音声出力を簡潔にできることがあります。
- 重要な情報やコンポーネントを画面の下部に配置しないでください。モバイルでは、ユーザーの文字起こしテキストがマイクプレートの上に表示され、それが数行にわたることがあります。このテキストは一時的なものですが、画面の下部には重要なコンテンツを書かないようにしてください。候補ワードのようなボタンは、ユーザーによる入力が候補ワード利用の代わりになるため、画面の下部に表示しても構いません。
- 会話内のエラーを視覚的に処理します。ユーザーが応答しないときや、その応答が理解不能なとき、またユーザーが言ったことに対するフルフィルメントが用意されていないときには、エラーが発生する可能性があります。これらのエラー プロンプトが UI のどこに表示されるかを特定します。これは、表示プロンプトを配置する場所（タイトル内など）の場合もあれば、別の場所（必要に応じて表示される特別なコンテンツ領域）である場合もあります。エラー処理のヒントについては、会話デザインサイトをご覧ください。
スマートディスプレイ向けデザイン
スマートディスプレイ用にデザインを行うときは、上記のガイドラインも該当しますが、その他のデザイン上の考慮事項にも留意する必要があります。スマートディスプレイ用のデザインを行う際は、スマートディスプレイをタブレットのように扱いたくなるものです。ただしスマートディスプレイは、次の 2 つの理由から、まったく別の新しいカテゴリになります。
- スマートディスプレイは音声対応であり、Google アシスタントがオペレーティング システムになる
- スマートディスプレイは据え置き型であり、モバイル デバイスと違い、家庭で使用される場合にはキッチンや寝室に設置されることが多い
こうした特性のため、ユーザーは物理的にデバイスの近くにおらず、声だけでスマートディスプレイとやり取りすることがあります。また、スマートディスプレイを使用しながら、複数の作業を同時にこなしている可能性もあります。スマートディスプレイ用のデザインを行う際は、このような使用方法を念頭に置いておくことが重要です。
ガイドライン
スマートディスプレイで最適なユーザーエクスペリエンスを実現するには、次のことに注意してください。
- 音声ファーストを念頭に置いてデザインしましょう。スマートディスプレイでは、Interactive Canvas のアクションを音声主体になるようデザインすることが、より一層重要になります。モバイル デバイスと違い、ユーザーは部屋の奥に立って、音声だけでスマートディスプレイとやり取りする可能性があります。そのためユーザーが常にデバイスをタップしてアクションを進めるとは限らないので、音声を利用してアクションを進められるようにしておかなければなりません。
- 特定の視聴距離を考慮してデザインする。スマートディスプレイのコンテンツは、遠くからでも見えるようにデザインしてください。部屋の大きさに応じて、スマートディスプレイの一般的な視聴距離は 1 ～ 3 m です。
- タイトルなどのメインテキストには、最低でもフォントサイズ 32 pt を使用します。説明文やテキストの段落など、二次テキストには最低 24 pt を使用します。
- 一度に 1 つのタッチポイントに焦点を合わせる。認知作業負荷を減らし、コンテンツを遠くからでも読み取れるようにするため、主要な情報やタスクは一度に 1 種類だけ表示するようにしてください。たとえば、ユーザーが「今日はどんな日？」と尋ねると、アシスタントは天気、カレンダー、通勤、ニュースのコンテンツを返します。それぞれのタイプのコンテンツは全画面で表示され、画面にすべて一度に表示されるのではなく、順番に表示されます。
関連情報
Interactive Canvas を使用するアクションのデザイン方法の詳細については、以下のリソースをご覧ください。
- 会話デザインサイト
- マルチモーダル設計のガイドライン
- Sketch テンプレートをダウンロードして、UI のデザインに役立ててください。