しぶとく残るWebデザインの間違い・トップ10

大規模なユーザビリティ調査によって、現在、最も一般的かつ有害なWebデザインの間違いが明らかになったが、そうした間違いは意外なものでも新しいものでもなかった。つまり、それらは課題としてずっと続いており、Webサイトのユーザビリティを損ない続けているのである。

1996年以来、我々はWebデザインの間違い・トップ10のリストを作成してきているが、現在のWebデザインの間違いを調べるために、今年もアメリカとイギリスで215人の参加者からなる大規模なユーザビリティ調査を実施した。小さな地場企業からエンターテインメントサイト、非営利団体、グローバル企業にいたるまで、43のサイトについての結果を分析した後、ユーザーに害をなす(そして、ユーザーに害をなすことで、こうしたデザイン上の欠点はそのWebサイトのビジネス指標も間違いなく損なっている)、最も一般的かつ有害なデザインの間違いを10個特定した。

今回調査の大きなニュースは何か。それは、今回、トップ10に挙げられた課題のどれもが新しいものでも、驚くようなものでもなかった、ということである。Webデザインはずいぶんと進歩してきたが、なかなか解決しない問題というのはまだあるのだ。最新のデザインパターンや美しさの基準は移り変わっていくが、根底にあるユーザーのニーズというのは変わらない。ユーザーがずっと必要としているのは、情報を見つけて、それを読むことができ、どこをクリックすればどこに行けるかを知ることだからである。

では、あなた方のサイトは以下の間違いをいくつしているだろうか。

1. 予想外の位置にあるコンテンツ

見つけられない情報を利用することはできない。しかし、カテゴリー名が不適切で、そのカテゴリー内にあるコンテンツの説明が不十分だったり、不正確なサイトは多い。また、(ユーザーではなく)その企業がコンテンツについてどう考えているかをベースに、コンテンツの配置をしているサイトもある。だが、情報はこういうふうに整理されているはずだ、というユーザーのメンタルモデルと、サイトの構造が一致していないと、ユーザーは必要なものを見つけることができない。

サイト構造の構築にユーザーを巻き込もう。カードソーティングやツリーテスト、ユーザビリティテストのような、ちょっとしたユーザビリティ業務は、ユーザーに理解してもらえるサイト構造を作成するのに非常に効果がある。

図
ATT.com: 古い携帯電話の下取りについての情報は「Existing Customers」(ご利用中のお客様)の下にある。しかし、ユーザーは「Smartphones」(スマートフォン)の下でそれを探していた。

2. 競合するリンクやカテゴリー

ナビゲーションにある、似たようなカテゴリーやリンクをユーザーが明確に区別できない場合、彼らはコンテンツへの正しい経路を見つけるのに苦労する。カテゴリーやリンクの名前は、それ自体が意味をなしているというだけでなく、サイト上のほかの選択肢と一緒に使っても、理解できるようになっている必要がある。もし、ある特定のニーズに応えてくれそうなセクションやページが複数あると、ユーザーはそれぞれを探索するか、内容を推測しなければならない。あるいは、彼らは検索に戻るか、サイトを離れてしまうこともあるだろう。

図
BAM Constructionのサイトで、ユーザーは建設プロジェクトについての詳細を入手したかったのだが、その情報が「Who We Are」(我々は何者か)、「What We Do」(我々のやっていること)、「How We Do It」(我々のやり方)のどれに該当するかがわからなかった。ほとんどのユーザーは「What We Do」セクションから見始めたが、そのセクションにあるのはこの企業が顧客に提供した業務の種類の概要で、プロジェクトの詳細ではなかった。プロジェクトの情報やケーススタディは「How We Do It」で取り上げられていた。

カードソーティングやユーザビリティテストはカテゴリー名の重複を避けるのに役に立つ。リンクが似すぎているという問題の原因は、コンテンツ戦略が不適切なためであることが多い。この問題の要因として考えられるのは以下の2つである:

  • ラベルが不適切: リンク自体はそれぞれ別のコンテンツにつながっているのに、なぜかラベルが類似したものになっている。こういう場合はリンクの名前をつけなおして、リンクをお互い区別できるようにすればよい。
  • コンテンツ同士の区別が不十分: リンク自体はそれぞれ別のページにつながっているのに、それらのページにある情報同士がかなり似ている場合は、リンクの名前をつけなおすのではなく、コンテンツの構成自体を整理しなおして、統合することで解決できるかもしれない。

