Webデザインの間違い・トップ10

ここで挙げるのは、ユーザーに対する残虐行為の、もっとも酷いものトップ10だ。極悪なユーザビリティは、かつてより少なくなったものの、Webデザインの悲劇やHTMLホラーはいまだに多い。

Top 10 Mistakes in Web Design
by Jakob Nielsen
1996年5月1日

1996年以来、私は多くのWebデザインの間違いトップ10を作ってきた。全リストへのリンクは、この記事の最後に載せてある。この記事は、全リストの中からもっとも酷いものを集めた、ハイライトだ。（2004年更新）

1. 質の悪い検索エンジン

マンガ - 男が「Honalulu」で検索するが、何も出てこない。- 女：「もういいわ、あきらめて実家のお母さんのところへ行きましょう」
必要以上に一言一句にこだわる検索エンジンは、ユーザビリティを低下させてしまう。入力ミスや、単数／複数の違い、その他の検索語の揺れに対応できないものが、これに該当する。こういった検索エンジンは、特に高齢者のユーザーにとって使いにくいものになるが、誰にとっても問題ではある。

これに関連して、検索結果の優先順位を、文書の重要度ではなく、キーワードの出現回数だけで判断する検索エンジンも問題だ。リストの最初に「本命」が表示されるようになっていれば、かなりすばらしい。自社製品の製品名など、重要なキーワードに関しては、特にそうである。

検索は、ユーザーにとってナビゲーションが機能しなかった場合の最後の手段だ。アドバンスト検索が助けになる場合もあるが、一般的には簡単な検索がもっとも有効で、検索機能は簡単なテキストボックスとして表示されるべきだ。なぜならユーザーは、検索機能とはそのようなものだと思っているからだ。

2. オンライン閲覧用PDF

ユーザーは、ブラウジング中PDFに遭遇するのを嫌う。流れを止めてしまうからだ。標準的なブラウザのコマンドが機能しないため、印刷や保存といったことも困難だ。レイアウトは、多くの場合、紙媒体用に最適化されていて、ユーザーのブラウザのウィンドウサイズと一致していることは、まずない。滑らかなスクロールとはオサラバ、小さなフォントこんにちは、ということになる。

最悪なのは、PDFがほかのページと無差別でありながら、ナビゲーションしづらいコンテンツの塊だということだ。

PDFは印刷に適していて、マニュアルや、その他の印刷が必要な大きなドキュメントの配布にはとてもよい。その用途にだけ用いるようにして、それ以外の画面上で読まれなければいけない情報は、本物のWebページに置き換えよう。

>PDF がオンライン閲覧に適さない理由の詳細

3. 訪問済みリンクの色を変えない

訪問済みのリンクを把握することは、現在いる場所を理解する手助けになる。なぜならそれは、今までの経路を示すからだ。過去がわかれば、終着点である現在位置もわかりやすくなる。そして、過去と現在の場所がわかれば、次にどこに行くのかという判断を行いやすくなる。リンクは、このナビゲーションを行う上で重要な判断材料になる。過去に訪問して、役に立たなかったリンクは、選択肢から除外できる。反対に、過去の訪問で役立ったリンクを再びたどることもあるだろう。

一番大事なのは、過去にどのページを訪問したかがわかれば、ユーザーは意図せずに何度も同じページを開くことを避けられることにある。

これら有益な効果は、1つの重要な条件が必要となる。ユーザーが訪問済みと、訪問済みでないリンクを見分けることができるよう、サイトが異なる色でそれらを表示するように設定している場合のみだ。訪問済みのリンクの色が変わらない場合、ユーザビリティテストでユーザーはナビゲーションで迷い、同じページを意図せずして何度も繰り返し開くことが多く見られる。

>リンク色の変化がユーザビリティに与える影響

>リンクの表示方法のガイドライン

4. 流し読み不可能なテキスト

マンガ - 「利用規約」の膨大な法律文に押しつぶされる男
一面を壁のようにテキストで埋めてしまうと、インタラクティブ体験にとっては致命傷となる。ユーザーは圧倒され、退屈し、読むのが苦痛になる。

印刷用でなく、オンライン向けの文章作法に従おう。読む気を起こさせ、斜め読みしやすいものにするためには、よく知られたいくつかのコツがある。

