人が持つ普遍的な経験則に基づいたUI設計のためのユーザビリティの原則を10個にまとめたガイドライン「10のユーザビリティ原則」である。
現代人の一般的な経験則に基づいて作成された原則のため、ソフトウェア開発・UI設計・アプリケーションデザインの、ユーザー・インターフェース設計の原則になっている。
10個の原則に沿うだけでユーザビリティが向上し、ほとんどのプロダクトやウェブサイト、アプリに実施するや、UI設計、ユーザビリティー評価に使うことができる。
作成者
ヤコブ・ニールセン
https://www.dialogdesign.dk/about-rolf-molich/
90年代初頭に、Jakob NilsenとRolf Molichによって開発され、1995年にヤコブ・ニールセンが10の原則をNielsen Norman Group（NN/g)にて公開した。
UX業界のユーザビリティ評価のヒューリスティックとしても利用される。
ユーザビリティ評価 10箇条
10個の原則は以下の通りである。
-
システムステータスの可視性
-
現実世界とシステムの一致
-
ユーザーに操作の主導権があり自由がある
-
一貫性を維持しつつ、標準にならっている
-
エラーの防止
-
覚えていなくても見て分かるようにする
-
柔軟性と効率性をもたせる
-
シンプルで美しいデザインにする
-
ユーザーがエラーを認識、診断、および回復できるようにする
-
ヘルプやマニュアルを用意する
【原則1】システムステータスの可視性
（Visibility of system status）ビジビリティシステムステータス
ユーザーに、いま何が起きているのかを適切なタイミングで分かりやすく伝えること。
システムの状態をユーザーに伝えることで、目標を達成するために、次に何をすべきかわかる。
信号機での例
例えば、歩行者用信号機がある。歩行者用信号機は、青と赤のランプを使って横断歩道を渡るタイミングを歩行者に示している。
タイミングをより分かりやすくするために、残り時間を明確な数字で表現することで、横断歩道から離れた歩行者も渡れるかどうか判断しやすくなる。結果として、一目で分かりやすいデザインとなる。
右に行くほどわかりやすい信号機になる
関連リンク
- 協調の原理 | UX TIMES
- あなたの知らない本当の「わかりやすいデザイン」を作る視点とは
- Visibility of System Status (Usability Heuristic #1)
【原則2】現実世界とシステムの一致
（Match between system and the real world）
ユーザーが慣れ親しんでいる言葉や表現、現実世界での操作をシステムでも使用すること。
電卓の例
例えば、電卓アプリでは実物の電卓とほぼ同じUIを採用している。多くのユーザーは実物の電卓を操作した経験があるため、電卓アプリの操作を0から新しく覚える必要がなくなる。
電卓アプリは現実世界の電卓とボタンの配置や、「＝」ボタンで計算結果が出る操作などが同じになっている
関連リンク
- グローバルナビゲーションは日本語で作れ | UX TIMES
- Match Between System and Real World: 2nd Usability Heuristic Explained
【原則3】ユーザーに操作の主導権があり自由がある
（User control and freedom）
ユーザー自身が操作の間違いを修正できて、元に戻せること。
操作に慣れたユーザーでさえも、システムの操作を間違える事がある。ユーザー自身が間違った操作を取り消せれば、安心して操作することができる。
Gmailの例
例えば、Gmailでは、メールを送信した後にメッセージ送信を取り消せる機能がある。うっかり間違えてメールを送信したとしても、ユーザー自身が送信を取り消すことができる。
Gメールでは送信取り消し機能があり、
ユーザーが自分の行動を取り消す際に利用する
関連リンク
【原則4】一貫性を維持しつつ、標準にならっている
（Consistency and standards）
製品やサービス、サイト内に使用する色や形状、操作方法やフィードバックには一貫性を持たせつつ、広く一般的な使い方に沿った設計を行うこと。
ユーザーはすでに形成されたメンタルモデルで、新しいシステムを使うため、メンタルモデルに沿った使い方であれば、スムーズに目的を達成することができる。しかし、一貫性を失うと混乱してしまう。
Webサイト/ブラウザの例
例えばウェブサイト内で、青色がボタン色に使われているにもかかわらず、見出しのデザインに同じ色と形状を使用してしまうと、ボタンだと思ってクリックしてしまう。某配送会社のウェブサイトでは、メインのボタンに青い長方形のボタンを採用しているが、下層ページでは青い長方形の見出しを採用しているため、ボタンだと勘違いしてクリックしてしまう。
見出しがボタンと同じデザインであるため、
見出しをクリックしてしまう
また、一般的に使用方法が確立され標準化された機能が存在する場合、標準に沿ったUI設計を行うことが望ましい。
例えばウェブブラウザの戻る、進む、更新ボタンは、どのブラウザソフトでもウィンドウの左上に、同じようなアイコンで表示されている。
ブラウザソフトの戻る、進む、更新ボタンは、
同じ位置に似たアイコンで表示されている
関連リンク
- Usability Heuristic 4: Consistency and Standards (Video)
- Principle of Consistency and Standards in User Interface Design
【原則5】エラーの防止
（Error prevention）
ユーザーが無意識に行ってしまう操作ミスが起こらないように設計すること。また、操作ミスがあっても、ユーザーが意図する操作をシステムが解釈して、想定される正しい結果を返すこと。
入力ミスをした場合には、「入力エラー、修正してください」「間違っています」など警告文を出してユーザーを責めるのではなく、ユーザーが本来やりたかった操作結果を返すと良い。
Google検索の例
例えば、Googleの検索エンジンでは、間違ったキーワードで検索をかけたとしても、補正した検索結果を表示する。ユーザーにミスを修正させるのではなく、修正した後のキーワードで検索してくれる。
Twitterのスペルを間違えて検索しても、
本来検索したかった結果を表示してくれる
関連リンク
【原則6】覚えていなくても見て分かるようにする
（Recognition rather than recall）
何もない状態から思い出させて操作を促すより、情報を与えてユーザーが記憶していることを思い出してもらい、操作をしてもらうこと。
人が記憶したことを思い出す方法は2つある。1つめは経験したことをそのまま思い出す再生記憶。2つめは経験したことを、提示された選択肢の中から思い出す再認記憶だ。一般的に再生記憶よりも、再認記憶の方が簡単に思い出しやすい。
ユーザーに対して再認記憶を利用したUI設計を行うと、認知負荷を下げることができ、ストレスなく操作してもらえる。
アンケートフォームの例
例えば、趣味嗜好を問うアンケートでは、ユーザーに思い出させる自由回答より、選択肢から選んでもらう方が回答しやすい。
自由回答式より、選択式のアンケートの方が答えやすい
関連リンク
【原則7】柔軟性と効率性をもたせる
（Flexibility and efficiency of use）
初心者にはUIを分かりやすくし、リピーターには効率的に操作が行える操作を用意すること。
ひとつの製品の中で、同じ機能に対して複数の操作方法を用意して柔軟で幅広い操作性を持たせることができる。
アプリケーションの例
例えば、デザインツールのショートカットキーがある。
ツールの使用に慣れていないユーザーは、メニューアイコンから直感的に操作を行い、ツールのエキスパートはショートカットキーを使用して効率的に操作を行うことができる。
AdobeのPhotosohpでは、初心者向けにはツールのアイコンと、ツールそれぞれにチュートリアル動画が表示されるようになっている。エキスパート向けには、ツールのショートカットキーが割り当てられている。
Adobeのデザインツールは、初心者でもエキスパートでも操作できる柔軟性を備えている
関連リンク
- Usability Heuristic 7: Flexibility and Efficiency of Use (Video)
- Accelerators Allow Experts to Increase Efficiency
【原則8】シンプルで美しいデザインにする
（Aesthetic and minimalist design）
過剰なコンテンツの配置や余計な装飾を避けること。
人の脳は一度に多くの情報を処理できない。目的を達成するまでに、処理する情報が多すぎるとユーザーに負荷がかかり、操作に疲れてしまう。ユーザーがタスクに集中できるよう、シンプルに設計することで、スムーズに目的を達成することができる。
ある日本のWebサイトの例
例えば、全てのコンテンツが強調されているウェブサイトがある。「全てのコンテンツが重要だから、目立たせたい」という意図で、強調されたオブジェクトばかり配置してしまうと、ユーザーは何を見ればいいのか、何をすればいいのか理解するまで時間がかかってしまう。
左：強調したオブジェクトが多く、何を選べばいいのか迷ってしまう
右：過度な強調を避け、目立たせたい部分を適切に配置している
関連リンク
【原則9】ユーザーがエラーを認識、診断、および回復できるようにする
（Help users recognize, diagnose, and recover from errors）
システムエラーやユーザーが起こしたエラーが、どのような原因で起きたのか視覚的に分かりやすく表示し、どうすればエラーを解消できるのか明示すること。
エラーが起きているにも関わらずその状態を明示しなかったり、「エラーが起きました」とだけメッセージが出ても、どこでどのようなエラーが起きたのかユーザーは把握できずに迷ってしまう。
申し込みフォームの例
例えば、申し込みフォームの入力エラーは、なるべくリアルタイムかつ具体的にユーザーに知らせることで、ユーザーはすぐにエラーを理解し、行動を修正できる。
関連リンク
【原則10】ヘルプやマニュアルを用意する
（Help and documentation）
UIは、見ただけで使い方が直感的に分かるように設計することが基本である。そのうえで、ヘルプやマニュアルにも簡単にアクセスできるよう、あらかじめ整備しておくことが重要である。
ヘルプ・マニュアル作成で気をつけるべき3つのポイント
ヘルプやマニュアルを作成する際には、特に注意すべき点が3つある。
- ヘルプに簡単にアクセスできること
- ユーザーの目的を解決する内容が探せること
- 実行するための具体的な手順や、方法が分かりやすく掲載されていること
ヘルプを作成する際に、ユーザータスクに焦点を当て、適切な順序で説明する必要がある。
ユーザーがヘルプを求める状況のコンテキストを洗い出すことで、期待した通りのヘルプの内容や、解決をもたらすマニュアルを作成することができる。
関連リンク
関連記事
関連用語
- メンタルモデル | UX TIMES
- オンボーディング | UX TIMES
- ユーザビリティ | UX TIMES
- ヒューリスティック | UX TIMES
- 再生記憶より再認記憶 | UX TIMES
- 2つの思考モード（システム1・システム2） | UX TIMES
- 一貫性の原理 | UX TIMES
- ゲシュタルト原則（ゲシュタルトの法則） | UX TIMES
- 近接（ゲシュタルトの原則） | UX TIMES
- KISSの法則 | UX TIMES
- フィッツの法則 | UX TIMES
- メンタルモデル | UX TIMES
- レストルフ効果 | UX TIMES
参考文献
- 10 Usability Heuristics for User Interface Design
- The most comprehensive collection of Design Principles on the Internet.
- インターフェイスデザインの８つの黄金律
