TOP › UX用語 › 思考・マインド › ヤコブ・ニールセンのユーザビリティ10原則

ヤコブ・ニールセンのユーザビリティ10原則 10 Usability Heuristics for User Interface Design

nayumi

思考・マインド

一般的な経験則に基づいたUI設計の10個の原則

人が持つ普遍的な経験則に基づいたUI設計のための10個の原則。

ユーザビリティ評価のひとつであるヒューリティック評価で、90年代初頭に、Jakob Nilsenヤコブ・ニールセンとRolf Molichロルフ・モリッヒによって開発され、1995年にヤコブ・ニールセンが10の原則をNielsen Norman Groupにて公開した。

人の一般的な経験則に基づいて作成された原則のため、ほとんどの製品やウェブサイト、アプリなどに実施するヒューリスティック評価や、UI設計、ユーザビリティー評価に使うことができる。

10個の原則は以下の通りである。

  1. システムステータスの可視性
  2. 現実世界とシステムの一致
  3. ユーザーに操作の主導権があり自由がある
  4. 一貫性を維持しつつ、標準にならっている
  5. エラーの防止
  6. 覚えていなくても見て分かるようにする
  7. 柔軟性と効率性をもたせる
  8. シンプルで美しいデザインにする
  9. ユーザーがエラーを認識、診断、および回復できるようにする
  10.  ヘルプやマニュアルを用意する

原則1.システムステータスの可視性（Visibility of system statusビジビリティ　オブ　システムステータス）

ユーザーに、いま何が起きているのかを適切なタイミングで分かりやすく伝えること。

システムの状態をユーザーに伝えることで、目標を達成するために、次に何をすべきかわかる。

例えば、歩行者用信号機がある。歩行者用信号機は、青と赤のランプを使って横断歩道を渡るタイミングを歩行者に示している。

タイミングをより分かりやすくするために、残り時間を明確な数字で表現することで、横断歩道から離れた歩行者も渡れるかどうか判断しやすくなる。結果として、一目で分かりやすいデザインとなる。

わかりやすい信号機

右に行くほどわかりやすい信号機になる

関連リンク

 原則2.現実世界とシステムの一致（Match between system and the real worldマッチ ビトゥイーン　システム　アンド　ザ　リアルワールド）

ユーザーが慣れ親しんでいる言葉や表現、現実世界での操作をシステムでも使用すること。

例えば、電卓アプリでは実物の電卓とほぼ同じUIを採用している。多くのユーザーは実物の電卓を操作した経験があるため、電卓アプリの操作を0から新しく覚える必要がなくなる。

電卓アプリと現実の電卓

電卓アプリは現実世界の電卓とボタンの配置や、「＝」ボタンで計算結果が出る操作などが同じになっている

関連リンク

原則3.ユーザーに操作の主導権があり自由がある（User control and freedomユーザー コントロール アンド フリーダム）

ユーザー自身が操作の間違いを修正できて、元に戻せること。

操作に慣れたユーザーでさえも、システムの操作を間違える事がある。ユーザー自身が間違った操作を取り消せれば、安心して操作することができる。

例えば、Gmailでは、メールを送信した後にメッセージ送信を取り消せる機能がある。うっかり間違えてメールを送信したとしても、ユーザー自身が送信を取り消すことができる。

Gmailの送信取り消し画面

Gメールでは送信取り消し機能があり、
ユーザーが自分の行動を取り消す際に利用する

関連リンク

原則4.一貫性を維持しつつ、標準にならっている（Consistency and standardsコンシステンシー アンド スタンダード）

製品やサービス、サイト内に使用する色や形状、操作方法やフィードバックには一貫性を持たせつつ、広く一般的な使い方に沿った設計を行うこと。

ユーザーはすでに形成されたメンタルモデルで、新しいシステムを使うため、メンタルモデルに沿った使い方であれば、スムーズに目的を達成することができる。しかし、一貫性を失うと混乱してしまう。

例えばウェブサイト内で、青色がボタン色に使われているにもかかわらず、見出しのデザインに同じ色と形状を使用してしまうと、ボタンだと思ってクリックしてしまう。某配送会社のウェブサイトでは、メインのボタンに青い長方形のボタンを採用しているが、下層ページでは青い長方形の見出しを採用しているため、ボタンだと勘違いしてクリックしてしまう。

ボタンと見だしに同じ色が使われているため間違えやすい

見出しがボタンと同じデザインであるため、
見出しをクリックしてしまう

また、一般的に使用方法が確立され標準化された機能が存在する場合、標準に沿ったUI設計を行うことが望ましい。

例えばウェブブラウザの戻る、進む、更新ボタンは、どのブラウザソフトでもウィンドウの左上に、同じようなアイコンで表示されている。

ウェブブラウザは一部に共通のUIを採用している

ブラウザソフトの戻る、進む、更新ボタンは、
同じ位置に似たアイコンで表示されている

関連リンク

原則5.エラーの防止（Error preventionエラー・プレベンション）

ユーザーが無意識に行ってしまう操作ミスが起こらないように設計すること。また、操作ミスがあっても、ユーザーが意図する操作をシステムが解釈して、想定される正しい結果を返すこと。

入力ミスをした場合には、「入力エラー、修正してください」「間違っています」など警告文を出してユーザーを責めるのではなく、ユーザーが本来やりたかった操作結果を返すと良い。

