この記事の内容
あやね
PixsoのUIデザインメーカーでフィールド、候補、結果、戻る操作をつなぎ、虫眼鏡だけでなく次の行動まで設計します。検索バーは、何を探せるか、どう入力し、どの結果を開くかを明確にします。
1. 検索範囲を入力前に示す
周囲がプロジェクト一覧ならSearchで十分ですが、同じヘッダーで人、ファイル、ヘルプまで検索するなら範囲を常に表示します。「プロジェクトを検索」のように目的をラベルで伝えます。
PlaceholderにはProject name or clientのように思い出せる情報を示します。検索サービスがコメントを索引化しないなら、検索できると約束しません。
2. 入力、クリア、送信を分ける
Spring launch — client reviewのような現実的な長さを入力します。Enterと検索ボタンは同じ動作にし、clearは文字と候補を消して勝手に移動させません。
空の送信を既定の閲覧へ戻すかエラーにするかを決めます。候補が利用できなくても、サービスが動けばEnterの検索を残します。
3. 候補と直接移動を区別する
候補行が語句を完成させるのか、既知のプロジェクトを直接開くのかを示します。「Project · Studio team」のように種類と文脈を添え、固定数で埋めません。
4. キーボードと不安定な接続に対応する
ComboboxではDown Arrowで候補へ入り、Enterで選択し、Escapeで閉じるなどを仕様化します。最初の行を自動選択せず、visible highlightがあるときだけ選択状態にします。
SpringからSummerへ変えたとき古い応答が新しい候補を上書きしないようにします。候補が失敗しても明示検索を残します。
5. モバイルで使える余白を確保する
狭い画面では検索アイコンから専用ビューを開き、accessible name、visible field、戻る操作、キーボード用の余白を用意します。戻ったらqueryと結果位置を復元します。
6. Pixsoで完全なqueryをプロトタイプする
既定のライブラリ、springの候補ポップアップ、spring launchの結果という3画面をつなぎます。レビューには検索を使えと指示せず、顧客レビュー案件を探すタスクを渡します。
handoffにはEnterの動作、候補の選択表示、clearの影響、戻るときに復元するstateを記載します。
結論
良い検索バーは範囲、候補、keyboard、接続失敗、mobile、復帰状態を一つの意図として設計します。Pixsoでqueryの始まりから結果まで検証してください。
