TOP > IT・テクノロジー > キャンセルボタンに色をつけてはいけない理由 | コリス

キャンセルボタンに色をつけてはいけない理由 | コリス

47コメント 登録日時:2019-04-16 11:05 | コリスキャッシュ

キャンセルボタンをデザインする時に、カラーで悩むことはありませんか? キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクシ...

Twitterのコメント(47)

やはり優先順位が大事。
ユーザーは何をしたいのか、
ユーザーに何をして欲しいのか、の優先順位。
キャンセルを進んでしたいと思ってないし、
キャンセルを進んでして欲しいとも思ってない。
by colisscom

キャンセルボタンを押させて行動を促すのではなく、安全へのフォールバックとして示すべき
・色で強調することを避ける
・グレーを使う場合は十分に暗くする
サムネだとdisableと思うこともあるんじゃないかなーと思ったけど、Not nowの選択肢がある例のとこでグレーにしてあげるのがわかりやすいなと思った
フォームの戻って編集ボタンのラベルをキャンセルにしたら離脱が増えるのかな?変わらないかな?気になる。
なるほど🤔色もだし文言も大事だよね
一方、グレーのボタンはボタンとして認識されない、という話もありますね
なるほど面白い〜
グレーを暗く(黒寄りに)する。これ大事。
Disableに見えないように注意⚠️
うわー、これ確かにそうだわ
参考になる
「ここをクリックすると安全に元に戻せるよ」というメッセージを戻したいユーザーの心に最大限刺さるように主張する。明るすぎるとdisabled と見分けがつかなくなるので気をつけるべきなのは学びになった。
スマホやと特に大切になる。「キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります」。◆
これは参考になる。あと、単純に「キャンセル」じゃなくて、「閉じる」っていう文言にしたら効果的かつシンプルにわかりやすくなる時もあったりしますな。
関係ないけど、色弱なので、細い線の色で何かを判別させるのやめて欲しいわ。概ね右の方がわかりやすいけど。 /
マジかよiOS最低だな
マテリアルデザインをたまたまやってたからわかりいい
『キャンセルボタンに色をつけてはいけない理由』 WindowsとMac/iOS/AndroidでOKとCancelの位置が逆なのなんとかして欲しい。
明確で、良い。

ただ、どんどん同じようなデザインにはなるなー。
こういうグレーなキャンセルボタンのサイトあるけど、なんだか押せないボタンとして認識しちゃう
退会時のみ電話ってのあるよね。 /
色盲…(´・ω・`) /
"キャンセルボタンを押させて行動を促すのではなく、安全へのフォールバックとして示すべきです。これが、キャンセルボタンに色を付けてはいけない理由です。"明瞭でわかりやすい指針。よき。 /
言わんとするところはわからなくもないけど、状況に応じて判断すべきじゃないのかなあ。|
キャンセルを押させないテクニックに見えてしまいます /
状態として、例えば電子商取引で言うところの最終確認フェーズから抜けるという意味であれば明確な変更操作と感じてる。変更しないはEscで抜ける印象。 /
メモ。"キャンセルボタンはニュートラルを意味するため、ニュートラルカラーにする必要があります。ユーザーはキャンセルボタンに色が付いていないことに気付くと、そのボタンが安全へのフォールバックであると素早く認識します。"
たまに間違って押すときあるから目立たないようにしてほしい。

ユーザーを安心させるには、キャンセルボタンを押させて行動を促すのではなく、安全へのフォールバックとして示すべきです。
文字通り色を付けない方がよい場合は限られそうだけど、フォールバックを示そうってのはボタンに限らず大事かも。
三択のやつは一つ以上色が付いているのがおかしい気がする。色付きはプライマリボタンのはずなのになぜ全部に色が付いているのか… /
✍ボタンに色を付けてしまうと「アクションが実行される」印象に

✍押しても何の変化も起こらず、「そこからの脱出方法である」という印象を与えるべき
ゲームの「決定」で不可逆なところはあらかじめカーソルを「キャンセル」に合わせる仕様にしておかないと、連打読み飛ばししている人がそのまま決定してしまう、ってのとある意味似ている。 / …
ボタンの色を統一すればいいというものじゃないんだね。濃いグレーにすると、押させたいボタンに目がいく…面白いなぁ
横並び二択の時はキャンセルだから色無しじゃなくてCTAを強調しろのほうが腑に落ちる。何がニュートラルかはカラースキームによるから。縦積み三択でNot Nowだけ黒はどう見ても悪手と思うが、好例である根拠がほしい。 / | コ…”
「ん?」って身構えて確認することがよくあるので、この配慮の素晴らしさはすごくよくわかる。

わかりやすい --
まずキャンセルボタンを置かない工夫をした方が良いと思いますが、いちおう
「キャンセルボタンとは正確に言うと、何をするものでしょうか?
キャンセルボタンの役割はユーザーが操作した現在のスクリーンを閉じて、前のスクリーンに戻すものです」

ならばキャンセルボタンは「戻る」ボタンにすべきでは?
ボタン配色のセオリーがあると納得感を得られますし、ユーザーにも親切ですよね📖
UI周りの話も面白い👀
キャンセルボタンを強調していはいけない
「グレーを使う時は十分に暗くする」はちょっと認識不足だった。確かに明るいグレーだとdisableに感じる/
以上

記事本文: キャンセルボタンに色をつけてはいけない理由 | コリス

関連記事