ウェブサイト更新業務をサクサク対応!ラクラク管理!依頼管理ツール「トコトン」のサービスサイトはこちら

UIデザインの基礎!ユーザビリティ10原則とは?

UIやUXの高いWebデザインを考えるうえで、ユーザビリティは必要不可欠の要素となります。

そして、Webサイトにおけるユーザビリティ研究の第一人者として有名なのがヤコブ・ニールセンです。

彼が提唱する「ユーザビリティ10原則」はユーザビリティを学ぶ基礎としてWeb制作者に広く知られています。

今回はこの「ユーザビリティ10原則」の内容について紹介いたします!

ユーザビリティとは?

ユーザビリティ(usability)は簡単に言うと「使いやすさ」を意味します。一方で、厳密に説明すると、国際標準化機構(ISO)が制定する国際規格「ISO9241-11」では以下のように定義されています。

Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.

特定の利用者が特定の目標を特定の環境で、効果的に、効率的に、満足して達成する度合い。

ISO9241-11

つまり、ターゲットとする人が便利に分かりやすく、情報を入手したり、入力したり、購入やダウンロードなどの操作を使えるかが、ユーザビリティの考え方となります。

ユーザビリティとアクセシビリティ

ユーザビリティと似た言葉にアクセシビリティがあります。アクセシビリティとは、ターゲットを限定せず、老若男女、障がいの有無に関係なく誰もが、多様な情報端末、OSからWebサイトやアプリケーションを利用できることを意味します。

アクセシビリティに配慮された事例として、視覚障害を持つユーザーがスクリーンリーダーを使用して情報を理解できるよう、テキストが適切にマークアップされていることが挙げられます。他にも、身体的な障害があるユーザーがキーボードだけで操作できるように、キーボードフォーカスが適切に設定されていることなどがあります。

アクセシビリティはターゲットを広く平等に定めているのに対して、ユーザビリティは、ターゲットを絞り込むことでより便利に使えることを追求しています。例えば、新卒採用サイトや、特定のターゲット向けに開発された商品購入サイトなどは、ユーザビリティの高いサイトをデザインするのに適していると言えます。

ユーザビリティ10原則とは?

ユーザビリティ10原則を提唱したヤコブ・ニールセンとはどのような人物なのか、どうしてユーザビリティ10原則が有名なのか等について説明します。

ヤコブ・ニールセンについて

ヤコブ・ニールセン(Jakob Nielsen)は、ユーザビリティ分野のパイオニアとして有名なデンマーク出身のヒューマン・コンピューター・インタラクション(HCI)博士です。現在も、Nielsen Norman Groupの代表として世界中の企業や機関に対してユーザビリティの向上をサポートしています。

彼は、ユーザーインターフェイスを迅速かつ安価に改善するための「ディスカウントユーザビリティエンジニアリング」運動を確立し、ヒューリスティック評価を含むいくつかのユーザビリティ手法を発明しました。

ユーザビリティ10原則について

ユーザビリティ10原則は、1999年に出版されたヤコブ・ニールセンの著書「Designing Web Usability: The Practice of Simplicity」の中で提唱されました。

本書では、Webデザインにおけるユーザビリティの重要性を強調し、ユーザー中心のデザインの重要性を訴えています。また、具体的な事例やデータに基づいた研究結果を用いて、ユーザビリティを高めるための具体的なテクニックやアプローチ、ユーザーテストの重要性などについて詳細に解説されています。

そして、この中で提唱され有名となったのが「ユーザビリティ10原則」です。Webデザインにおける基本的な指針が詳細に解説されており、ユーザビリティを考える最初の指針となりました。そのため、ユーザビリティの基本を学ぶ書籍としてデザイナーやエンジニアなどに広く知られるようになりました。

ユーザビリティ10原則の解説

ヤコブ・ニールセンが提唱したユーザビリティ10原則の内容とWebデザインにおける事例について1つずつ解説していきます。

Visibility of system status (システムの状態の可視化)

ユーザーに対してシステムの現在の状態や進行中のプロセスを明確に可視化することの重要性を示しています。ユーザーが閲覧・操作を行うなかで、現在何が起こっているのかを理解しやすくし、ユーザーエクスペリエンスを向上させる効果があります。

具体的には、ページが読み込まれる際に、ローディングインジケーターを表示することで、ユーザーに読み込み中であることを明示します。これにより、ユーザーが待ち時間を理解しやすくなり、ストレスを軽減できます。

Match between system and the real world (システムと現実世界の一致)

システムの操作や用語がユーザーの日常生活や既存の知識に合致していることの重要性を示しています。ユーザーがシステムを直感的に理解し、操作できるようにするためには、システムと現実世界との一致を考慮する必要があります。

具体的には、Webサイトのメニューやアイコンは、一般的な用語やシンボルを使用することが重要です。例えば、ホームアイコンがホームページにリンクしていることや、ゴミ箱アイコンが削除操作を示すことは、ユーザーにとって理解しやすい一致した表現となります。

