だめなデザイン要素が標準になる場合
ウェブデザインは簡単だ。特定のページ要素をどうデザインしたらいいか考える時には、もっとも訪問者の多い20サイトを見て、彼らがどんなやり方をしているか見ればいいのだ。
- 大手サイトの90％以上が、ある一定のやり方を採用しているなら、それはデファクトスタンダード（事実上の標準）であり、これには従わなければならない。標準と違ったデザインを採用してもいいのは、ユーザビリティ測定の結果、そちらの方が100％優れていると証明できた場合だけである。
- 60～90％の大手サイトが、ある一定のやり方を採用しているなら、それは強い慣習と考えるべきだ。そして、ユーザビリティ測定で50％以上優れているという結果が得られない限りは、これと違ったデザインを採用してはならない。
- そのやり方を採用しているのが、大手サイトの60％以下なら、まだ支配的な慣習は成立していないので、違ったやり方を試してみてもかまわない。そうはいっても、少なくとも20％以上の大手サイトで採用されたオプションがいくつかある場合には、これらよく知られたデザインのうちから、いずれかを選択するべきである。ユーザビリティ測定の結果、そちらの方が少なくとも25％以上優れているという結果が出ない限りは新しいデザインは採用せず、これらの選択肢から最良のものを選ぶべきだ。
ただし、最善を尽くしたとはいえ、このリストに掲げたパーセンテージは私の推量に過ぎない。現在のところ、一貫性理論についての調査はまだ非常に少ないので、あるデザイン要素が慣習とか標準と言えるレベルに達するには何サイト必要か、正確な数字を出すことはできない。同様に、2段階の期待にそむくことで、どれほどユーザを害することになるかについても正確にはわかっていない。ただ、何らかの形で傷つけるということだけは確実だ。
このため、単体で見ると今までのものより優れていると思われるデザインであっても、私は慣習の方に従うことをお勧めする。実際、どんなサイトであっても、それ単体で見るということはないからだ。ユーザは、あなたのサイトに対して、すでに慣れ親しんだものと同じ動作を期待する。
情報アーキテクチャとタスクデザイン： 標準はない
もちろん、本当はウェブデザインというのは難しい。その主要な課題が、情報アーキテクチャとタスクフローに関わっており、このいずれも、標準化できないからである。サイトによってこの両者は実に様々である。この両者は、そのサイトが解決しようとする情報や、問題の特性に関連しているからだ。
情報アーキテクチャのある側面は、デザイン上の慣習に関係してくる。たいていの企業サイトには製品カテゴリーと、当社についてカテゴリーがある。さらに当社についてカテゴリーの中には、投資家向けの情報と採用情報が含まれており、同様に、企業の経営や歴史に関する一般的情報も入ってくる。企業施設への地図、住所も当社について以下に見つかるだろう。だが、これらは本当の意味での慣習とはいえない。なぜならコンタクト情報という特別のエリアを設けて、異なった情報アーキテクチャを採用しているサイトも多いからだ。住所を知りたい時に当社について以下を探すユーザは多いから、たとえ、その情報がそこにはない場合でも、当社についてからコンタクト情報への相互参照リンクを入れておくべきだ。
デザイン慣習の例
だめなウェブデザイン慣習の元祖は、ハイパーテキストリンクの色を青にするという決定である。他の色の方がましだったろうし、わずかながら、リンク付きテキストの読解スピードを向上させることができたはずだ。ページ上で最も重要なテキストが、可読性を妨げるような色に決められたのは、嘆かわしいことだ。
ウェブのデザインを一からやり直せるのなら、リンクカラーは青以外にすることを薦めるだろう。だが実際にウェブサイトのデザインをする際には、今までのものを踏襲していくしかない。そこで、私は相変わらず、標準的なリンクカラーに手を加えることはやめた方がよい、というしかないのである。
- ウェブでテキストを青くすることは、すなわち「ここをクリック」という意味になる。まだ訪問していないリンクを青のままにしておくことで、何ができるのか、ということはユーザに間違いなくわかる。ページ上で何ができるか知っていることは、時間の節約になる。ハイパーテキストリンク付きの単語を読み取る時間が数ミリ秒遅くなったとしても、これによって節約できる時間の方がはるかに上回る。
- さらに重要なのは、未訪問のリンク（青）と未訪問のリンク（紫）が区別できることは、ユーザがウェブサイトの構造を把握し、ナビゲーションの履歴を理解する上で役立つ。この色を変えていると、同じページを何度も何度もクリックするユーザがよく出てくることを私たちは観察している。彼らには、そのページがもう訪問済みだということがわからないからである。混乱が深まり、ナビゲーションには物理的に遅れが生じ、正しいページにたどり着ける確率が低くなるということは、すべてユーザビリティにとって深刻なマイナスになる。これらはすべてデフォルトのリンク色を変えたことによって生じるのだ。
ナビゲーションタブ
ここ2年ほどの間に、スクリーン上部にタブを水平に並べ、情報アーキテクチャの主要エリアを示すサイトが増えてきた。原理的にはこれは間違ったデザインであり、タブメタファーの誤用である。
タブは、本来、単一の情報オブジェクトの見方を異なった切り口にすばやく切り替えるために用いるべきものだ。例えば、あるサイトでは、製品記述の情報アーキテクチャを標準化して、概観、詳細、拡大写真、その他、いくつかの切り口を用意しているとしよう。これらの選択肢を切り替えるために、タブは非常に向いている。これならメインの文脈を乱すことはないし、サイト内でずっと同じ場所にいるという感覚を与えることができる。
ユーザがサイト内の特定エリアに奥深く進んでいくにつれ、タブはその意味を失っていく。それを使って、ユーザがサイト内の別の場所に移動しているにも関わらず、意味のあるやり方で文脈を維持できないのならそうなってもしかたない。こういったジャンプは単なる標準的なナビゲーションであり、他へのリンクを並べた通常のリストを用いるべきなのだ。
タブは、無関係な地点へのナビゲーションではなく、異なった（だが関係のある）切り口を切り替えるために用いるべきだという意見を変えるつもりはない。だが、このままタブの誤用が広まれば、残念ながら、タブが特別なデザイン要素であるという理解は、ユーザの間でほどなく薄れてしまうだろう。
サイト内のメインセクション移動という（誤った）意味でタブを用いているサイトは、まだ50％未満だと思う。ゆえに、タブの使い方を正しくするよう望んでいるし、サイトの主要エリアを表すのには、別の視覚化手法を用いるべきだと思う。だが、これは負け戦になるかもしれない。タブの誤用をするサイトがどんどん増えれば、1年やそこらで、この持論には改訂を加えなくてはなるまい。
左寄せのナビゲーションレール
（確か1996年だったと思うが）CNETから始まった「黄熱病」デザインスタイルは、あまりにも多くのサイトに広まったため、かなり強固な慣習となっている。ページの左側に縦に色帯を引き、ここにメインのナビゲーションリンクを並べるというやり方だ。
私は、このデザインアプローチにもあまり関心はしなかった。なぜなら、色付きのナビゲーションレールが、画面の20％を占めてしまうからだ。たとえ、ページの一番下までスクロールしても、これは変わらない。ウェブ上でコンテンツを求めるユーザは、ナビゲーションに対して二次的な興味しか持たない。
おもしろいことに、CNET自体は1999年に「黄熱病」デザインをやめ、現在では、ナビゲーションリンクをページ上部に集めるデザインを採用している。このおかげで残りの画面はコンテンツのために用いることができる。この新しいデザインの方が私は好きだ。
とはいえ、色つきのナビゲーションレールを使ったサイトはまだたくさんあり、私はこれをインタラクション上の慣習と見なしている。ページの端に縦に引かれた色帯を見れば、ユーザは何をすればいいかがわかる。ピクセルの無駄遣いかもしれないが、たぶんこれはユーザの役に立つだろう。
はっきりしているのは次の2点だ。まず、ナビゲーションレールは、コンテンツと見分けるために、何らかの形で色の付いた背景になっていなければならない。さらに、それはページの左側になくてはならない。ユーザビリティ面からいうと、ナビゲーションレールはページ右側の方がよかった。理由はいくつかある。
- Fittsの法則によれば、マウスの動きは最小限に抑えた方がいい。スタート地点に近いほうが、ターゲットをすばやくクリックできる。ナビゲーションレールとスクロールバーは両方ともよく使うものなので、ウィンドウをはさんで正反対の位置に配置するよりは、隣同士に配置した方がユーザの時間の節約になる。
- 新しいウェブページを見るとき、ユーザは通常、まずコンテンツを見る。だから、（左から右へと読んでいく文化圏に属しているユーザにとっては）ウィンドウの左端からコンテンツが始まっていた方がいい。コンテンツが済んだら、次にどこへ行こうか決めるためにユーザの視線は自然に右側へ移る。反対に、ナビゲーションレールを左側に持ってくると、コンテンツエリアに目を通す前に、ユーザは、まずナビゲーションを飛び越さなければならない。
まったく白紙から始めるのなら、ナビゲーションレールを左側ではなく、右側に持ってくるだけで、サイトのユーザビリティを1％やそこら向上できるはずだ。だが、標準から外れることで失うものの方が、まず間違いなくはるかに大きい。混乱を招き、スムーズなナビゲーションを行う妨げになるのだ。
パンくずリスト
ページ上部に、パンくずリスト（breadcrumb trails）のような階層構造の履歴表示をつけるウェブサイトが増えてきた。今のページが親ノードとどういう関係にあるかを表し、ユーザが、ワンクリックで数レベル階層を飛び上がったりできるようになる。
パンくずリストは、階層的な情報アーキテクチャを採用したサイトでしか役に立たない。だが、その種のサイトではナビゲーションの役に立つ。もっと多くのサイトが採用すれば、ユーザはこれを利用することに慣れ、さらに役立つようになるだろう。
パンくずリストにおいて、階層レベル間の移動を表示するための標準的な手法は存在しない。この4年間、私のサイトでは矢印を使っている。その前は、現在のCNETのようにコロンを使っていた。YahooやZDNetは、両方とも>を使っている。他にはスラッシュを使うサイトもある。標準は存在しないし、ある記号がその他のものよりはるかに優れていると信じさせるような理由も存在しない。
60％以上のサイトである特定の記号が採用されたなら、間違いなく私はそれを使うよう、お勧めするだろう。今のところ、「 : 」「 > 」「 / 」は、いずれも甲乙つけがたい。だが、これ以上、新たな記号を持ち込むのはやめよう。例えば、縦棒「 | 」は、選択肢を表すために取っておくべきで、階層段階を表示するために使うべきではない。
1999年11月14日