小見出し
箇条書き
キーワードの強調
短い段落
逆ピラミッド型叙述
シンプルな文章スタイル、そして
過剰なマーケティング抜きの簡潔な言葉づかい

5. 固定フォントサイズ

CSSスタイルシートは、不幸にもブラウザのフォントサイズ変更ボタンを無効にして、固定フォントサイズを設定できる力を、Webサイトに与えてしまっている。それを実践している約95％のページが、細かすぎるサイズに固定してしまい、40歳以上の大半の人の可読性を、著しく削いでしまっている。

ユーザーの好みを尊重し、必要に応じてテキストのサイズを変更できるようにしよう。また、フォントサイズは、絶対的なピクセル数ではなく、標準サイズからの相対値を指定すること。

6. 検索エンジンでの見え方が悪いページタイトル

検索は、ユーザーがWebサイトを発見する、もっとも重要な手段だ。検索はまた、ユーザーが各Webサイト内で目的のページを見つけるための、もっとも重要な手段のうちの1つだ。新しいユーザーを検索エンジンの検索結果から呼び寄せるのも、既存ユーザーの探している特定ページを見つけ出す手助けになるのも、質素なページタイトルが主な役割を担っているのだ。

ページタイトルは、HTMLの<title>タグの中に書かれ、検索エンジンの検索結果（SERP）中では、クリック可能な見出しとして使われる場合がほとんどだ。検索エンジンは一般的に、タイトルの最初の66文字程度（訳者注：全角文字で33文字程度）を表示しているのが一般的で、まさにマイクロコンテンツなのだ。

ページタイトルはまた、ユーザーがサイトにブックマークを入れたとき、お気に入りのデフォルト名にもなる。ホームページには、企業の名前と、そのサイトの簡単な説明を入れよう。”The”や”Welcome to”のような言葉で始めてはいけない。アルファベット順に並び替えられたとき、”T”や”W”で並び替えられたいのであれば別だが。

ホームページ以外では、明確にそのページに載っている情報を説明する言葉で始めよう。ページタイトルは、ブラウザのウィンドウタイトルとしても使われるため、Windows環境ではタスクバーのラベルとしても使われることになり、コンピュータの扱いに慣れたユーザーたちは、ページタイトルの最初の1から2語を手がかりに、複数のウィンドウを行き来できるようになる。すべてのページタイトルが同じ言葉で始まっていると、複数ウィンドウを使いこなすユーザーたちにとって、著しくユーザビリティの低いページになってしまう。

ホームページのタグラインも関連した問題だ。タグラインもまた、短くわかりやすい説明でサイトの趣旨を説明しなければならない。

7. 広告に見えるようなものすべて

選択的注意というのは、とても強力なものだ。なんらかのゴールを目指してナビゲーションしている際に、その障害になる邪魔な広告は無視するという能力をWebユーザーたちは身に付けた。（テキストのみの検索エンジン広告は例外。）

不幸にも、本来のデザイン要素であるにも拘わらず、それがよくある広告の形式に似たものだったりすると、ユーザーは、これも無視してしまうのだ。結局、何かを無視するということは、それがいったい何なのか、いちいち確かめないということだ。

このため、広告と似たように見えるデザインは、何であれ避けるのがベストだ。広告のスタイルが変われば、このガイドラインが示す意味も変化する。とりあえず、今のところはこういったルールに従うべきだ。

バナーを無視するということは、すなわち、その形態や、ページ中の配置位置がバナー広告のように見えるものには、ユーザーは目を止めないということだ
アニメーションぎらいのユーザーは、ブリンクしたり、光ったりするテキスト、あるいは、その他の攻撃的なアニメーションが置かれたエリアが目に入らない
ポップアップ追放家とは、画面に何が表示されるか待つまでもなく、子ウィンドウを閉じて回るユーザーのこと; 時には酷い悪態をつきながら（この仕返しは、Geocitiesに対してはある種の勝利を収めた）。

8. デザインの慣習から外れる

一貫性を保つことは、使いやすさを向上するためのもっとも重要な原理の1つだ: 物事がいつも同じように動いていれば、何が起こるかいちいち心配する必要はない。反対に、それ以前の経験を元にして、次に何が起こるかを予測することができるだろう。アイザック・ニュートンの頭上でリンゴを放せば、彼の頭に落下する。それでよいのだ。

