商品一覧の構造分析

流し読みや商品の比較をしやすくするために、一覧ページの項目説明は、コンテンツの優先順位を損なわないビジュアルデザインとレイアウトにしなければならない。

少し前のことだが、週末旅行のためのホテルをオンラインで予約した。そのときに私がたどったプロセスは、ほんの一握りの数のWebサイトを通じて、選択肢となるホテルを探し、各々についてざっと理解して、絞り込むというものだった。しかし、どこに泊まりたいのかを最終的に決めるまでに、結局、何日もかかったので、疲れはててしまった。

Webでのホテル予約というのは、オンラインでのほかの大半の作業同様、選択肢を調べて、検討し、絞り込むということが欠かせない。大体の場合、ユーザーはまず検索条件のセットを指定するか、一連のカテゴリーをざっと見てから、最終的に一覧ページにたどり着く。一覧ページにあるのは候補になるいくつかの項目、つまり、商品一覧だ。一覧ページは利用可能な多数の選択肢を分析するための出発点といえる。したがって、効率的な流し読みと意思決定をサポートする必要がある。

注意: 一覧ページは「カテゴリーページ」(特定の商品カテゴリーに属する項目を載せている場合)や「ディレクトリページ」(場所や人をリストアップしている場合)、「ギャラリーページ」(グラフィックスや画像を載せている場合)と呼ばれることもある。さらにいうと、検索エンジン結果ページ(SERP)も一覧ページの一種である。この記事では、こうした概要ページをすべて、一覧ページと呼ぶことにする。

一覧ページはユーザーのニーズに合う可能性のある候補の項目(商品)の一覧を表示するハブの役割をする。それぞれの商品一覧には項目の概要やその項目のページ(商品詳細ページ)ヘのリンクが通常、含まれている。ただし、ナビゲーションの階層が深いサイトでは、トップページと一覧ページの間にさらに階層があることもある。

一覧ページのユーザビリティは一つ一つの商品一覧がどうデザインされているかに左右される。各項目はそれ単独でも機能的でわかりやすいものである必要があるが、同時に、同じページ内にリストアップされたほかの選択肢と一緒でもきちんと機能する必要がある。商品一覧と一覧ページがユーザブルになるには、以下のような要件を満たさなければならない。

1. 商品一覧の属性に優先順位をつけ、情報を階層化しよう

ユーザーが選択肢の一覧を閲覧するときにしたいことは、どの項目に興味が持てそうで、どの項目を無視していいかを素早く決めることである。情報が多すぎると、ユーザーが圧倒されかねないし、ページの見た目もごちゃごちゃになる。一方、商品一覧にある詳細情報が十分でないと、疑問点があまりにも多く残ってしまい、ユーザーはポゴスティッキング(一覧ページからそれぞれの商品詳細ページに移動して、必要な情報を入手すること)せざるをえない。ポゴスティッキングは参考になる詳細情報が一覧ページに足りないという印であることが多いのである。

Circalighting.com: このギャラリーページでは、壁付け照明の商品一覧に商品名しか出ておらず、装飾のタイプ、電球の種類、さらには価格といった重要な詳細情報が省略されている。ユーザーは各項目の商品詳細ページとの間を行ったり来たりしないと、こうした情報が得られない。壁付け照明の買い物で、客にとっての最も重要な要素とは画像なのかもしれないが、価格など、影響の大きい差別化要素をこの階層で省くべきではない。
Usautoparts.net: 自動車用品についてのこの一覧ページは各商品の詳細情報が多すぎる。ユーザーは商品属性の長い一覧を全部流し読みしないと、自分に関係のありそうな商品を拾い出すことができない。こういうデザインだと、商品の閲覧はうんざりするものになるし、比較もしづらい。

