ユーザービリティに関して少し復習したので
メモっておきます。初心忘れるべからずという
事で・・・Webサイトは基本的にユーザビリティ
を考慮したレイアウトやコンテンツが理想です。
もちろんケースバイケースではありますが、
これは全共通して言える、という事を忘れない
ようにメモ書き。

というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。

そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません（「やっちゃダメなこと」もしています）ので全然説得力ない感じです。

いろいろとテスト&エラーをして行きたいのでご了承下さい。

はじめに

正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基本的には僕はヤコブ・ニールセンの考えに従っています。

全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合によってはマイナスになることも考えられます。例えば、リアルタイムで入力をチェックするバリデーションは割と評価されやすいユーザビリティですが、iPhoneでは不便にしか感じませんでした。

コンテンツや、コンテンツのターゲットユーザーの層や質に応じて適切に施工します。リストは「よく指摘されがちな改善点」を挙げているつもりです。

ユーザービリティの定義

U-Siteより引用

ISO 9241-11における定義

ISO 9241-11は、ユーザビリティの定義を行い、ユーザーの行動と満足どの尺度によって、ユーザビリティを規定又は評価する場合に、考慮しなければならない情報を、どの様にして認識するかを説明している国際規格です

1. Usability （使用性）：有効さ、効率及び利用者の満足度の度合い
2. Effectiveness （有効さ）：利用者が、指定された目標を達成する上での正確さ及び完全さ
3. Efficiency（効率）：利用者が、目標を達成する際に正確さと完全さに関連して費やした資源
4. Satisfaction（満足度）：不快さのないこと、及び製品使用に対しての肯定的な態度
5. Context of use（利用の状況）：利用者、仕事、装置、並びに製品が使用される物理的及び社会的環境

「ユーザビリティエンジニアリング原論」における定義

1. 学習しやすさ：ユーザがそれをすぐ使い始められるよう、簡単に学習できるように
2. 効率性：一度学習すれば、あとは高い生産性を上げられるよう、効率的に使用できるもの
3. 記憶しやすさ：ユーザがしばらくつかわなくても、また使うときにすぐ使えるよう覚えやすく
4. エラー：エラーの発生率を低くし、起こっても回復できるように。致命的なエラーは起こってはならない
5. 主観的満足度：ユーザが個人的に満足できるよう、楽しく利用できなければならない

カラー

1. 全体の色の明暗、コントラスト、視覚障害の方などターゲットユーザーにそれぞれ配慮する
2. リンクと通常のテキストは違いを明確にする（下線や色。リンクカラーはデフォルトの青がベスト）
3. 目的（コンバージョン）へのリンクは大きめのボタンや配置、色合い等で明確にする
4. パッと見で見出しだと認識できるように色でアクセントを加える等、工夫する
5. 背景に明度の低い色を使用しない（でも、#fffに#000はやりすぎっぽい）
6. 配色による可読性の低下に気をつける

ユーザーインターフェース（操作性）

1. 目的のないアニメーションやポップアップは自己満足
2. 英語のみ、抽象的な単語のみで表現されたナビゲーションは避ける
3. オンマウスによるアクションは時としてユーザーを驚かせてしまう
4. 縦に長すぎるメニューはメニューとして機能しない
5. 階層が深く、マウスがずれただけで消えるドロップダウンメニューは控える
6. ユーザーはクリック一つにも過敏になっている可能性があることを考慮する
7. スクロールに応じて付いてくるコンテンツは基本的に目障りと考える
8. ページ推移が無い＝便利とは限らない
9. クリックでなにか出来るなら、分かるように明示する
10. メインとなるナビゲーションはファーストビューで確認出来るよう配置する
11. クリックしにくいナビゲーションは無いも同然と考える

フォーム周り

EFOに関して。

