ユーザーインタフェースデザインのための10ユーザビリティヒューリスティックス

ヤコブ・ニールセンのインタラクションデザインのための一般的な原則。これらの原則は幅広い経験則であり、具体的なユーザビリティガイドラインではないため、「ヒューリスティックス」という。

この記事の最後で、ヤコブの10ユーザビリティヒューリスティックスの無料ポスター(英語)をダウンロードできる。

1.  システム状態の視認性

デザインは、妥当な時間内に適切なフィードバックを通じて、今、何が起こっているのかを絶えずユーザーに知らせる必要がある。

ユーザーが現在のシステムの状態を把握できれば、彼らは自分がそれまでに行ったインタラクションの結果を知り、次のステップを決定することができる。予測可能なインタラクションは、その製品だけでなくブランドへの信頼も生み出す。

1番目のユーザビリティヒューリスティックの例:

ショッピングモールの地図にある「現在地」の表示は、現在どこにいるのかを示して、買い物客が次にどこに行ったらよいのかをわかるようにする必要がある。

ヒント

  • システムがどういう状態になっているのかをユーザーに明確に伝えよう。ユーザーへの通知なしに、ユーザーに影響を与えるアクションを実行してはならない。
  • ユーザーにできるだけ早く(理想的にはすぐに)、フィードバックを提示しよう。
  • オープンで、継続的なコミュニケーションを通じて、信頼を築こう。

さらに詳しくは

2.  システムと実世界の一致

デザインは、ユーザーの知っている言葉によって情報を伝える必要がある。内部向けの専門用語ではなく、ユーザーに馴染みのある語句や概念を使おう。現実世界の慣例にのっとり、自然で論理的な順序で情報を提示しよう。

しかるべきデザインのやり方というのは、ユーザーによって大きく異なる。自分や同僚にとっては完全に明確であるように見える用語や概念、アイコン、画像も、ユーザーにとっては馴染みがなかったり、混乱を招くことがあるからだ。

コントロール類のデザインが現実世界の慣例にのっとっていて、期待する結果に一致している場合(このようなデザインの手法をナチュラルマッピングという)、ユーザーはより容易にインタフェースの動作の仕方を学習したり、覚えたりすることができる。こうしたデザインは、直感的なエクスペリエンスの構築に役立つ。

2番目の ユーザビリティヒューリスティックの例:

コンロのつまみがバーナーヘッドのレイアウトと一致していると、ユーザーはどのつまみがどのバーナーヘッドと関連づけられているのかをすぐに理解できる。

ヒント

  • ユーザーが言葉の定義を調べなくても意味を理解できるようにしよう。
  • 言葉や概念に対する自分たちの理解が、ユーザーのそれと一致しているはずと思ってはならない。
  • ユーザー調査を行うと、ユーザーにとって馴染みのある用語だけでなく、重要な概念に関する彼らのメンタルモデルを明らかにすることができる。

さらに詳しくは

3.  ユーザーの主導権と自由

ユーザーは、誤ってアクションを実行してしまうことがよくある。そのため、「非常口」を明確に示して、長いプロセスを経なくても、望まないアクションを彼らがやめられるようにしなければならない。

プロセスを途中で抜けたり、アクションを元に戻したりするのが容易な場合、ユーザーは自由な感覚と自信をもつことができるようになる。非常口を設けることで、システムについての決定権がユーザー側に残るので、彼らが立ち往生したり、不満を感じたりするのを回避することができる。

3番目の ユーザビリティヒューリスティックの例:

デジタル空間には、物理的な空間と同じく、とっさのときのために、「非常口」が必要である。

ヒント

  • 「元に戻す」と「やり直し」をサポートしよう。
  • たとえば、「キャンセル」ボタンの設置などの、現在のインタラクションを終了させる明確な方法を示そう。
  • そうした非常口には明確なラベルを付け、すぐ発見できるようにしよう。

さらに詳しくは

4.  一貫性と標準

ユーザーに、異なる言葉や状況、アクションが同じことを意味するかどうかを疑問に思わせてはならない。プラットフォームと業界の慣例に従おう。

ヤコブの法則によると、ユーザーは大半の時間を「あなたが作ったもの以外の」デジタル製品の利用に費やす。彼らの期待はそうした他社製品でのエクスペリエンスによって設定されている。そのため、そうした製品との一貫性を保たないと、ユーザーは新しいことを学ぶことを余儀なくされ、彼らの認知負荷が高まる恐れがある。

