インタラクションデザインのベストプラクティスに従うための推奨事項

この Power Platform Well-Architected エクスペリエンスの最適化チェックリストの推奨事項に適用されます:

XO:08 応答性とフィードバックを優先します。 ユーザーのメンタルモデルや期待に沿ったインタラクションを取り入れることで、インターフェースとのインタラクション方法を理解しやすくします。

このガイドでは、ユーザーインターフェース設計におけるインタラクションの推奨事項について説明します。 インタラクション デザインは、ユーザーがシステムからの情報をどのように処理するか、また、ビジュアル要素がどのように初期構成され、ユーザーの入力にどのように反応するかを理解するために非常に重要です。 タスク フローを計画し、さまざまなシナリオや不測の事態に対応して、ユーザーが目標を達成できるように支援します。

定義

任期 定義
認知的負荷 特定のタスクの実行や情報の処理に必要な精神的努力の総量です。 これは、タスクの複雑さに内在する内在的な認知的負荷と、不必要な要素やインストラクショナル デザインの不備によって引き起こされる外在的な認知的負荷の両方を含みます。 認知負荷の管理は、学習、問題解決、意思決定に不可欠です。 過度の認知負荷は、個人を圧倒し、パフォーマンスを低下させます。
決断の疲れ 長時間の意思決定により、個人の意思決定の質が低下することを指します。 人は一日中選択を繰り返すうちに、精神的資源が枯渇し、意思決定能力が低下したり、衝動的になったり、意思決定を完全に避けたりするようになります。 この現象は、個人的な選択から仕事上の意思決定まで、人生のさまざまな側面に影響を与える可能性があります。

主要な設計戦略

ワークロードを成功させるためには、ビジュアル デザインとユーザー インタラクションが調和してユーザー エクスペリエンスを生み出す必要があります。 ここでは、主にユーザーの行動に焦点を当てたベスト プラクティスをいくつか紹介します。

アフォーダンス

「アフォーダンス」とは、オブジェクトが特定のアクションを実行するために使用される可能性があるという知覚された信号、または手がかりです。 グリップ力のあるハンドルです。 たとえば、ハンドルがあれば、握ることができます。 アフォーダンスを使うことで、ユーザーは自分の行動の結果について正しいメンタル モデルを構築することができます。

Power Apps で利用可能な最新のコントロールは、最新の Fluent UI コンポーネントを活用しています。このコンポーネントは、シャドウ、グラデーション、アニメーションなどの視覚的要素を統合し、インタラクティブ性を示します。 たとえば、ボタンが盛り上がっている場合はクリックできることを示し、テキスト フィールドがハイライトされている場合は入力可能であることを示します。 これらコントロールは確立された設計パターンと規則に従っており、最新のソフトウェア インターフェイスに慣れているユーザーには使い慣れた直感的なエクスペリエンスを提供します。

押し下げられたボタンと押し上げられたボタンの隣りに表示されるアフォーダンスの例。

メンタル モデル

ユーザーの UI に対する認識は、UI とのインタラクションに大きく影響します。 ユーザーが UI から異なる結果を期待すると、多くの場合、不一致が発生し、メンタル モデルの不一致につながります。 ユーザーのメンタル モデルが、システムに組み込まれている設計者のメンタル モデルと一致していることが重要です。 馴染みのないデザイン パターンを使用する場合は、ユーザーが混乱する可能性があるので注意してください。

Fluent UI ベースの最新のコントロールはプロのデザイン チームによってテストされ、ユーザーのメンタル モデルがパターンの意図と同じであることが確認されます。 複合的な視覚要素やタスク フローについては、メンタル モデルの正確な表現を明確に伝えるようにしてください。

メンタル モデルを説明する一般的な方法は、ユーザーが理解するのに重要なテーブル データのステータスまたは状態を示すことです。 たとえば、レコードが非アクティブまたは閉じられている場合は、予想される動作に合わせてフォーム全体を読み取り専用に設定する必要があります。

アプリ システムと連携したユーザーのメンタル モデルをグラフィックで表現したものです。

認知バイアス

