ナビ・検索
検索を高速にしたい
- §05-01Command palette (Cmd+K)
キー操作で開く検索窓からあらゆる機能へ飛ぶ。
メニューを辿らずに名前で機能やページを呼び出せる。機能が多く階層が深いツールで、慣れた人の操作速度を上げる。
検索・ナビゲーション - §05-02インスタント検索 / typeahead
入力するたびに候補や結果を即時に表示する。
検索ボタンを押す前に結果を見られ、語句を試しながら絞り込める。商品名や記事タイトルなど、候補から選ぶ検索に向く。
検索・ナビゲーション - §05-03ファセット検索
属性ごとのチェックボックスで結果を絞り込む。
件数が多い一覧から条件を重ねて目的の項目に近づく。商品や記事のように属性が多く、検索語だけでは絞れないときに向く。
検索・ナビゲーション - §05-05検索履歴 / 保存検索
最近の検索と保存した検索条件を呼び出せる。
同じ検索を繰り返す人が条件を打ち直さずに再実行できる。複雑な絞り込みを使う管理画面や検索中心のサービスに向く。
検索・ナビゲーション
参考: algolia.com
ナビ階層を整理したい
- §05-06breadcrumb
現在地までの階層をリンクの列で示す。
深い階層の中で自分の位置を把握でき、上の階層へ一度で戻れる。カテゴリが多いドキュメントやストアで、迷子を防ぎたいときに使う。
検索・ナビゲーション - §05-08サイドバー nav
階層のあるページ構成をサイドバーのツリーで示す。
ドキュメントやプロジェクトの構造を常に見渡しながら移動できる。階層が深く、現在位置を把握しづらいアプリに向く。
検索・ナビゲーション - §05-11tab bar
横並びのタブで表示内容を切り替える。
同じ対象の異なる側面を一画面内で切り替えて見せる。設定や詳細ページで情報を分けつつ、移動の感覚を軽くしたいときに使う。
検索・ナビゲーション - §05-13anchor TOC (sticky)
ページ脇に追従する目次から見出しへ移動する。
長い文書の構成を常に見せ、読みたい節へ直接飛べる。今どこを読んでいるかも示すので、長文のドキュメントや記事で迷子を防ぐ。
検索・ナビゲーション - §05-14jump-to-section チップ
ページ内の見出しへ飛ぶチップを横に並べる。
長いページでも目的の節にすぐ移動できる。メニューの分類やカテゴリ別の一覧など、縦に長いコンテンツの上部に置くと効く。
検索・ナビゲーション
モバイルで使いやすくしたい
- §05-09bottom nav
モバイル画面の下部に主要な移動先を並べる。
親指で届く位置に主要な画面への移動を置き、片手で行き先を切り替えられる。利用頻度の高い画面が数個に絞れるモバイルアプリに向く。
検索・ナビゲーション - §17-02Pull to refresh
一覧を引き下げて最新の内容に更新する。
一覧の先頭を引き下げる動作で最新情報を取り込め、更新ボタンを探さずに済む。モバイルのフィードや受信箱で広く期待される操作。
モバイル特有 - §17-03Swipe action (リスト)
リスト項目を左右にスワイプして削除や保管を行う。
メニューを開かずに一項目ずつ素早く片付けられる。受信箱やタスク一覧など、繰り返し処理するリストで操作回数を減らす。
モバイル特有 - §17-04Floating action button (FAB)
画面右下に浮かぶ主要操作のボタンを置く。
画面のどこからでも主要な操作に手が届くようにする。新規作成や投稿のように、利用の中心となる操作が一つあるときに向く。
モバイル特有 - §17-05Long press menu
長押しでコンテキストメニューを開く。
右クリックのないタッチ端末で、項目ごとの追加操作を提供する。一覧の各行に削除や共有などの補助操作を付けたいときに使う。
モバイル特有
参考: mobbin.com