サイト探索における三種の神器の設計・デザイン

帰りの電車で唐突に、「あ、あれ書こう」ってなったので書いた。

さて、タイトルで『サイト探索における三種の神器』と大仰な名前を付けて書いてしまったので、平易な言葉で問いかけなおそうと思う。

ユーザーがサイトで自分にマッチしたものを探すときに重要な3つの機能って?

なんかまだ硬い。

サイトに来た人が見つけたいものを見つけるのにたいせつな機能ってなーんだ?

いえす。すごくかんたんな質問だ。

これは特に引っかけ問題でもなんでもない。
探索とかいう言葉をタイトルで使ってしまった理由もおおよその予想が付くと思うのだが、早い話が『検索』という言葉が回答のひとつになるので使いたくなかったのだ。


















いえす。ひとつは、検索機能だ。

これが重要じゃないという人は、そうそういないと思う。ただ、こういうものの重要性を感じるためのかんたんな方法の紹介として、それがなかったらどうなるか想像するというかんたんな手法を実践してみよう。

  • Amazonから検索機能が消えた場合を想像できるだろうか?
  • Facebookで検索ができなかったらどうやってつながればよいのだろうか?
  • Googleに検索がなかったら?

Googleに検索がなかったら、どうなるんだろうはちょっと自分で言ってすこし興味あるのでやってみた。

完全にこれがやりたかただけやろという状態になってしまった感があるが、とにかく情報過多な中で検索というのはすごく重要なのである。

さて、次は?


















2. 並べ替え機能 - Sort

いえす、並べ替え機能だ。

だいたい新着順やら人気順、おすすめだったり関連度みたいなのでソートができるというのもたいせつな要因だ。

この点は、日々の実感としてAmazonは流石だと思う。

こじらせ英語UIがお話を複雑にしているが、項目としては上から次の通り。

  • 関連する順
  • 価格の低い順
  • 価格の高い順
  • 評価の高い順
  • 新着順

関連する順と評価の高い順って変わるの?みたいなところがあると思うのだが、内部的なアルゴリズムは、きっと想像した以上に、騒がしい未来がぼくを待ってるじゃなくて複雑だと思う。

とはいえ、何がすごいかっていうと、評価の高い順で表示されるものと上位6件すべて違う上に、やはり見た感じのタイトルの並びとして、関連する順の方が私の読みたいものが並んでいたという事実だ。

選択肢を無理くり増やして、「これ意味なくね?」とか「これとこれ結果変わんなくね?」とかいったサイトは山ほどあるけど、意味あるソート順を提供しているところで出てきたの真っ先にAmazonだった。

特に、グレーアウトした部分の話をするのも変だが、右上のユーザーエクスペリエンスの測定や左下のウェブ戦略としてのユーザーエクスペリエンスの著者については、2017年のUX Hong Kongで実際にキーノート聞いたりワークショップ受けたりしてるといったこともあって、「なんだ?航空券のチケット情報でも抜いてんのか?」って疑うレベルである。

ちなみに、ほしいものリストでは優先順位を付ける機能があってそれ順にソートできたりする。

えーと、Google検索はソートなんてぜんぜんできないと思うんですがどうなんですか?ってお話をしておきます。
Webを横断的に検索するといった極度に広いデータを探索してかつ万人に使用される機会があるものは、パーソナライズし過ぎない方がよいといったこともあると思っています。
同じワードで検索したのに、ある人の検索結果には1つ目に出るのに、ある人の検索結果には1ページ目にすら出ないといったのは、明らかに混乱を生み出すし、そんな世界をGoogleは望んでいない。(と思う)

はい、つぎー。
Search, Sortと来ているので、次は何のSでしょうねー。


















3. 絞り込み機能 - Filter

いえす、絞り込み機能だ。

当然ながらSではない。
当たり前すぎる。

なんてたってURLにsearch-sort-filterって書いてるからな。

すごーく重要だ。とはいえ本題は実は次だから、また例え話だけしてごまかそう。

  • 私の足のサイズは28cmなのでそのサイズ周辺の在庫がないなら除外したい
  • 表参道でランチする店を探しているので周辺以外は除外したい
  • 東京勤務で考えているのでそれ以外は除外したい
  • 確か8月のメールなのでそれ以外は除外したい

とにかく情報過多な時代の皆さまは除外したいものだらけなのですよ。

何がソートできて何がフィルターできるのかの基本

  • 明確に順序が付けられるものはソートできる。vice versa
  • 明確に順序が付けられるものは、区分を作ることでフィルターの候補にできる。

日付が一番わかりやすい。時間は古い→新しいの時系列に沿って明確に順序付けられるし、年や月、日などを区切ることによって絞り込みの選択肢にできる。
また区分は別に等間隔である必要はない。統計かじった人とかは何か区分をつくろうとすると、どうしても等間隔にしたいといったのあるかもしれないけど。

Google検索の絞り込みは、もう間隔が同じものなど何ひとつない。ただ、これが使いやすいのだ。

違いといったものを挙げると一番大きいのはこれだろう

  • ソートの選択はひとつまでで、フィルターは複数選択可能。

それっぽいこと書いてるけど、堂々の脳内出典。

ソートとフィルターは明確に別だという設計をした方がよいぞ。

ごっちゃになってるところ多いよね。っていうか自分がやらかしたって気付いて調べて思ったんだけど。

いやなんていうかそれでうまくいってるんだろうし、ユーザー使うし、困ってないし、むしろ上手くいってるんだろうなと思うけど。
しかし、絞り込みやソート順の要素を追加する度に整合性を保つのにめちゃくちゃ苦労するんだろうなーこのサービスって勝手に思ってる。

特にね、モバイル。やばし。

ある程度、日本でも認知があって、よい実例を挙げようと思って探したのだが疲れて諦めた。誰か教えてほしい。

ちなみに探しまくった中で、現状よいなって思っているのは、Udemyです。


スクショはモバイルアプリだけど、レスポンシブなのでデスクトップのブラウザで確認できますよ。

  • ごちゃごちゃしてない
  • 現在、設定されているフィルターがある項目は太字になってわかるようになっている
  • モバイル時にフィルターとソートが同じモーダルの中に入るがソートが一番上に来る

とにかく最後のが一番重要。
フィルターとソートを明確に区別していて、ソートはひとつのセレクトボックスで済むけど、フィルターは圧倒的に要素の数が多い。だから、まずはひとつのセレクトボックスで済むソートを一番上に持ってきている。デスクトップ時には右側にあって、要素の位置による重要性は絞り込みの方が高い扱いを受けているにも関わらず、モバイルでは逆転させている。

無理やりなデザインと、自然なデザインとでは、こういった情報設計がきちんとされているかみたいなところあるよなと思いました。(こなみかん)

共有 コメント