期待通りの結果が得られ、システムをコントロールしているという実感が得られれば、その分、彼らに気に入ってもらえるだろう。彼らの期待を裏切れば、その分、彼らは不安になるだろう。おっと、このリンゴを放したら、突然トマトに変身して、1マイル上空に飛び上がるかもしれない。

JakobのWebユーザーエクスペリエンスの法則では、「ユーザーはそのほとんどの時間を他のサイトで過ごしている」としている。

これは、ユーザーの期待値が、他のサイトで一般的に行われていることに基づいて形成されるということだ。そこから外れた動作をすれば、そのサイトは使いにくくなり、ユーザーが去ってしまうことになる。

9. 新しいブラウザウィンドウを開く

新しいブラウザウィンドウを開くというのは、訪問するやいなや、お客様宅のカーペットに灰皿の中身をぶちまけて歩く、真空掃除機のセールスマンに等しい。勝手にウィンドウを開いて、私のモニタを汚染するのはやめてもらえないかね、頼むから（特に現在のオペレーティングシステムは、おそまつなウィンドウ管理機能しか提供していないのだから、なおさらだ）。

新しいブラウザウィンドウを開けば、理論的にはユーザーがサイトを離れてしまうことはないとデザイナーは考えるようだ。ユーザーのマシンを勝手に操作するということ自体、そこに敵意あるメッセージを感じ取れるわけだが、それを別にしても、以前いたサイトに戻るためのもっとも当たり前のやり方、すなわち戻るボタンを使って元に戻れなくなるわけで、戦略的にも自己破壊にしかなりえない。ユーザーは、新しいウィンドウが開いたことにすら気づかないこともある。特に小さなモニタを使っていて、ウィンドウを全画面サイズに広げているとそうなりやすい。ユーザーが元に戻ろうとしても、戻るボタンがグレーになって押せなくなっているので混乱するというわけだ。

リンクが期待通りに動かないと、そのシステムは理解しにくくなる。リンクは、今見ているページが新しいコンテンツに入れ替わるという、シンプルなハイパーテキスト参照にしておくべきだ。ユーザーは、勝手にポップアップするウィンドウを嫌う。新しいページで開きたい時は、ブラウザの「新しいウィンドウで開く」コマンドを使えばいいのだ。もちろん、このためには、リンクが、ブラウザの標準的な動作を乗っ取るようなコードで書かれていてはダメである。

10. ユーザーの疑問に答えていない

マンガ - 女性（自動車販売店にて）: 「オートマだと、いくらになるの？」 - ダメなセールスマン: 「ヒントをさしあげましょう - 偶数です…」
ユーザーはWeb上で、とても高い目的意識をもっている。彼らがサイトを訪問するのは、何か達成したいことがあるからだ。もしかしたら、製品の購入までをも、考えているかもしれない。Webサイトの究極の失敗は、ユーザーが求めている情報を提供しないということだ。

時には、必要な情報がそこにないというだけの単純な理由で、売りそこなうこともある。なぜなら、具体的な情報が載っていなければ、その製品やサービスが彼らのニーズに合わないと、推測するしかないからだ。それ以外にも、具体的な情報が分厚いマーケティング用のたわごとや、つまらないスローガンの層に埋もれてしまっていることがある。ユーザーにはすべてを読む時間などない。そのようにして見つからない情報は、載っていないのとほぼ等しいのだ。

ユーザーの疑問に答えていない最悪の例は、価格を表示しないことだ。B2Cのeコマースサイトでこの間違いを犯すところはないはずだ。だが、B2B ではこれが蔓延している。「エンタープライズソリューション」をうたいながらも、その規模が100人を対象としたものなのか、10万人なのかすらわからないところがほとんどだ。価格とは、顧客にとってその提案を理解する上でもっとも大事な情報であり、これが提示されていなければ、読む人は行き詰まり、製品ラインを十分理解できなくなる。私たちの手元には、「値段はどこにあるんだ？」と言いながら頭をかきむしっているユーザーのビデオが、いやというほどある。

B2Cサイトですら、カテゴリーページや、検索結果といった製品リストでは、価格を表示するのを忘れていることが多い。いずれの場合も価格がキーになることはわかっているはずだ。製品を見分け、もっとも見込みの高いものをクリックする上で、必要不可欠な情報だ。