認知バイアスは、私たちが判断や予測を行うための近道および経験則です。 認知バイアスは 150 以上あります。 これらは 4 つのグループに分けられます。

  1. 負荷の情報。 研究によると、人間の脳が常に意識的に情報を処理できる能力には限界があります。 今日の情報が飽和している世界では、ユーザーは情報のほとんどをフィルターする傾向があります。 脳は、最も潜在的に有用な情報を特定し、保持するための戦略を採用します。
  2. 曖昧さの影響。 世界は複雑であり、ユーザーはそのほんの一部しか認識していません。 しかし、効果的にナビゲートするにはそれを理解する必要があります。 ユーザーは情報をリンクし、不足している部分を既存の知識で補い、認識を継続的に更新します。
  3. 緊急効果。 ユーザーは時間と情報によって制約を受けます。 新しい情報を入手するたびに、ユーザーはその潜在的な影響を評価し、それを意思決定プロセスに適用し、将来の結果を予測し、これらの分析情報に基づいて行動を起こす必要があります。
  4. 記憶と想起。 ユーザーは、どの情報を保持し、どの情報を破棄するかを常に検討します。 多くの複雑な細部に直面したとき、彼らは通常、覚えておくべきいくつかの顕著な品目を選択し、残りを無視します。

認知バイアスについて学ぶことは、ユーザー エクスペリエンスにおける潜在的な落とし穴に対する認識を高め、ユーザーの認知の限界や傾向を理解することでユーザーに対する共感を育みます。 この認識により、デザイナーはバイアスが自分の決定やインターフェースでのユーザーの操作に影響を与える可能性があることを認識できるようになり、より思慮深くユーザー中心のデザイン ソリューションにつながります。 この知識を取り入れることで、より直感的で満足度の高いユーザー エクスペリエンスが実現します。

ユーザーのニーズ、目標、行動を理解します。 アンケートやインタビューなどのユーザー調査手法を採用して、ユーザーがインターフェースを認識して操作する方法に影響を与える可能性のある認知バイアスを明らかにします。 ユーザーからのフィードバックやユーザビリティ テストの結果に基づいて設計を継続的に繰り返し、発生する可能性のある認知バイアスやユーザビリティの問題を特定して対処します。

一般的または普遍的なメンタル モデルに沿った標準的なデザイン パターンや規約を活用することで、ユーザーがより直感的にインターフェースをナビゲートできるようになり、認知バイアスがインタラクションに影響を与える可能性が低くなります。

ミュラー リヤー錯視は、同じ長さの 2 本の線が、ひれの向きの違いによって、異なる長さに見える錯視です。

ミュラー リヤー錯視は、客観的には同じ長さの線であるにもかかわらず、周囲の視覚的状況によって脳が異なる解釈をするため、一方の線が他方の線よりも長いという知覚的エラー (錯覚) が生じることを示しています。

フィッツの法則

フィッツの法則は、ターゲットを捕捉するのに必要な時間は、ターゲットまでの距離とターゲットのサイズの関数であると予測します。 ユーザーの近くに配置された大きな要素は簡単に選択できます。 たとえば、ボタンが小さすぎたり、関連するコンテンツから離れていたりすると、ユーザーがボタンを選択するのに時間がかかります。

大きく適切にボタンを配置することで、ユーザーは最小限の労力でインターフェースを操作でき、フラストレーションを防ぎ、スムーズなユーザー エクスペリエンスを確保できます。 ボタンやリンクのようなインタラクティブな要素は、十分に大きく、ユーザーの自然なカーソルの動きや自然な範囲に近い場所に配置する必要があります。たとえば、モバイルデバイスの主要なアクションボタンは、ユーザーの親指が届く目立つ場所に配置します。 このような要素をクリックまたはタップしやすくすると、ユーザーが要素を操作するのにかかる時間が短縮されます。

インタラクティブな要素が小さすぎたり、間隔が広すぎたりすると、ユーザーが誤って間違った要素を選択したり、ターゲットを完全に見逃したりする可能性があります。 フィッツの法則を念頭に置いて設計すると、インタラクティブな要素が明確に識別され、アクセスしやすくなるため、これらの問題を回避できます。

手先の器用さが限られている、または運動障害のあるユーザーのニーズを考慮してください。 ターゲット設定が容易で、タブ順序が正しい、より大きなインタラクティブ要素により、すべてのユーザーが快適にインターフェースを操作できるようになります。

ターゲット (中心点を持つ円) は、フィッツの法則、サイズと距離がユーザーのインタラクションのスピード/精度にどのように影響するかを示しています。

ヒックの法則

ヒックの法則は、1950 年代の心理学者ウィリアム エドマンド ヒックの実験から生まれたもので、刺激の数と意思決定の反応時間の関係を探ります。 これは、刺激の数が増加するにつれて、意思決定に必要な時間も増加することを強調し、意思決定プロセスにおけるシンプルさの重要性を強調しています。