童話の『3びきのくま』(訳注: 小さい女の子が森で3匹の熊が住む家に迷い込み、3匹の熊それぞれ用に用意されたものの中から最も極端でない、ちょうどいいものを選んでいく話)にあるように、商品一覧内の商品の詳細情報はちょうどいい量である必要がある。つまり、多すぎればユーザーの負担になるうえ、1つのビューで必要なだけの選択肢が見られなくなるし、少なすぎるとポゴスティッキングを強いることになる。自分たちのオーディエンスの大多数の情報ニーズを満たす属性を特定して、それを商品一覧に表示しよう。それには、アナリティクスやユーザー調査を指針に、どの属性なら自分たちのユーザーに最も情報が伝わるかを判断するとよい:

  • アナリティクス ― 現在、一覧ページにソートや検索フィルターの機能があるなら、検索フィルターやソートでどの条件が最もよく利用されているのかを把握しよう。1回目の選別に利用されている条件はどれで、その後、検索結果のセットをさらに微調整するのに利用されているのはどれか。
  • ユーザー調査 ― 日記調査やユーザビリティ調査を実施し、どんな要素がどの程度、意思決定に重要であるか、また、どの商品属性が選択肢を絞り込むのによく利用されているかを理解しよう。

どの属性を商品一覧に入れ、そのうちのどれを強調して、どれを控えめに扱うかの決定に、ユーザーのデータやアナリティクスは役に立つ。まず属性ごとの優先順位を決めてから、商品一覧のレイアウトやビジュアルデザインの検討は始めよう。こうした優先順位が商品一覧内の情報階層の基盤になっていくからである。

そして、我々の22年にわたるユーザビリティテストの経験から、あなた方の調査の手間を少々減らせるアドバイスをお伝えしよう。ユーザーの誰もが求める情報というのが1つだけある。それが価格である。

Travelocity.comの航空便の商品一覧には、出発時間や到着時間、所要時間、寄港地の数、乗り継ぎの待ち時間および便名や運航会社のような重要な情報が入っている。こういう情報のおかげで、ユーザーは情報量に圧倒されることなく、航空便を選べるようになっている。また、詳細情報がさらに必要な場合のための経路も用意されている。

2. 各商品一覧のミニIAやビジュアルデザインに属性の優先順位を反映させよう

個々の商品一覧のデザインはユーザーが各選択肢をすばやく理解でき、商品の比較がしやすいようになっていなければならない。

それには、それぞれの商品一覧を小型のWebページであるかのように扱い、ほかの属性に対するその属性の優先度に合わせて、説明内に各属性をレイアウトして、視覚処理をほどこすとよい。

  • 配置やレイアウト ― 経験からして、商品一覧の最上部端が最も注目を集めるエリアである。したがって、(少なくとも、左から右に読む文化圏では)優先度の高い情報ほど、このエリアに配置すべきだ。そして、この点を踏まえつつ、属性を優先度で整理して、各商品一覧内に情報の階層(ミニIA)を作ろう。
検索エンジン結果ページのアイトラッキング調査のゲイズプロットからは、ユーザーはそれぞれの商品一覧を流し読みしてから、各項目の左上端エリアを最も凝視していることがわかる。
  • ビジュアルの優先順位 ― 最も重要な情報に目が行くようなビジュアルデザインにしよう:
    • フォントを大きくしたり、太くする、あるいは、色を変えたり、濃くすることで、重要な属性を強調しよう。
    • 注意を引き、流し読みの助けになるアイコンのグラフィックスにすることを検討しよう。
    • 重要な属性は周りに余白を入れ、他と区別できるようにすることで目立たせ、注目が集まるようにしよう。

視覚処理によって重要な属性に注意を引こうとするときには、気をつける必要がある。やり過ぎると裏目に出てしまいかねないからだ。目を引く項目が多くなりすぎ、一覧の流し読みが難しくなるからである。

情報の配置と視覚処理によって、視線の経路を作り、重要度順に属性に目が行くようにすることで、商品一覧は効率的かつ楽に流し読みできるようになる。最も重要な強調されている属性だけを表面的に流し読みすれば、判断できてしまうユーザーも多いのではないだろうか。そして、もっと具体的な情報へのニーズがあるユーザーは、二次的な属性に目を通し、自分の選んだ選択肢への理解を深めればよい。

