web-dev-qa-db-ja.com

ほとんどの金融アプリが黒または暗い背景を使用するのはなぜですか?

今日、株式監視ウィンドウ8アプリケーションの設計を検討するように依頼され、これらの株式監視または金融アプリのほとんどが黒または暗い背景にあるような興味深い傾向に気付いたとき、私はデザインのアイデアを探していました。

enter image description here

enter image description here

enter image description here

私は何かに注意を向けたいときに黒い背景に白いテキストが一般的に使用されることを理解しましたが、この理由のために読むべき多くの情報があるときはこれは良い考えではありません(これに従って 記事UXの動き ):

ユーザーが読むテキストの種類は段落テキストです。段落テキストを表示するときは、それらを読みやすくするために、暗い背景に白いテキストを使用しないでください。ユーザーに長い間白いテキストに固執させると、ユーザーの目が疲れます。これは、白が人間の目の3種類すべての色に敏感な視覚受容体をほぼ等しい量で刺激するためです。これにより、暗い背景で白い段落のテキストを読むことがユーザーの目にストレスを与えます。

白はまた、すべての波長の光を反射します。段落テキストの単語と文字はコンパクトで近接しているため、白いテキストが光を反射すると、反射した光が散乱し、隣接する単語や文字にぶつかります。これにより、単語や文字の形がわかりにくくなり、ユーザーの読みやすさに影響します。それを黒のテキストと比較してください。黒は各単語と文字の周りの光を吸収し、それらを区別しやすくします。

だから私の質問は「ほとんどの金融アプリは多くの場合、互いに接近して動的に更新される多くのデータを表示するので、なぜ黒い背景に白いテキストを使用するのですか?一定期間読むのが難しいことが証明されています "

20
Mervin

暗くて複雑なインターフェースは名誉のバッジです

IDEOがブルームバーグターミナルの再設計に着手したとき、これに取り組みました( 記事を参照 )。彼らはそれを発見した...

...このデザインには、以前のシステムのエキスパートユーザーから発想を得た「名誉のバッジ」要素も組み込まれています...

そして

...世界中で75,000台のマシンが使用されていると推定されています(バチカンを含む)。

ブルームバーグは空間を支配しているため、コンテキストに影響を与えます。

トレーダーはかなり高級なクラブです。解読できない用語や頭字語の数を失いました。ブルームバーグターミナルでは、専門家が「セットアップ」します。あなたはあなたのニーズに合わせてインターフェースを調整し、それから...それは急でかなり長い学習曲線です。トレーダーは、多くの時間を自分の活動の習得と完成に費やしています。

変更には多くの抵抗があります。

多くの決定は現在のシステムと個人の好みに基づいています

私の見解では、多くの場合(常にではありませんが)、設計決定は設計者によって行われません。少なくとも、設計上の決定を発見して解決するためではありません。これは特に、大きな取引プラットフォームを構築するある種の大規模組織に当てはまります。

多くの場合、幅広いアプローチを定義するのは個人の好みとブランディングです。したがって、常にトレンドを読み取ることはできません(ここでは多くの証拠を提供することはできませんが、これは私の経験です)。

ただし、これらの組織におけるUXの注目度が最近高まっていることを考えると、これは今後数年でリリースされるプラットフォームによって変わると予想します。競争が激しいので変化が起こります。

チャートやグラフィック要素は暗い背景でよりよく表示されます

暗い背景では、光よりも色や濃淡の違いを知覚する方が簡単だという研究結果を知っています。そのようなインターフェースで表示される可能性のある多層化された複雑なグラフは、より見やすくなっています。

小さいテキストを表示すると、明るい場所では暗い部分が見やすくなります。

これに最適なソースは、UX.SEの別の回答です https://ux.stackexchange.com/a/23429/1561

これが当てはまる場合、最適な解決策は、チャートの背後に暗い背景を配置し、テキストの背後に明るい背景を配置することです。ただし、これは独自の問題を引き起こします。たとえば、断片化された外観とコントラストの衝突。したがって、妥協が必要です。

いくつかの代替アプローチ

ここでは、さまざまなアプローチで見つけたいくつかの例を示します。