1. 入力項目の説明は一言で済ませる
2. 住所と郵便番号の入力は特に大きなストレスを与えやすい
3. 縦長のフォームに付き合うほどユーザーは親切ではない
4. 何度も再入力をさせるバリデーションはストレス。正しい方法を提示する
5. 項目数の多いselectメニューは選択しやすい工夫をする
6. チェックボックスやラジオボタンはクリックしやすい工夫をする
7. 分割するのなら、現在位置が分かるようにパンくずやチャートを付ける
8. submitは「送信」なのか、「次へ」なのか、「確認する」なのか明確に
9. トラブル時のヘルプをすぐ近くに用意する
10. 入力完了後のページにも気を配る。「有難う御座いました」だけでは勿体無い
11. 装飾に凝り過ぎない

おまけ：jsやTips

1. 入力フォームのユーザビリティ&アクセシビリティ
2. フォームのユーザビリティを再考してコンバージョンを向上
3. 実装が簡単で、フォームの使い勝手を向上させるJS 3種
4. フォームで離脱させないためのjQueryプラグイン50選

[note]他にもたくさんありますので探してみてください。5509さんはユーザビリティを考慮したjsによるUI設計を意識していますね。[/note]

レイアウト

1. 基本的に左から右へ見ていく事を想定する（参照：Maka-veli.com
2. ユーザーにとってそのコンテンツが本当に必要かを考える
3. ロゴは左上が基本で、TOPページへのリンクをする
4. ファーストビューには必要最低限で、且つ重要な項目を入れる
5. コンテンツ同士のスペースを適度に開ける
6. 基本的にユーザーの多くはスクロールしない事を考慮する
7. 連絡手段（電話番号、問い合わせ）、ヘルプは必ず目立たせる。高齢者はすぐに探す傾向にある
8. 難解な説明をする際は画像をうまく用いる
9. 検索ボックスはわかり易い場所に設置する
10. ブランド名やロゴは常にファーストビューに入るよう配置する
11. パンくずは目立つ場所、且つ主張しすぎないデザインに
12. 似たようなコンテンツはグループ化して、アイコン等で視覚的にわかりやすくする
13. Fluid Grid Layoutはユニークだが見やすくはないためテキストコンテンツには向かない
14. カラー、基本的なレイアウト、使用する画像のテイストは統一しないと別のサイトと認識されてしまう
15. 意識せず、直感的に構造が把握できるデザイン、レイアウトが理想
16. Autopagerizeなどを導入する際は、ブラウザで戻っても問題ないようにcookie等を利用する
17. 同じページへのリンクは1つである必要はない。サムネイルがあるなら画像にもリンクを設置する

テキスト

1. 基本的にユーザーは「ざっと読むだけ」である（参照：グーテンベルク・ダイヤグラム
2. 基本的に結論を先に書く。（例えば商品の値段など）最後まで読むユーザーは多くはない
3. リーダビリティが向上するならテキストをグラフやチャートなどの画像にするのも手
4. フォントは気持ち大きめに、行間は詰めすぎず開けすぎず
5. フォントの種類を多用しない
6. 難解な専門用語を使用しない。説明してもユーザーの混乱を招くだけ。
7. 2~3段落の見出しを心がける。多い場合は目次を作るのも良い（例：Webデザインレシピ
8. 見出しは簡潔に、最初の単語を重視し、宣伝的にしない
9. 項目数が多い場合はリストを使い、「リスト」であることをわかりやすくする
10. 本文のテキストには基本的に余計な装飾をしない（css3でtext-shadowなど
11. 重要な文章は太文字にハイライトも利用すると視認性が増す
12. サイズの変更が出来るスクリプトを導入するならボタンをわかりやすく明示する

その他

