UIデザインに関する10のガイドライン

Interaction Design Foundation

Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。

この記事はInteraction Design Foundationからの翻訳転載です。配信元または著者の許可を得て配信しています。

User Interface Design Guidelines: 10 Rules of Thumb (2017-02-14)

Jakob Nielsen氏とRolf Molich氏による10のユーザーインターフェースガイドラインに従い、ユーザーのニーズと期待に見合ったデザイン方法を学びましょう。これらのヒューリスティックスは、AppleやGoogle、Adobeのように大成功した企業の多くの製品に反映されています。このような企業のデザインチームが、これらのルールをデザインプロセスにどのように適応しているかは、公開されているユーザーインターフェイスのガイドラインから見てとることができます。

この記事では、ユーザビリティ(Usability)、ユーティリティ(Utility)、デザイラビリティ(Desirability)を改善するための10のルールを紹介します。

ユーザーインターフェイスデザインガイドライン

著名なWebユーザビリティコンサルタントでありNielsen Norman Groupの共同経営者であるJakob Nielsen氏と、優れたユーザビリティ専門家であるRolf Molich氏は、1990年代にユーザーインターフェイスデザインガイドラインに関する10のルールを作成しました。

Nielsen氏とMolich氏のヒューリスティックスと、Ben Shneiderman氏の「8つのゴールデンルール」には、多くの重複点があることに注意してください。また、この10のルールは、Shneiderman氏の初版から4年後の8つのゴールデンルールでも参照されています。

  • システムステータスの可視性。システムは、常にユーザーに対してシステムの状態を知らせる必要があります。
  • システムと現実世界の一致。デザイナーは、ターゲットユーザーがどのような人であるかを考慮し、現実世界で使う言語と概念をシステムに反映するように努力する必要があります。論理的に情報を提供し、ユーザーの現実世界での経験に基づく期待に応えることによって、ユーザーの認知的負荷を軽減し、システムを使いやすくします。
  • ユーザーコントロールと自由。前の操作のやり直しや取り消しなどを含む、後戻りできる機能をユーザーに提供します。
  • 一貫性と標準化。グラフィック要素や用語などのインターフェースは、類似したプラットフォームと統一する必要があります。たとえば、1つのカテゴリまたは概念を表すアイコンは、別の画面でも同じ概念を表すべきです。
  • エラー防止。できる限りいつでも、潜在的なエラーが最小限に抑えられるようにシステムを設計してください。ユーザーは、専門知識を要するような問題と解決方法に関わりたくありません。エラーを引き起こす可能性のあるアクションを排除するか目立たせることで、エラーを防止することができます。
  • 回想より認識。ユーザーがインターフェースを操作している間、ディスプレイにタスクに関連する情報を表示することによって、認知的負荷を最小限に抑えることができます。人間の注意力は限られており、私たちは1回の短期記憶で約5項目しか記憶することができません。このような短期記憶の限界があるため、デザイナーはダイアログの各部分で、ユーザーに記憶を回想させるのではなく、認識させなければなりません。常に、何かを認識することは、回想することより簡単です。認識は、膨大な記憶に到達する手がかりを与え、関連する情報を浮かび上がらせます。たとえば、選択肢がある質問は、短文回答より簡単です。答えを記憶から呼び出すのではなく、認識するだけだからです。
  • 柔軟性と効率性。製品に慣れてくるにつれ、より素早く操作を可能にし、インタラクションを軽減する必要性が高まります。これは、インタラクションの省略やファンクションキー、隠しコマンド、マクロ機能によって実現できます。ユーザーが必要に応じてインターフェイスをカスタマイズまたは調整して、頻繁に行う操作をより便利にできるようにしましょう。
  • 魅力的でシンプルなデザイン。混乱を最小限に抑えてください。不必要な情報は、ユーザーの注意力を散漫にさせ、記憶から関連情報を検索する過程を妨げる可能性があります。そのため、画面表示は進行中のタスクに必要なコンポーネントだけに減らしましょう。また、他のコンテンツに誘導するわかりやすい手段を提供する必要があります。
  • エラーの認識、診断、回復の支援。デザイナーは、ユーザーが技術用語を理解できないと想定し、エラーメッセージは常に平易な言語に言い換える必要があります。
  • ヘルプとドキュメント。理想的には、ユーザーがテキストを読まなくてもシステムを操作できるようにしましょう。ただし、問題の種類によっては、テキストが必要な場合があります。ユーザーがヘルプを必要とするときは、操作中のタスクに内容を絞り、ユーザーが直面している問題の解決に向けて必要なステップをテキストにして、わかりやすい場所に配置します。