3. 島状にバラバラになっている情報

サイトの中には、情報の小さなかけらをサイト中にばらまいておきながら、情報同士のつながりがほとんど、あるいは何もないところもある。

情報が島状にバラバラになっていて、ほかの関連情報へのリンクがないようにユーザーに見えると、サイトのほかのエリアで補足的な情報が提供されていると思う理由がユーザーにはなくなってしまう。したがって、ユーザーがさらに情報が必要な場合、そうした情報を得るため、彼らは競合サイトに移動したり、Googleに移動してしまう可能性がある。

また、ユーザーがその情報を再度閲覧しようとして、結果的には、サイト内のまったく別のエリアに行き着いてしまい、コンテンツの見方が最初のエクスペリエンスとは違うものになってしまうということもありうる。そういうバラバラの情報を実際に見つけてしまったユーザーは、情報をつなぎ合わせて全体像を明らかにするしかない。そして、いずれにしろ、サイトに対して否定的な印象を持つことになるだろう。

企業側から見ると、これはユーザーエクスペリエンスの失敗というだけでなく、コンテンツ管理に関する悪夢ともいえる。サイトのあるエリアで、情報が重複していたり、ほかの場所にある情報と相違、あるいは矛盾すらしている可能性があるということだからだ。

関連情報を提供しているページ間に関連リンクを追加するというのも解決方法の1つだが、もっといいのは、なぜ情報がサイトのあちこちにちらばっているのかをよく考え、必要に応じて、情報を一元管理するようにして、情報ごとに最適な場所を見つけることだ。サイトのそれ以外の場所では、そのトピックに関するコンテンツが存在する主要な場所についてふれるようにすれば、その情報を反復しなくてもよくなるはずだ。

4. リンクの反復

必要とする情報の場所を正しく突き止められたとしても、予想外、あるいは長ったらしいワークフローのせいで、ユーザーは窮地に立たされることがある。

コンテンツにたどり着くまでのクリック数はいくつであるべきか、とWebデザインチームからたずねられることは多いが、常に当てはまる魔法の数字などというものはない。というのも、クリックの数よりもクリックの質のほうがはるかに重要だからだユーザーはページをクリックすればするほど、目指す情報に近くなるべきである。しかし、反復的なクリックは希望しているものを何度も何度も選択することをユーザーに強いるので、彼らをいら立たせるし、不必要な労力を要求するのである。

孤立したページを作って、それ以前に自分たちが作成してきたコンテンツへのルートを考えない、ということをデザインチームはすることがある。しかし、新しいページを作成するときには、ユーザーがどうやってそこにたどり着くことになるかを検討し、もっと直接的に行ける経路がないかどうかを確認しよう。

図 NYC.govの「Fire」のページ。

図 NYC.govの「Find a Firehouse」のページ。
NYC.gov: (上図のページで)「Find a Firehouse」(消防署を探す)と書かれたリンクを選んでも、次のページ(下図)にある「Find a fire house」(消防署を探す)というスペル違いの別のリンクを結局は選ばなければならないことにユーザーはイライラしていた。

5. 料金や価格が非表示

プロセスの前あるいはその最初にユーザーが知りたがるのは価格や購読料、手数料、追加料金である。いくつかのサイトでは、単に基本的な情報を見つけるのにも、ユーザーが複雑なインタラクションをこなす必要があった。たとえば、AARP(かつての全米退職者協会)のサイトでは、会員登録プロセスを開始しないと、会費がいくらかはわからなかった。だが、複雑なプロセスに取り組む前に、ユーザーは情報を見つけられるべきである。

6. ユーザーをマイクロサイトで立ち往生させる

サイトで、セクションや特定の種類のコンテンツのために派生的なサイトを別に作成するのなら、そうしたサイト上でユーザーを立ち往生させないように十分に注意する必要がある。今回の調査参加者の多くが知らないうちに新しいサイトやサブサイトに移動してしまっていて、メインサイトに戻るのに苦労していた。というのも、そのサブサイトには戻るための手段が用意されていなかったからである。ブラウザの戻るボタンを何度も押したり、サイトのURLを再度打ち込んで、親サイトに移動できた人もいたが、多くの参加者はサイトが切り替わったことにすら気づいておらず(親サイトと子サイトのルックアンドフィールがそっくりだったからだ)、さっきまで利用していたナビゲーションがなぜ消えてしまったのだろうと不思議がっていた。

