web-dev-qa-db-ja.com

2つの主ボタンがある

現在、一部のメール通知に取り組んでいます。電子メールはあなたの行動を必要とする何かが起こっていることを通知します。たとえば、誰かがドアを開けたままにしておくと警告されます。 2つのボタンを含むメールが届きます。

正当化されていない、またはアラートを表示して閉じます。通知のタイトルがおなじみのように聞こえる場合は、正当化されないものとして閉じるを選択します。アラートの詳細を表示するには、[アラートの表示]をクリックします。

このボタンをどのように色付けすればよいですか?どちらもプライマリであるか、どちらもセカンダリではないかどうかはわかりません。

two buttons for action

3

私の意見では、2つのボタンはどちらもプライマリではありません。

「不当に閉じる」ボタンは、誤警報のようなものです。 「アラートの表示」はユーザーとシステム間の一連の新しい操作と相互作用を開くため、行動を促すフレーズである一方で、アクティブ化する色を持たないのは正しいことです。

システムとアラートが送信される理由はわかりませんが、通常、この種のシステムでは、誤検知(役に立たないアラートを表示する場合)はミス(アラートを表示しない場合)よりも優れていると考えています。これは重要になる可能性があります)。これが事実なら、あなたのデザインは私には正しいようです。

3
Marco Tatta

あなたのコメントを読んで、私はオレンジ色のボタンが認知負荷を増加させることに同意します。どちらのボタンも行動を促すボタンであり、同様に重要なようです。

2つの重要なボタンが隣り合って配置されている場合、色を反転させてコントラストを維持するのが通常の方法です。あなたのビジネスオーナーだけでなく、あなたの興味もありそうなアプローチを示しています。

enter image description here

これを検証する唯一の方法は、ユーザーテストです。また、色を決定するときは、色がシステム/製品/アプリ/ブランドの全体的な色と同期していることが重要です。

いくつかのこと...選択肢は同等であるが異なるものとして提示されるため、同じ色のIMHOである必要があります。しかし、彼らの行動が異なることを視覚的に表現する能力を保持したかったのです。このため、それぞれにアイコンを追加し、各ボタンの詳細を伝えるアイコンを選択しようとしました。また、ボタンラベルの冗長性の2つの異なるレベル(長いと短い)も確認しました。これらはメールに含まれているため、メールの本文にコンテキストを追加して、各アクションに何を期待するかをユーザーにさらに通知できます。ここに写真があります。

https://i.stack.imgur.com/faqz0.png

enter image description here

これで遊びたいならペンを作ってみました...

https://codepen.io/cwcorbin/pen/aPROrV

フォークして遊んでみてください。 Bootstrappyのもののほとんどが統合されています...

1
Craig Corbin

私が理解している限り、両方のアクションは同じであり、色はユーザーがここでアクションを実行するように導いてはなりません。どちらのアクションも同等に重要であるため、これらはプライマリカラーリンクボタンにする必要があります。

0
Silviya