User control and freedom (ユーザーの制御と自由)

ユーザーが誤った操作をした場合でも、簡単に元の状態に戻したり、操作を取り消したりできるようにすることの重要性を示しています。ユーザーが制御を失ったり、迷子になったりすることなく、自由に操作できる環境を提供することが重要とされています。

具体的には、モーダルウィンドウ(ポップアップウィンドウ)が表示された時、ユーザーがウィンドウを閉じることで元の画面に戻ることができるキャンセルボタンを表示しておきます。これにより、ユーザーは意図しないウィンドウに閉じ込められることなく、自由に操作できます。

Consistency and standards (一貫性と標準化)

Webサイトにおいて、一貫性を持たせることと業界標準に従うことの重要性を示しています。ユーザーが理解しやすい操作やナビゲーションにするには、一貫性のあるデザインと標準的なインターフェースを採用することが大切です。

具体的には、リンクボタンやアイコンなどのインタラクティブな要素は、同じ機能や目的を持つ場合、一貫したデザインを使用することが重要です。例えば、同じアクションを行うボタンは色や形状を統一することで、ユーザーにとってわかりやすいインターフェースとなります。

Error prevention (エラーの予防)

ユーザーが誤った操作をすることを防ぐ重要性を示しています。エラーが発生するのを予防することで、ユーザーエクスペリエンスを向上させ、ユーザーのストレスや不快感を軽減します。

具体的には、フォーム入力時に、必須項目が未入力のまま送信されたり、入力が不正な文字形式だったりした際にエラーメッセージを表示してユーザーに警告することがあります。このようなバリデーション機能を備えることで、ユーザーが誤った入力をすることを予防し、正確な情報の提供を促します。

Recognition rather than recall (想起よりも認識)

ユーザーが情報や操作を覚える必要がなく、直感的に認識できるデザインとすることの重要性を示しています。ユーザーにとって記憶負担を軽減することで、使いやすいインターフェースを実現し、ユーザーエクスペリエンスの向上を図ることができます。

具体的には、Webサイトのナビゲーションは、簡潔で分かりやすい構造を持つことが重要です。複雑な階層構造や深い階層を持つナビゲーションは、ユーザーが目的のページを探す際に記憶負担を増やします。

Flexibility and efficiency of use (使用の柔軟性と効率性)

それぞれのユーザーが初心者からベテランまで異なるスキルを持っていることを前提に、柔軟性のあるデザインを行うことの重要性を示しています。慣れているユーザーは効率的に操作できる一方、初心者や経験の少ないユーザーも使いやすいインターフェースを提供することが大切とされています。

具体的には、ユーザーが好みに合わせてインターフェースをカスタマイズできる設定オプションを設けていることがあります。色やレイアウトの変更、頻繁に利用する機能のショートカット設定などが挙げられます。

Aesthetic and minimalist design (美的でミニマルなデザイン)

美的でシンプルなデザインを採用することの重要性を示しています。ユーザーにとって見やすく魅力的なデザインは、ユーザーエクスペリエンスを向上させる効果があります。

具体的には、アニメーションを使用する際は、過剰な動きや目立つエフェクトを避け、目的に合ったシンプルなアニメーションを取り入れるようにします。自然な動きのアニメーションは、ユーザーエクスペリエンスを高める効果があります。

Help users recognize, diagnose, and recover from errors (エラーの認識と診断と回復の補助)

ユーザーが操作の過程でエラーが発生した際に、エラーを認識し、原因を理解し、適切に回復できるようにすることの重要性を示しています。ユーザーがエラーに直面した際に困惑したり挫折したりしないよう、適切なフィードバックや手段を提供することが目指されています。

具体的には、ユーザーが誤った操作をした際に、戻る(キャンセル)ボタンを用意することで、元の画面に戻ることができます。これにより、ユーザーが間違いを修正する手段を提供します。

Help and documentation (ヘルプとドキュメント)

ユーザーが問題を解決するためのヘルプやマニュアルを提供することの重要性を示しています。ユーザーが、操作方法がわからなくなった際に、適切なサポートや情報提供が行われることで、ユーザーエクスペリエンスを向上させる効果があります。

具体的には、Webサイト内に、ヘルプセクションを設けることで、ユーザーが自己解決できる情報を提供します。よくある質問(FAQ)や操作ガイド、チュートリアルなどが含まれます。

まとめ

今回ご紹介した10原則を意識してユーザビリティの高いWebデザインを行うことで、ユーザーにとって満足度の高いWebサービスを提供することが可能となります。

また、ユーザビリティに関連する原則や指針について、ヤコブ・ニールセンの他にもドナルドA.ノーマンの著書「誰のためのデザイン(原題:The Design of Everyday Things)」やベン・シュナイダーマンが提唱した「8つのゴールデンルール」などがあります。これらを参考にすることで、ユーザビリティについてより深く理解することができます。

これらの知識を組み合わせて、今後のWebデザインにぜひ活用してみてください!