japan.internet.comThe Internet & IT Network
RSS
  • ニュース
  • コラム
  • リサーチ
  • ヘッドライン
  • 特集
  • ブログ
  • プレスリリース
  • 専門チャンネル
  • イベント
  • ランキング
  • ニュースメール
2008年9月9日
文字サイズ文字サイズ小文字サイズ中文字サイズ大
事業仕分けによる次世代スーパーコンピューターの開発予算削減について、どうお考えですか?
賛成
反対
どちらとも言えない
投票締切 11/30 12:00
WebTutorial2001年10月31日 00:00

ユーザビリティとナビゲーション -- 1

海外海外internet.com発の記事
  • Post to Twitter
  • Post to Facebook
  • このエントリーを含むはてなブックマーク
  • この記事をクリップ!
  • Buzzurlにブックマーク
  • Yahoo!ブックマークに登録
  • newsing it!
  • この記事をokyuuへインポート

ユーザビリティとナビゲーション

見たいものがうまく探せないから、見るのをあきらめたサイトはないか? そんなことでビジターを失ってはもったいない。 この記事では、ビジターがサイトのページからページへかんたんに移動できる、 内部リンクの設定方法を検証する。

見たいものがうまく探せないからと見るのをあきらめたサイトはないか? そんなことでビジターを失ってはもったいない。 この記事では、 ビジターがサイト内のページからページへ かんたんに移動できる、内部リンクの設定方法を検証する。

このシリーズの以前の記事、 Usability:theBasicsと同様、 科学的調査、専門家の意見、人気のサイトに使われているテクニックを参考に述べられる。 まず、リンクの細かい設定について、そのあとサイトの構造を取り扱う。というのも、サイトの構造はナビゲーションと深い関係があるからだ。

ホームページへのリンク

どのページも全て、メインメニューにリンクするようにしなければならない。 メインメニューは通常、サイトのデフォルトのホームページだ。 これについては、後ほど構造のセクションで触れる。

最近ではビジターは、どのページからもホームにかんたんにリンクできて当然で、 そのリンクは画面の一番左上にあると思っている。 だから、リンクを別の場所に置くと期待に反するので、 ビジターを混乱させてしまう。 ユーザビリティが悪いのだ。

すでに出来あがってしまったサイトでは、 一番左上は持ち株会社の宣伝やリンクで埋まっているかもしれない。 そういう場合は、ホームへのリンクは一番左上に出来るだけ近い場所に置き、 2倍目立たせるようにしよう。

成功した大きなサイトでも、 ホームへのリンクに会社のロゴを使ったり、 家の形のアイコンを使ったりするところがあるが、 いずれも、テキスト文字でホーム(Home)と書かれたリンクよりもユーザビリティでは劣る。 たいていのサイトはホームへのリンクに企業ロゴを使ったりはしないので、 ビジターは実際クリックしないと、ロゴがホームへのリンクなのかどうか分からない。 同じように新しい Web ユーザーも家のアイコンには混乱する。 何度かクリックしてみないと、どこに飛ぶのか分からない。 どうしてもロゴやアイコンを使わなければならないのなら、 「ホーム」というテキストリンクを追加して、 ユーザビリティを回復しよう。 ひょっとしたら画像よりクリックされるかもしれない。

パンくずの跡

この用語は、童話『ヘンゼルとグレーテル』をもとにしていて、 お話の中でヘンゼルとグレーテルは、森の中にパンくずを残して家に帰る道しるべとした。 ユーザビリティのグル、Jakob Nielsen は、 Web ナビゲーションの重要な側面としてこの表現を使った。

ビジターがナビゲーションシステムを使って、 サイトの階層構造をたどり、現在のセクションのメニューまで、 そしてその上のセクションのメニューへ、 そして最後にはホームページへとたどりつけるようにしなければならない。

つまり次のような、それぞれの要素が適切なページにリンクされた構造なのだ。

これはメインセクションを表示したナビゲーションバーよりも使いやすいだろう。 大きなサイトであってもナビゲーションバーは見つかりにくい。

ここはどこだろう? —駅の標識を頼りに

「パンくず跡」はナビゲーションのもう一つの重要な側面と深い関係がある。 ビジターは、今自分がどこにいるのかをすぐに知りたい。

