web-dev-qa-db-ja.com

「はい、削除してください」は赤ですか、緑ですか。

CMS(コンテンツ管理システム)のインターフェースを設計しているとき、私はパラドックスに出くわしました。whatを実行することとwhyを実行することについて少し混乱しています。

環境

アルバムを削除する前に、ユーザーはアクションの確認を求められます。

緑「はい」

First option

赤「はい」

Second option

ユーザーにとってより直感的なオプションはどれですか?

787
Diéssica

どちらの方法も、偽陽性のパラダイムをもたらすようです。これはより簡単で、ユーザーに色とラベルの関連付けを理解させる時間を費やす必要はありません。

「削除」ボタンを目立たせるだけです。 「キャンセル」ボタンを目立たなくします。ボタン内のラベル付けに関しては、ユーザー側でより多くの処理が必要になるため、基本的に単純なアクション(いいえ/はい?またはキャンセル/削除)に多くのコンテキストを含める必要はありません。

enter image description here

ユーザーは通常、「削除」や「削除」などのアクションを赤に関連付けます。そして、いつものように、アクションを「キャンセル」する方法を提供します。

1358
jnmnrd

赤と緑だけで考えるべきだとは思いません。赤は通常 危険に関連 であり、中世まで遡る可能性があります(引用が必要)。クイック Google画像検索 で「削除」を行うと、ほぼ完全に赤い画像になります。

私(そして bootstrap )にとって、緑は成功を示し、赤は危険を示します。

Bootstrap buttons

削除は危険なアクションなので、削除ボタンを赤のままにしておくことをお勧めします。緑/赤の使用に制限されていますか?もしそうなら、私はあなたの2番目の画像を使用することをお勧めします。米国のストップライトは、緑が「継続」を意味することを示しています。この理論的根拠を使用して、緑色の「いいえ、保持する」ボタンは「いいえ、保持して続行する」を意味し、赤い「はい、削除する」は「はい、危険でも削除する」を意味します。とにかく、「いいえ、保持します」ボタンをかなり標準のアクションカラー(たとえば、スタイルのないリンクのデフォルトの色)であるため、青色にすることを検討します。

編集:私は @ JNMNRD がこれに対する最良の答えだと思います。 @JNMNRDの言葉のない画像は次のとおりです。どのボタンが削除を意味するかわかりますか?

Delete

321
circuitry

これを少し異なる角度から見て、可能であれば確認を完全に削除し、代わりに「実行/取り消し」プロセスに切り替えることを検討できます。

この方法は、Googleサービス全体でよく使用されます。

enter image description here

文化的に中立であり、ユーザーにとってより効率的であるという利点があります(削除するには、2回ではなく1回のクリック)。

短所は、それが一時的なリンクであり、別のメールがスパムとして報告された場合など、別のアクションが実行されたときに上書きされることです。また、ログアウトしたり、フォーカスを失ったり、更新したりすると破棄されます。

これらの不利な点を回避するには、SharePointと同じように、サイトにある種のごみ箱機能を含めることを検討してください。

221
Graham Wager

すべての敬意を払って、私はこれまでのすべての答えがいくらかマークを逃していると思います。

まず、あなたの質問のContextセクションに基づいて...

コンテキスト

アルバムを削除する前に、ユーザーはアクションの確認を求められます。

...これはsuccessまたはerrorモーダルではなく、confirmationであると推測できますモーダル、つまり警告または注意yellowのような色greenまたはredではなくsuccessおよびerror色はそれぞれ意味します。そして、それはis確認モーダルなので、表現はおそらく次のように変更する必要があります。

このアルバムの削除を確認してください:

確認モーダルのsabilityをさらに進めるには、embolden確認ボタンを押すと、少し目立つようになります。 色覚異常または読書問題を持っている人は、通常、確認中のものと一致するiconを挿入します。この場合、ゴミ箱が適しているようです。

これらすべてを一緒に追加すると、次のようになります。

confirmation modal


ボタンの文言に関するコメントに基づいて更新...

これの言い回しを今しばらく考えています。コメントは確認の代わりに削除を使用する傾向がありますが、私はもっと良いものがあると思います。アイコンはゴミ箱であり、アルバムを削除するについて話しているので、代わりにthatという表現を使用する必要があります。

だから、私はそれについて考え、KeepTrash代わりに。どちらも、アルバムを削除するか、アクションをキャンセルするかという問題と一致します。色は色覚異常のユーザーでも引き続き機能します。強調されたKeepは、デフォルトのアクションが何であるかを明確にします。確認しているアクションを明確にします。

