web-dev-qa-db-ja.com

UIにはどのくらいの色がありますか?

私はネットワーク管理システム(NMS)フロントエンドで作業しています。基本的にこのアプリは、リアルタイムで更新されるアラームのリストを表示します。そのようなNMSアプリはすでに多種多様に存在しますが、2つの共通点があります。

  1. アラームは表に表示されます(1行= 1アラーム)
  2. テーブルの各行の背景色は、アラームの重大度を表します

ポイント1は私には完全に理にかなっています。しかし、ポイント2は?画面にレインボーが付いていると作業がうまくいくという証拠はありますか?この問題を解決する良い方法は何ですか?

Screenshot of typical NMS frontend

18
user694971

この状況では、色の数が多すぎるようです。重症度を説明するために、私は単純であるがよく知られている慣習に固執する方がより便利だと思います...

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

上記の非常に明るい色を使用していることに気付くでしょう。これは、元の色が黒のテキストに対して暗すぎて、テキストが読みにくくなるためです。そして、赤緑色の失明のために、優先度の高いアイテムに感嘆符を追加する必要があります。

上記の他のバリエーションも確かに使用できます。たとえば、優先度の低いアイテムに色を付ける必要がありますか?優先度の高いアイテムを目立たせるために、白にする必要があるかもしれません。しかし、一般的には、色や数は、キーや凡例を常に確認しなくても、人々がその意味を理解して覚えられるように十分に低く保つ必要があると思います。


ちなみに、コントラストに関しては、赤の背景に黒のテキストが5.25:1のコントラスト比の例では最悪の違反者です。これはWCAG 2 AAに準拠するには十分ですが、AAAに準拠していません。これを自分でテストできます... http://www.snook.ca/technical/colour_contrast/colour.html

13
Steve Wortham

色を失うことはオプションではないと私は言うでしょう。

私は以前のNOCエンジニアです。つまり、このような画面の前に12時間シフト座っていました。そして、私はあなたが今私に見せている正確なインターフェースを使いました。しかし、代わりに、それぞれが異なるネットワークに焦点を当てている、6〜8のウィンドウで満たされた4つの画面を想像してください。

今はUXアーキテクトです:)

現在それを使用している人と話してください。これらの色は素晴らしいですが、問題が最も少ないことを理解するために必要な洞察が得られます。変更する前に、人々がどのように機能し、これらを使用するかを理解する必要があります。ソフトウェアを使用しているユーザーが理解できないため、このフォーラムに質問してもほとんど効果がありません。もちろん私を除いて:)

私の画面から色を削除しようとすると、私はあなたに当たるでしょう:)このように画面を監視する必要がある仕事をしているので、ほとんどの場合何も起こりません。だから私はウェブを閲覧したり、私用のラップトップで映画を見たり、他の気を散らしたりしています。それぞれの色、はい、それらすべて5つは、職場では異なる意味を持っていました。そして、これらの画面の背後で何百時間も働いた後、特定の色が注がれる量の「直感」を開発し、また、それらが到着するパターンそれをアイコンまたは類似のものに削減する場合、私を不利にするでしょう。

改善のためのアイデアは1つだけです(それ以上あります)
私を助けるために、シフトごとに「トラブル」ノードのリストを引き継ぐため、特定のノード/サーバー/アドレスを監視できればより良かったでしょう。それらを監視できるようにしたいので、重要であるとわかっている特定の特定のノードの特定のウォッチリストを作成できればすばらしいと思います。

色が重要だと私に信じてください。そして、あなたは外に出て、それらを使っている実際の人々を観察するべきです。誰かと12時間シフトを過ごすと、自分の画面より12時間以上遅れます;)

お役に立てば幸いです。

12
JeroenEijkhof

日常的に使用することになるため、何よりもまずお客様に役立つはずです。

ちょうどアイデアです。おそらく、色を右側に制限すると、「叫び」が少なくなりますか?左側に透明度を持たせることで、色はまだ存在しますが微妙です。

繰り返しますが、UIへの変更は、現在それを使用しているエンジニアとクロスチェックする必要があることに同意します。

enter image description here

3
Ades

私は3つのルールが大好きです。背後にある理由は、プレゼンテーションのオーディエンスをデザインするときに、プレゼンテーションから3つのことだけを覚えている可能性が高いためです。ここでも同じルールを適用できます。

