「駅」に学ぶウェブサイトのナビゲーション

駅をデザインする

【ism】ウェブプロ会員 Advent Calendar 2015 に参加しています!

駅をデザインする』という本をよみました。著者は1973年に導入された営団地下鉄の案内サインシステムをつくった方で、利用者が駅を利用するさいに迷わないようにするための考え方が解説されています。

そもそも地下鉄の駅構内では自分がどこにいるのか分かりにくいうえ、当時の地下鉄の案内サインは位置も用語も文字サイズもバラバラで「駅内のあらゆる場所がはなはだ未整理な文字情報で埋め尽くされて」おり、さらにたくさんの広告があふれ、利用者からのクレームが続出していたとのことです。

このような状況に対する著者の改善案が「案内サインのシステム化」で、全体を次のように統一するものでした。電車に乗る人のための案内は緑色、電車から降りた人のための案内は黄色にする(表紙のサインシステムフローチャート参照)。路線名に前には路線カラーの○印を付ける。動線が別れる場所には路線図、駅案内図、周辺案内図などの図解サインを集約的に設置するなどで、この案内システムがあるおかげで不案内ながらも地下鉄の乗り降り、乗り換えができていたことに気づかされます。

さて、ウェブサイトの分かりにくさも駅の分かりにくさによく似ています。ウェブサイトも駅同様に、自分が今どこにいるか分かりにくい、全体を把握しにくい、行く先の見通しがつけにくい、サイト毎(駅毎)に作りが違う、余計な情報(広告)が多いなどです。迷わないためのウェブサイトのナビゲーションはどのようにあるべきかを考えました。

サイト全体でナビゲーションを統一する

ナビゲーションには様々なデザインパターンがありますが、どれを採用するにしてもサイト全体で仕様を統一し、例外をつくらないこと。

ページによって表示される位置が変えたり、見た目のデザインが変えたりするとユーザーに混乱をもたらします。

また、ウェブサイトはサイト毎に構造が違うため、初めて訪問するサイトごとに構造を理解しなければなりません。その負担を少しでも減らすために一貫性のあるナビゲーションにします。

あわせて見出しのルールを統一し、目にとまるよう適切なデザインを施すことで、ユーザーは自分がどこにいるかを認識できるようになります。

全体の見通しをよくする

グローバルナビゲーションからサイトの全体像を推し量れるようにすること。

全ページに共通して表示されるナビゲーションであるグローバルナビゲーションは、そこを起点にすべてのコンテンツに到達できるようにします。その際、ナビゲーションの各項目名(ラベル)はそのグループに含まれるコンテンツを正しく伝えるものにします。

ユーザーはサイトの構造を想像しながら閲覧します。サイトの構造をイメージしやすくすることで、行く先の見通しがつきやすくなり、より早く求める情報にたどり着けるようになります。

また、バナーなどは最小限にし、必要のない情報を見せないようにすることで重要なナビゲーションが埋没するのを防ぎます。

選択肢を少なくする

サブナビゲーションでは、適切なリンクのみを提示すること。

ユーザーにサイトの全体像を一度に見せることはできませんし、また見せたとしても理解してもらうことは難しいでしょう。ユーザーはサイト内のすべてを見たいわけではなく、自分が求める情報が掲載されたページに少しでも早くたどり着きたいと思っています。リンクがずらりと並んだサイドバーはユーザーにとって決して使いやすいものではありません。

 

迷わないナビゲーションを実現するために、サイト全体でナビゲーションを統一する、全体の見通しをよくする、選択肢を少なくする、の三つをあげましたが、これらはデザインのみを工夫することで対応できるものではありません。デザイン以前にサイトの構造設計、コンテンツ設計、ユーザーシナリオの設計が必要です。ユーザーを理解し、適切な情報を適切に分類することで、ナビゲーションが良いものになります。サイトのナビゲーションが使いにくいと思ったときには、より深くにある真の原因を見極める必要があります。