1. デザインのクオリティはユーザーの信頼性を上げやすい傾向にある
2. ユーザーの意図しない挙動は避ける（勝手に音が流れる等）
3. PDF等へのリンクはPDFで有ることを明示する
4. Webサイトの表示スピードは極力高速に。ユーザーは10秒も待たない
5. コンテンツのダウンロードに時間がかかる場合はその旨を記述する
6. ユーザーの視線は人の顔や動物に向く傾向にある
7. 公開前にユーザーテストを行う。ただし、少人数で良い（Usability Testing With 5 Users
8. 1つのコンテンツでページを複数分割するのはユーザーにとって大きなストレス
9. 画像には適切で分かりやすいaltタグを加える
10. クリックできる範囲の少ないリンクはpadding等で広げてあげる
11. URLは短く、出来ればコンテンツが多少把握できるようにする
12. SERPsに表示されるスニペットでコンテンツを把握できるようにする
13. ユーザー登録を促す場合は、出来る限り簡単に登録できるようにし、退会方法も分かりやすくする
14. 404ページを設置し、ナビゲーションや検索ボックスを配置する
15. 様々なデバイスで閲覧している事を想定する
16. 3クリックルールは理想だが、無理に守る必要はない
17. 見せたい情報が沢山ある時は詰め込まず、他のページに分けたほうが効果的
18. ユーザーが喜ぶことよりもユーザーが嫌がることを考え、対策する

ユーザービリティの5秒テスト

fivesecondtestというサイトで5秒テストが出来る

1. クラシックテスト
   テストしたいWebサイトをはじめて見るユーザーに5秒間見てもらってから思い出せるものを書き出してもらう。重要項目の配置や印象を与えたいコンテンツ、視認性を高めるべき箇所が適切に処理されているかを判断できる。
2. 比較テスト
   2つのインターフェイスを2.5秒ずつ見てもらい、気に入った方を選んでもらうテスト。瞬間的に比較し、気に入ったものを挙げてもらう事で、潜在的で、直感的な視認度の高い方を見定める事ができる。
3. 感情テスト
   テストしたいWebサイトをはじめて見るユーザーに5秒間見てもらって、その中でデザインの中で気に入ったもの、嫌いなものを5つずつ挙げてもらうテスト。デザインの長所・短所を把握する。

ヤコブ・ニールセンの言葉

Feel Like A Fallinstarさん作のヤコブ・ニールセンbotから引用です。Feel Like A Fallinstarさんは国内で数少ないユーザビリティ関連のブログで様々な気づきを貰えます。ぜひご一読下さい。

他のユーザビリティ関連のブログは・・U-siteとBebitさんくらいでしょうか。

1. Tweet
   行き先が曖昧なリンクを次々にクリックしながら気長につきあってくれるユーザはまずいない。
2. Tweet
   本来、優れたデザインなら説明は不要のはずだ。直感的に操作できるデザインを心がけたい。
3. Tweet
   ユーザの限られた時間を無駄にせず、すんなりと理解してもらうためには、簡潔に分かり易く書くしかない。
4. Tweet
   求めている情報が簡単に見つかると、ユーザはそのサイトに信頼を寄せ、再び訪れる。
5. Tweet
   ユーザは文章を残さず読みたいとは思わない。斜め読みして、キーワードや情報だけを読み取れればいい。
6. Tweet
   人間が技術に振り回されているサイトは見るに忍びない。
7. Tweet
   ユーザの技術知識は低めに見積もらなければならない。

おわりに

内容はまだまだ全然足りません。細かく上げればきりがないんですが、冒頭でも書いたように「100のサイトがあれば100通りのユーザビリティが考えられるはず」ですので、コンテンツにあったユーザービリティ向上の施行とテスト&エラーによる改善をしていくのが理想と言えそうです。

この手の記事で「これは正しい」とか「これは間違ってる」等の議論をかなりの割合で見かけます。

しかし、議論するなら共通のWebサイト等を明示しないと何の解決にもなりません。コンテンツ、ターゲット層によって正しいユーザビリティは異なります。

おそらく、「それは違う！」と考えている方は脳内でどこかの複数のWebサイトを想像しているかと思います。でなければ「間違ってる」とは言えないはずです。疑問が生じたら、相手にどのサイトのどの部分かをまず確認すると、素敵な議論になりそうですね。