ウェブユーザビリティーの法則

ウェブユーザビリティの法則 改訂第2版

Webデザインのヒントがいろいろあって面白かったのでメモを残します。

ユーザーに考えさせない

• 誰にも明らかな用語を使う
• クリック可能な場所を強調する
• 思考に沿ったフォームの配置
• 良いデザインは、お店の照明のようなもの
• 不必要な言葉を省く

ナビゲーションをデザインする

webサイトへのアクセスとショッピングを比べると

• ユーザは最初に検索する(店員に聞く)か、自分で探す(看板見ながらコーナーを探す)か決める
• 現実と違い、webサイトでは大きさ・方向・位置感覚がつかみにくい

対処方法として

• サイトの名前を表示する
• いつでもトップページに戻れるようにする
• 全ページにナビゲーションおいて現在地を示す

例外として

• トップページは特殊な役割があるので、ナビゲーションをおかなくてもよい
• 各種入力フォームでは、ユーザには入力に集中して欲しい

具体的な技としては、

• ページ名は道路標識と考える
  • 全てのページで表示する
  • 適切な場所におく
  • 目立たせる
  • 直前にクリックしたリンク名と同一にする
• 現在地を目立たせる
  • 反転する
  • 太字にする
• パンくずリスト
  • ページの一番上におく
  • 各階層を>で区切る
  • 小さい文字にする
  • 現在地という表現をつける(ex. You are hire: ホーム > 趣味 > 料理)
  • 最後の項目(現在地)を太字にする
  • 最後の項目(現在地)をページ名とあわせる
  • パンくずリストをページ名として使わない(ページ名は別に表示する)
• タブによるナビゲーション
  • 選択したタブがはっきり目立つデザインにする(色、コントラスト、立体感)
  • タブの色とページ内の他のデザインに統一感を持たせる
  • サイトにアクセスした時点でどれかのタブを選択した状態にする
  • amazon.comのタブデザインはお手本

トップページのデザイン

• トップページの使命
  • サイトの素性と使命の提示
  • サイトの階層
  • 検索機能
  • 見所を紹介
  • タイムリーなコンテンツ
  • 取引先
• 効果的なタグライン
  • サイト名のわきつけるセンテンス
  • 気の利いた言葉