居眠りをしているあいだに電車がある駅に到着し、 目が覚めてここはどこだろうと慌てた経験はないか? 駅名を書いた標識を見ればどこか分かるだろう。そのための駅の標識なのだ。

Web でも同じだ。 検索エンジンからあるサイトの途中ページに飛ぶのは、 知らない駅で目が覚めるのと似ている。 そういう時、ナビゲーションを使ってどこに着いたのかユーザーに教えてあげればいいのだ。 一番いいのは「パンくず跡」を使うことだが、 メインセクションを表示したナビゲーションバーで、 現在いるセクションの色を変えるのもいい方法だ。

検索

もうひとつの基本的なナビゲーションリンクは検索ページだ。 ビジターが行きたいページに近い気がするけど完璧ではないと思ったとき、 ビジターが頻繁に訪れるのが検索ページだ。 そこでビジターを見失うな! 検索のリンクは、画面のトップ近くに置いて見つけやすいようにしよう。

セクションリンク

ナビゲーションエリア、 通常、統一されたナビゲーションバーに、 他のメインセクションへのリンクを配置するといい。 そうすれば、 ビジターは別のセクションへジャンプするときに時間を節約できる。 しかし、やりすぎないようにしよう。 バーにあまりたくさんの選択肢を入れると、 決めるのに時間がかかってしまう。 休みの日にどこに行くか決める時のことを考えてみよう。 行き先は50通りから選ぶか、12通りからかもしくは3、4つからか。 選択肢が少ないほど、早く決まる。 これを基本に、セクションリンクを8つより少なくするサイトが多い。

「パンくず跡」とセクションリンクは通常、 ページトップに水平に並べられるが、 セクションリンクをいちばん上に、「パンくず跡」をそのすぐ下に2列に並べることも多い。 理屈では左サイドに置けばいいのだが、 いちばん上に配置するサイトがほとんどだということは、 おそらくそれがビジターにとっていちばんいい場所だろう。 ビジターの期待に沿うようにしよう。

左サイドの欄 -- 2ページ

  • プリンター用
  • 記事を転送
  • Post to Twitter
  • Post to Facebook
  • このエントリーを含むはてなブックマーク
  • この記事をクリップ!
  • BuzzurlにブックマークBuzzurlにブックマーク
  • Yahoo!ブックマークに登録
  • newsing it!
  • この記事をokyuuへインポート
最新トップニュース
Graphic Design Forum
【Graphic Design Forum】
流動的媒体と静的媒体に関する見解(11月18日)
「IT の耳」
「IT の耳」
【書評】『Hyper-V スタートアップバイブル』――仮想化についてのすぐれた解説書(11月20日)
百式のネットビジネス研究
百式のネットビジネス研究
世界でもっともパワフルな iPod のスピーカー「Wall of Sound」(11月20日)
週刊-サイト別アクセス状況データ
週刊-サイト別アクセス状況データ
ビデオリサーチインタラクティブ調査(月間インターネットオーディエンスデータ)(11月19日)
海外ソーシャルウェブに学ぶ成功の秘訣
海外ソーシャルウェブに学ぶ成功の秘訣
ゲーム業界を襲う世界的な激震。ソーシャルゲーム急成長のインパクト(11月19日)
今さら聞けない初歩からのアクセス解析
今さら聞けない初歩からのアクセス解析
サイトリニューアル前のアクセス解析活用法(11月19日)
成約率、反応率を上げる Web 文章術
成約率、反応率を上げる Web 文章術
文章力を磨き、キャッシュを生み出す Web サイト に(11月19日)
「Webからの脅威」―その傾向と最新対策
「Webからの脅威」―その傾向と最新対策
新たな対策技術:スパムフィルタリングと E-mail レピュテーション(11月18日)
ROI向上のための戦略的WebPR
ROI向上のための戦略的WebPR
「戦略的 WebPR」のしかけ方〜WebPR の効果測定手法とは〜(11月18日)
スマートにソーシャルウェブを構築しよう
スマートにソーシャルウェブを構築しよう
社員力を生かすソーシャルメディアポリシー(11月17日)
DevX
DevX
Erlangを使った並列処理プログラムの作成(11月17日)
Copyright 2009 Japan Internet.com K.K. All Rights Reserved.http://www.internet.com/