web-dev-qa-db-ja.com

プライマリアクションボタンの色

主なボタンの順序に関して、私の現在の勤務先でいくつかの議論がありました。

この場合、ユーザーはユーザーを削除するアクションを実行しました。以下に示すモーダルを起動する小さな行動を促すフレーズがあります。

元々、プライマリアクションの色は、削除アクションではなく「キャンセル」アクションに配置されていました。 （文字Aを参照）

QUESTION：メインの色が実行中のメインアクションであるため、[ユーザーの削除]ボタンに原色を配置する方が理にかなっていますか？ （目的の解決策については、文字Bを参照してください。）

Original suggested button color option

Suggested button color option

buttonscall-to-action
8
Busycloud

これは "Yes、delete it"は赤か緑か？ 質問とよく似ています。

これが私の答えです。

あなたの特定の質問に関して、オプションBは、あなたの目が自然に引き付けられる場所であるため、最も意味のあるものです。

つまり、オプションCを提案したいと思います。

enter image description here

デフォルトのアクションを危険なものにしたくないので、デフォルトのフォームアクションがCancelボタンになるようにボタンの順序を切り替えます。他の回答で述べたように、確認モーダルの使いやすさをさらに高めるために、Remove Userボタンを太字にして、少し目立たせることができます。色覚異常や読書の問題がある人のために、私は通常、確認されているものに一致するアイコンを配置します。この場合、ユーザーアイコンが収まるようです。

8
Code Maverick

最も破壊的な操作をそれほど明白ではない選択肢にすることは、考えの1つです。推論によると、破壊的なオプションを選択するために必要な認知負荷の増加は、ユーザーが意識的にそうすることを決定していることを意味します

したがって、たとえば、次のようなことができます。

mockup

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

関連して、ユーザーがアクションを実行した直後にそのアクションを「取り消す」オプションを提供すると、ユーザーが意図していない可能性のあることを実行することからさらに保護されます。

2
Charles Wesley

順序と色は一貫性よりも重要ではありません。主に左を主張する人もいれば、右を主に主張する人もいます。

より大きな懸念であるIMHOは、近接性とコントラストです。

アクションの1つが比較的破壊的である場合、私はそれが主要なアクションのように見えるべきではないと主張します。プライマリアクションがボタンの場合、セカンダリで破壊的なアクションは次のようにする必要があります。

  1. ボタンのように見えない
  2. プライマリアクションに近接していない。

コントラストを適切に処理するチャールの推奨に基づいて構築します。距離を追加します。

--------------    
|   Cancel   |                                X Delete User
--------------

距離は少し認知的努力を追加しますが、この場合それは良いことです。ユーザーがフォームを飛んで行き、最初に表示されるボタンをクリックして、間違った方向に進んだことに気づかないようにします。

今日、距離はタッチデバイスでの偶発的なタップも保護します。これは素晴らしいボーナスでもあります。

ただし、特定の例では、DELETINGユーザーが主要なアクションであるように見えます。したがって、その場合、両方がボタンであり、互いに近接していることはそれほど問題ではないと思います。とはいえ、同じビジュアルモデルを使用して、それらを反転させることもできます。

---------------    
| Delete User |                                X Cancel
---------------
2
DA01