« UX(ユーザーエクスペリエンス)の良いナビゲーションシステムを持つウェブサイト19選(その3) | メイン | フレッシュなサンセリフ体フリーフォント25選(その1) »

UX(ユーザーエクスペリエンス)の良いナビゲーションシステムを持つウェブサイト19選(その4)

2011年08月22日
 

今回も引き続き、UXの良いナビゲーションシステムを持つウェブサイトを紹介していきます。



13.スキップナビゲーション / フッターナビゲーション
文章読み上げソフトでウェブサイトを閲覧しているユーザーや、マウスを使えない人を手助けするナビゲーションを忘れてはいけません。
文章読み上げソフトなどでウェブページを閲覧している場合、上部にナビゲーションを取りつけているウェブサイトにアクセスすると、ページを移動するごとに、文章読み上げソフトがナビゲーションを読み上げることになります。
そういったことを回避するために、クリックすることでナビゲーションのあるセクションを飛ばし、コンテンツへアクセスできるようにする仕組みを付ける必要があります。
これをスキップナビゲーションといい、ナビゲーションのあるセクションより上、多くの場合は右上にアンカー付きリンクを取りつけます。

メインナビゲーションのセクションの内にリンクやサイトマップが収まらない場合は、まずその項目がナビゲーションとして本当に必要なのか、便利なのか検討します。
そして必要だがおさまらなかった場合や、スキップナビゲーションとの兼ね合いで、ページ下部にもナビゲーションを設ける場合もあります。
またページの一番下にナビゲーションリンクを配置すると、閲覧者はページを見終えた後にまた後戻りをする必要がなくなります。

mediskokochbar



14.マインスウィーパー
マウスオーバーすることで写真やイラストの意味を明らかにする、オセロや神経衰弱のようなグラフィカルな要素をウェブサイトに取り入れることは、ユーザーに隠しコンテンツを見つけたいと思わせるいいアクセントです。
これによって積極的にウェブサイトを見てもらえることができますが、オプションを付けて凝りすぎると、ユーザーはそれをわずらわしく思い、途端に効果が逆になってしまいます。
視覚的な影響が大きいコンテンツを魅力的に見せたい時、この方法を取り入れてください。
ただしやりすぎは禁物です。

viteungraphiste



15.アコーディオンナビゲーション
アコーディオンナビゲーションはCSS3を使うことで表現できます。
大きな項目があり、それをクリックすることで中に格納されている項目が出てくる、という表現方法がアコーディオンナビゲーションです。
大雑把な項目から案内を始め、それを辿っていくうちに細かい情報まで辿りつけるような仕組みになっており、これによって莫大なリンクをナビゲーションに用意する必要がなくなります。
またユーザーにとっては一度に見る選択肢が減り、探しやすいウェブサイトとなります。

directions



16.玄関マットナビゲーション
玄関マットナビゲーションとは、ホームページの中央の要素と主なカテゴリをまとめたリストです。
ウェブサイトをいくつかのセクションに分割し、類似するセクションを4~8項目毎にまとめ、その上にメインセクションのラベルを取りつけます。
重要なセクションの一覧を見れるようになり、ウェブサイト閲覧に慣れている人ほど、アクセスしたい情報に素早くアクセスできるようになるでしょう。

ibm



17.格納式のメニュー
格納式のメニューは、画面のスペースを節約し、マウスオーバーやクリックをすると開いてメニューになるナビゲーションです。
このナビゲーションはどのようなデザインにも合わせやすいため、デザインのパターンが増やすことができます。
またコンテンツを表示する領域も広がるため、閲覧側にとっても見やすくなります。

fredrikclement

hellokarl



いかがでしたでしょうか?
普段触れているウェブサイトが、見た目だけでなく使いやすさや楽しさの点でも、どのような意図でデザインされているかわかったのではないでしょうか?
あなたがもしウェブサイトを制作する人間であれば、ぜひともUXについて考えてみてください。
それが良いウェブサイトを作ることにつながるでしょう。

引用:blog.templatemonster.com



スポンサードリンク