WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
直感的な検索体験をデザインする

直感的な検索体験をデザインする

検索UIデザインLiquid GlassiOSiPadOSmacOS
元の動画を見る

ハイライト

AppleはiOS、iPadOS、macOSでSearch Fieldコンポーネントを統一し、Toolbar、Tab Bar、Sidebarといったナビゲーションモデルごとに明確な検索配置ガイドラインを示しました。開発者はこれらのパターンをそのまま活用し、ユーザーがコンテンツを探すときの認知負荷を下げられます。

主要内容

検索はユーザーが最初に向かう場所になりやすい

ユーザーはPagesで書類を探し、Apple TVで映画を探し、Apple Musicで新しいアーティストを見つけます。検索は、アプリを開いて最初に行う操作であることが少なくありません。検索体験が悪いと、ユーザーはアプリの入口でつまずきます。

Appleは今年、Liquid Glassデザイン言語のもとで検索コンポーネントのふるまいを整理し直しました。Search Fieldには、左側の虫眼鏡アイコン、Placeholderテキスト、入力後に表示される消去ボタン、iOSでフォーカス時に表示されるCancelボタンという4つの基本要素が自動で含まれます。これらの位置とインタラクションは固定されており、「ブランドらしさ」を出すために変更すべきではありません。

検索を置く場所は2つの問いで決まる

(03:41)

1つ目の問いは、ユーザーがアプリ内をどうナビゲートするか。2つ目の問いは、検索範囲がどれほど広いかです。

この2つが、検索をToolbar、Tab Bar、コンテンツ領域のどこに置くべきかを決めます。

Mailを例にすると、主なナビゲーションはメール一覧で行われ、下部Toolbarには主要な操作が置かれています。そのため検索を下部Toolbarに置くのがもっとも人間工学的です。ユーザーは片手で届き、周囲にはよく使うボタンがあります。検索がフォーカスされると、検索フィールドはキーボードの上に自動で移動し、キーボードに隠れません。

Stocks Appは状況が異なります。下部はSheetで占められており、Toolbarを置く余地がありません。この場合は上部Toolbarに検索を置くのが自然で、同じくフォーカス時にはキーボードの上へ移動します。

Tab Barアプリ: グローバル検索とローカル検索

(05:22)

Tab Barを使うアプリでは、Appleは2種類のSearch Tabを推奨しています。

1つ目は通常のTabです。タップすると検索のランディングページに入り、ページ上部に検索フィールド、その下におすすめコンテンツやカテゴリを表示できます。Apple TVはこの方式で、ユーザーは検索する前にさまざまな映画や番組の種類を見ながら、探索する気分に入ります。

2つ目はProminent Tabです。タップすると中間ページを挟まず、すぐにキーボードが立ち上がって検索状態に入ります。Phone AppのSearch Tabはこの設計です。ユーザーはたいてい探す相手や履歴をすでに知っており、すばやく連絡先や通話履歴へ戻りたいだけだからです。

グローバルなSearch Tabに加えて、特定のTab内にローカル検索を置くこともできます。Apple Musicの「ライブラリ」Tabでは、検索フィールドがタイトルの下にあり、Placeholderには明確に「ライブラリを検索」と書かれています。これにより、検索対象がApple Music全体ではなく、自分の音楽コレクションに限られることが伝わります。

iPadとMac: 3つの配置

(07:47)

iPadとMacは画面が広く、ナビゲーションモデルも似ています。そのため検索体験はできるだけ一貫させるべきです。

推奨される配置は3つあります。

  • Toolbarの末尾: MailのようなSplit Viewアプリに適しています。ユーザーは左側で検索結果を見ながら、右側の詳細ビューを表示したままにできます。NotesやFilesもこのパターンです。
  • Sidebarの上部: Sidebar内のナビゲーション項目を絞り込む場面に適しています。Settings Appでは検索がSidebar上部にあり、入力後は一致した設定項目だけが表示されます。
  • 独立したSearch TabまたはSection: Apple Musicのように、コンテンツが豊富で複数の区分を持つアプリに適しています。検索結果を表示する広い領域を確保できます。

Toolbar上の検索フィールドは、利用可能なスペースに応じて自動で縮小したりボタンに折りたたまれたりします。アクティブになると入力しやすい幅まで広がり、あふれたToolbar項目は自動でメニューに収まります。

詳細

検索候補で入力を減らす

(10:36)

ユーザーが検索を開くのは、ブラウズ中に目的のものを直接見つけられなかったという合図でもあります。この時点では、操作ステップをできるだけ減らすべきです。

最近の検索: iOSでは、検索フィールドがフォーカスされると入力欄のすぐ下に表示されます。iPadとMacでは、検索フィールドがToolbarまたはSidebar内にある場合、最近の検索はメニューとして表示されます。Search Tabがある場合は、おすすめコンテンツと一緒にページ上に表示されます。ユーザーが実際に表示または操作した結果だけを出し、個別削除とすべて消去の操作を用意します。

予測候補: ユーザーが入力を始めたら、入力内容に合う補完候補をリアルタイムで表示します。候補の中では、ユーザーが入力済みの部分と予測部分を視覚的に区別します。候補の数を制御し、検索結果が常に視覚の中心に残るようにします。