4番目の ユーザビリティヒューリスティックの例:

チェックインカウンターは、通常、ホテルの正面にあるものだ。こうした一貫性のある配置によって、顧客の期待に応えることができる。

ヒント

さらに詳しくは

5.  エラーの予防

エラーメッセージは適切であることが重要だ。しかし、最も良いのは、細心の注意を払って、そもそも問題が発生しないようなデザインにすることである。エラーが発生しやすい状況をなくすか、エラーの状況を確認して、ユーザーがアクションを行う前に確認オプションを提示しよう。

エラーには、スリップとミステークの2種類がある。スリップとは、不注意によって引き起こされる無意識のエラーだ。一方、ミステークとは、ユーザーのメンタルモデルとデザインのミスマッチに基づく意識的なエラーのことである。

5番目の ユーザビリティヒューリスティックの例:

曲がりくねった山道のガードレールは、ドライバーが崖から落ちないようにする。

ヒント

  • 作業の優先順位を付けよう。コストが高くつくエラーの予防を最優先し、その後で小さな不満に対処しよう。
  • 有用な制約と適切なデフォルト値を提供して、スリップを回避しよう
  • 記憶への負荷を取り除き、元に戻す操作をサポートし、ユーザーに警告することによって、ミステークを防止しよう。

さらに詳しくは

6.  再生より再認

要素やアクション、選択肢を表示して、ユーザーの記憶への負荷を最小限に抑えよう。インタフェースのある部分の情報を別のところで思い出させるようなことをしてはならない。デザインを利用するために必要な情報(フィールドラベルやメニュー項目など)は、表示されているか、必要に応じてすぐに取得できる必要がある。

人間の短期記憶には限界がある。インタフェースによって再認が促進されれば、ユーザーの認知的な努力の量を減らすことができる。

6番目の ユーザビリティヒューリスティックの例:

ほとんどの人にとって、国の首都を覚えておくよりも、国の首都を再認するほうがやさしい。つまり、「ポルトガルの首都はリスボンですか」という質問のほうが、「ポルトガルの首都はどこですか」という質問よりも正答率が高いということだ。

ヒント

  • ユーザーがインタフェース内の情報を再認できるようにし、情報を覚えておく(再生する)必要がないようにしよう。
  • ユーザーに長いチュートリアルを与えて暗記させるのではなく、状況に応じたヘルプを提供しよう。
  • ユーザーが覚えなければならない情報を減らそう。

さらに詳しくは

7.  柔軟性と効率性

ショートカット(初心者には見えない)は、経験の浅いユーザーも経験豊富なユーザーの両方に対応できるデザインで、エキスパートユーザーのインタラクションを高速化することができる。頻繁に行うアクションをユーザーが自分の好みに合わせて調整できるようにしよう。

プロセスが柔軟だと様々な方法で実行が可能なので、ユーザーは自分に合った方法を選ぶことができる。

7番目の ユーザビリティヒューリスティックの例:

地図には、一般的な道順が記載されているが、その地域に関する知識が豊富な地元の人は近道をする。

ヒント

  • キーボードショートカットやタッチジェスチャーなどのアクセラレーターを提供しよう。
  • 個々のユーザーの好みに合わせて、コンテンツや機能を調整できるパーソナライゼーションを提供しよう。
  • カスタマイゼーションができるようにして、製品がどのように機能するのかをユーザーが選べるようにしよう。

さらに詳しくは

8.  美的で最小限のデザイン

インタフェースに無関係な情報や、めったに必要のない情報を入れてはならない。インタフェース内の余分な情報単位はすべて、関連する情報単位と競合することになり、関連する情報の相対的な可視性が低下するからだ。

このヒューリスティックは、フラットデザインを使用しなければならないということを言っているのではない。そうではなく、本質的な部分に焦点を当てたコンテンツとビジュアルデザインにする必要があるということだ。インタフェースのビジュアル要素がユーザーの主要な目標をサポートしているかを確認しよう。

8番目の ユーザビリティヒューリスティックの例:

凝った装飾のティーポットは、装飾的な要素が多すぎて、取っ手が持ちにくかったり、注ぎ口が洗いにくいなど、ユーザビリティを低下させる可能性がある。

ヒント

さらに詳しくは

9.  ユーザーによるエラーの認識・診断・回復のサポート