数十億ドル規模のテクノロジー企業であるG​​oogleは、上記のヒューリスティックスを反映したデザインを生み出している企業です。 2012年にGoogle検索のヘッドデザイナーであったJon Wiley氏はかつてこのように述べています。

「私がデザインを考え、素晴らしいユーザー体験を作ろうとするとき、ユーザビリティ、ユーティリティ、デザイラビリティの3つの点を考慮します。」

Nielsen氏とMolich氏による10のユーザーインターフェイスガイドラインは、これらのユーザー体験の3つをきちんとカバーしています。つまり、次のガイドラインに従えば、ユーザー体験を向上させることができるのです。

ケーススタディ:Adobeのインターフェイス

北米のコンピュータソフトウェアの大企業であるAdobe Systemsは、Nielsen氏とMolich氏による10のユーザーインターフェイスガイドラインを反映したデザインが、どのように企業を成功に導くかを示す素晴らしい例です。もっとも人気のある製品の1つである画像編集ソフトAdobe Photoshopは、これらのガイドラインを反映し、ユーザーインターフェイスの優れたデザインの特性を示しています。 

Adobe Photoshopがどのようにこれらのガイドラインを反映しているか詳しく見てみましょう。この10のルールを取り入れれば、デザインのユーザビリティ、ユーティリティ、デザイラビリティを向上させることができるでしょう。

1. システムステータスの可視性

Photoshopは、ユーザーの操作が何をもたらすか視覚的に示し、プログラムで何が起っているのか、できるだけ頻繁にユーザーに知らせます。たとえば、レイヤーパレットでレイヤーを動かすと、レイヤーが物理的にドラッグされるのを見ることができます。

著者/著作権者:Adobe Systems Incorporated。 著作権条項およびライセンス:公正使用

ユーザーがレイヤーパレット内でレイヤーをドラッグすると、カーソルは開いた手から握った手の形に変わります。これによって、ユーザーはシステムステータスを即座に理解できるようになります。さらに、インターフェイスに「手」を使用するのは、ガイドラインの「システムと現実世界の一致」の素晴らしい例です。

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

Photoshopは、ターゲットユーザーが理解できる言語と表現を使って現実世界を模倣しています。たとえば、情報構造や専門用語は、写真や印刷メディア業界と同じものを使用しています。RGB、色相/彩度/明度、そしてCMYKなどのよく知られた概念や用語が色を表現するのに使われ、覆い焼きツールや焼きこみツールなどのさまざまなツールは写真業界で使われている暗室テクニックを模倣しています。

著者/著作権者:Adobe Systems Incorporated。 著作権条項およびライセンス:公正使用

Photoshopの覆い焼きツールと焼きこみツールは、従来の写真の暗室テクニックを模倣しています。

著者/著作権者:Adobe Systems Incorporated。 著作権条項およびライセンス:公正使用

Photoshopでは、写真の世界で一般的に使用される「露出」という用語を利用しています。

3. ユーザーコントロールと自由

Photoshopは、あらゆる段階でユーザーにコントロールを提供する上で非常に優れています。たとえば、ユーザーが画像を変更したり、さまざまな芸術的効果を加えたりする際に、エラーが発生しても素早く簡単に後戻りすることができます。

著者/著作権者:Adobe Systems Incorporated。 著作権条項およびライセンス:公正使用

ユーザーは、「編集」メニューの「一段回戻る」または「一段回進む」を使用するか、またはAlt + Ctrl + ZなどのPhotoshopのキーボードショートカットを使用することもできます。

4. 一貫性と標準化

Photoshopは、メニューバーにおいて標準レイアウトとルック&フィールを維持しています。また、「新規...」、「開く...」、「名前を付けて保存...」などの一般的な用語を利用しています。

著者/著作権者:Adobe Systems Incorporated。 著作権条項およびライセンス:公正使用

Photoshopの「ファイル」メニューでは、とても親しみのある、さまざまなオプションが表示されます。

5. エラー防止

ユーザーがエラーを起こさないように、Photoshopはユーザーが作業中のタスクで、適切なツールを使用できるように、ツールの簡単な説明またはラベルを提供します。

著者/著作権者:Adobe Systems Incorporated。 著作権条項およびライセンス:公正使用