ユーザーに一度に多数のオプションを提示するのではなく、段階的な開示を使用して複雑なタスクをより小さく管理しやすいステップに分割します。 ユーザーが単一の選択に集中できるようにし、意思決定の時間を短縮し、ユーザーに負担をかけないようにします。 たとえば、アカウントのセットアップや製品のカスタマイズなどの複雑なプロセスには、ステップ バイ ステップのウィザードを使用します。

意思決定を効率化するために推奨されるオプションにユーザーを誘導します。 迅速な決定のために優先する選択肢を強調し、代替案で圧倒されることを回避します。 これにより、意思決定の麻痺が防止され、ユーザーがインターフェイスを効率的に移動できるようになります。

選択肢が多すぎるとユーザーは圧倒され、決断疲れにつながります。 重要な情報を優先し、それほど重要でない詳細は非表示にしたり最小限に抑えたりすることで、インターフェースをすっきりと整頓された状態に保ちます。 混乱を避け、ユーザーが目の前のタスクに集中できるようにすることを目指します。

シンプルな答えにつながるインタラクションをデザインします。 「はい/いいえ」形式の質問を使用するか、明確な選択肢を提供します。 ユーザーの認知的負荷を軽減し、意思決定を効率化します。 ユーザーのエラーや混乱を防ぐために、複雑な質問や曖昧な質問は避けてください。

8 つの形状 (円 2 つ、四角形、星、三角形) のグラフィックで、それぞれのペアが異なる色になっています。意思決定に関するヒックの法則を実証します。

系列位置効果

シリアル位置効果は、最も異なる要素とともに、シリーズ内の最初と最後の項目を最もよく思い出す傾向があります。 記憶に残りやすくするために、次のヒントを参考にしてください:

  • 主要なアクション、重要な情報、または重要なコンテンツを、リスト、メニュー、またはエクスペリエンスの最初と最後に配置します。 この配置により、ユーザーがこれらの要素を覚えて関与する可能性が高くなります。 たとえば、簡単にアクセスできるように、主要なナビゲーション オプションをメニュー バーの最初と最後に配置します。

  • 重要な要素を周囲のコンテンツと視覚的に区別して記憶しやすさを高めます。 重要なアクションや情報に注意を引くには、対照的な色、大胆なタイポグラフィー、またはユニークなアイコンを使用します。 このアプローチは、ユーザーが重要な要素をインターフェイスの残りの部分から区別する際に役立ち、再現性と使いやすさを向上させます。

  • コンテンツとアクションを、その重要性とユーザーのタスクや目標との関連性に基づいて整理します。 最も重要な情報が最初と最後に表示され、その間にそれほど重要ではない詳細が表示されるようにします。 この手法は、認知負荷を最小限に抑え、情報過多を防ぎながら、ユーザーが重要なコンテンツに集中するのに役立ちます。

最初、最後、および一意の中央項目の上に矢印が付いた 7 つのオブジェクトの行。認知心理学における選択的注意とプライマシー/リーセンシー効果を示します。

パレートの法則

パレートの法則 (80/20ルール、重要少数の法則、要因希薄性の法則とも呼ばれる) は、多くの結果において、およそ 80% の結果が 20% の原因から生じることを示しています。 イタリアの経済学者ヴィルフレド パレートは、イタリアの土地の 80% が人口の 20% によって所有されていることを観察したときに、この原理に初めて気づきました。 1940 年代後半には、「パレートの法則」という用語が造られ、少数の入力から多数の結果が得られることが多いというより広い概念が説明されました。

ユーザー満足度と使いやすさに大きな影響を与える UI の最も重要な側面を特定します。 最も一般的なユーザー タスクや頻繁にアクセスされる機能について考えてみましょう。 これらの重要な要素の開発を優先します。プロジェクト チームはリソースをより効果的に割り当て、UI の最も重要な領域に最も注目が集まるようにすることができます。

少人数の参加者によるユーザー テストを実施して、ユーザビリティの問題の大部分を明らかにします。 調査によると、少数のユーザーを対象としたテストで問題のかなりの部分が明らかになる可能性があります。 この戦略を使用して、設計プロセスの早い段階で問題を見つけて対処します。

