ユーザーの認識と美観を最適化するための推奨事項
この Power Platform Well-Architected エクスペリエンスの最適化チェックリストの推奨事項に適用されます:
| XO:07 | クラシックなデザインの原則を配色、タイポグラフィ、レイアウトなどのビジュアル要素に適用します。 ユーザーの注意を重要な要素やアクションに導く、集中的でバランスのとれた直感的なビジュアル階層を目指します。 |
|---|
このガイドでは、ユーザー認識に影響を与えるユニバーサル ビジュアル デザイン パターンに関する推奨事項について説明します。これは、アプリケーションの満足度と採用に大きく影響する可能性があります。 ビジュアル要素は、エクスペリエンスを作成するために使用される基本的な構成要素として機能します。 人間が自然に情報を認識して処理する方法に沿ったビジュアル原則を適用することで、構造化された方法を提供し、ビジュアル要素を選択して配置し、効果的で魅力的なアプリケーションを作成するのに役立ちます。
主要な設計戦略
ビジュアル デザインの人間の認識に関する広範な研究により、ユーザーはビジュアル要素を単独で見ていないことが明らかになりました。 代わりに、他の要素やそれらが現れるコンテキストとの関係で認識します。 これらの関係は、ユーザーの認識に影響を与え、特定の領域に注目を集め、感情を引き出し、理解を助け、美しさを高め、ブランド アイデンティティを強化します。 ビジュアル要素を慎重に選択して配置することで、対象ユーザーの共感を呼ぶ、魅力的で記憶に残る効果的なユーザー エクスペリエンスを作成できます。
美的ユーザビリティ効果
美的ユーザビリティ効果 とは、魅力的な製品をより使いやすいと考える傾向を指します。 ユーザーは、約 50 ミリ秒以内にアプリケーションに関する最初の評価を形成します。 この第一印象は、構造、色、間隔、対称性、テキストの量、フォントなどのさまざまな要因の影響を受けます。 ポジティブな第一印象は、全体的なユーザー満足度を高めることができます。 調査によると、ユーザーはインターフェイスが視覚的に魅力的だと感じると、些細なユーザビリティの問題に寛容になることがわかっています。 さらに、デザインの品質も信頼性の指標として役立ちます。
バランスと重み付け
ビジュアル バランスは、視覚における平衡感覚と調和感覚を表します。 認知的負担を軽減することで、ユーザーはビジュアル情報をより効率的に処理および整理できるようになります。 バランスの取れた構成は一般に、より心地よく、理解しやすいものとして認識され、ユーザーは効果的に注意を集中させ、視覚刺激をより簡単にナビゲートすることができます。 ビジュアル バランスのこの認知的側面は、明確なコミュニケーションを促進し、全体的なユーザー エクスペリエンスを向上させる上での重要性を強調しています。
すべての要素が光学的に均衡しているとき、構成はバランスが取れています。 多くの場合、数学的な配置には調整が必要です。 視覚的な重みに影響を与える要素には、サイズ、色、密度、空白などがあります。
サイズ。 大きな要素は、小さな要素よりも視覚的な重みが大きくなる傾向があります。 バランスを実現するには、大きな要素は小さな要素とグループ化するか、レイアウト内での配置を調整することで、バランスを取ることができます。
色。 明るい色や濃い色は、落ち着いた色や中間色よりも注目を集め、重く見えることがあります。 色のバランスをとるには、インターフェース全体に色を均等に配置するか、補色を使用して視覚的な調和を作り出す必要があります。
密度。 要素の密度は、特定の空間内に要素がどれだけ密に詰め込まれているかを指します。 密度のバランスをとるには、過密状態やまばらな領域を避けるために、要素をインターフェイス全体に均等に分散させる必要があります。
空白。 ネガティブ スペースとも呼ばれます。 要素間の空の領域を指します。 スペースは視覚的なゆとりを生み出すのに役立ち、特定の要素を強調することで構成のバランスをとることができます。
バランスの取れた構成とは、要素間の目に訴える力の合計です。
バランスの取れたレイアウトとは簡単には測定できないので、最も難しいタスクの 1 つです。
カラー
色相、色合い、陰影、トーンは意味合いを伝え、感情を呼び起こし、見た目の美しさを生み出すことができます。 色は、ユーザーの注意を誘導し、階層構造を確立し、情報を伝え、ユーザビリティを高める上で重要な役割を果たします。 UI の考え抜かれたカラー デザインがユーザーに影響をもたらす理由はいくつかあります:
注意と認識。 特定の色は他の色よりも目を引くため、デザイナーはビューア―の注意を特定の要素に向けることができます。 色のコントラストにより、読みやすさが向上し、さまざまなコンポーネントを区別できるため、情報の迅速な処理が容易になります。
感情的な反応。 色には感情や気分を呼び起こす心理的な関連性があります。 赤やオレンジなどの暖色系の色はエネルギーと興奮感を生み出し、青や緑などの寒色系の色は落ち着きや静けさを呼び起こします。 目的の応答を引き出して、意図したエクスペリエンスに向けてユーザーに影響を与えることができます。
ブランド アイデンティティ。 ブランディング マテリアル全体で一貫した色を使用すると、強力なビジュアル アイデンティティが確立され、ブランド認知度を高めることができます。 ユーザーは多くの場合、特定の色を特定のブランドと関連付け、自らの経験をブランド ロイヤルティと信頼に関連付けます。
ビジュアル階層。 色はビジュアル階層を確立し、情報を整理するために使用できます。 さまざまな要素に、重要度やカテゴリに基づいて異なる色を割り当てて、明確な階層を作成し、ナビゲーションと理解を容易にします。
近接
項目同士の距離が近いほど、関連性が高いように見えます。 要素を配置するときは、密接に関連する要素とそうでない要素の間隔に明確な違いがあることを確認します。
このゲシュタルトの法則は、ビジュアル要素間の空間距離が、どのように認識され、頭の中で整理されるかに影響を与えることを示唆しており、視覚刺激の効率的な処理と理解を促進する上で重要であることを強調しています。
機能的に類似している、または同じ階層カテゴリに属する関連要素をグループ化します。 たとえば、ドロップダウン メニュー内で同様のアクションやオプションを実行するボタンは、関連性を示すために互いに近くにグループ化される必要があります。 ナビゲーション バーでは、間隔が狭いメニュー項目は関連するオプション セットを示し、メニュー カテゴリ間の間隔が大きいと、視覚的に区別されます。 関連するフォーム項目は、グループ化する必要があります (たとえば、「住所」というセクションの住所フィールドなど)。
段落、文、単語間の間隔を調整することで、テキストの多いインターフェースの読みやすさを向上させます。 段落の間隔が狭いほど論理的なつながりや思考の継続を示し、段落の間隔が広いほど内容の移行や中断を示します。 この方法は、テキスト情報の効率的な理解を促進します。
混乱を防ぐために、関連する要素と関連しない要素の間の間隔に明確な区別があることを確認します。 間隔ランプは、要素のサイズに基づいて、必要な適切な間隔を一貫して決定するのに役立ちます。
左側の円は、もう一方の円より三角形に関連しています。
段落間の間隔は、セクション間の間隔より小さくなります。
連続
直線または曲線上に配置された要素は、直線または曲線上にない要素よりも関連性が高いと認識されます。
ナビゲーション メニューやプロセスのステップなどのインターフェイス要素を直線や曲線に沿って配置して、シーケンスや進行を示します。 このレイアウトは、ユーザーが要素間の関係を認識し、情報やアクションの論理的な流れを理解するのに役立ちます。
チェックボックスやラジオ オプションなどの関連要素、またはリスト内の項目 (箇条書き) を線に沿って配置し、視覚的にグループ化します。 この配置により、これらの要素が共通の目的を共有しているか、同じカテゴリに属していることがユーザーに提示され、ナビゲーションと理解が容易になります。 類似して見える項目がさらに内側にインデントされている場合、その項目の位置はビジュアル階層における下位の位置と相関します。
直線や曲線を使用してユーザーの注意を誘導し、インターフェイスにビジュアル パスを作成します。 たとえば、矢印は、特定のパスに沿ってコンテンツのあるセクションから別のセクションにユーザーの目を向け、接続や進行を示すことができます。 この方法は、ユーザーがより直感的にインターフェースをナビゲートし、探査を奨励するのに役立ちます。
行動喚起ボタンや重要な情報などの主要なインターフェイス要素を目立つ線に沿って配置して、ユーザーの注意を引き、注目点を作成します。 たとえば、Fluent MessageBar パターンは、多くの場合、左側にメッセージがあり、右側の行動喚起ボタンにつながるように、コンテンツ領域全体で目立つようにバランスの取れたメッセージとして表示されます。 このレイアウト戦略は、これらの要素を強調してその重要性を強調し、相互作用の可能性を高めます。
認識では、色よりも曲線/直線の方が強いです。
ウィザードでは連続性を使用して、情報が多すぎて圧倒することなく、手順がつながっていることをユーザーに示します。
クローズ
人間の脳は、たとえ一部の情報が欠落していても、個々のオブジェクトに対してひとつの (馴染みのある) パターンを認識し、完全な形を認識する傾向があります。
デザイン要素 (形状、色、サイズなど) の視覚的な一貫性を確保して、異なるコンテキストで提示された場合でも、ユーザーが想定するパターンを学習できるようにします。
ユーザーが過去の経験に基づいて不足している情報を補えるように、シンプルで使い慣れたアイコンやシンボルを使用します。 たとえば、虫眼鏡アイコンは、付随するテキストがなくても、一般てきに検索機能と関連付けられます。
情報を段階的にユーザーに提示します (段階的開示とも呼ばれます)。 ユーザーがインターフェースを操作する際に不足している詳細を補うことができるようにすることで、情報が多すぎてユーザーに負担をかけないようにし、探査を奨励します。
ユーザーがオブジェクトを完全なエンティティとして認識できるように、まとまりのある視覚パターンを作成します。 たとえば、関連する要素をグループ化すると、ユーザーがその関係と目的を理解しやすくなります。 セグメント化を示すために、ゲシュタルトの法則を使用して要素を一貫した形で視覚的に配置します。 スペースを効果的に使用して、インターフェイス要素の周りに閉じた感覚を生み出します。
アニメーションと切り替えを使用してユーザーの注意を誘導し、インターフェイスの状態の変化を伝えます。 異なる状態または画面間のスムーズな切り替えは、ユーザーが要素間の関係を理解し、不足している情報を補うのに役立ちます。 Power Apps で利用可能な複数のモダン コントロールは、もともとアニメーションを表示します。
4 つの不完全な円の前に、まず正方形が認識されます。
カードからモーダルへのアニメーションは、2 つの間のギャップを埋めて、相互を関連付けるのに役立ちます。
焦点
注目点とは、見る人の注意をすぐに引くデザイン要素です。 理想的には、デザインには、通常 1 - 3 個の一連の注目点があり、意図的にユーザーをコンテンツに誘導するように配置されている必要があります。
情報の明確な階層を持つインターフェイスを設計し、最も重要なコンテンツやアクションが注目点として強調されるようにします。 サイズ、色、コントラスト、位置などの視覚的な手がかりを使用して、これらの要素を目立たせます。最も重要な注目点から始めて、徐々に情報を提示します。 この方法は、ユーザーが最も関連性の高いコンテンツやアクションをすばやく識別し、論理的な順序でインターフェースに導くのに役立ちます。
主要な行動喚起ボタンをインターフェイス内の目立つ場所に配置し、最も強力な注目点にします。 これらのボタンは他の要素とは視覚的に区別され、購入やサインアップなどの目的のアクションにユーザーを導くように戦略的に配置する必要があります。 Fluent デザイン言語では、これらの要素にブランドのテーマ カラーを使用することを推奨しています。
コントラストを効果的に使用して、注目点を作成します。 色、明るさ、大きさ、タイポグラフィなどの違いによって目立つ要素は、自然にユーザーの注目を集めます。 明るい表面と暗いテキストやブランド要素を対比させることで、より目立つ注目点が生まれます。
空白とネガティブ スペースを使用して、周囲の要素から視覚的に分離することで注目点を強調します。 この方法は、気が散るのを防ぎ、ユーザーが最も重要なコンテンツやアクションに集中できるようにします。 周囲のスペースが広い UI 要素は、スペースが狭い要素よりもより多くの注目を集め、重要度が高いと認識される傾向があります。
インターフェース全体で注目点の使用に一貫性を保ち、一貫したユーザー エクスペリエンスを提供します。 注目点のパターンを設定することで、インターフェイスをナビゲートするために理解する必要がある階層についてのユーザーの期待を導き、さまざまな画面やページで重要な情報やアクションを見つけられるようにします。
バランスを保ち、競合する注目点が多すぎてユーザーを圧倒しないようにすることが重要であることに注意してください。
ユーザーの視線はまず青い正方形に引き寄せられます。
行動喚起などの要素は、ユーザーが確実に気づくように注目点を作成することができます。
類似
類似しているように見えるオブジェクトはグループまたはパターンとして認識されることが多く、ユーザーは同じ機能を持つことを期待するようになります。
同様の機能を持つインターフェイス要素の視覚的なスタイルが一貫していることを確認します。 たとえば、同様の、または同じ重み付けのアクションを実行するボタンは、同じ色、形、サイズにする必要があり、ユーザーに共有機能を示します。 逆に、機能が大きく異なる要素を明確に区別できるようにします。 どちらの方法も、明確な視覚的な手がかりを確立することで、混乱やフラストレーションを防ぎます。
一貫した図像とシンボルを使用して、インターフェイス全体で同様のアクションや機能を表します。 ユーザーは、過去の経験に基づいて、見慣れたアイコンを特定の機能に結び付ける傾向があります。 このような期待に応えるには、広く認識されているアイコンのメタファを使用します。 Fluent UI 図像ライブラリなどの同じセットのアイコンを使用して、アイコン スタイルの一貫性を確保します。
色のコーディングを使用して、要素またはカテゴリ間の類似性を示します。 たとえば、リスト内の関連項目を強調表示するために同じ色を使用したり、グラフ上で類似のデータ ポイントをグループ化したりすると、視覚的な一貫性が高まり、ユーザーがパターンを識別しやすくなります。
類似の目的を果たす要素については、タイポグラフィとテキスト スタイルの統一性を維持します。 一貫したフォント スタイル、サイズ、書式設定は、一貫した視覚言語に貢献し、関連するコンテンツやアクションをユーザーが認識しやすくします。
インターフェイス全体で同様のアクションに対して一貫したインタラクティブなフィードバックを提供します。 ボタンの上にマウスを置く場合でも、リンクをクリックする場合でも、ユーザーは視覚的類似性と機能的同等性の間の関連性を強化するために、均一な応答を期待するはずです。 プラットフォームは本来、ほとんどのインタラクティブな動作 (ホバーや押された状態の色の値など) を提供しますが、コンポーネント要素を最初から作成する場合や、フィードバック状態を手動で実装する場合は、この設計原則をに注意してください。
多様なニーズや好みを持つユーザーに対応するために、視覚的な類似性がテキスト ラベルや音声フィードバックなどの他の手がかりによって補完されるようにします。 複数の感覚モダリティを通じて機能を効果的に伝達することで、ユーザビリティと包括性が向上します。
要素は、配置 (列と行) ではなく、図形と色でグループ化されます。
ダッシュボード上の 1 つのカードがサイド パネルとして開く場合、ユーザーはすべてのカードがそのように開くことを期待します。
図と地
人々は本能的に、要素を「図」 (前面に目立つもの) または「地」 (背景に隠れるもの) のいずれかであると認識します。 したがって、コンテキストは認識に影響を与え、重要な要素を背景から区別するために十分な描写を確保することが重要です。 空白 (ネガティブスペース) はコンテンツの理解度を高めます。
色、サイズ、または視覚スタイルのコントラストを使用して、明確な図と地の関係を確立します。 重要な要素は背景に対して目立つようにし、簡単に区別できるようにして、ユーザーの注意を効果的に誘導する必要があります。 色が明るく、背景に対して視覚的要素のコントラストが大きい表面は、より目立ちます。 このアプローチにより、視覚的な混乱を軽減し、ユーザーが重要な情報を識別しやすくなります。 前景要素と背景要素の間に十分なコントラストを指定し、視覚障碍のあるユーザーの読みやすさを向上させ、コンテンツにアクセスして理解する能力を向上させます。
インターフェース要素の配置とスタイルの一貫性を維持することで、図と地の関係が強化され、ユーザーがインターフェース構造を理解しやすくなります。 デザイン パターンと視覚的手がかりを一貫して使用することで、ユーザーはさまざまな画面やコンテキストで前景要素と背景要素を素早く識別できるようになります。 デザインに一貫性がないと、ユーザーのメンタル モデルが混乱し、インターフェイスを効率的にナビゲートする能力が妨げられる可能性があります。
低コントラストと最小限のネガティブ スペースが、背景の一部として白い四角形を認識させます。
ユーザーが重要なコンテンツに集中できるように、サイド画像は背景に隠れる必要があります。
Grouping
要素は、明確に定義された境界を持つ領域を共有する場合、グループとして認識される傾向があります。
ボックス、カード、境界線などの視覚的なコンテナー内で関連する要素をグループ化すると、ユーザーはそれらをまとまりのある単位として認識しやすくなります。 このアプローチにより、コンテンツと機能が視覚的に整理され、情報の識別と処理が容易になります。 明確なグループ化は、乱雑なインターフェイスを回避し、混乱や非効率を減らするのに役立ちます。 グループ化は、近接性がオプションではない場合にも効果的です。たとえば、画面上の複数のコントロールにまたがるメッセージ バーは、その境界線と背景色により関連する単位として認識されます。
グループ化された要素の一貫した視覚スタイルを維持すると、要素のつながりが強化され、ユーザビリティが向上します。 これらの要素に類似の色、フォント、またはアイコンを使用すると、同じカテゴリまたは機能に属していることが強調されます。 視覚的な表現に一貫性がないと、グループ化の認識が弱まり、ユーザーが要素間の関係を見落としたり、意味や目的を誤解したりする可能性があります。
要素または要素のグループの周囲に境界線を追加すると、周囲の要素から分離されます。
コンテンツをセクション化すると、ユーザーは主題が切り替わっていることを理解できます。
シグナルとノイズ
線、コントラスト、間隔などの視覚的な手がかりは、何かが重要であることをユーザーに知らせるために使用されます。 ただし、シグナルが多すぎたり、重要でない情報を強調するシグナルは、すぐにノイズになります。
重要な情報やアクションをユーザーに知らせるために、注目点の法則 (太字のテキスト、対比色、アイコンなど) を使用します。 たとえば、重要なボタンや見出しを目立たせるために明るい色を使用します。
あまりにも多くの情報でユーザーを圧倒しないように、強調表示する内容を選択してください。 ユーザーのタスクまたは目標にとって本当に重要な要素のみを知らせます。 シグナルが多すぎると混乱が生じ、ユーザーが優先順位を付けることが困難になる可能性があります。 ユーザーにとって最も重要な情報を特定し、適切に強調します。 通常、行動喚起ボタンはページごとに 1 つだけ配置することをお勧めします。 フォームでは、ユーザーの注意を引くために必須フィールドを強調表示します。 これにより、ユーザーは不必要な詳細で迷うことがなくなり、重要なことに集中できるようになります。
インターフェイス全体でシグナルが一貫した視覚言語に従っていることを確認します。 これは、ユーザーがパターンを認識し、さまざまなシグナルの意味を直感的に理解するのに役立つガイドラインとして機能します。
特定のコンテキストとユーザーのニーズに合わせてシグナルを調整します。 たとえば、ユーザーが特定のタスクを表示するインターフェイスをスキャンしている場合、重要な状態とアクション可能な項目を明確に示して注意を引きます。 コンテキスト シグナルにより、ユーザーは無関係な詳細に気を取られることなく、関連情報をすばやく見つけることができます。
シグナルは、ユーザーをコンテンツに導き、重要なことを知らせるのに役立ちます。
視覚的なノイズは混乱を招き、シグナルとは逆の効果をもたらします。
Power Platform の促進
キャンバス アプリでは、レイアウト コンテナー を使用し、関連する要素をグループ化します。 理想的には、すべてのページ要素をコンテナー内に整理する必要があり、レイアウト コンテナーは、ギャップ プロパティを調整することで子コンテナーを効率的に分離することもできます。
モデル駆動型アプリ フォームでは、セクション を使用して、関連するフィールドまたは要素をグループ化できます。
再利用可能な カスタム コンポーネント で共通の視覚要素に一貫性を実装します。
キャンバス アプリでは、モダン コントロール は、デザイン内に統合されたシグナル伝達機能を備えています。 具体的には、ボタン と バッジ コントロールは、スタイル プロパティにさまざまなオプションを提供し、効果的なシグナルを作成します。 各コンポーネントのベスト プラクティスに従い、最適なコミュニケーションを確保するためにシグナル伝達を選択的に適用します。
参照
エクスペリエンスの最適化のチェックリスト
完全な推奨事項セットを参照してください。