Webサイトのユーザビリティ

ユーザビリティ（Usability）

サイトを訪れたユーザーが、目的の情報にいかに正確に、すばやく、途中で不快感を覚えずにたどり着くことができるかについて、その達成度を示します。

本質的なユーザビリティ

　ユーザーの不満を限りなくゼロに近づけます。

付加価値的なユーザビリティ

　さらなるユーザー満足度の向上を目指します。

トップページ

１．トップページでなんのWebサイトかわかるようにする

ロゴの隣りのタグラインに「郵便番号検索」のように具体的に書く
画像からWebサイトの内容をイメージさせる

２．トップページに掲載する情報を選定する

Webサイトでもっとも重要なタスクに結びつく情報を2，3個に絞ってもっとも目立つように掲載します。

更新頻度の高い情報は更新が見える形で掲載します。

レイアウトとユーザービリティ

１．一般的な慣習を守ってユーザーの学習経験を活かす

サイトID(ロゴ)はページの左上
ロゴにはトップページへのリンクを設定
メインメニューはロゴの下に横並び
お問い合わせ項目はヘッダーの右寄りに置く

２．すべてのページでメニューのレイアウトは統一

メインメニュー
メインコンテンツのサイドに配置されるサイドメニュー
フッター周りの項目

ターゲットユーザーの設定

ターゲットユーザーの姿を想定し、行動シナリオを導き出します。

生活パターン
サイト訪問の背景
検索キーワード　等

ラベリング

ターゲット像に合わせたラベリング

専門分野のユーザー

　一般的には分かりにくくても専門用語、製品名を使います。

知識を持たないユーザー

　専門用語を一般的な言葉で置き換えます。

Webページの動作に関するユーザビリティ

すべての選択権はユーザーにあり、制作者側がコントロールしてはなりません。

ページに移動した途端に動画再生・音楽再生
ウィンドウサイズを強制的に変更
ブラウザの機能を非表示にする

何らかの動作が強制的に起こる場合は、それが事前に分かるように明示します。

フォーム

１．入力例を明記してユーザーを補助

例)郵便番号や電話番号の’-’(ハイフン)が必要かどうかを明記します。

２．入力項目を絞り込む

必要以上に入力項目を増やさないようにします。

３．選択肢を使ってユーザーの負担を軽減

プルダウンメニュー等を利用します。自由入力だとどのように入力するか悩んでしまう場合もあります。

ページスクロール

１．ファーストビューエリアを活用

ファーストビューとは、Webページを開いた際に一番最初に表示される部分です。

縦方向のファーストビューはデバイスに左右されるため決まった数値はないですが、頻繁に使用するユーザーインターフェースは、ファーストビューエリアに配置して操作のたびにスクロールを発生させないようにします。

２．ユーザーが「ページが終わった」と認識してしまう要素

ページ下部に大きな空白がある
ページ途中で横幅いっぱいに区切りがある
ページ下部に広告がある

リンクテキスト

１．リンクテキストのルールを統一する

リンクテキストとそうでないテキストとでフォントカラーをはっきり変える
リンクの下線はなるべく消さない
多くのブラウザがデフォルトでリンクのテキストに適用する青色は使わない
むやみにリンクテキスト以外に下線を引かない

２．クリックのしやすさ

リンクボタン

マウスオーバーしないと分からないというのではなく、画像がボタンであることを見た目で認識させます。

立体的で押せそうなデザイン
矢印が含まれたデザイン
ボタンだとわかるラベリング

ユーザーの期待を裏切らないインターフェース

操作に対して期待した結果と異なると満足度は低下してしまうため、ユーザーにリンク先の内容を明確に示すことが大切です。

一般的にWebページにリンクがあれば、リンク先もWebページだと思って操作します。リンク先がMTMLファイル以外の場合は、それがはっきり分かるようなラベリングやリンクのデザインが必要です。

リッチユーザーインターフェースの注意点

Ajaxなどを利用してページ遷移なくコンテンツを切り替えていく形式では、ブラウザの「戻る」ボタンを操作した結果がユーザーの期待と異なり、ユーザービリティが低下する原因になります。

ページ内で戻るためのボタンを分かりやすくする
ブラウザの「戻る」ボタンが押されても問題ないようにする

また、画像の拡大表示の「閉じる」ボタンを分かりやすくし、ブラウザの「戻る」ボタンを押されないようにします。