インタラクティブスニペットのデザインについて。前回「Get to know App Intents」で学んだ App Intents の活かし方のひとつとして見てみた。
0.00 – Introduction
- Interactive snippets は、App Intents によって駆動するコンタクトなビュー
- アップデート情報やクイックアクションを表示し、App Intents をサポートするどこでも表示可能 (Spotlight, Siri, Shortcuts app)
- ボタンといった要素もサポートした
1.30 – Appearance
- Larget type: スニペットの見やすさに寄与するのが文字サイズ、システムのデフォルトサイズよりも大きい
- 大きな文字サイズが重要な情報への注意を引く
- レイアウトが乱雑にならないよう、文字の周囲に十分な余白を確保すること
- Consistent margins: 周囲に一定マージンを維持すること
- スニペットがオーガナイズされ、ユーザーが何が起こっているかに集中できる
- ContainerRelativeShapeAPI
- Concise content: 340 points を超えるコンテントを含めないこと
- 最も重要な情報に絞り、簡潔に示すこと
- 詳細を知りたければ、スニペットから特定のビューにリンクすることができる
- Clear contrast: コンテントの上に他のコンテンツを表示する際、アプリの visual identity をベースにし背景を vibrant するのが有効
- 読みやすさを損なうことがあるので、背景とコンテンツとのコントラスト比を上げると良い
3.25 – Interaction
- データ更新時、文字に対してスケールとブラーを伴うことで、明確なビジュアルフィードバックを与えられる
- スニペット内で情報更新し、アクションが成功したことを示すことで、App Intent がユーザーのルーチン内に信頼を構築できる
- ボタンを複数含められる
- メインタスクを補う、明確で関連性のあるアクションであるべき
- インタラクティブでなくとも、最新情報にアニメーションを伴って更新できる
4.49 – Types
- ふたつのスニペットタイプ
- Result (結果)
- 確認 (confirmation) の結果、またはそれ以上のアクションを必要としない情報を表示
- フォローアップの必要がないのでボタンラベルは “Done (完了)” とする
- 注文状況の確認などに有効
- Confirmation (確認)
- 結果 (result) を表示する前にアクションを要する場合に使用
- コーヒー注文の例: 数量変更、注文ボタンをタップするまでは注文がされない
- ボタンラベルは明確な動詞とする (e.g. “Order (注文)”)
- 事前定義から選ぶことが可能
- アクション後は、結果 (result) を表示し、インテントの挙動をユーザーが理解する
- Result (結果)
- ダイアログ
- Siri が App Intent の代弁をするときに表示
- AirPods 使用時など、ボイスファーストなインタラクションに必須
- 画面を見ていないくても耳で(result / confirmation を)聞くことができる
- ダイアログが表示されなくてもスニペットの内容を理解できるように設計するべき