独立したサブサイトを作る前にはよく考えたい。そして、もし、どうしても作るというなら、必要に応じて、ユーザーがすぐに親サイトに戻れるようにしておこう。

図 British Red Crossのメインサイト

図 British Red Crossのトレーニングに関するサブサイト
British Red Cross(英国赤十字社)のメインサイト(www.redcross.org.uk-上のスクリーンショット)と、そこでのトレーニングに関するサブサイト(www.redcrossfirstaidtraining.co.uk-下)は見た目がとても似ているし、それぞれのトップページに行くためのリンクのロゴやナビゲーションの最初のカテゴリー(What We Do)も同じになっている。応急処置のトレーニングコースを探していたユーザーはトレーニング用のサイトに移動した後、メインサイトに戻ろうとして、自分がどこにいるかわからなくなっていた。

7. 不適切な検索結果

ユーザーは最後の手段として、あるいは探しているものが何であるかが正確にわかっている場合には、自分の好みに関係なく、検索に頼る。したがって、シナリオがどうであろうと、サイトは優れた検索結果を提供して、ユーザーをサポートする必要がある。

残念ながら、サイト検索がいまだに大きな欠点になっているサイトは多い。ユーザーの入力したキーワードに合っていない検索結果を返すサイトもあれば、サイトコンテンツの一部しか検索しないのに、そのことをユーザーに公開していないサイトもある。検索結果のタイトルが不適切だったり、付いている要約が役に立たないと、リンクの後ろにあるコンテンツをユーザーは推測しなければならなくなる。そして、サイトの検索結果に散りばめられている広告はユーザーを驚かし、彼らをサイトから引き離してしまうだろう。

検索ログを定期的に見直し、ユーザーの検索行動や、検索エンジンのうまくいっている点、そうでない点について、もっと知るようにしよう。コンテンツをタグ付けしたり、Best Betsのようなサイト検索ツールの機能を利用して、個々の検索キーワードに対して、最適な検索結果を提供できるようにしよう。

8. 欠点のあるフィルターやファセット

フィルターやファセットとは通常、ユーザーエクスペリエンスを向上させるものであり、それによって、ユーザーは検索結果を自分の必要とするリソースや商品、コンテンツにまで正確に絞り込むことが可能になる。しかしながら、ファセットやフィルターを単に追加するだけで、ユーザビリティが必ず向上するというわけではない。これらのツールがしなければならないのは、実際のユーザーや実際のユーザーニーズをサポートすることだからだ。

ファセットとフィルターはユーザーのために検索領域を定義するものだが、条件が変われば、役に立つコンテキストは変わってくる。持続可能性についての先週火曜日のPowerPointのプレゼンテーションだけを探していた従業員には、ドキュメントの種類や日付だけでなく、トピックによる絞り込みも役に立つだろう。しかし、ECサイトの場合は、靴を買おうとしている客ならヒールの高さで、オーバーコートを買おうとしている客なら暖かさの等級で絞りこめるようにしておきたいところだ。

サイトのファセットやフィルターを1つにして、すべての場合に当てはめようとすると、不備が出るということだ。同一の基準や特徴がどんな種類のコンテンツにも当てはまるとは限らないからである。また、ユーザーの選択を限定してしまい、彼らがどちらか1つを選ぶしかない、ということにはならないように十分に気をつけよう。家具を買おうとしている客は青い椅子を探しているのかもしれないし、椅子を探しているのだが、色は青以外なら何でもいいのかもしれない。しかし、どちらの椅子を必要としている場合でも、彼らはサポートされるべきなのである。

コンテンツのタグ付けは正確におこなわれなければならず、関連する結果を確実にもたらす必要がある。たとえば、AARPサイトで鶏肉のレシピを探していたユーザーは、レシピの検索結果10個のうちの6個で鶏肉が使われていないことにかなり困惑していた。

図
Maplin.com: £50未満のMaplin製Bluetoothスピーカーをユーザーはすぐに見つけることができなかった。このサイトのフィルターを使って、彼らの探している価格の条件に合うアイテム全部を見る方法がなかったからである。その代わりに、彼らは£50未満に該当する複数の価格帯で検索キーワードを実行する必要があった。すなわち、ユーザーは1回に1つの価格帯を選択してから(たとえば、£40~£50 とか、£30~£40というように)、その価格帯ごとにどのアイテムが条件に合ったかを覚えておかなければならなかった。

9. ユーザーを情報で圧倒する

