スマホのUXを改善する方法2：ナビゲーション、検索、フィルターはどうあるべきか
TOPナビゲーション
画面の上部に常に表示する。（要ABテスト）
表示しないパターンと、常に表示するパターンでABテストする。常に表示するタイプでインタラクションが10％改善した例がある。
検索
ユーザが検索窓になにか打ち込んだら、それに合わせてポピュラーな検索ワードを提示すること。
例えばGoogleで「マーケディング」を検索すると、「まーけ」と打ち込んだところで以下のように選択候補が示される。
検索結果が「0件」になる場合、「該当するものはありません」みたいな空ページを表示してはいけない。0件の場合は、検索ワードから類推できるなにかふさわしいものを表示すること。
打ち間違いはリアルタイムで正すこと
打ち間違いは誰にでもある。人間だもの。打ち間違いは、ユーザが検索窓に入力しているときに、リアルタイムで「もしかしてこれをお探しですか？」と正してあげること。
ユーザが検索窓に触れたらすぐにやることは2つ
- すぐにキーボードを表示する
- そのユーザの検索履歴がないときは、ポピュラーな検索ワードを表示する
（検索履歴があるときは、最近の検索ワードを示す）
フィルター
フィルターはリストに必要な機能。
- フィルターに該当するアイテムがいつくあるかリアルタイムで表示せよ
- たくさんフィルターがあるなら、最初にユーザにすべて選ばせよ
フィルターをフルスクリーンで表示する場合
- ドロップダウンは避けること
- 最初にすべてのフィルターを選べるようにしておくこと
- 一発ですべてのフィルターを解除できる機能を設けること
- フィルター画面を閉じる方法がわかりやすいこと
- フィルターに該当するアイテムがいつくあるか示すこと
フィルターをリストページで表示する場合
- フィルターはTOPかボトムに固定する（要ABテスト）
- クイックフィルターか人気のフィルターを表示する（要ABテスト）
- TOPに固定するなら、ボトムに「TOPに戻る」ボタンをつける（要ABテスト）
- フィルター結果の数を表示する
- ユーザがリクエストしたフィルターは表示させておき、自由に変更できるようにしておく
リストの注意点
- 商品と商品の間には適切な余白を設けること
- リストページであることが一目でわかるようにすること
（商品詳細ページと間違われないようにする）
1つの商品の表示枠が大きいと、1画面に1商品しか見えなくなる。これだと商品を解説する詳細ページに見えてしまう。1画面に少なくとも2つの商品が並ぶようにすること。
備考：リストページのツボ
- 星の数など、他のユーザの評価を示すと信頼が増す。
- 商品の無限スクロールはしないこと
- ページネーションか「もっと見る」でABテストする
- 「もっと見る」のときは残りのアイテム数を示す
- 在庫が少ないアイテムは、残りの数を示す
※元ネタはGoogleのMobile UX Marathonです。