ユニバーサル デザインとインクルーシブ デザインには注意してください。 できるだけ多くの人が使用できるインターフェイスを作成することを目的としたユニバーサル デザインの原則と、多様なユーザー グループの特定のニーズに対処することに重点を置いたインクルーシブ デザインのバランスを考慮してください。 大多数のユーザー向けにデザインすることは不可欠ですが、UI が誰にとってもアクセス可能で包括的であることを保証するために、社会から疎外されているグループや過小評価されているグループのニーズを考慮することも重要です。

パレートの法則の描写。

ヤコブの法則

ヤコブの法則によれば、ユーザーはほとんどの時間を他のサイトで過ごします。 言い換えれば、ユーザーは他の使い慣れたインターフェースのエクスペリエンスを反映したインターフェースを好むということです。 学習プロセスを簡素化するために、使い慣れたデザイン パターンを提供します。

ユーザーが他の Web サイトで遭遇する一般的に使用されるデザイン要素とインタラクション パターンを組み込みます。 たとえば、ナビゲーション メニューをページの上部に配置したり、電子商取引サイトのショッピング カート アイコンを使用したりします。 この親しみやすさにより、ユーザーは UI をナビゲートしたり操作したりしやすくなります。 ユーザーは、クリック可能な要素がボタンやリンクのように見えることを期待しています。 これらの期待に応えることで、学習プロセスを合理化し、認知的負荷を軽減し、ユーザーが見慣れないインターフェイスに圧倒されたりイライラしたりすることがなくなります。 この種のエクスペリエンスにより、ユーザーがエンゲージメントを維持し、目標を達成できる可能性が高まります。

大きな青い円 (ヤコブの法則で示されるインターフェースのシンプルさと親しみやすさを表すために使用)

ミラーの法則

ミラーの法則は、ジョージ A. ミラーの 1956 年の論文に由来しており、平均的な人は作業記憶に一度に約 7 (誤差 2) の項目を保持できることを明らかにしています。 この分析情報は、人間の情報処理の認知的限界を浮き彫りにし、ユーザー インターフェイスのデザインを含むさまざまな分野にわたって重要な影響を及ぼしています。 ミラーの研究は、記憶容量についての理解を継続的に提供し、認知能力の最適化や効果的な学習環境とインターフェースの設計戦略に影響を与えています。

チャンキングは、コンテンツのグループを管理しやすい方法で提示する効果的な方法です。 コンテンツを、5 ~ 9 個の項目を含む意味のあるチャンクまたはグループに整理します。 視覚的な手がかり (間隔、境界線、色など) を使用することで、コンテンツの異なるチャンクが明確に区別され、ユーザーが情報の構造を認識し、効果的にナビゲートできるようになります。

各チャンク内で最も重要な情報やアクションを最前面に配置し、ユーザーが簡単にアクセスできるようにします。 管理可能な数のオプションをユーザーに提示して、意思決定の疲労を防ぎ、認知的負担を軽減します。 見出し、箇条書き、またはアイコンを使用すると、ユーザーがインターフェイスの関連セクション (チャンク内のコンテンツを含む) をすばやく調べて移動できるようになります。

ミラーの法則を表すために使用される、番号 (1 ~ 7) が付けられた 7 つの円。

ピーク エンド ルール

ピークエンドルールとは、人は経験のあらゆる瞬間の合計や平均ではなく、主にピーク時と終わりに感じたことに基づいて経験を判断するというものです。 ユーザー ジャーニーの中で、製品が最も役立つ、価値がある、または面白い瞬間を特定することで、ピークの瞬間を強化します。 ユーザーに永続的なポジティブな印象を残す追加の価値、喜び、または機能を提供することで、これらのピークの瞬間を強化することに焦点を当てます。 また、ユーザーがワークフローを完了する方法に特に注意を払い、ジャーニーの最後を最適化することも検討してください。 最終的なやり取りやメッセージが明確で、満足のいくものであり、ユーザーの期待に沿ったものであることを確認して、ユーザーに肯定的な最終印象を与えます。

