デザイン

デザイン

キャンセルボタンに色を使わない理由とは?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
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

590 views

読了時間 : 約2分8秒

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

 

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

 

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

 

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

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

 

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

 

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

 

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

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

 

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

 

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

 

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

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

 

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

 

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

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

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

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

無料

 

ピックアップ! さらに今このキャンペーン中です↓

dポイント最大10%『4・5・6月の金・土曜限定!』
■キャンペーン期間:2020/4/1日(水)0:00 ~ 6/30(火)23:59

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
eats-130v4g

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