§3 - WEB標準とユーザビリティ

3-3 ユーザビリティ

▼ユーザビリティの意味
ユーザビリティとは、「操作性の良さ」の事です。
どこに何があるか把握しやすい、どこをどうすればどうなるか直感的に理解出来る、ストレスを感じない、といった事です。
これらは、WEBデザインに大きく影響されます。アクセシビリティはケース毎の最適解が確立されているのに対し、ユーザビリティは訪問者毎の特性によるので、最適解というものは存在しません。そのため、慎重な検討が必要です。

原則として、以下の項目については厳守するのが無難です。

・記号やアイコンは、一般的認識に従った使い方をする
多くの人は「←<TOP>→」を見た場合、「←」を戻る、「→」を次へ、と認識します。それなのに、次への意味で「←」を使用すると、訪問者は混乱します。慣例に添った記号やアイコンを使用しましょう。

・リンクなどのクリック出来る箇所を明確にする
多くの人は、青文字でアンダーライン付きのフレーズを見たら、ハイパーリンクであると認識します。通常テキストの装飾として同じ表現が使われていると、訪問者は混乱します。
また、画像によるリンクボタンを設置する場合などは、クリック出来る事が一目瞭然でなければいけません。

・検索エンジンからの訪問者への考慮
訪問者は必ずトップページから訪れるわけではありません。検索エンジンなどから、コンテンツページを直接開く場合も多いです。その様な場合に、トップページへのリンクがなかったり、「戻る」のリンクがジャバスクリプトになっていて正常に動作しなかったりといった不都合がよく見られます。

・配色の統一性
あるページでは赤がナビゲーション、白がコンテンツだったのに、別のページではナビゲーションが青になっていたりすると、訪問者は混乱します。サイト全体を、機能別に割り当てた配色で統一する事で、スムースな閲覧が出来ます。


-○サイト全体
サイト全体としては、以下の点に気をつけます。

・タイトル(サイトのロゴなど)、ナビゲーション、フッター
これら3つはサイト全体で同一箇所に配置され、タイトルとナビゲーションは対でデザインされる事が多いです。
タイトルは、サイトの顔となります。

・コピー
トップページやコンテンツの最上位ページで、そのサイトで何が得られるのかを、短くて明確なフレーズで説明します。コンテンツが複数ある場合、コンテンツ毎にコピーが添えられる場合もあります。

・更新情報
トップページで、更新された情報について通知します。その他、キャンペーン情報などの注目して欲しい情報についての通知も行います。



-○ナビゲーション、リンク
クリックしてみないとその内容がわからない様では、ナビゲーションやリンクアイコン、リンクテキストの意味を成しません。訪問者をスムースにコンテンツへ誘導出来るように、以下の点に気をつけます。

・ラベル(文字)が曖昧過ぎる
「お気に入り」「大好き」「夏だよ~」などといったリンクが並んでいても、リンク先の内容は推測出来ません。

・ラベルが全て外国語
ナビゲーションのラベルが全て外国語のケースがよくあります。「PRODUCT」「CONTACT」「ABOUT」といった単語が並んでいるケースです。日本語も併記するようにします。

・ラベルが商品名や独自のサービス名
商品名やサービス名の知識がなければ、リンク先の内容を推測出来ません。

・ラベルがなく、アイコンのみ
あるアイコンについて、全ての人が同じ連想をするとは限りません。「何のアイコンかわからない」というケースも起き得ます。


-○ページサイズ
縦幅、横幅、ファイルサイズについてです。

重要な項目については、スクロールなしでも見えるようにレイアウトしないと、訪問者の目に入る前に脱落される恐れがあります。
また、縦スクロールは比較的許容されますが、横スクロールバーが出る事を嫌う訪問者は多いです。
ターゲット層の環境を考慮しながらページサイズを検討する必要があります。

ファイルサイズについても同様です。誰もが高速通信というわけではありません。
表示完了までに時間がかかると、脱落者が増加します。Googleでは0.5秒遅くなると、検索数が20%も減少すると言われています。ファイルサイズおよびサーバ環境、ファイルの内部施策によって高速化を計る必要があります。

フラッシュなどのリッチコンテンツを含む場合も注意が必要です。誰もが高性能PCではありません。スクロールもままならないような重いページも多いです。


-○入力フォーム
入力フォームを利用する訪問者は、サイトに強い興味を抱いている状態だと言えます。例えば、メルマガの申し込み、通販手続き、問い合わせなどです。この時点で脱落されないよう、注意が必要です。
以下の点に気をつけ、訪問者の物理的負担・心理的負担を軽減します。

・選択式にする
回答がある程度決まっている場合は、選択式にします。

・必須項目かどうかを明示する
記入が必須でない項目については、空欄のままでもよい事を明示します。

・入力制約の明示
半角文字しか受け付けない、アルファベットのみ、最小何文字、最大何文字、など制約がある項目には明示します。

・画面の分割を検討する
どうしても入力項目が多い場合は、複数ページに分割する事で心理的負担を軽減出来ます。

・イレギュラーへのフォロー
入力の途中で「戻る」の動作をしてまった、入力内容に不備があった、という度に白紙に戻っていたのでは、入力意欲は著しく低下します。
パスワードなどの重要情報以外の取り扱いについては、訪問者の利便を図ります。
入力内容の不備については、エラー箇所・内容と改善策を明示します。


-○フォントサイズ
フォントサイズをピクセル単位などで絶対指定した場合、閲覧環境によって見え方は異なります。
この場合、訪問者が小さくて見づらいと感じても変更する事が出来ません。
%などの相対指定にすれば、訪問者が自由に変更出来ます。ただし、フォントサイズが変ってもレイアウトが崩れないような配慮が必要です。

-○特殊なファイルのフォロー
大きなサイズのファイル、PDFやWORD・EXCELなどへのリンクへは、その旨の注釈を添えます。
また、フラッシュプレーヤーや動画再生ソフトなど、特定のソフトがインストールされていないと見れない場合は、そのソフトへのリンクも添えます。


>>このページの上に戻る

スポンサードリンク

SponsoredLink

MENU

§1 - レイアウト
1-1 レイアウトの基本
1-2 コンテンツとは
1-3 ナビゲーション手法
1-4 ナビゲーション配置例

§2 - カラー
2-1 属性
2-2 連想作用
2-3 配色の掟
2-4 配色の掟2

§3 - WEB標準とユーザビリティ
3-1 WEB標準
3-2 アクセシビリティ
3-3 ユーザビリティ

§4 - WEB制作の流れ
4-1 ワークフロー1
4-2 ワークフロー2
4-3 ワークフロー3
4-4 ワークフロー4
4-5 ワークフロー5
4-6 ワークフロー6
4-7 ワークフロー7
4-8 ワークフロー8
4-9 ワークフロー9

about

将来WEB制作の職に就きたい、アフィリエイトを本格的にやってみたいという初心者向けのサイトです。
WEB制作を行う上で知っておくべき常識を、体系的に解説しています。
記事内容は初心者を想定しています。

当サイトのプライバシーポリシー及び運営者情報については、下記リンク先のページをご覧ください。
プライバシーポリシー
運営者情報

アクセスランキング

アクセスランキング