Scope BarとTokenで結果を絞り込む

(12:38)

検索結果が複数の場所、カテゴリ、アカウントから来る場合、絞り込み機能が重要になります。

Scope Bar: 軽量なフィルタコントロールです。Mail Appでは「すべてのメールボックス」と「現在のメールボックス」の2つの検索範囲を切り替えるために使われています。この絞り込み方法は直感的で、ユーザーは自分がどこを検索しているかを一目で理解できます。

Search Token: ユーザーが特定のキーワードを入力すると、Tokenが検索フィールド内にハイライトされたテキストとして表示されます。ユーザーは複数のTokenを追加し続け、条件を組み合わせて絞り込めます。Photos Appでは「Joshua Tree」と「2021」の2つのTokenを組み合わせ、特定の時期と場所の写真をすばやく見つけられます。

Tokenの弱点は見つけやすさです。そのため、見えているフィルタUIの代わりにするべきではありません。ベストプラクティスは、TokenをScope Barや他のフィルタコントロールと組み合わせることです。

結果がないときの空状態

(14:41)

検索結果が返らないとき、空白ページを表示してはいけません。AppleはContent Unavailable Viewを提供しており、検索モードとして設定すると、検索アイコン、タイトル、サブタイトルを自動で表示します。空状態には現在の検索テキストを表示し、ユーザーがスペルミスを見つけやすくすることが推奨されています。

SwiftUIで検索を実装する

Session内に具体的なコード片はありませんが、Session説明とプラットフォームガイドラインから実装方針は読み取れます。

SwiftUIでは、.searchable修飾子で検索フィールドを追加します。

// Toolbar検索（iOSでは下部、iPad/Macでは上部）
ContentView()
    .searchable(text: $searchText, placement: .navigationBarDrawer)

// Scope Bar付きの検索
ContentView()
    .searchable(text: $searchText)
    .searchScopes($searchScope) {
        Text("すべてのメールボックス").tag(Mailbox.all)
        Text("現在のメールボックス").tag(Mailbox.current)
    }

// Token付きの検索
ContentView()
    .searchable(text: $searchText, tokens: $searchTokens) { token in
        Text(token.name)
    }

重要な点:

  • .searchableは検索フィールドのスタイル、消去ボタン、Cancelボタンを自動で処理します。
  • placementパラメータは検索フィールドの位置を制御し、システムがプラットフォームと文脈に応じて最適な表示を選びます。
  • .searchScopesはScope Barを追加し、ユーザーはタップで検索範囲を切り替えられます。
  • Tokenはtokensパラメータでバインドされ、ユーザーが特定のキーワードを入力したときにシステムがTokenを生成できます。
  • 検索候補は.searchSuggestions修飾子で提供し、最近の検索と予測補完をサポートできます。

重要ポイント

  1. 検索を上部から下部Toolbarへ移す

    • 何をするか: iOS Appの検索フィールドをナビゲーションバーから下部Toolbarへ移します。
    • なぜか: 片手操作が自然になり、フォーカス時にはキーボードの上へ移動するため、コンテンツを隠しません。
    • どう始めるか: SwiftUIでは.searchable(placement: .toolbar)を使い、UIKitではUISearchControllerを下部Toolbarと組み合わせます。

  2. Tab BarアプリにProminent Search Tabを追加する

    • 何をするか: 検索を独立したTabにし、タップした瞬間に検索状態へ入るようにします。
    • なぜか: ユーザーはどこかのページへ入ってから検索する必要がなく、グローバルなコンテンツへ常に1タップで届きます。
    • どう始めるか: TabViewで検索アイコンのTabを設定し、ページ読み込み時に検索フィールドへ自動フォーカスします。

  3. 最近の検索で重複入力を減らす

    • 何をするか: ユーザーが実際にタップした検索結果を記録し、検索フィールドがフォーカスされたときに表示します。
    • なぜか: 多くの検索は繰り返し行動であり、ユーザーは以前見た内容に戻りたいからです。
    • どう始めるか: UserDefaultsまたはCore Dataで最近の検索を保存し、.searchSuggestionsで表示します。

  4. Tokenで自然言語的な絞り込みを実現する

    • 何をするか: ユーザーが「2021年のJoshua Treeの写真」と入力したとき、「2021」と「Joshua Tree」を自動でフィルタTokenとして取り出します。
    • なぜか: 従来のフィルタより柔軟で、ユーザーは任意の条件を組み合わせられます。
    • どう始めるか: token初期化処理を実装し、検索テキストの変化を監視して、事前定義したキーワードに一致したらTokenを生成します。

  5. 検索結果なしに意味のある空状態を用意する

    • 何をするか: 検索結果がないとき、現在の検索語と次の操作案を表示します。
    • なぜか: 空白ページでは、ネットワーク問題なのか本当に結果がないのかをユーザーが判断できません。
    • どう始めるか: ContentUnavailableView.search(text: searchText)を使い、標準の検索空状態を自動で得ます。

関連 Session

コメント

GitHub Issues · utterances