ユーザインタフェース　第4回 ナビゲーション.

Presentation on theme: "ユーザインタフェース　第4回 ナビゲーション."— Presentation transcript:

1 ユーザインタフェース　第4回 ナビゲーション

2 ナビゲーションの目的 手がかり を与える(先週「ナビゲーションの意義」) ここに 何があるか を示す サイトの 使い方 を示す
手がかり　を与える(先週「ナビゲーションの意義」) 自分がどこにいるか、どこにいけばよいか ここに　何があるか　を示す サイトの　使い方　を示す 何から始めるべきか、どんな選択肢があるか なんとなくわかる（どうせ説明を読まないので重要） サイトを構築した人への　信頼感　を与える ユーザは「こいつら本当に分ってるのかね」と値踏みしながらアクセスしている 再訪してもらえるサイト構築にはナビゲーションが有効

3 Webナビゲーションの慣例 ナビゲーションには、誰もが想定する慣例 Webナビゲーションの慣例は印刷の世界から 道路標識は、道の角
印刷物ではページ番号は余白 Webナビゲーションの慣例は印刷の世界から サイトID：　このサイトが何者かを示すロゴ セクションとサブセクション：　サイトの構成を示す ユーティリティ：　検索ツール、買い物かごなどの道具 現在地の表示 ページ名 ローカルナビゲーション：現在の階層で選択できるもの 最近はflashアニメーションを使うものが多い

4 ページ名 サイトID 現在地表示 セクション ユーティリティ テキストによるローカルナビゲーション Flashによるローカルナビゲーション

5 同じ業種は同じような 外観 慣例に 従っている
同じ業種は同じような 外観 慣例に 従っている

6 辞書サイト 機能は異なるが，外観は同じ

7 同じ外観にすると 使い方を説明する必要がなくなる 使い方で，ユーザを惑わせない，考えさせない 単語の意味
発音記号（ときには，発音を音声でデモ） 例文とその訳 使い方で，ユーザを惑わせない，考えさせない

8 同じ外観では， 他のサイトに勝てない？ 慣例は守る ユーザに考えさせないため オリジナルの機能は，慣例を守りながら提供

9 グローバル・ナビゲーション （永続的ナビゲーション: persistent navigation)
サイト内のあらゆるページに　首尾一貫　して表示される一連のナビゲーション ユーザはそのサイトにまだ滞在していることを認識できる ナビゲーションの使い方の把握が一度で済む

10 グローバルナビゲーションの例

11 グローバルナビゲーションの要素 トップ/ホーム サイトID セクション ユーティリティ 検索 グローバル ナビゲーションは すべてのページに
[例外] トップページ 入力用フォーム

12 サイトID サイトIDは、Webサイトの建物名 よく知られたロゴを使うべき 位置も慣例に従う
ユーザに、このサイトにいる　ことを認識させるべし よく知られたロゴを使うべき IDらしく見えること 位置も慣例に従う 最上部、通常は左上の隅

13 セクション：サイト内の主要なセクションへのリンク
ユーティリティ：サイトを使用するのに役立つ要素 グローバルナビゲーションに含めてよいのは、 利用者が頻繁に使いそうな、せいぜい３つか４つ

14 トップ/ホーム： トップページへのリセット・ボタン
トップ/ホーム：　トップページへのリセット・ボタン 迷子になってもトップページに戻れる サイトIDをトップページへのボタンにする ただし、この慣例を知るユーザは、まだ少数 「Top」、「Home」というリンク 検索方法　　：　サイト内を検索する手段 検索の範囲を限定するような検索手段は用意しない Amazonは、いかなる商品を検索ボックスに指定しても正しい結果を出す

15 優れたグローバルナビゲーション 深い階層までナビゲーションを用意しておく ページ名は道路標識 現在地はここ
たいていのサイトは2層ぐらいまでしかナビゲーションを用意していない ページ名は道路標識 ページの中で最も大きい　フォント　を使う あるべきところに置く。人は　上　にあることを期待 どの　ページ　にもページ名を置く ページ名は　直前にクリックしたもの　と一致させる 現在地はここ 2つ以上　　の視覚効果で目立たせる 色の反転、太字など

16 このサイトで，サイトID，検索， セクション，ユーティリティは