web-dev-qa-db-ja.com

UIで暗い要素と明るい要素またはブロックを隣り合わせに配置すると、視覚の認識に問題が生じる可能性がありますか?

私のプロジェクトのデザイナーは、同じコンテキスト内で明るい背景と暗い背景の両方を使用するものを提案しました(以下の基本的なモックアップ)。

アプリの短い背景:

  • アプリを配置できるプラットフォームです
  • 非常に密度が高く、データが重い
  • アプリは、グループ化されている他のアプリの変更に対応します
  • アプリをグループ/ビューに追加できる柔軟なプラットフォームになるように設計されています。
  • 詳細なフォーム、表、グラフ、プロファイルなど、アプリによって実行されるさまざまなタスクがあります。

明暗の理論的根拠は次のとおりです。

  • 暗い領域は「主要」です。これらは目立つ情報であり、他のアプリを制御することがよくあります。
  • チャートや図には暗い領域が適しています。フォームとテキストの明るい領域。

これにはメリットがあると思いますが、私の懸念は次のとおりです。

  • 明るい要素と暗い要素の両方を使用すると、視覚的な一貫性が失われます
  • セグメント/アプリのコントラストが視覚の問題を引き起こす
  • ユーザーは混乱し、根拠は失われます

主な質問:同じアプリケーション内で明るい背景と暗い背景を使用すると、視覚の問題が発生する可能性がありますか?研究に裏付けられた主張が望ましいです。

以下は、急いで作成されたモックアップです(実際の詳細をトップシークレットとして共有することはできません)。

Sample 1

Sample 2

12
Jay

暗いテーマと明るいテーマを一緒に使用することもできますが、それはあなたが何を達成しようとしているのかに依存します。あなたが述べたことから、私はあなたの状況の設計選択は全体的なUXを傷つけるでしょうだと思います。

暗いテーマと明るいテーマを一緒に使用する場合、それは暗い領域を強調しないおよび明るい領域を強調するです。光は常に私たちの注意を暗くするよりも速く引き付けるので、あなたの顧客の注意はあなたがそれを望む場所から引き離されるでしょう。メイン領域に明るい領域を使用し、セカンダリ領域に暗い領域を使用すると、改善されます。

ただし、全体としては、コンテンツの混合について話しているときに解決できる問題が増えるため、2つを混合する非常に適切な理由が必要になります。

5
JohnGB

ページ上で濃い色または彩度の高い色のブロックを使用すると、ユーザーの目が描かれる場所の視覚的な階層を定義または変更できます。

コントラストの強い複数の背景を一緒に使用することに対する私の懸念は、白とは対照的に暗い背景を使用することで、目が向けられているもの(暗い領域にあるコンテンツ)を表示するために最も重要な情報を見落とす可能性があることです。

また、レイアウトの他の領域の要素の重みと色に応じて、階層をめぐる問題がある場合や、論理的な情報/デザインがページの縦方向に流れていない場合に、ユーザーの認知的負荷が増える可能性があります。

提案された設計が先に進む場合、ユーザーが実際にアプリケーションを使いやすいと感じるかどうかを確認するために、カラーコントラスト分析やプロトタイプのユーザビリティテストなど、いくつかの常識的なUCDプラクティスを実施するのが賢明です。

1
OllieRoz

ユーザビリティの観点からは、この極端なコントラストは逆効果になると思います。

もっと心配ですが、あなたのモックアップでは黒い部分がbig features(1st mock-up)またはadditional information/sidebar(2nd mock)として機能しているようです-アップ)。任意のタイプの信号要素がある場合、アプリケーション全体で機能的に同じである必要があります。

さらに、それぞれの背景にあるテキストのコントラストが柔らかくても、さまざまな要素間の明確な区別が目をそらすため、はっきりとした白黒のコントラストを読むのは非常に困難です。すべてを真っ白にするのではなく、highligh colorを使用することを検討できます。

0
kontur