web-dev-qa-db-ja.com

赤いチェックマークと赤い「X」

現在、ユーザーにデータのテーブルを表示するビジネスアプリケーションのパネルを設計しています。表のデータは、会社のパーセンテージ(これは多くの異なる値で表されます)、会社に重大な違反があるかどうか、および会社にこのデータに関連する全体的なアラートがあるかどうかです。

私は現在、会社に重大な違反があることを示す赤いチェックマークが付いたパネルを設計しています。しかし、最近、私の同僚の1人が、これはチェックマークであり、「X」にすることを提案しているため、あまり意味がないと指摘しました。私は両者の間で引き裂かれ、ユーザビリティの観点から人々が何を考えているのかと思っていました。

Two mock ups showing current panel design with checkmark and suggested design with X

23
Jason Frade

チェックマークは何か肯定的なものを表します-通常「良い」または「正しい」ので、「深刻な違反」のような否定的なものを表すためにそれを使用するべきではありません。私はXまたは警告記号のいずれかを使用に焦点を当て、警告記号の設定を優先します。

アイコンは別として、「深刻な違反」と「全体的な警告」の両方の列を設ける正当な理由はありません。 「全体的なアラート」は冗長であり、テーブルはそれなしでより使いやすくなります。

実際、おそらく警告用の列を用意する必要はなく、警告を色と警告(またはXアイコン)だけで表示できます。

大まかな例を2つ示します。私の好みは最初のものです(しかしより良いデザインです):

enter image description here

enter image description here

40
JohnGB

あなたの質問を詳しく調べて、私は私の答えを修正しています。あなたが伝えようとしているのは、「この会社は失敗していますか(つまり、ある基準に準拠していませんか?)はいまたはいいえ」です。その場合、色は関係ありません、それは故障ではなく、チェックマークはやや標準です。

タブレットコンピューターなど、同じものの複数のタイプが比較されている表を考えてみます。タブレットは左側にリストされており、上部または上部にリストされていない機能がリストされています。

mockup

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

チェックは、機能の存在を示すために使用されます。あなたのケースでは、チェックは会社が何かに違反しているかどうか、またはアラートがあるかどうかを示します。さて、「全体的なアラート」列にアラートアイコンがあるため、混乱が生じていると思います。両方の列にチェックマークが付いている場合は、「アラート!注意してください!失敗!何らかのアクションを実行してください!」ではなく、「これはある、これはありません」という関係を伝えていることはより明確です。ただし、ユーザーがデータに基づいて行動するように奨励したい場合は、私の元の答えは次のとおりです。

赤のチェックマークを使用しても、赤緑の色覚異常や他の種類の色覚異常のあるユーザーには翻訳されません。チェックマークは通常、成功を表すものであり、失敗の状況を伝えようとしている場合は使用しないでください。 「X」は一般的に失敗を意味すると理解されています(Web全体でフォーム検証とその他のエラーを参照してください)。

Twitter form validation with X used to indicate invalid email and check used to indicate valid entries

ただし、回答と @ Marjan Venema のコメントから明らかなように、列のタイトルはチェックまたはXと組み合わせて誤解を招く可能性があります。警告アイコン、またはさらに言えば、アイコンと何かを示すテキスト「Xは失敗しました」のように、より正確になります。

21
elemjay19

列のアイコンとして赤い感嘆符を使用します(JohnGBで使用されているアイコンと同様です)。最初に考えたのは、列の名前を変更して赤いXを使用できるようにすることです。たとえば、「Conforming」、「In Good Standing」、「No Violations」、または「Playing By the Rules」の場合、赤いXを使用して、会社が適合していないか、違反していることを示すことができます。通常、赤いXは、何かがこれまでにないことを意味します列が示すように、厳密な論理学者は赤いXが付いている会社は違反していないと主張することができます。

赤いチェックマークは、矛盾するメッセージを送信するので、絶対に避けてください。

赤色またはオレンジ色の感嘆符は、最も明確でわかりやすいでしょう。

「深刻な違反」列と「全体的なアラート」列を組み合わせるアイデアも気に入っています。 「健康」や「立ち」のような名前にします。重大な違反には赤いXを、アラートにはオレンジ色の感嘆符を使用します。

enter image description here

17
hhamilton

A 赤いチェックマークがあいまいなようです、「許容範囲内ではありますか?」、「完了しましたが問題がありますか?」または、他の何か?以来、チェックマークは、完了または承認/承認を表すものです。

違反については、Johnが提案したように[〜#〜] x [〜#〜]を使用するか、または円記号と円記号(禁止)。

6
rk.

これは実際には文化的なものです。米国とドイツでは、通常、チェックマークとして [〜#〜] x [〜#〜] が使用されます。ほとんどの国では です。日本では Oマーク を使用しています。

6
Eternal Noob

今日も同様の選択をしなければならなかったので、これを決定しました。

  • 緑のチェックマーク 正しい
    一般的に緑は良いことを表しており、チェックマークはダルトニアンユーザー(赤緑の色覚異常を持つ人々)にとっても意味があります
  • 黄色の三角形 警告用
    黄色は通常、警告標識(例:道路標識)の色であり、ダルトニアのユーザー向けの三角形です
  • 赤く塗りつぶされた円 警告用
    赤は通常、現実の警報システムに使用され(例:安全上の問題のための赤ランプ)、円は禁止標識を示すために道路標識で一般的に使用されます。

バックスラッシュ付きの赤い円を使用したかったのですが、それを確認するには、32 x 32ピクセルを超える必要があり、16 x 16ピクセルに制限されています。

セマンティックカラーとセマンティックフォームの間に矛盾があるため、赤いチェックマークを使用できません。

最後に、赤のXを使用することはできません。これは、Xのセマンティックな使用が削除、ウィンドウでのクローズ、またはポップアップボタンのクローズであるからです。

4
pierre lebailly

注意が必要です。赤いXはあいまいな場合があります。多くのシステムでは、この記号は削除動作に関連付けられています。

私はこの象徴的な意味を持つシステムに取り組んでいます。あなたが説明している状況では、エラー/違反動作(Visual Studioのエラーシンボルなど)を示すために赤い丸の白いXを使用し、赤い四角内に十分に異なる白いXを使用して、ソフト/わずかなエラーを示しています。

警告スタイルに合わせるために、おそらく赤い丸の中に赤いXを使用できます。サークルはシンボルを削除動作と十分に区別し、ビジュアルデザイン言語を拡張するのに役立ちます。

1
Zodman