web-dev-qa-db-ja.com

破壊的な主ボタンの色

私たちのアプリでは、緑色のボタンを使用してプライマリアクション(右側にありますが、まったく異なる説明です)を示し、灰色のボタンを使用してセカンダリアクション(「キャンセル」)を示します。例えば: Generic confirmation modal: grey / green buttons

問題は次のとおりですユーザーがデータを破棄する確認モーダルに使用する色は何ですか?

注:この例では、データの削除に焦点を当てています。同じケースが、より大きな影響を与える他のアクションにも適用されます(システムの状態に影響を与えるか、アクションを元に戻すのにかかる時間に関係なく)。もちろん、アクションを元に戻すメソッド、アクションの結果を(マイクロ)コピーで説明するメソッド、最初にモーダルを使用しないメソッドなどを追加する必要がありますが、ここではボタンの色に焦点を当てます。 3つのオプションがあるようです。

1)アプリの一般的なモーダルと一致していること

Delete confirmation modal: grey / green buttons

欠点:「削除」は安全なアクションとして感じすぎます。

2)主なアクションが破壊的であることをより明確にする

Delete confirmation modal: grey / red buttons

欠点:「削除」はあまり推奨されない場合があります。モーダルが表示される前にユーザーが削除アクションを開始したことを忘れないでください。

)緑と赤の色を組み合わせる

Delete confirmation modal: green / red buttons

欠点:どのアクションが「安全」で、どのアクションが「安全でない」かを伝えますが、混乱を招き、ユーザーの動作を遅くします。

20
vincent.io

あちこちにあるアプリケーションは、すでにある程度標準になっている配色に依存する傾向があります。

赤は意味します。気をつけて!注意してください!注意!!!

緑は意味する:安全。頑張れ。ああ、心配することは何もありません。

私はそれが実際にはかなり逆に、ユーザーを遅くするとは思わない。普遍的にアプリケーションは赤と緑を「気づく」と「大丈夫」の色として採用しているため、アクションの実行ははるかに簡単です。

本当に正当な理由がない限り、標準を破らないでください。

正当な理由がない限り、何も再発明しないでください。この理由は、人々が何度もそれを何度も見たことがあるためであり、彼らはすでに特定のこと/色が何かを行う/意味することを期待しています。

Appleの赤は同じ意味です。

enter image description here

Twitter bootstrapは同じことをします:

enter image description here

人々はすでに普遍的に使用されているものに慣れているので、なぜ標準を破るのでしょうか二次的なものをグレーアウトします。プライマリは常に色分けされており、この場合、アクションに応じて赤/緑になります(削除は赤、確認は青、承認は緑になります)。

10
Majo0od

ユーザーが既にアクションを開始しているとのことですが、ユーザーがアクションを確認したいと思う可能性があります。

キャンセルは実際にはアクションではなく、モーダルダイアログの却下です。そのため、キャンセルボタンの強調は強く外すことをお勧めします。そうすると、そもそもカラーコーディングが不要であることが明らかになります。

A dialog box with a button "Delete" and a link "Cancel"

ユーザーはWebサイトでのみリンクのようなボタンに慣れているように見えるかもしれませんが、そうではありません。 Windowsはそのアプリケーションで多くのリンクを使用しています。

Windows 7 control panel, where actions are activated using links

9
Denis

質問では色について具体的に尋ねていますが、以下の提案をしたいと思います。

あなたが説明するような重要な機能では、機能の相互作用ステップを、破壊的でないアクションに関連する他の相互作用ステップとは異なるものにして、一般的な機能の場合と同様に、ユーザーが反復的でほとんど意識のないパターンをたどらないようにします。

これは、ボタンを交換するだけで実現できます。たとえば、削除機能を実行する前にアクティブ化するなど、削除機能を完全に異ならせることで実現できます。

色だけでは必ずしも十分ではありません。

5
Toni Leigh

私は曖昧でないボタン名を使い、あなたが使っている色と一致するでしょう。 「削除の確認」..または同様のもの。

1
MeeMMeeM

本当に良い点

私のアプローチは:

  • 一般的にポップアップは避けてください。ユーザーがポップアップ通知を受け取った場合、それはユーザーが少し停止して考える必要があるからです。ポップアップ汚染がない場合、彼らはそれを読む可能性が高くなります
  • ポップアップの代わりに、通知などのほとんどの場合、クリックして閉じる必要のないページ上の通知を使用します
  • 不必要な確認は省きます。ログアウトの例では、ユーザーが再度ログインするのが特に面倒でない限り、確認は使用しません。
  • ポップアップを控えめに使用する場合は、通常と同じカラーコーディングを使用します(プライマリ機能:削除=プライマリカラー、セカンダリ機能=セカンダリカラーを使用)。
  • 一般的なコメントとして、おそらく緑以外の色が原色に適していますか?
0
Skuirrel

二つお話したいと思います。

  1. ユーザーに表示されるアクション情報が多すぎます。例えば。ユーザーが「削除」オプションをクリックすると、「削除してもよろしいですか」というヘッダーの「アイテムを削除」という内容のモーダルと、その後に「削除」というアクションボタンが続くモーダルが表示されます。私の言っていることがわかるといいのですが。 「はい、いいえ」または「OK、キャンセル」というラベルの付いたアクションボタンを使用することをお勧めします

  2. 従うべき配色に移ります。一貫した配色の場合、ユーザーは何気なくモーダルに慣れるのに慣れているかもしれませんが、続行する前にユーザーを停止してしばらく考える必要がある場合は、視覚的な手がかりを使用する必要があります。プライマリアクションボタンの色を、威圧的でも微妙でもない、ユーザーの目を引くオレンジのようなものに変更するか、一貫性のために同じ配色で続行し、モーダルに警告または警告アイコンを表示することができます。緑色のボタンを盲目的にクリックする前に、しばらくユーザーを停止してください。

0
roni

カスタマイズ可能なモーダルウィンドウの場合、[キャンセル]をプレーンテキストリンクとして、[削除]を赤いボタンまたは少なくともサイトのブランドと一致する色のボタンとしてスタイルを設定します。 [削除]ボタンのスタイルは、その色に関係なく、[キャンセル]オプションとすぐに区別できます。オプションをかなり近くに配置します。私は、兄弟のオプションが親コンテナの反対側に面しているのが好きではありません。

モーダルウィンドウを表示するリンクを赤くして、兄弟と区別しやすくすることができます。ただし、リンクがメニューの一部であると仮定します。

0
Tim Huynh