こんにちは、クリエイティブディレクターの熊倉です。
今回はWebユーザビリティの定義について触れていきたいと思います。
Webのユーザビリティの定義については色々提唱している方がいるのですが、その中の人物でヤコブニールセンという方がいます。
ヤコブ・ニールセン(Jakob Nielsen, Ph.D.、1957年 – )は、デンマーク出身のアメリカの工学博士。主にウェブサイトのユーザビリティ(使いやすさ)研究の第一人者。
ニールセンによるユーザインタフェース(UI)デザインの原則は、そうした原則の中でも特に著名である。
出典: フリー百科事典『ウィキペディア(Wikipedia)』
ユーザビリティの定義を実現するために、私が参考としている「ユーザビリティに関する、”5つのユーザビリティ特性”と”10のヒューリスティクス” (問題解決に役立つ知見) / 10 Usability Heuristics」をご紹介したいと思います。
目次
- 1 −5つのユーザビリティ特性−
- 2 −10のヒューリスティクス−
- 2.1 1.システムの状態がわかるようにする(Visibility of system status)
- 2.2
- 2.3 2.実際の利用環境に適合したシステムを作る(Match between system and the real worl)
- 2.4 3.ユーザーに操作の主導権と自由度を与える(User control and freedom)
- 2.5 4.一貫性を保ち標準に倣う(Consistency and standards)
- 2.6 5.エラーを防止する(Error prevention)
- 2.7 6.記憶を呼び起こさなくても、見ただけでわかるようにデザインする(Recognition rather than recall)
- 2.8 7.柔軟性と効率性を持たせる(Flexibility and efficiency of use)
- 2.9 8.最小限で、美しいデザインにする(Aesthetic and minimalist design)
- 2.10 9.ユーザーがエラーを認識し、診断し、回復できるように支援する(Help users recognize, diagnose, and recover from errors)
- 2.11 10.ヘルプや説明文書を用意する(Help and documentation)
−5つのユーザビリティ特性−
ユーザビリティを向上させるためには、ユーザビリティを構成する要素である基本原理を明らかにし、それぞれの原理に基づいた設計を行う必要があります。
ユーザビリティの権威であるヤコブ・ニールセン氏は、ユーザビリティの特性を下記の5原則としてまとめています。
1. 学習しやすさ (Learnability)
2. 効率性 (Efficiency)
3. 記憶しやすさ (Memorability)
4. 間違えにくさ (Errors)
5. 主観的満足度 (Satisfaction)
出典:『ユーザビリティ・エンジニアリング原論』
−10のヒューリスティクス−
(Webサイトの問題解決に役立つ知見)
1.システムの状態がわかるようにする(Visibility of system status)
『システムは常に、適切なフィードバックを通じて、妥当な時間内で、ユーザーに対して「何が起こっているか」を知らせなければならない。』
-わかりやすい例で言えば、ローディングを表示させ、経過を知らせるなどでしょうか。
2.実際の利用環境に適合したシステムを作る(Match between system and the real worl)
『システムは、システム指向の言語ではなく、ユーザーの言語(ユーザーに馴染みのある言葉や概念)を使って、ユーザーとコミュニケートしなければならない。利用される環境のしきたりに従い、自然で理にかなった形で情報を提示するようにシステムを作ろう。』
-サイトを作る側としてはリテラシーが高いので、専門用語を用いがちですが、実際使うのはユーザーですから、なるべくわかりやすい用語を用いることが大事ですね。
3.ユーザーに操作の主導権と自由度を与える(User control and freedom)
『ユーザーはしばしば使うべき機能の選択を誤るので、明確な「非常口」(長ったらしいダイアログ対話をしなくても、望まない状態から抜けれる仕組み)が必要である。アンドゥとリドゥを提供しよう。』
-よく見かけるのがフォームなどで、入力する際にやり直したい時にちゃんと逃げ道があるかどうかは重要です。
4.一貫性を保ち標準に倣う(Consistency and standards)
『他のアプリケーションと異なる言葉、状態、作用をUIに実装して、ユーザーに「これはつまり〜と同じことだろうか?」といった混乱を与えてはならない。プラットフォームのしきたりに倣おう』
-これはサイト内の使用言語を統一することから始まり、一貫性を持ちたいですね。
5.エラーを防止する(Error prevention)
『優れたエラーメッセージを用意するよりも、はじめから注意深くデザインして問題発生を防止するほうが良い。誤操作を引き起こしそうな条件を除去またはチェックしておいて、ユーザーに対しては操作を実行するかどうかを事前に確認しよう。』
-これもある程度、プロトタイプ段階で潰せそうなところは防止しつつも、受け入れテストで潰していく感じでしょうか。
6.記憶を呼び起こさなくても、見ただけでわかるようにデザインする(Recognition rather than recall)
『オブジェクトや作用や選択肢を可視化することによって、ユーザーの記憶負荷を最小限にしよう。ユーザーはシステムとのやりとりを続ける中で、情報を記憶しなくても済むようにしなければならない。システムを使うための説明/指南は視覚的で、いつでも容易に見れるようにすべきである。』
-デザイナーの腕の見せ所ですが、アイコンなどもしっかり内容を理解していないと可視化できない部分ですね。
7.柔軟性と効率性を持たせる(Flexibility and efficiency of use)
『システム利用を効率化できる仕組みは、初心者ユーザーには見られないが、熟練ユーザーの作業を高速化し、ひいては未経験者/経験者問わずユーザーの要求を満たすことにつながるだろう。ユーザーがたびたび実行する機能については、ユーザー自身が効率化を調整できるようにしよう。』
-いちいちトップに戻らないと行けないコンテンツや、アクセスが多いページなどはすぐに遷移できる導線を配置してあげるべきですね。また初心者向けに「初めてのガイド」を作成するなど。
8.最小限で、美しいデザインにする(Aesthetic and minimalist design)
『システムとユーザー間の対話においては、見当違いな不必要な情報を含んではならない。あらゆる余計な情報群は、関連する情報群と競合してしまうので、相対的に、必要な情報の露出を低下させてしまう。』
-デザインは極力シンプルに、機能に伴わない不要なデザインや機能は削る方向で。
9.ユーザーがエラーを認識し、診断し、回復できるように支援する(Help users recognize, diagnose, and recover from errors)
『エラーメッセージは自然言語で表現されるべきであって、プログラムコードで表現されるべきではない。メッセージは問題点を正確に示し、解決策を建設的に提言しなければならない。』
-エラーが発生した場合は原因や対処を表示。
10.ヘルプや説明文書を用意する(Help and documentation)
『システムが説明文書なしでも使えるほうが良いとしても、ヘルプや説明文書は必要だろう。この手の情報はすべて、容易に検索でき、ユーザーの行為に焦点を当てることができ、なすべき具体的な手順がリストアップされ、分量が大きすぎないようにすべきである。』
-ヘルプとドキュメントを準備しましょう。
以上がニールセンの10の鉄則ですが、如何でしたでしょうか。Webサイトなどを制作する際には基準を作らないといけないと思います。デザインなどは個人の好みになってしまいがちですが、商用のサイトではやはりユーザビリティは欠かせないので、この辺りを参考にするのも良いかもしれません。