ユーザビリティ(Usability)について

訪問ユーザーに対する「使いやすさ、操作性の良さ」のこと。 この操作性はデザインに左右されることが多い。

ユーザビリティは主観的なものなので、方法論を確立することはできない。 要はユーザーに対して親切になるということ。

以下の点に注意する

・誰でも容易にサイト内を閲覧してまわることができるか
・わかりづらい表現がないか
・迷うことがないか
・ユーザーにストレスを感じさせないか
       ↓ これを実現するためには
・ボタンは一目でボタンとわかるように
・配色に統一のルールを持たせる
・可読性・可視性を保つ
・一般に浸透している表記や表現を使う
・操作性に一定のルールをつくる

トップページに対するユーザビリティ施策

・サイトID(ロゴマーク)を、全ページで常に固定位置にレイアウトすること
・メインコピーを明確にし、各ページの役割が一目でわかるようにする
  (例)http://www.apple.com/jp/
・グローバルナビゲーションとユーティリティナビゲーションをページ上部の固定位置に常にレイアウトすること
・「はじめての方へ」「お問い合わせ」「サイトマップ」などのコンテンツを用意する
・新着情報(更新情報)「ニュース」「トピックス」「インフォメーション」など

リンクボタンを配置する際のユーザビリティ施策

・立体的なデザインにする。マウスオーバーで色を変える
・内容が想定できるページタイトルをつける
  (例)ほぼ日刊イトイ新聞 http://www.1101.com/home.html
     とんかつ専門店 銀座梅林 http://ginzabairin.com/
・外国語のみで記載されているボタンは× 日本語を併記すれば○
  (例)ヘインズブランズ http://www.hanesbrands.co.jp/ ○
     早稲田松竹 http://www.wasedashochiku.co.jp/lineup/schedule.html △
・アイコンやイラストのみのボタンは× ページタイトルを併記すること
  (例)浅草ROX http://www.rox.co.jp/ ○
     新文芸坐 http://www.shin-bungeiza.com/schedule.html ×

自由にサイト内を閲覧するために心がけること

・「行き止まり」のようなページを作らないこと(常にどのページへも移ることができる)
  (悪い例) http://cotosh.nobody.jp/index.html
・「パンくずリスト」をつける
  (例)日本写真映像専門学校 http://www.shasen.ac.jp/index.html
     ヤフオク http://auctions.yahoo.co.jp/

エラー対応ページを用意する

(例)Web本の雑誌 http://www.webdoku.jp/ ○
   FUJITSU http://jp.fujitsu.com/ ○
   すばる文学カフェ http://jp.fujitsu.com/ ×
   参考サイト カスタムエラーページの作り方

ページの表示領域に注意する

・現在主流のディスプレイは1024×768ピクセル
・横780もしくは800~最大980ピクセル
・縦600ピクセル以内
・印刷用ページを別途用意する(A4サイズの用紙にプリントされるのは760ピクセル以内)
(例)サイコム・ブレインズ http://www.cicombrains.com/

フォントサイズを可変にする

・pxでなく%でfont-sizeを指定する
・JavaScriptで文字サイズ切り替えボタンをつくるのもよい
 (例)http://www.cofesta.jp/2011/jp/whats/index.html