1
Signcodeindie

最も長い間、コンピュータの慣習は、メッセージに意味を与えるために色を使用することです。伝統的にエラーは赤を伴います。警告は黄色で、成功/正常のメッセージは緑で表示されます。

あらゆるタイプのシステムの長期ユーザーは、そのような方法でアイテムを見ることに慣れるでしょう。この傾向を維持することをお勧めします。追加の色は意味を意味します。 UIを修正する場合は、1日8時間これらの画面を見なければならないユーザーがこのようなハードな色で目の疲れを感じるので、色を少し変更して、よりアセティックな目に見えるようにすることをお勧めします。色覚異常の人でもソフトウェアを使用できるように、背景色にアイコンを付けることをお勧めします。信頼してください、私は個人的に知っています!

1
JeffH

完全に関連しているわけではありませんが、私が書いたいくつかのアプリケーションで何が起こっているのかを確認するために、Debug-Viewerを作成しました。 「警告」をすべて削除することにし、3つの出力重大度(INFO、DEBUG、およびERROR)を設定しました。情報とデバッグには色がなく、エラーは赤です。

たとえば、特定のサービスからのメッセージ(そのサービスからのエラーはまだ赤)など、関心のある領域に青や黄色などの追加の構成可能な色を使用しています。

1
Fabian Zeindl

いくつかの考え

  • 色が多すぎる場合は、エラーの場合は赤、警告の場合はオレンジ/黄色、OKの場合は緑/色なしなど、従来のものだけを使用することを検討してください。
  • 色分けは説明されていません(それぞれの意味が明確ではありません)。すべての色を説明する凡例を追加することを検討してください。
  • すべての色が同じように明るく、どれに注意を払うべきか明確ではありません。最も重要な色を強調し、あまり重要でない色を薄くすることを検討してください
  • 色が明るすぎる/鮮やかで、自然にはそのような色がないため、人間の目を傷つけます。あまり積極的でない色を検討してください
  • 最も重要なアラーム(エラー/警告)のみをカラーで残すことを検討し、他のすべてについてはカラーを設定しないでください
  • 重大度でアラームをフィルターするスイッチ(表の上にあるタブまたはチェックリスト)を検討してください:エラーのみ、エラー+警告、青いもののみ、すべて
1
Trident D'Gao

これは、ここで取得しようとしている情報によって大きく異なります。 2つの例:

例1、発生するイベントのタイプを表示する場合のいくつかの調整。この場合、現在のデザインはそれほど悪くありません。各色は、イベントのタイプに関連付けることができます。そのため、たとえば、ほとんど黄色の画面では、発生しているイベントのタイプについて何かが示されます。私は背景のコントラストを暗くして、一番下の色の行を捨てました。まだ醜いですが、うまくいくかもしれません。 :-) example 1

例2、発生するイベントの重大度を表示する場合のいくつかの調整。この場合、最も重大度の低いイベントは薄い灰色、最も重大度の高いイベントは明るい赤になります。その間に、グレーと赤の間にいくつかのステップがあります。繰り返しになりますが、背景に関するものではないため、これらのコントラストは淡色表示されます。 example 2

1
Igor Asselbergs

ただし、さまざまな通知を区別するために異なる色を使用すると便利な場合があります背景色の多様性は圧倒的です

代わりに、背景色を減らし、前景色の多様性を考慮してください。さまざまな前景とその背景のコントラストが十分に高く、さまざまな前景色が区別できることを確認してください(*)。

(*)いくつかのテーマ(およびおそらくカスタムテーマを作成するためのオプション)を提供して、視力に問題のある人々が快適で多様なカラーテーマを選択できるようにします(例:色覚異常を持つユーザー)。

また、可能な場合は状況に応じた正しい意味を持つデフォルトの色を指定してください(たとえば、エラーの場合は赤、警告の場合はオレンジ/黄色)。

背景色の多様性は、限られた用途(選択された行やアクティブな行など)にのみ使用してください。

1
Danny Varod

色はポイントまで、便利です。ただし、この例はその点を超えており、現在、競合し、競合している原色のクレイジーな混乱にすぎません。

0
DA01