ALL

デザインを磨く！UIをより良く改善するためのユーザビリティ原則まとめ

UI/UXデザインの制作プロセスでは、ユーザビリティの問題点を見つけ修正することが、サービスの質の向上、よりよい体験を提供するために大切になります。その問題点を見つけるための方法にヒューリスティック分析という手法が存在します。
この記事ではヒューリスティック分析に使われる2つのユーザビリティ原則についてまとめていきます。

Contents

ヒューリスティック分析とは

人が自分の意思でなにかを決める時に、無意識に利用する経験的原理や答えを見つけるための方法をヒューリスティックといいます。そのヒューリスティックに沿ってWebデザインやアプリのUIを評価/査定する手法をヒューリスティック分析と呼びます。

そして、ユーザビリティ分析の際に評価軸となるチェックリストやガイドラインとして有名な法則に、『シュナイダーマンのインターフェイスデザインの8つの黄金率』と『ヤコブ・ニールセンのユーザビリティ10原則』が存在します。これらの法則はUIに特化した内容となっており、下記よりひとつひとつ内容を確認していきたいと思います。

シュナイダーマンのインターフェイスデザインの8つの黄金率（Shneiderman’s “Eight Golden Rules of Interface Design”）

シュナイダーマンはアメリカの情報工学博士で、1980年にアメリカで刊行された「ユーザーインターフェースの設計」にて本ルールを発表しました。このルールは時代の進歩に併せて何度も改定を繰り返していて、シュナイダーマン自身のWebサイトにも掲載されています。本記事では、2016年の第6版の内容を掲載します。
https://www.cs.umd.edu/users/ben/goldenrules.html

一貫性を保つように務める（Strive for consistency）

デザイン内での同じようなシチュエーションでは、一貫して同じ動作を行えるようにしましょう。システム設定や、メニュー、ヘルプ画面などで同じ用語を利用するなど、色、レイアウト、文字サイズ、フォントなどには統一したものを選択しましょう。ユーザーへのアラームなどの例外的なパターンは、わかりやすく数を制限する必要があります。

普遍的なユーザービリティを追求する（Seek universal usability）

初心者から熟練者、年齢や国籍の違い、障害の有無、技術的なリテラシーの差など、ユーザーがもつ色々な要因によって、デザインに求められる要求は複雑になります。それらの多種多様なユーザーのニーズを認識し、コンテンツ側で柔軟に受け止められるような設計にしましょう。初心者向けには解説などの機能を、熟練者向けにはショートカットなどでよりテンポが速く利用できるようにする。これらの機能によって、UI/UXの向上を図ることができます。

正しいフィードバックを返す（Offer informative feedback）

ユーザーがなんらかのアクションを行った時には、適切なフィードバックを返すようにしましょう。アニメーションなどのインタラクションを設定することで、ユーザーに対してわかりやすく反応を示すことができます。頻繁に行う動作や、重要度が低い動作では控えめにし、個人情報の入力や商品の購入といった重要な動作のときははっきりとわかるようなフィードバックにするとよいでしょう。

達成度を示すダイアログボックスを用意する（Design dialog to yield closure）

ユーザーが連続したアクションを行う際には、開始・進行中・完了などの段階に振り分けることが大切です。各アクションを終了したというフィードバックを示すことで、ユーザーは達成感や安心感を受けて、次のアクションに意識を切り替えることができます。一例として、ECサイトでは商品の選択から、支払いページへ移行し、購入完了ページで一連のアクションが終了するという形になります。

エラー処理を簡単に行えるように（Offer simple error handling）

可能な限り、ユーザーが重大なエラーを発生させないようにインターフェースを設計しましょう。
それでもエラーが発生するような場合には、回復させるための簡単な指示をシステム側から示すことが必要になります。たとえば、テキスト入力フィールドに適切ではない文字が入力された場合に、利用できない文字がグレーで表示されるというような形が考えられます。
また、ユーザーが誤った処理を行った場合には、インターフェイスの状態を変更しないままにするか、システムから状態の復元に関する指示を与えるように設計しましょう。この場合では、住所を入力するフォームで入力された郵便番号に間違いがある場合には、名前や住所などのフォーム全体を再入力するのではなく、修正が必要な部分のみにガイドするというような形が考えられます。

簡単にやり直しができるように（Permit easy reversal of actions）

可能な限り、ユーザーが間違えた操作を行ってしまっても、もとの状態に戻せるよう設計しましょう。
元に戻せるということをユーザーが認識していれば、操作を行うにあたっての不安を和らげることができます。戻せることを知らせる場合には、ひとつ前の操作に戻る、データ入力の最初に戻る、などどこまで操作が戻るのかを明示することも忘れないようにしましょう。

ユーザーがシステムを制御できるように（Keep users in control）

熟練したユーザーは、システムを自分で管理したいという欲求を強く抱えています。彼らは使い慣れた仕様の変化を望んでおらず、助長なデータ入力作業や、必要な情報が見つからないといった、思い通りにならない状態に悩まされているということを理解しましょう。

短期記憶（Reduce short-term memory load）

人間が短期に記憶できる情報には限りがあります。そのため、デザイナーはユーザーが何かを記憶しないと利用できないような仕様設計をすることを回避しなければなりません。フォームなどで入力した情報を後から参照する必要がある場合、画面上のどこかに表示させたり、各情報が1画面内に収まるよう設計することが大切です。

ヤコブ・ニールセンのユーザビリティ10原則（Jakob Nielsen’s 10 Usability Heuristics）

