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

キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ

[coliss]

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

[whkr]

本当にキャンセルを実行しますか？　〔実行〕〔キャンセル〕

[comp123jp]

退会申請画面でこれと逆のことしてるサイト多いよね

[crosscrow]

そして筆者に襲いかかるダークモードというトレンド

[NOV1975]

どういうデータを元にこの結論に至ったか、がないと単なる主観だよな

[lbtmplz]

いや押せない時の色だから色はつけるべき

[humid]

ダークグレーでもニュートラルではなくディスエイブルにも見えるけど。急に出てくるとキャンセルには数秒待つ等の条件があるのかとも思ってしまう。

[namelaw]

騙しやってるサイトがある限り色だけで判断することはない

[n500k]

物理的に操作できないように見えないかしらん？必須入力の不足で今は押せない、って時にグレー使う事って余りないのかな。

[gm91]

いやフラットデザインがry

[mezamashi0540]

iOS風UIにしているので、ムムムって思った。iOSの文法だとdisable状態になる。主張は理解できるが、iOSに酷似しているUIでiOSの文法と真っ向からぶつかる主張をされると首肯しにくい。要は作例がよろしくない。

[moondoldo]

ダイアログでミスした事はほとんど無い、そこに意識が集中するから　そっちよりも、一番下に並ぶ[クリア][次へ]ボタンの罪の方がでかい　そもそも[クリア]ボタン不要だろクソボケ！！って何度も思ったわｗ

[harumomo2006]

YESNOの選択肢に色は付けないけど、ソフトの終了や削除ボタンは赤で強調することが多い

[stabucky]

キャンセルは右に置いてほしい。

[teo_imperial]

既にブコメにあるけど私も色が無いとdisableに見える。

[pmint]

いまどき色はどうでもいいでしょ。ブルーライトフィルターが当たり前になった今、まだ「赤は危険を表す色」なんて思ってるデザイナーはいないだろうし。フォントと同様で、色も見る側が決めるもの。

[primedesignworks]

先頭の画像しか見てないけど disabled に見える

[koogawa]

プラットフォーム次第だと思う

[mr_mayama]

そこだけ切り取って「すべき」ってのが如何に悪か。

[adsty]

色で強調してボタンを押させるようにしてはいけない。

[sqrt]

そんなことより、OKボタンとキャンセルボタンのどっちが右か問題に決着を付けてほしい。マカーとドザーの宗教戦争なんだけど。

[AzuLitchi]

コリスのツイッターシェアボタン、鳥のアウトライン化をしてはいけない理由を全く無視してるのがいきなり気になったな。 https://about.twitter.com/content/dam/about-twitter/company/brand-resources/en_us/Twitter_Brand_Guidelines_V2_0.pdf

[hiroomi]

”キャンセルが、左: アクションに見える”フローの中断ならその通りなんだろう。

[yaxiek]

ニュートラルカラーだと安心感でる。か。

[fuji_haruka]

3つ以上ボタンがあるときの例はそうかもと思わせる

[kemuken]

色々入力させた挙げ句、OKとキャンセルが同等の押しやすさ（大きさなど）なのがそもそもダメなんじゃね？と個人的には思う。色なんかに頼らない方がいいと思うが。あるいはOSの標準に合わせるか。

[ata00000]

それよりOKとかContinueとかを右に持ってくるなと言いたい。昔はOSと同じで左が普通だったと思うんだがいつから逆になったんだろうか

[Hohasha]

フエラムネの会社なのにえらくモダンだなと思ったら違った…。

[nyokkori]

そうなのか。グレーだとまだ入力受け付けないようにも思える。そもそも英語だと何書いてっかよく分かんねえ。俺は何十年も感覚でボタンを押してる。

[yoshikidz]

これおもしろいなー

[xjack]

押させたいか押させたくないか，つまりデザイナー（企業）目線．ウザいサブスクリプションなんかNo thank you!だよ．

[nozomi05]

わかりみ。

[Laylack]

退会時のみ電話ってのあるよね。

[t-murachi]

色盲…(´・ω・`)

[sirikodama]

Amazonプライムに入会しますボタンはこの理論でいくとどうなるんだ。色だけでなく、ボタンと認識できるような枠さえもついないのはどういうわけだ。

[OkadaHiroshi]

安全へのフォールバック→わかる。ユーザーがキャンセルを押すのは間違って進んでしまった時なのでニュートラルではなく緊急脱出的な赤にすべきでは。少なくとも平均的日本人は進みたいとき赤ボタンは押さない。

[reachout]

キャンセルを押させないテクニックに見えてしまいます

[Fushihara]

スマブラみたいに長押し(押してる間はメーターが貯まるような演出)ボタンにしよう。

[KariumNitrate]

関係ないけど、色弱なので、細い線の色で何かを判別させるのやめて欲しいわ。概ね右の方がわかりやすいけど。

[SUZUSHIRO]

朝日テレビはキャンセルキャンセルキャンセルだ

[sisya]

二つ目のサンプル。ウインドウの横幅と同じ幅のボタンを設置する例で、文字カラーをグレーにしてしまうと、ボタンなのかただのテキストなのか見分けがつかない。あまり良い手段には思えない。