エラーメッセージは、(エラーコードではなく)わかりやすい言葉で表現され、問題を正確に示し、建設的に解決策を提案する必要がある。

さらに、こうしたエラーメッセージは、ユーザーがメッセージに気づいて認識できるように、視覚処理をして表示する必要がある。

9番目の ユーザビリティヒューリスティックの例:

道路にある進入禁止(Wrong way)の標識は、反対向きに走っていることをドライバーに気づかせ、停止を求める。

ヒント

  • エラーメッセージには、太字や赤い文字など、従来から採用されている視覚処理を施そう。
  • 何がうまくいかなかったのかをユーザーが理解できる言葉で伝えよう。専門用語は使わないようにしよう。
  • エラーをすぐに解決できるショートカットのような解決策をユーザーに提供しよう。

さらに詳しくは

10.   ヘルプとドキュメンテーション

システムは、追加の説明が必要ないのが一番だ。とはいえ、ときにはユーザーがタスクを完了する方法を理解するのに役立つドキュメンテーションの提供が必要なこともある。

ヘルプとドキュメンテーションの内容は、検索しやすく、ユーザーのタスクに焦点を当てたものでなけれなければならない。簡潔さを保とう。そして、実行する必要のある具体的な手順を示そう。

10番目の ユーザビリティヒューリスティックの例:

空港の案内所は一目で認識できるようになっていて、顧客の問題を状況に応じて即座に解決してくれる。

ヒント

  • ヘルプのドキュメンテーションが検索しやすいかどうか確認しよう。
  • 可能な限り、状況に応じてユーザーが必要とする瞬間にドキュメンテーションを提示するようにしよう。
  • 実行する具体的な手順を示そう。

さらに詳しくは

ヤコブからの注記

もともと私は、これらのヒューリスティックスをヒューリスティック評価のためにRolf Molichと共同で1990年に作り上げた(Molich and Nielsen 1990; Nielsen and Molich 1990)。そして、その4年後、最大の説明力をもつヒューリスティックスのセットを導き出すために、249個のユーザビリティの問題の因子分析に基づいてヒューリスティックスを改良し(Nielsen 1994a)、この改訂版ヒューリスティックスのセットが出来上がった(Nielsen 1994b)。

2020年に我々はこの記事を更新し、説明や例、関連リンクを追加した。定義の文言も少し改良したが、10ヒューリスティックス自体は、1994年以来ずっと有用なままで変更されていない。26年間、成立しつづけているということは、将来の世代のユーザーインタフェースにも適用できる可能性が高いということだろう。

10ヒューリスティックスのポスター(無料)

この記事の最後の「ダウンロード」のところにある、ヤコブの10ユーザビリティヒューリスティックスの無料ポスター(英語)をダウンロードしよう。この内容をまとめたサマリーポスターが、ポスターサイズ、A4、レターの3つのサイズでダウンロード可能である。また、11種類のポスター(10ユーザビリティヒューリスティックスとサマリーポスター)もすべてダウンロード可能である。

ユーザビリティヒューリスティックの無料ポスターをダウンロードして印刷しよう。自宅やオフィスに貼ったり、同僚にプレゼントしたりしよう。

参考

事例

チェックリストとガイドライン

参考文献

  • Molich, R., and Nielsen, J. (1990). Improving a human-computer dialogue, Communications of the ACM 33, 3 (March), 338-348.
  • Nielsen, J., and Molich, R. (1990). Heuristic evaluation of user interfaces, Proc. ACM CHI’90 Conf. (Seattle, WA, 1-5 April), 249-256.
  • Nielsen, J. (1994a). Enhancing the explanatory power of usability heuristics. Proc. ACM CHI’94 Conf. (Boston, MA, April 24-28), 152-158.
  • Nielsen, J. (1994b). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods, John Wiley & Sons, New York, NY.

自分の仕事にこれらのヒューリスティックスを使用できるかどうかを聞いてくる人は多い。もちろん使える。だが、Jakob Nielsenというクレジットを入れて、この記事の原文ページのアドレス(https://nngroup.com/articles/ten-usability-heuristics)を記載するか、上記の論文(Nielsen 1994a)に言及してほしい。ただし、このページの印刷やこのコンテンツのオンラインへの転載を希望する場合の詳細は当社の著作権情報ページを参照のこと。Copyright © by Jakob Nielsen. ISSN 1548-5552

ダウンロード