濃い灰色のインターフェイスを備えた薄い灰色のグラフ領域: example 1

明るいインターフェイスと暗いグラフ領域のあるテキスト example 2

13
Jay

私の推測(そしてそれは単なる推測)は、これらのアプリはUIの特定の要素に注目を集めることを目的としているため、黒を使用していることです。この場合、グラフと数値。人々は自然に明るいエリアに焦点を当てています。現在、黒は一般的に読みにくくなっていますが、これは主にテキストのブロックの場合に発生します(したがって、「トップニュース」画面は私にとっては見落としです)。

暗い環境では、明るい背景が目を疲れさせることがあります。非常に明るい環境では、暗い環境では見やすくなります。それが理由かもしれません。残念ながら、私は(テーマやこれらのアプリが実施した可能性のある研究、およびダークUIを使用しているアプリの数について)知識はありませんが、間違いなくこれについていくつかの意見を聞きたいと思います。

あなたがそれを見たかどうかわからない。これらの回答にはいくつかの非常に興味深い点があります: 暗い配色のマイナス面とプラス面は何ですか?

5
Yisela

誰もが群れを追っているだけだと思います。すべての金融アプリが暗い場合、新しい金融アプリも群れに収まるように暗くなります。

しかし、残念ながら Xムーブメントの記事 はごみの山です。事実を正直にするには:

•白が目に負担をかける場合、白の表示がはるかに少ないため、暗い背景が好まれます。ただし、明るい光を直視した場合を除き、白が黒よりも眼に負担をかけるという証拠はまったくありません。

•ただし、記事のどこにも記載されていない、明るい背景で暗いテキストを使用することには有効な議論があります。背景が暗いと瞳孔が広がり、目が光に敏感になります。つまり、コントラストの量によっては、白いテキストが目を刺激する可能性があります。したがって、暗い背景に明るいテキストを表示する場合は、テキストを白ではなく薄い灰色にすることでコントラストを下げることができます。それ以外は、製品の目的に応じて、心配する必要はありません。

4
Igor Asselbergs

これは、株式市場を支配していたテレビ画面の遺産であるに違いありません。非常に昔には、大量の紙がありました。デジタル時代が到来したとき、リアルタイムの情報は紙ではなく電話回線を通じて画面に表示されました。ご存じのように、テレビ画面の統計は、ほとんどの場合、黒い背景に白いテキストです。

暗い背景をテーマにした白いテキストは、それらのテレビから継承されたものであり、何らかの認識デザインと見なすことができると思います。

適切な画像を見つけることができませんでしたが、株式市場について考えると、この画像が頭に浮かびます

編集:

http://newshour.s3.amazonaws.com/photos/2012/05/24/20120524_stockexchange_blog_main_horizo​​ntal.JPG

3
Matthijs Mali

金融アプリには、暗い背景で見やすい次の要素が含まれています。

  • 多色グラフ
  • ステータステキストなどの色の変化(緑は上、赤は下)

暗い背景の上で色を区別するのが簡単です。


金融アプリは通常、市場の状況を示すために使用され、本として読むことを意図していません。


また、暗い背景の上ではテキストが読みにくくなるというあなたの仮定は正しくありません-これが依存する要素はたくさんあります:

  • コントラスト(選択した色合いに依存)
  • 強調(すべてのテキストを読む、または詳細をスキャンする)
  • 周囲の照明
  • テキストの色
  • 読者の視力
  • ディスプレイのタイプ
  • フォントの種類とスタイル
  • ディスプレイを見つめて過ごした時間
  • ...


詳細については、次の回答をご覧ください。

暗い配色のマイナス面とプラス面は何ですか?

明るい日光の下での使用は、Webサイトの設計方法にどのように影響しますか?

3
Danny Varod

知っている人は、黒に白(または他の過度にコントラストのない色)を選びます。

デジタル画面から放射された光は、目に不可逆的な損傷を引き起こす可能性がある、と研究は示しています: http://www.news-medical.net/news/20170127/Light-emitted-from-digital-screens- can-cause-irreversible-damage-to-eyes-research-shows.aspx

ウェブが判読不能になった方法: https://backchannel.com/how-the-web-became-unreadable-a781ddc711b6

2
Jorge'