ページから自ページのリンクを削除してユーザビリティを改善する

ホーム > Postal Search Ajax API with jQuery > DOM Manipulation

Jakob Nielsen はウェブ・ユーザビリティ顧客を逃がさないサイトづくりの秘訣やホームページ・ユーザビリティ顧客をつかむ勝ち組サイト32の決定的法則の中で、ホームページのユーザビリティを保証するガイドラインの1つとして、ページの中から自ページにリンクしない というのがあります。

トップページであるにも関わらず HOME ボタンやロゴのリンクがあるなどがその代表例です。ページの中から自ページのリンクがあると、利用者は自らの立ち位置がわからなくなり、混乱するというのが趣旨のようです。

このことはよく理解していますが、ホームページを作成する過程で、ヘッダ、フッタ、サイドバーなどページで変化がない領域は、テンプレートを使って手間を削減したりするので、各ページで異なるリンク先を指定したり、しなかったりするのは、技術や予算の面から現実的じゃないというところに落ち着きます。

ホームページのユーザビリティを改善できると知りながら、何も手を打たないのは歯がゆいことです。そこで WEB ブラウザでページを表示したときに JavaScript (jQuery) を使って、ページの中から自ページのリンクを削除する方法を考えました。

その JavaScript (jQuery) のコードは次のとおりです。思ったよりもシンプルに書けました。

/*
 * Postal Search APIs & Solutions
 * Copyright(C) 2007 LEARNING RESOURCE LAB
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 */
jQuery(function($) {

var href = location.href.split('#')[0];
$('a').each(function() {
  if (href == this.href)
    $(this)
     .before(this.childNodes)
     .remove();
});

});

はじめに location オブジェクトから自ページの URL を取得します。このときページ内のリンクは除外します。ページ内のリンクは削除せず、そのまま残しておくためです。

続けてページ内の a 要素を繰り返します。このとき自ページの URL を持つ要素だけを対象とします。そして a 要素の子要素を a 要素の直前に挿入して移動します。その後 a 要素それ自体を削除します。

この JavaScript (jQuery) のコードは Postal Search APIs & Solutions のすべてのページに組み込んであります。これにより、ホームページのユーザビリティが改善された(もしくは違和感がない)と感じてもらえればうれしいです。

ページから自ページのリンクを削除してユーザビリティを改善する

関連情報