ヤコブ・ニールセンはデンマーク出身のアメリカの工学博士で、Webにおけるユーザビリティの第一人者として著名な人物です。本ルールはインタラクションデザインに関するヒューリスティックとして、ニールセンの研究チームであるNielsen Norman Groupから発表されたものです。
https://www.nngroup.com/articles/ten-usability-heuristics

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

デザイン設計の上では、操作が完了しているのか、進捗はどのような状況なのかということをユーザーに適切にフィードバックする必要があります。ユーザーが現在のシステムの状態を知ることは、現状把握と次の行動に移行するきっかけとなるため、システムの信頼感の向上に繋がります。

システムと現実をすり合わせる (Match between system and the real world)

システム側の専門用語ではなく、ユーザーが理解できる一般的な言葉を用いて設計を行いましょう。情報が自然でわかりやすく理解できるにすることが大切です。システムの実装者が理解できる言葉やアイコンやイラストであっても、ユーザーには馴染みがなかったり、混乱させてしまうことがあります。一般的でわかりやすい情報設計ができていれば、ユーザーが利用時に直感的に機能を理解しやすくなります。

ユーザーにシステムを自由に制御させる (User control and freedom)

ユーザーはシステムを利用する上で、しばしば間違った操作を行ってしまうため、操作自体を元に戻せるような仕組みを用意しましょう。その操作自体をキャンセルしたり、操作を行う前の状態へと戻せるようにすることで、ユーザーにストレス与える状況を回避することに繋がります。

一貫性と標準性を保持する (Consistency and standards)

ユーザーが単語の言い回しやレイアウトなどの違いによって疑問を抱かないように、システム内では一貫性を持たせ、一般的な慣習に従うようデザインしましょう。
現代の人々は、日常的にさまざまなデジタル製品を利用しています。デザインの中でそれらの一般的な製品とのずれがあると、新しいことを学ぶ負荷をユーザーへと与えてしまうことになります。

エラーを起こさない (Error prevention)

わかりやすいエラーメッセージは大切ですが、そもそもエラーが発生すること自体を防ぐことも重要です。
エラーには2種類あり、不注意による無意識のエラーと、ユーザーのイメージした挙動とデザインのミスマッチに基づく意識的なエラーが存在します。それらのエラーが発生しやすい状態を排除するか、エラーが発生しやすい状態を事前にまとめて、作業の実行する前に確認オプションをユーザーへと提示しましょう。

機能を憶えさせるのではなく理解できるようにする
(Recognition rather than recall)

人間が短期に記憶できる情報には限りがあるため、情報が認識しやすいデザインにすることで、ユーザーが感じるストレスを軽減できます。ユーザーに過去の情報を記憶させるのではなく、必要な情報は必要なときに表示されるか、簡単に確認ができるようにしておくことが大切でです。システムの状態、行った行動、変更した設定項目などは、デザイン上で表示するようにしましょう。

柔軟性と効率性をもたせる(Flexibility and efficiency of use)

ショートカットを設定することで、初心者と熟練者両方のニーズに答えることができるようになります。頻繁に利用される機能にショートカットが存在することで、熟練者はよりスムーズにシステムを利用することが可能になります。
このように、システムに柔軟性や効率性があることで、ユーザーは自分に合った方法でシステムを利用できるようになります。

最小限で無駄のないデザインにする(Aesthetic and minimalist design)

デザイン中に伝えたいことと無関係な情報や、不必要な情報を含むべきではありません。余分な情報を含むことによって、本当に必要な情報の視認性が低下します。この考え方は、情報を排除したフラットなデザインの利用を強要するのではなく、視覚的な要素がユーザーの目的達成に大切だということを表します。

ユーザーエラーを認識、診断、回復ができるようにする
(Help users recognize, diagnose, and recover from errors)

エラーメッセージは、わかりやすい言葉を用いて問題を正確に表し、解決策を的確に示すようにしましょう。また、これらのエラーメッセージは気づかずスルーされることの無いような、認識しやすいように設計を行いましょう。

ヘルプとマニュアルを用意する(Help and documentation)

説明が必要ないシステムであれば最良ですが、基本的には使い方を理解するのに役立つヘルプを提供することは重要です。ヘルプやドキュメントの内容は、検索しやすく、ユーザーのタスクに焦点を当てたものでなければなりません。簡潔にまとめ、実行する必要のある具体的な項目をまとめましょう。

まとめ

今回紹介した2つの原則はヒューリスティック分析のガイドライン（=評価軸）として有名なものです。
これらはユーザビリティに特化した内容であるため、必要に応じてブランド訴求やSEOといった評価軸と組み合わせることで、より分析の制度を高めることができます。また、実際のユーザーに利用してもらうユーザービリティテストなども複合的に実施することで、ユーザービリティの問題点を探しやすくなります。Webサイトやアプリをさまざまな観点から分析し、より優れたUXの提供を目指しましょう。

ここまで初心者向けのデザイン原則、UI向上のための色々な法則、そしてユーザービリティ原則と、デザインにまつわる法則を3記事に渡って紹介してきました。

法則を知っているだけでは、実務としてのデザインが完璧にできるかといえばそんなことはありません。ですが、デザインの動機付けやその説明であったり、悩んだときの判断材料として、これらの法則を知っておくことは時に武器になるものだと思います。本記事がその手助けの一端となればと幸いです！

Webサイト制作についてお悩みでしたら私たちにご相談ください。

私たちはECサイトなどのBtoCのサイトの制作に特化したWeb制作会社です。
マーケティング視点をもったクリエイティブにより、運用まで見据えた効果の高いWebサイトを構築いたします。
Webサイトについてお悩みのWeb担当者の方は、トライムまでお気軽にご相談ください。