デザイン

デザイン

キャンセルボタンに色を使わない理由とは?UXデザインに基づくボタンデザインと色の考え方

UX movement

UX Movement is a user experience blog that publishes articles showing how good and bad design practices affect user behavior.

本記事は、Why Cancel Buttons Should Never Have a Color
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

266 views

読了時間 : 約2分8秒

そもそもキャンセルボタンとは一体何なのでしょうか?それは、ユーザーが今見ている画面を消し、一つ前の画面に戻す機能のボタンです。システムに間違った変更を加えないため、私たちはキャンセルボタンを一つの防衛手段のようにとらえています。

 

ユーザーが安心できるよう、キャンセルボタンは安全に前に戻れて、Call To Action(行動喚起)ではないことを知らせるべきなのです。こういうわけで、キャンセルボタンには色がないのです。

 

ニュートラルなボタンには中間色を

 

ボタンの色はそのまま行動喚起となります。キャンセルボタンを押してもシステムには何の変更も加えられないのですから、行動喚起ではありません。また、キャンセルボタンに色で協調すべきではないのです。そんなことをしたら、ユーザーに余計な印象を与えてしまいます。しかし一方で、キャンセルボタンを押しても何の変化も起きないことと、逃げ道であることはユーザーに理解してもらわなければなりません。

キャンセルボタンが中立的で変更を加えるような役割ではないことを知らせるため、中間色を使うべきなのです。ユーザーがキャンセルボタンに色がないと気付けば、安全かつ即時に前の状態に戻れるボタンであると理解できるでしょう。こうしたボタンがあることで、確認画面で間違いに気付いたユーザーはすぐに修正作業に戻れるのです。

 

画面上のあらゆるボタンに色がついている場合、ユーザーの注意があちこちに向けられます。そのため、ユーザーがアクションを起こそうとするたびに迷いが生じます。そんなとき、中間色のキャンセルボタンがあれば、ユーザーの行動決定が早くなるのです。次のアクションが決まっているユーザーにとって、キャンセルボタンは何の邪魔にもなりません。

 

「キャンセルボタン」にはいくつもの呼び名がある

 

すべてのキャンセルボタンに「キャンセル」と書かれているわけではありませんが、ボタンに与えられているのがキャンセル機能であることは同じです。例えば文脈に応じて、「後で」「必要ありません」「今回は行わない」「スキップする」といった文言を使っていることもあります。拒否のアクションを起こしたいのであればこのようなボタンを押せば、キャンセルボタンと同様の役割を果たしてくれます。

画面上のボタンが増えるほど、画面から離れる方法の分かりやすさが重要になってきます。全ボタンに色がついているというのは、ページの移動がしづらくなっている状態です。しかし、その中に中間色のキャンセルボタンがあれば、直感的にボタンを認識できるのです。

 

灰色を使うならより暗い色に

 

ボタンに灰色を使うつもりなのでしたら、できるだけ暗い灰色にすることをおすすめします。色味の暗さが不十分だと見づらいですし、無効なボタンと思われてしまう可能性があります。

 

見やすいボタンにするために、Contrast Checker等のツールを利用し、WCAG 2.0のコントラスト比率を満たすか確認すべきでしょう。このようなツールを使用することで、色に関するアクセシビリティ・ガイドラインに沿った灰色を使っているかどうか確認することができます。

キャンセルボタンをニュートラルにする

 

ユーザーが確認画面を見ている時間は、ユーザーがいつでもアクションを起こせる時間ともいえます。ところが、ユーザーが入力ミスを訂正したり変更を加えたりしようとする際、キャンセルボタンは安定的に動作する必要があります。

 

カラフルなキャンセルボタンは誤った印象を与えてしまいます。ユーザーには、きちんと前の画面に戻るのではなく、別のアクションを行うボタンのように見えてしまうでしょう。キャンセルボタンをニュートラルにすることで、ユーザーは更に手軽に確認画面から移動できるようになるでしょう。

【コンビニでも使える!メルペイ初回利用1000円分招待コード】
当サイト限定招待コード:CMUTDF

 
利用可能店舗:メルカリ、コンビニ、ドラッグストア等

金額:※さらにメルペイスマート払で2000円分ポイント!
友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

 

【Uber初回利用2000円オフクーポン】
【Uber初回利用2000円オフクーポン】
130v4g

プロモーション コードを追加するで「130v4g」を入れてください。
※プロモコードは日本国内でのみ利用可能
 
»当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

Uber

Uber

 

【UberEats初回1000円オフクーポン】
【UberEats初回1000円オフクーポン】
ins6je2v

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き
 
»当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

Uber Eats のお料理配達

Uber Eats のお料理配達

おすすめ新着記事

おすすめタグ