ユーザーが消しゴムアイコンの上を移動すると、Photoshopは「消しゴムツール」ラベルを表示します。

6. 回想より認識

フィルタメニュー、もしくは新しい画像ファイルを開くいずれの場合にも、Photoshopは、ユーザーが適切にファイルを選択できるようにサンプルビューを提供します。これにより、ユーザーは、ファイルの名前を思い出したり検索する必要なく、探しているものを視覚的に認識することができます。ファイルの名前を入力する必要がある写真編集ソフトもありますが、ファイル名は29412_09342.JPGのように複雑なことが多く、思い出すのは非常に難しいです。

著者/著作権者:Adobe Systems Incorporated。 著作権条項およびライセンス:公正使用

ユーザーは、夕焼けの画像をサムネイルで認識して選択することができます。

7. 使用上の柔軟性と効率性

頻繁に使用するユーザーが、Photoshopを好む多くの理由の1つは、その柔軟性と効率性です。ユーザーは、ワークスペースを整理、追加して柔軟性を活用するだけでなく、今後の使用のために保存することで作業を効率化することもできます。

著者/著作権者:Adobe Systems Incorporated。 著作権条項およびライセンス:公正使用

Photoshopは、頻繁に使用するユーザーに、好みのワークスペースのセットアップを保存する機能を提供します。

8. 魅力的でシンプルなデザイン

Photoshopのツールバーはアイコンのみを表示し、側面にきちんと配置することで、混乱を最小限に抑え、シンプルで魅力的なデザインを保っています。

著者/著作権者:Adobe Systems Incorporated。 著作権条項およびライセンス:公正使用

Photoshopのツールバーは最小限に抑えられ、アイコンだけでツールを表現することで混乱を避けています。

9. ユーザーによるエラーの認識、診断、回復の支援

エラーが発生するたびに、Photoshopは何が問題か、またどのように修正するかをユーザーに知らせるダイアログを提供します。

著者/著作権者:Adobe Systems Incorporated。 著作権条項およびライセンス:公正使用

これは、ユーザーがコピースタンプを間違って使用したときのエラーメッセージです。Photoshopは何が間違っているのか、その理由、そしてどのように修正すべきかを説明しています。

10. ヘルプとドキュメント

ヘルプとドキュメントは、メインメニューバーから簡単にアクセスできます。そこから、プログラムを最大限に活用するための、さまざまなヘルプとチュートリアルを見つけることができます。

著者/著作権者:Adobe Systems Incorporated。 著作権条項およびライセンス:公正使用

このウィンドウは、Webグラフィックのコンテキストで、ロールオーバーを作成する方法を表示しています。ユーザーはサイドメニューで、トピックのリストも見ることができます。

ガイドラインの実践

デザイナーは、他人の作品だけでなく自分のデザインも実証された理論に基づき批評する能力が必要です。Nielsen氏とMolich氏の10のルールを適用してインターフェイスデザインを評価することは、潜在的な問題を認識するだけでなく、ユーザーにより良い体験をもたらすように、あなたとあなたのチームを手助けします。

これらのルールが適用されているかどうか、これらのルールに違反していないかどうかチェックするためのワークシートを用意しました。これを使い、ガイドラインに沿ってWebサイトやアプリを改善しましょう。チェックリストは、ここからダウンロードできます。

概要

Nielsen氏とMolich氏による10のユーザーインターフェイスガイドラインに従うときは、ユーザビリティやユーティリティ、デザイラビリティを念頭に置いて設計します。

Appleや Google、Adobeなどの成功した企業のデザイナーのように、よく研究されたヒューリスティックスを使ってデザイン決定をし、使いやすく美しいデザインの作成に自信をもてるようになるでしょう。

これらの10のルールを理解するために、上記のセクションの添付ファイルに記載されているエクササイズを行ってください。

関連記事

「Adobe Photoshopのユーザビリティスタディ」についての詳細については、以下を参照してください。

http://courses.cs.washington.edu/courses/cse595/98...

Jakob Nielsen氏の「ユーザビリティヒューリスティックスの説明力の強化」の詳細については以下を参照してください。

https://static.aminer.org/pdf/PDF/000/089/679/enha...

Jon Wiley氏のデザイン思考の詳細については、以下を参照してください。

http://www.fastcodesign.com/1671425/how-googles-de...


イベント

2017/10/06(金)
UX School(全10回)