情報の整理の仕方が不適切だと、必要なものを探すのにユーザーが苦労することになる。壁のようにぎっしりあるテキストは興味をひく情報の流し読みを難しくする。情報が多すぎるページにはユーザーの注目を競い合うアイテムがいっぱいだからだ。

ユーザーはオンラインでは流し読みをするのであって、読むわけではない、ということは覚えておいてほしい。Web向けのライティングをし、興味をひく情報をユーザーが見つけ出しやすいようにしよう。そのためには、文や段落は短くして、箇条書きや見出しを活用し、キーワードは太字にするとよい。

図
The Headphone.comのShure SRH440 Studio Headphonesの商品説明では良質なコンテンツが提供されている。しかし、その情報の多さと表示の仕方(幅の狭いカラムに数個の長い段落)のせいで、このヘッドホンの、重要で差別化している特長を流し読みで見つけることが難しくなっていた。

10. 目に見えないリンク

以前から、我々の実施しているユーザビリティ調査では、広告に類似している、あるいはページの中で広告がよく置かれる場所にあるコンテンツは、ユーザーから無視されたり、見落とされることが多い、ということがわかっていた。そして、この問題は今も存在しているが、コンテンツが実際の広告のそばに表示される場合には、さらに悪化してしまう。

リンクに枠線や背景色、グラフィックのようなデザイン要素をさらに追加することで、そのリンクが目立つことになるとサイトデザイナーは考えたりもするが、結果は反対になることが多い。つまり、リンクの周りのデザインに凝れば凝るほど、ユーザーに広告と間違えられる可能性は増す。

図
Pitfield Londonのページの右カラムには営業時間についての情報やメニューへのリンクが入っているが、その下にはコーヒーカップのアニメーションと、ほかのサイトにつながっている広告が縦に並んでいる。そうした配置や表示のせいで、ユーザーはこのページでカフェのメニューを見つけ出すのに苦労していた。また、このサイトは「Pitfield London in the Press」(Pitfield Londonのメディア掲載情報)へのリンクもバナーのようなデザインにしている。

進歩はしている。だが、さらに進歩が必要だ。

不適切なデザインのWebサイトを作りたい人などいないことは間違いない。では、こうした問題は長い間、よく知られているにもかかわらず、なぜ解決しないのだろうか。その質問に対して回答をしようとすると、本が1冊書けそうだ。こうした間違いのいくつかは、組織固有の、UX戦略についての深刻な失敗を反映している可能性があるからである。たとえば:

  • サイトの情報階層の問題は組織の構造や企業内の政治に関連している可能性がある。
  • 部門ごとにお互いのことを意識せずに、また、包括的なコンテンツ戦略に従わずにコンテンツを作っている場合に、コンテンツの課題は発生する。
  • コンテンツマネジメントシステムがうまくいっていなかったり、コンテンツのタグ付けに不備や漏れがあったり、検索ツールが不十分であることが、不適切な検索結果の原因である可能性がある。

だが、こうした問題の背後にある理由というのは、その問題を修正することに比べればさほど重要ではないだろう。そして、上に挙げられた問題の全部とは言わないまでもその多くは、Webサイトの開発プロセスにユーザー調査やユーザビリティテストを加えて、そうした調査の結果に注意を払えば、すぐに特定可能だ

Webサイトというのは決して完璧になることはない。完璧なサイトなどというものはないのだ。修正しなければならない入力欄、編集しなければならないコンテンツ、あるいは決定しなければならないナビゲーションカテゴリーなどが、常に何かしら存在するものだからだ。しかし、修正が必要なものが何であるかを知ることは、正しい方向に向かうためには絶対に必要なことである。

また、ユーザー調査をおこなう際には、過去の調査結果も残しておこう。今から5年もすればデザインの嗜好は変わるが、そうした過去の結果があれば、同じようなユーザビリティ関連の重要な間違いを2回も3回も4回も繰り返さないで済むかもしれないからだ。

自分たちのユーザーとビジネスに効果のあるWebサイトの作り方について、さらに詳しくは、我々のトレーニングコース「WebページのUXデザイン」と「情報アーキテクチャ」にて。

動画

今回の調査結果をヤコブ・ニールセン博士が紹介している(21分の動画):

公開:2017年2月23日(原文:2016年10月30日)
著者:Amy Schade, Yunnuo Cheng, and Samyukta Sherugar
原文:Top 10 Enduring Web-Design Mistakes

分類キーワード