ポジティブな体験を高める方法には次のようなものがあります。

  • カスタマイズ。 ユーザー エクスペリエンスを個人の好みや行動に合わせて調整します。 ユーザーのデータや好みに基づいて、パーソナライズされた推奨事項、コンテンツの提案、カスタマイズ オプションを提供します。

  • マイクロインタラクション。 小さくて楽しいアニメーションやインタラクションをインターフェイス全体に組み込んで、インタラクションをより魅力的で楽しいものにします。 たとえば、ボタンにカーソルを合わせたときのアニメーションや、遊び心のあるローディング画面は、ユーザー エクスペリエンスに個性を加えることができます。

  • 驚きと喜び。 ユーザーを驚かせて喜ばせる予期せぬ要素やイースターエッグを導入します。 たとえば、探索や発見を促す隠れた機能、ユーモアのあるメッセージ、インタラクティブな要素などです。

  • 効率性の向上。 タスクと対話を合理化して、ユーザーにとって作業がより速く、より効率的になるようにします。 キーボード ショートカット、オート コンプリート候補、ワンクリック アクションなどの機能を導入して、一般的なタスクを簡素化し、ユーザーの時間を節約します。

  • 外観のデザイン。 高品質のビジュアル デザインに投資して、視覚的に魅力的で一貫性のあるインターフェイスを作成します。 美しく美しいタイポグラフィー、配色、画像を使用してポジティブな感情を呼び起こし、全体的なユーザー エクスペリエンスを向上させます。

  • フィードバックと承認。 ユーザーのアクションに対して即座に意味のあるフィードバックを提供し、ユーザーのインタラクションが記録され、理解されていることをユーザーに安心させます。 視覚的なキュー、アニメーション、または通知を使用して、ユーザーの入力とアクションをリアルタイムで確認します。

  • Gamification。 チャレンジ、報酬、進捗状況の追跡などのゲームのような要素を導入して、ユーザー エクスペリエンスをより魅力的で楽しいものにします。 インターフェース内で特定の目標やマイルストーンを達成するようユーザーを奨励し、達成感とモチベーションを生み出します。

ユーザーはポジティブな経験よりもネガティブな経験のほうが鮮明に思い出せることを認識します。 ネガティブな体験がポジティブな体験の影に隠れてしまうのを防ぐため、ユーザージャーニー全体を通して、痛みやユーザビリティの問題を特定し、対処するための積極的な対策を講じてください。 この柱のガイダンスは、ネガティブな経験を改善することを目的としています。 ユーザビリティのヒューリスティックに従うこと、アクセシビリティのコンプライアンスを満たすこと、明確なエラー処理を採用すること、デザインに一貫性を持たせること、パフォーマンスを最適化することはすべて、ネガティブな体験に対処するのに役立ちます。

ユーザーからのフィードバックを継続的に収集し、ピークの瞬間、問題点、改善すべき領域を特定します。 このフィードバックを使用してユーザー エクスペリエンスを繰り返し強化し、ピーク時の最適化とネガティブなエクスペリエンスの対処に重点を置きます。

左から右に引かれた連続した不規則な波線。1 つの矢印は最も高いピークを、もう 1 つの矢印は最も低い谷を指す。ピーク エンド ルールの抽象的な描写。

ポステルの法則

ポステルの法則 (堅牢性の原則) は今日、次のように言い換えられています: 「受け入れるものはリベラルに、送るものは保守的に」。言い換えれば、ユーザーが取るかもしれない様々な行動に対して共感的で、柔軟で、寛容であれ、ということです。 たとえば、ユーザーからのさまざまな入力を受け入れるとき、要件を満たすように入力を変換するとき、入力の境界を定義するとき、ユーザーに明確なフィードバックを提供するときなどです。 同時に、ユーザーに何を要求しているのかを具体的に示します。

さまざまな設定、動作、デバイスに対応して、幅広いユーザー入力を受け入れるインターフェイスを設計します。 この柔軟性により、ユーザーは厳格な入力要件によって制限されたりイライラしたりすることがなくなります。 必要に応じて、システムの要件または標準を満たすようにユーザー入力を変換します。 たとえば、さまざまな日付形式や測定単位を変換して、ユーザー入力の処理における一貫性と正確性を確保します。

受け入れ可能な入力の境界を明確に定義し、エラーや意図しないアクションを防ぐためのガイダンスと制約を提供します。 このアプローチにより、ユーザーはインタラクションの範囲を理解し、間違いを犯す可能性を減らすことができます。

検証メッセージ、エラーアラート、確認ダイアログなど、ユーザーのアクションに応じて、即時かつ有益なフィードバックをユーザーに提供します。 このようなフィードバックはユーザーを導き、混乱や不確実性を防ぎます。

期待と指示をユーザーに明確に伝え、どのようなアクションが必要で、どのように実行されるべきかを指定します。 誤解や誤りにつながる可能性のある曖昧さや不明瞭な言葉は避ける必要があります。

ポステルの法則を表すために使用される親指を立てたアイコンと親指を下げたアイコン。

参照

エクスペリエンスの最適化のチェックリスト

完全な推奨事項セットを参照してください。