United Healthcareの医療提供者のディレクトリページの商品一覧では、医師の名前が大きな青いフォントで強調されている。この医師の専門分野も名前のすぐ下に置かれ、名前よりは小さいが、太いフォントで強調されている。それ以外の重要な情報は独立して置かれて、アイコンとセットにされ、それらのある右のほうにも注意がいくようになっている。その結果、この医師についての重要な情報がひと目見ただけですぐにわかるようになっている。
Booking.comの商品一覧は情報の階層が明確でなく、ユーザーに視線の経路が提供されていない。この商品一覧ではさまざまな視覚処理が使われていて、お互い目を引こうと張り合ってしまっているので、この項目を流し読みして、理解しようと思うと、かなり労力がいる。
Nextwarehouse.comの商品一覧には情報の階層がない。つまり、商品名や価格、在庫などの詳細情報のフォントやビジュアルのスタイルに変化がつけられていない。ブランド名や品番はそれぞれ赤と青で示されているが、うまく目を引きつけるには色のコントラストが弱く、どれが重要な属性かがユーザーにわかりにくい。
NextWarehouse.comの商品一覧に対する我々のデザイン変更案: ビジュアルデザインを数か所、微調整しただけで、このプリンターについての重要な情報が浮かび上がってくる。それ以外の情報にも優先順位をつけ、左揃えにすれば、この商品一覧の流し読みや理解は楽になる。

3. 商品一覧は一貫性のあるスタイルにして、比較しやすいようにしよう

アイトラッキング調査では、一覧ページに表示されている選択肢の中から選ばなければならない場合、あるユーザーはある商品一覧を見てから、別の商品一覧に目を移し、再び前のものに戻るということをよくしている。項目間で類似の情報を比較しているのである。このプロセスに役立つように、商品一覧は予測可能な一貫性のあるものになっていなければならない。そこでは、対応する属性の配置や視覚処理は同じにするべきである。

デジタルカメラを買う際のアイトラッキングのゲイズプロットで、ユーザーの目は2種類のカメラの間を行ったり来たりしていた。このジグザクパターンから示されているのは、このユーザーが商品を属性同士で比較していたということである。
Travelocityの航空便の商品一覧には一貫性がある。航空便ごとに、同じ種類の情報が同じ場所に表示され、同じ視覚処理が使われているからである。

それぞれの商品一覧内のレイアウトや属性の配置はおおむね同じであるべきだ。しかし、特徴的な重要な情報を目立たせなければならないような状況もある。たとえば、ある商品が割引や売り切れになっている場合には、その点についての注意を引くために、専用の注意喚起の記号やアイコンによるインジケーターを表示してもよい。しかしながら、どの情報をこうしたやり方で注意喚起するのかは注意深く選ぼう。状況に応じて表示される専用インジケーターが2~3種類よりも多くなると、一覧ページはごちゃごちゃした感じになり、流し読みしにくくなるからである。

Redmart.comで歯磨き粉を買おうとしていたユーザーは、割引を示すインジケーターが役に立つことに気づいて、こう言った。「こういう風に歯磨き粉を全部見ていて、今回、いいと思ったのは、どれが割引になっているかがわかりやすいことです。割引になっている中から1つを選んで買えますので。そうでなければ選べなかったかもしれません」。
Booking.comのホテルの商品一覧には一貫性がない。つまり、ホテルの詳細情報の配置の仕方が項目によって異なるのだ。また、この事例からは、あまりにもさまざまなインジケーターを使うと収集がつかなくなってしまいやすいこともわかる。上にある3軒のホテルの説明では、11種類の動的なインジケーターがそれぞれ違う種類の情報を伝えているため、ページがごちゃごちゃしてしまい、ホテル同士の比較がしにくくなっている。

結論

選択肢を絞り込むのに、どんな種類の情報を自分たちのユーザーの大半が必要としているかを見極めよう。そして、こうした情報の優先度を高くしつつ、各商品一覧の詳細情報に一貫性のあるミニIAを作り出して、ユーザーが効率的かつ楽に選択肢を理解し、絞り込めるようにしよう。

我々の1日セミナー、「WebページのUXデザイン」では、一覧ページのビジュアルの優先順位とコンテンツの階層化、およびユーザーのニーズとビジネス目標を満たす成功するWebページを作り出すコツを論じる。

公開: 2016年7月5日 (原文:2016年4月10日)
著者: Kim Flaherty
原文:The Anatomy of a List Entry

分類キーワード