updated confirmation modal

132
Code Maverick

ユーザーは、赤いものをクリックする前に2度考える可能性が高くなります。 2つのオプションのうち、クリックする前に2度考えてほしいのはどれですか。
2つの選択肢のどちらが、より不可逆的なイベントを引き起こす可能性がありますか?

出典: http://en.wikipedia.org/wiki/Red#Warning_and_danger

43
Rolf

私はあなたの質問と現在の回答を読んだ後、少し調査しましたが、他の非人間霊長類と同様に、人間の赤の好みは文脈が友好的か敵対的かによって異なることを示唆する証拠があることがわかりました( Maier et al。、2009 および追跡調査)。

要約に要約されているように(私の強調):

幼児参加者の自発的選択パラダイムを使用して、色の好みについて3つの実験が行われました。

実験1は、参加者が友好的な実験室環境で緑より赤を好むことを示しました。

実験2は、参加者の赤に対する好みが、色が提示されるコンテキストによって異なることを示しました:赤は、もてなしのコンテキスト(幸せそうな顔に続く)では好まれますが、敵対的なコンテキスト( 反対色のパターンがコントロール色の緑で見つかりました。

実験3は同じコンテキスト操作を使用しましたが、コンテキストが赤のみの設定に影響するかどうかを明確に調べるために、2番目の制御色である灰色が追加されました。予測されたように、2番目の代替選択肢が与えられた場合、緑や灰色ではなく、赤のコンテキスト依存の好みが見つかりました。これらの結果は、色の好みに関する文献における文脈緩和の最初の証拠を表しています。

(PsycINFOデータベースレコード(c)2012 APA、すべての権利予約)

このアクションのコンテキスト(何かを削除する)でそれを「敵意のある」領域にプッシュするのに十分かどうか疑問に思います。私の直感は、削除が誤って行われた場合(ユーザーが「削除」をクリックした場合、ユーザーが削除するつもりがなかったことに気づき、作業を保存する最後のチャンスが提示された場合)であると考えています。意図的なものでした(ユーザーは、目標を達成するために別のハードルをクリアする必要があることに不満を感じていましたか?)。

28
Jessica Yang

残りのアプリケーションの既存の標準は何ですか?赤いボタンを使用して「このアクションを完了したい」ことを示し、緑色のボタンを使用して「このアクションをキャンセルする」ことを意味しますか?それとも逆ですか?

それが私が今まで見たほとんどすべてのソフトウェアのようなものである場合、私のお金は「先に進んでそれを行う」の場合は緑色、「中止!中止!」の場合は赤色です。

「警告」の「赤」は公平な点ですが、その場所はbeforeがこの段階に達しています。元の「削除」ボタンを赤にします。しかし、ここでは確認ステージについて質問しています。これはalways継続またはキャンセルされる操作に関係なく、「継続」と「キャンセル」を一貫して処理する必要があります。赤が通常は「キャンセル」され、場合によっては「続行」される場合は、ユーザーに混乱を招いているだけです。

18
Dave Sherohman

行動を促すフレーズをプライマリとセカンダリに設定できます。

LinkedInの例:

example

これにより、ユーザーがアクセシビリティ、文化的偏見、およびオプションの分割によって生じる可能性のある意思決定の混乱に関する混乱を招くことなく、ユーザーが実行できる単一かつ明白な確認アクションが提供されます。色だけ。

また、上記の例での記述方法は非常に明確です。質問を言い換えると、曖昧さはありません。

このアルバムを削除してもよろしいですか?はい/キャンセル

このためのユーザーフローについても検討してください。フェイルセーフなしで絶対的なアクションを提供することはお勧めできません。

元に戻す

出典: 確認ダイアログで「本当にXYZを実行しますか?」というフレーズの代替案は何ですか?

以下は、削除する機能を提供するもう1つの方法です。

example

ユーザーは確認ウィンドウで間違いをする可能性があります。ユーザーが二度と戻らない重要なものを削除しようとしている場合は、続行する前に、ユーザーが確実に確実であることを確認することが重要です。誤って押す可能性がある確認ボタンをユーザーに提供する代わりに、テキストフィールドを提供し、「削除」という単語を入力して確認するようにユーザーに要求します。ユーザーがテキストフィールドに「削除」と入力した場合、ユーザーが削除することは間違いありません。誤って削除ボタンを押すことはありません。ユーザーが削除する前に、何をするかを確認テキストフィールドで確認できるので、ユーザーが削除しても後悔はありません。

ソース: http://uxmovement.com/buttons/how-to-make-sure-users-dont-accidentally-delete/

17
Pdxd

物を削除するための私の解決策は、小さなポップオーバーを開くゴミ箱アイコンが付いたボタンです。私はこれが良い解決策だと思います:

  • 邪魔なダイアログなし、誰もが確認ダイアログを嫌います!
  • 確認が必要です。偶発的なクリックはありません
  • ユーザーは2つの単語を読むだけです迷惑な質問はありません
  • 赤い色はそれが本当に削除されていることを示します、あなたは削除に「不可逆」を追加することでそれを強調することができます
  • マウスと目の動きの最小値
  • 無駄になるスペースの最小値
  • コンテキストスイッチなし

screenshot## Heading ##

13
daniel

緑は通常、「go」、「continue」、または「yes」を示すためにインターフェースおよび場所で使用されます。あなたの場合、それはまさにユーザーがやろうとしていることです。彼らは過去の行動を続けています(削除ボタンを押すことでした)。赤は「止まれ、気が変わった!」のように止まるところだ。

あなたの場合、私はユーザーが慣れているもので行きます:続行する場合は緑、キャンセルする場合は赤です。

10
Mike

なぜそれらは2つの異なる色でなければならないのですか?文化の違いやその他の問題が生じているため、これにより状況がさらに複雑になっているようです(ただし、このアプリケーションまたはWebサイトの対象者が何かはわかりません。したがって、文化の違いの大部分はアプリケーションの非常に特定のユーザーベースの場合は関係ありません)。

他の誰かが述べたように、なぜプライマリアクションボタンを目立たせ、キャンセルボタンを目立たせないのですか?たとえばiTunesでは、音楽ファイルを削除すると、[プロンプト]ウィンドウに[キャンセル]ボタンのボタンが灰色になり、主なアクションボタンが青になります。青色であることに加えて、色はそれに注意を喚起するために脈動します。

また、最初の例では、ボタンのラベルは冗長に見えます。 「このアルバムを本当に削除しますか?」ボタンに単に「いいえ」と「はい」または「キャンセル」と「削除」のラベルを付けないのはなぜですか?

9
Dmacatude

「はい、どうぞ」オプションに関連して、緑は常に正でなければなりません。そのため、緑でなければなりません。何かを作成するのではなく削除するという事実は重要ではありません。

赤は、「いいえ、私は私の心を変えました」または「いいえ、あなたにそれをしてほしくない」など、「それ」が何であれ、使われています。

7
Dave Murray

ボタンは、情報を送信/送信したり、アクションを実行したりするために使用されます。唯一のボタンは、フローを進めるものでなければなりません。その他のアクションはリンクで表す必要があります。このコンテキストでは、サイトの他の場所では使用されていない、または最も深刻なアクションのみに予約されているボタンの色の使用を推奨します。これは赤くなると思います。重要なのは、Y位置(緑、右下)にある色Xのボタンをクリックするという受動的な精神状態からユーザーを強制し、「これで何をしますか?」

7
Matt Langan

このようなアクションには色を使用しないでください。どちらのアクションも同等に重要です。ユーザーが誤って[削除]をクリックしたか、ユーザーが本当にアルバムを[削除]したいのかもしれません。

色はそのようなシナリオでは不必要な注意散漫であり、コンテキストに役立ちません。

ボタンラベルのテキストがアクションを確認できるようにします:「キャンセル」、「アルバムを削除」

4
Sumi

@JNMNRDが最適なソリューションです。

通常、ユーザーに実行させるアクションは右側に配置する必要があります。これは確認メッセージであるため、削除アクションは右側に配置する必要があります。

また、異なるアクションに2つの色を与えることで、同じ階層を与えることができます。一方、ユーザーが削除するアクションをすでに行っていて、これが単なる確認である場合、アクションは競合してはなりません。これは検証目的でのみ機能します。

ユーザーがすぐに削除ボタンにフォーカスして指示を読むため、キャンセルオプションをニュートラルのままにしておくのが最も使いやすいのはそのためですが、それでも後悔した場合はキャンセルする機会があります。

1

実際、私はプロジェクトを削除しているときのGithubユーザーエクスペリエンスを非常に気に入っています。タイポグラフィの色と境界線が赤に変わり、何か危険が発生していることを明確に示しています。

enter image description here

Githubはポップアップを表示して、ユーザーがプロジェクトまたはリポジトリを本当に削除したいことを確認します。

enter image description here

0
Pir Abdul