ページ内リンクの使用は避けよう
ウェブ上のユーザたちは、ハイパーテキスト・リンクは別のページを読み込むべきだという、明確な思考モデルを持っている。ページ内リンクはこの思考モデルに反するため、混乱を招く。
最近、同じ日に同じことについて 2 つの質問をされた。普通、このようなことが起こるということは、この話題にはもっと幅広い関心があるということなので、これについてのコラムを書こうと決めた。
質問その 1：
今、リンクをクリックして「名前付きアンカー」（同一ドキュメント内の別の場所）に移動する、「ジャンプ・リンク」についての議論に関わっています。私は、ジャンプ・リンクが新規ウィンドウを開くリンクと同等に、あまりよくないものだということを、貴方の書いた 2 つの記事で裏付けようとしています。
質問その 2：
新規ウィンドウを開くときのレコメンデーションを、いくつか明確にして頂けないでしょうか。
- 「リンクが期待通りに動かないと、そのシステムは理解しにくくなる。リンクは、今みているページが新しいコンテンツに入れ代わるという、シンプルなハイパーテキスト参照にしておくべきだ。ユーザは、勝手にポップアップするウィンドウを嫌う。」（2002年 ウェブ・デザインの間違いトップ 10、第 6 項）
- 「一貫したインタラクションという観点からも、新しいブラウザ・ウィンドウを開くことの誤りは証明できる: リンクをクリックしたら、今までのペ ージと入れ代わりわりに新しいページが、同じブラウザ・ウィンドウ内に表示される。これが標準的な反応だ。それ以外の反応は、すべてのユーザの期待を裏切ることであり、ウェブの使い方に関して、彼らの自信をくじくだけだ。」（新・ウェブデザインの間違いトップ 10、第 3 項）
どちらのレコメンデーションも、現在のウィンドウに別のコンテンツを読み込むことについて言及しています。これは同一ページに載っているコンテンツへのリンクが、ユーザたちを混乱させてしまうということでしょうか？または、言い方を変えれば、リンクは常に別のページを、既存のウィンドウに読み込むべきだと、いうことでしょうか？
どちらの質問も、私が行った、なぜリンクが新規ウィンドウやポップアップ・ウィンドウを開くのが悪いのかという分析についてのものだ。また、両方ともこの論理がページ内リンクにも当てはまるのではないか、というものだ。
ページ内リンクはユーザの思考モデルに反している
ウェブサイトでページ内リンクは、PDF ファイルがよくない理由や、予告なしに電子メールソフトを起動してしまう mailto リンクが、2002 年のデザイン上の間違いトップ 10 に選ばれたのと同じ理由で、よくない。
ユーザたちは、リンクをたどるときの明確な思考モデルを形成済みで、それはいくつかの要素に分けることができる。
- リンクをクリックすることは、別の場所に移動する。
- クリックすると、前にみていたページは消える。
- 新しく読み込んだページはウィンドウに読み込まれ、前にみていたページと入れ代わる。
- まずは、新たに読み込んだページの最上部がみえる。
- 戻るボタンは、以前のページに戻る。
ほとんどのクリックがこのような動作をするため、ユーザたちは、ウェブがこのように機能するだろうという、強い期待値を持っている。論理的で、簡単な思考モデルだ。
ユーザたちの思考モデルの全 5 要素すべてにページ内リンクは反している。
- ページ内リンクは、新たな場所に移動する代わりに、ウィンドウをスクロールさせる。これはユーザを混乱させることになる。新しい情報を得られると思っているのに、クリックする前に既にスクロールしてページ全体をみていた場合、既にみたことのあるコンテンツを再びみることになるからだ。
- 前のページは、ウィンドウに残ったまま消えない。しかしながら、ユーザたちは違うページをみていると思いこむため、「新たな」情報が既にみた情報とどこが違うのか探し始める。明らかに無意味な作業だ。
- 異なるページがウィンドウに読み込まれない。同じデータの違う部分が表示されているだけだ。
- ページの最上部が表示されないで、典型的には、ナビゲーション・バーなど、普通はページ上部にあるデザイン要素がない、ページの中間部分のどこかに移動してしまう。
- 戻るボタンをクリックしても、前のページに戻れない。同じページの中で、以前スクロールされていた場所に戻るだけだ。これは、戻るをクリックする前に、ページの上部にスクロールしていたユーザにとっては 2 重に混乱させる原因になる。
ページ内リンクと戻るボタンのクリックを数回体験すると、ほとんどのユーザは、サイト内でどこにいるのか、完全な混乱状態におちいる。私たちの調査では、典型的にページ内リンクは、節約する時間よりも、遙かに多い時間を無駄にすることがわかった。ユーザたちが、同じコンテンツの中を何度も行ったり来たりして、同じものを繰り返し読んでしまうことに、なるからだ。
ページ内リンクが使えるとき
混乱を避けるために、彼らの期待値とは異なるということを、事前に伝えなければいけない。たとえば mailto リンクが、別のページに移動するのではなく、電子メールソフトを起動するものであることを明確にしていれば、使っても構わない。これは、リンクのフォーマット（”donald@duck.com“）や、言葉遣い（「顧客サポートへ電子メールを送る」）で示すことができる。
同じように、ページ内リンクを使わざるをえない場合も、それを明確にしておかなければいけない。たとえば、「リンクをクリックすると、ページ内の該当するセクションにスクロールします」といった短い注意書きを書き足すなどだ。
ユーザへの警告を記述することを前提として、ページ内リンクを使うことができる場面は 3 つ考えられる。まず、長いアルファベット順に並べた一覧だ。アルファベット文字をページ上部に並べて、各文字を一覧の中で該当する場所にリンクすることができる。2 つ目は、よくある質問の一覧（ FAQ ）だ。質問の一覧をページ上部に記述し、各質問をその答えにリンクする。3 つ目は、その他いくつか、ページの最初の部分に、ページの下方向の該当する場所にリンクする目次を設けることができる場面だ。
上記 3 つの例外は、ページ上部に長いコンテンツの要約を記述し、探している項目にユーザが移動できるようにリンクするという、同じフォーマットを共有している。
これらの場面であっても、可能であればページ内リンクを避けるのがベストだ。たとえば一覧の長さを、簡単にスクロールして見渡せる程度に短くするなどだ。とても長いページでなければ、ページ内リンクが招く混乱に値するだけの時間節約は望めない。
実際の例を挙げておく。私たちは最近、アメリカ 50 州の情報一覧を 1 ページに記述したウェブサイトをテストした。ページ上部でそのページは、アメリカ地図を表示し、住んでいる州をクリックするようにという説明書きがあった。
まず、地図をクリックすることによって、州や国を選択させること自体が間違いだ。カリフォルニアなど、広い州に住んでいる私たちはよいが、ロードアイランドやコネチカットに住んでいる人たちは哀れなことになる。（たとえばヨーロッパ地図の中から国を選ばせる場合も同じだ。ドイツ人だったらよいが、ベルギー人には理想的とはとてもいえない。）
ユーザたちが、特定の州をクリックできるだけの十分安定した手の持ち主だったとして、ページが正しくスクロールしたとしよう。もし、ユーザがアルファベットの中程の州（たとえば New York ）をクリックしたとすると、その州に関する情報はウィンドウ上部に表示され、探していた情報を簡単に、みつけることができるはずだ。だが不幸にも、ユーザが Wisconsin をクリックした場合、普通は Tennessee が画面上部に表示される。なぜなら、それがそのページの中で、スクロールできる限界だからだ。これは混乱を招く。「 Wisconsin をクリックしたのに、Tennessee と書いてあるぞ。」というわけだ。
この例の場合、各州の情報の項目数がそれほど多くなかったため、ユーザにスクロールさせて、州を探させるほうがよかったのだ。もちろん、Wyoming の人にとっては面倒くさいことになるだろうが、実際には地図をクリックするための標準的でない説明を読んで理解するだけの時間よりも、スクロールにかかる時間は短いのだ。結局の所、そのページに辿り着くまで、ユーザたちは「州ごとの○○情報」といったリンクをクリックしてきたのだ。州の一覧があることは予想できるし、リストの中で住んでいる州の探し方もわかっているはずだ。
異なるページの名前付きアンカーへのリンク
名前付きアンカーを使い、異なるページの、特定の場所にリンクすることは、同一ページ内でページ内リンクを使うのと同じくらい、よくないことだ。
異なるページの名前付きアンカーにリンクする場合、ユーザの思考モデル 5 要素の内、4 要素は守ることができる。異なるページに移動し、前のページは消える。異なるページが読み込まれるので、戻るボタンを押せば、前のページに戻る。残る 1 つの要素だけが問題だ。一般的にユーザたちは、ページの最上部ではなく、ページの中程に投げ出される。
思考モデルの 20 ％にしか反していないほうが、よいことは確かだが、ユーザの期待値に反するのは、よいことではない。ユーザをページの真ん中に投げ出してしまうのは、ユーザビリティの問題を引き起こす。なぜなら新たなページに入ってきたとき、ユーザたちは自分の現在地を理解する必要があるからだ。ページの見出し、説明書き、ナビゲーション用の機能は、それを理解するためには不可欠なコンテクストとなる。
それにしても、名前付きアンカーの誘惑は強い。たとえば、このページの上のほうでも、他の記事の中で書いたことに言及しているためにリンクを張っている。2002年 ウェブ・デザインの間違いトップ 10 についていえば、ある場所では第 6 項に言及し、別の場所では第 10 項に言及している。これら 2 項目に直接リンクするほうが、都合がよいかもしれない反面、直接リンクすることには別の欠点がある。
たとえば第 6 項に名前付きアンカーを付けて、そこにリンクを張ったとする。この項はリンクに埋め込まれた JavaScript についての項だ。もちろん、この項が最初に目に入るだろうが、下方には、めったにない質問を FAQ に入れることについて書かれた第 7 項がみえる。このような文脈のつながりは、JavaScript の話題としては不自然だと思わないだろうか。これが、そのページが何について書かれているのか知らないユーザを、ページの真ん中に放り出してしまうことによる代償だ。
このような場合のベストな解決法は、すべてのリンク先を、個別に分かれたページとして作成することだ。
まとめると：ウェブ上でのハイパーテキスト・リンクに対するユーザの期待値を裏切ることになるため、同一ページ内での名前付きアンカーを使うのは避けたほうがよい。リンクは別のページを表示するべき。この思考モデルから外れる場合は、説明書きを加える必要があり、その場合も、標準的でないインタラクション技法を熟知するのに費やす時間よりも多い時間が節約できなければならない。
読者コメント
AJAX 用のリンク、「最初に戻る」、障碍者ユーザのためのスキップ・リンクについてのコメントの補足記事。（※英語）
2006 年 2 月 21 日
