検索体験にフォーカスしたデザインセッション。検索機能の提供は今や標準UIでもバリエーションに富んでいて、Liquid Glass 登場直後にも自分なりに考察したことはあった。
それが公式に体系的な指針としてまとめられ、内容も網羅性が高くて非常に参考になった。
Design intuitive search experiences
0:00 – Introduction
- 検索はアプリでコンテンツを見つけ・ナビゲートし・発見するための最重要ツールの一つ
- 適切な検索設計がユーザー体験に与える影響を概説
1:39 – Search field
- 検索フィールドコンポーネントのコア要素を解説
- プレースホルダーテキスト
- クリアボタン（テキスト入力で表示）
- キャンセル操作（検索がフォーカスされると表示）
- 配置場所によって適切な表示スタイルが適用
- ツールバー：ガラスマテリアル
- スクロール領域：標準スタイル
- アプリの独自なスタイル・アイコンセットがある場合
- カスタムアイコンは各アイコンと類似したものにする（虫メガネ）
2:52 – Patterns and placement
- iOS・iPadOS・macOS にわたる検索配置オプションの全体像
- ナビゲーションバー内への配置
- 専用の検索タブ
- インライン配置
- 配置の決定方法
- 1 アプリをどのように操作しているか？
- → タブバーなど特定コンポーネントに対応する必要性を判断
- 2 検索範囲は何か？
- → 配置によって検索対象を示す
- 下部への配置が推奨されるが、上部の配置も可能
- e.g. 株価 リスト下部にシートが表示されている
- 1 アプリをどのように操作しているか？
- タブ型：ひとつのタブでアプリ内すべてのコンテンツを見つけられるようにする
- 標準のタブアイテム：検索タブでコンテンツ領域が確保され検索に役立つ情報を事前に提示できる
- アプリに豊富なコンテンツがある場合、ユーザーの探究心がある場合に有効（e.g. Apple TV）
- 主要タブ(prominent tab)に指定：タップして即キーボードが展開。すぐに検索開始することを伝えられる（e.g. 電話）
- すぐに検索にアクセスできるため、ユーザー何を探しているかわかっている場合に有効
- 標準のタブアイテム：検索タブでコンテンツ領域が確保され検索に役立つ情報を事前に提示できる
- インラインの検索フィールド（e.g. Apple Music Albumタブ）
- アプリ全体ではなく特定コンテンツのみの検索できることが明確に伝わる
- 検索が複数ある場合、検索範囲において場所が重要な場合に有効
- 各プラットフォームごとの推奨パターンと使い分けの指針（iPad, Mac）
10:30 – Best practices
- 最近の検索履歴を表示する
- 個別にまたはすべてを削除できることも重要
- 入力中のサジェスト（提案）を表示する
- できるだけ素早く表示することが重要（結果＋推測候補）
- ユーザー入力と予測とを差別化して表示する（色を分けるなど）
- 表示する候補数を絞ることで検索結果が際立つ
- フィルターの提供
- まずは広範囲に検索を始め、必要に応じて絞り込めるように
- 検索トークン（特定の人、場所、コンテンツ、年月日）
- 見つけづらい場合があるのでわかりやすいフィルタをトークンに置き換えない
- ゼロ状態（検索前・検索結果なし）の設計指針