WEBデザイン ユーザビリティ

ユーザビリティ デザイン

そういえばWEBアプリのリデザインを担当したことがあり、そのとき読んだ本のメモが出てきたので、まとめました。
実際に読んだのはこちらでしたが、現在は改訂版が出ているようです。

ユーザビリティ

  • ユーザビリティの基本概念
    • 有効さ（なにかを目的として操作を行い、できたかできなかったか）
    • 効率（目的を達するまでに要した労力）
    • 満足度（使ってみてストレスを感じたか、あるいは心地よかったか）
参考概念
    1. バリアフリー（障害を取り除く）
    2. ユニバーサルデザイン（誰もが使えるデザイン。最初から障害を作らない）
    3. アクセシビリティ（到達容易度）

サイトの構築目的

  • 目標設定
    • 定量目標（どれだけの成果？）
    • 定性目標（どのような成果？）
  • ユーザーの行動を予測
    • 何を求めて使うのか？
    • どのように使うのか？

インパクト

  • ユーザーの記憶に残しやすくするテクニック
    • チャンキング（かたまりを作る）
    • マジカルナンバー（一度に提示する情報は7±2個まで）
    • ラベリング（整理・分類）
    • 親近効果・初頭効果（最後に見聞きしたものが最も記憶に残り、次いで最初に見聞きしたもの）
分類テクニック
    1. 近接の要因（似ている情報を近くに集める）
    2. 類同の要因（似ている情報の見た目を揃える）
    3. 閉合の要因（似ている情報を囲む）
  • ユーザーの視線
    • 左から右・上から下に見ていく。
    • 大きいもの・上にあるものが重要だと判断する。

設計

  • 分類の方法
    • 時系列
    • あいうえお順
    • セクション別
    • 地域別
    • 生活シーン（目的を動詞化）
    • カテゴリー別
    • データ属性（文章・画像・表etc.）
  • サイトの構造
    • リニア構造（「進む」「戻る」だけで移動できる平らな構造）
    • 階層構造
    • ウェブ構造（各ページが互いにリンクしあっている構造）
階層構造のポイント
    1. 同じ階層同士はリンクする。
    2. グループごとに階層の深さを統一する。
    3. 階層が広く浅いと、ユーザーがすぐに目的を達成できる。
    4. 階層が狭く深いと、リンクの入り口が少なくて済む。
  • シンプルイズベスト
    • 例外をつくらない
    • 削ぎ落とす

ナビゲーション

  • トップページの役割
    • そのサイトがどういうサイトか伝える役割
    • 情報へ案内する目次・地図の役割
ポイント
    1. トップページへいつでも戻れるようにする。
    2. トップページのようなページを複数つくらない。
  • ナビゲーションの方法
    • ことば
    • イメージ
    • 配列（ユーザーに明確な目的がない場合、左上から見ていく）
  • グローバルナビゲーションの役割
  • リンク
    • 立体感で「押せる」雰囲気
    • リンク先を想定できるような情報

パフォーマンス

  • 表示を重くする要因
    • 無駄なタグ
    • 重い画像
    • 大量の文章
    • JavaScript・CSS
    • 大きなテーブル
    • テーブルの入れ子
    • その他、ブラウザに負担をかけるコード


デザインに限らず、フレームワークとして活用できそうな気がします。