例えば、Googleの検索エンジンでは、間違ったキーワードで検索をかけたとしても、補正した検索結果を表示する。ユーザーにミスを修正させるのではなく、修正した後のキーワードで検索してくれる。

Googleの検索補正

Twitterのスペルを間違えて検索しても、
本来検索したかった結果を表示してくれる

関連リンク

原則6.覚えていなくても見て分かるようにする（Recognition rather than recallロケーション　ラザー　ゼン　リコール）

何もない状態から思い出させて操作を促すより、情報を与えてユーザーが記憶していることを思い出してもらい、操作をしてもらうこと。

人が記憶したことを思い出す方法は2つある。1つめは経験したことをそのまま思い出す再生記憶。2つめは経験したことを、提示された選択肢の中から思い出す再認記憶だ。一般的に再生記憶よりも、再認記憶の方が簡単に思い出しやすい。

ユーザーに対して再認記憶を利用したUI設計を行うと、認知負荷を下げることができ、ストレスなく操作してもらえる。

例えば、趣味嗜好を問うアンケートでは、ユーザーに思い出させる自由回答より、選択肢から選んでもらう方が回答しやすい。

答えやすいアンケートと答えにくいアンケート

自由回答式より、選択式のアンケートの方が答えやすい

関連リンク

7.柔軟性と効率性をもたせる（Flexibility and efficiency of useフレキシビリティ　アンド　エフィセンシー　オブ　ユーズ）

初心者にはUIを分かりやすくし、リピーターには効率的に操作が行える操作を用意すること。

ひとつの製品の中で、同じ機能に対して複数の操作方法を用意して柔軟で幅広い操作性を持たせることができる。

例えば、デザインツールのショートカットキーがある。ツールの使用に慣れていないユーザーは、メニューアイコンから直感的に操作を行い、ツールのエキスパートはショートカットキーを使用して効率的に操作を行うことができる。

AdobeのPhotosohpでは、初心者向けにはツールのアイコンと、ツールそれぞれにチュートリアル動画が表示されるようになっている。エキスパート向けには、ツールのショートカットキーが割り当てられている。

Photoshopのメニュー画面

Adobeのデザインツールは、初心者でもエキスパートでも操作できる柔軟性を備えている

関連リンク

8.シンプルで美しいデザインにする（Aesthetic and minimalist designアーセティック　アンド　ミニマリスト　デザイン）

過剰なコンテンツの配置や余計な装飾を避けること。

人の脳は一度に多くの情報を処理できない。目的を達成するまでに、処理する情報が多すぎるとユーザーに負荷がかかり、操作に疲れてしまう。ユーザーがタスクに集中できるよう、シンプルに設計することで、スムーズに目的を達成することができる。

例えば、全てのコンテンツが強調されているウェブサイトがある。「全てのコンテンツが重要だから、目立たせたい」という意図で、強調されたオブジェクトばかり配置してしまうと、ユーザーは何を見ればいいのか、何をすればいいのか理解するまで時間がかかってしまう。

左：強調したオブジェクトが多く、何を選べばいいのか迷ってしまう
右：過度な強調を避け、目立たせたい部分を適切に配置している

関連リンク

9.ユーザーがエラーを認識、診断、および回復できるようにする（Help users recognize, diagnose, and recover from errorsヘルプ ユーザーズ レコナイズ ディアゴーズ アンド リカバー フロム エラーズ）

システムエラーやユーザーが起こしたエラーが、どのような原因で起きたのか視覚的に分かりやすく表示し、どうすればエラーを解消できるのか明示すること。

エラーが起きているにも関わらずその状態を明示しなかったり、「エラーが起きました」とだけメッセージが出ても、どこでどのようなエラーが起きたのかユーザーは把握できずに迷ってしまう。

例えば、申し込みフォームの入力エラーは、なるべくリアルタイムかつ具体的にユーザーに知らせることで、ユーザーはすぐにエラーを理解し、行動を修正できる。

分かりやすいエラーと、分かりにくいエラーの比較図

関連リンク

10.ヘルプやマニュアルを用意する（Help and documentationヘルプ アンド ドキュメント）

UIを見ただけで使えるほど分かりやすく設計しつつも、ヘルプやマニュアルには簡単にアクセスできるように用意しておくこと。

ヘルプやマニュアルの作成の際に気を付けることが３つある。

1つ目はヘルプに簡単にアクセスできること。2つ目はユーザーの目的を解決する内容が探せること。3つ目は実行するための具体的な手順や、方法が分かりやすく掲載されていることだ。

ヘルプを作成する際に、ユーザータスクに焦点を当て、適切な順序で説明する必要がある。

ユーザーがヘルプを求める状況のコンテキストを洗い出すことで、期待した通りのヘルプの内容や、解決をもたらすマニュアルを作成することができる。

関連リンク

Usability Heuristic 10: Help and Documentation (Video)

関連記事

あなたの知らない本当の「わかりやすいデザイン」を作る視点とは

ユーザーの目に入るタイミングで適切に表示させる

関連用語

参考文献

参考書籍

東京在住のWEBデザイナー。 趣味：映画鑑賞、気分がノってる時の料理 好きな食べ物：ビリヤニ、野菜、虫 マイブーム：テキスト読み上げ機能での読書

「UX用語」のカテゴリー

UX用語 全338用語 一覧

UX用語をアプリで学ぶ：用語集クイズ