こんにちは、デザイナーの西山 将平(@24sy___)です。
無効状態のボタンは、多くの場合「グレーアウト」で表示されますが、いくつかデザインのパターンがあるので、実際に洗い出してみました。
本記事では、無効状態のボタンデザインのベストプラクティスをシェアしたいと思います。もしあなたが無効状態のボタンデザインに悩んでいるなら、きっと参考になると思います。
今後もリサーチを重ねて、無効状態のボタンのベストプラクティスについて追記していこうと思います。
僕自身も、様々なブランドのデザインシステムを拝見しましたが、「不透明度を下げる表現」は、ボタン自体の見やすさにも影響があるので、正しく配置されていても低コントラストになり、認識できない人もいると思います。
そのため、ほとんどの人がアクセスできないと判断できるグレーアウトのボタンを、多くのアプリ内で使用されているので、それに合わせる方がUX的にも良いと考えました。
無効状態のボタン(Disabled Button)は、非アクティブ状態の「まだ押せない、アクセスできないボタン」のことを指します。
無効状態のボタンは、多くの場合「グレーアウト」で表示されますが、いくつかデザインのパターンがあるので、実際に洗い出してみました。
現在、公開されている各ブランドのデザインガイドラインをリサーチして、無効状態のボタンを比較を行いました。
僕が調べた限りでは、無効状態のボタンは通常のボタンよりもトーンを下げて、グレーアウト表示を採用していることが多いことが分かりました。
例外として、Shopifyのようにトーンを上げる表現もありますが、UX的にどちらの表現が良いのか検証していきたいと思います。
多くのユーザーが、グレーのボタンを「押せる、アクセスできるボタン」ではなく、「まだ押せない、アクセスできないボタン」だということを認識しているので、「不透明度を下げる表現」よりも、無効状態のボタンには「グレーアウト」が深く浸透しているデザインなのではないかと思います。
また、アプリやWebサイトによっては、ボタンの数が多くなるにつれて、優先度を数パターン定義したボタンを使用することになると思います。
その場合は「不透明度を下げる表現」は、ボタンがあること自体を認識しずらくなる懸念も考えられます。
僕個人としては、優先度を定義したボタン全ての無効状態は、グレーアウトに統一するのが良いのではないかと思いました。
ただ、これはあくまで僕個人の意見なので、もう少しリサーチを重ねることにしました。
無効状態のボタンについての色々な記事を見ていき、興味深い記事を見つけました。
この海外の記事(UX movement)で投稿されている内容は、「不透明度を下げる表現」の方がベターだということを主張されていて、以下が記事の要点になります。
・グレーのボタンは前景要素がより目立つので、ユーザーはグレーの無効なボタンをクリックする可能性が高くなる
・グレーは優先度の低いボタン(キャンセルボタンなど)でよく使用されているので、二次的なアクションと間違えやすい
・無効状態のボタンを透明にすることで、ユーザーを混乱させることなく非アクティブ状態を示せる
ただし、記事のコメント欄では、多くのデザイナーたちが「グレーアウト」の表現の方がベターだという意見が見られました。
・ユーザーは、グレーのボタンを普遍的な無効化されたボタンと見なすことがよくある
・視力の弱い人の中には、ボタンが半透明にするとボタンが見えにくくなっている
・ユーザーテストでは、不透明度の低いボタンに混乱していることがわかっている
グレーのボタンは前景要素がより目立つので、ユーザーは灰色の無効なボタンをクリックする可能性が高くなる
グレーボタンが目立つことでクリック率が上がるのであれば、背景のカラーによって改善できるのかなと思います。
グレーは優先度の低いボタン(キャンセルボタンなど)でよく使用されているので、二次的なアクションと間違えやすい
ユーザーに二次的なアクションを促す際に、「戻る」「キャンセル」などの文言が記載されるので、間違えやすいことはないと考えられます。
ビジュアルデザイン的にも、キャンセルボタンは、グレーの枠線でデザインされたボタンを使用すれば、グレーの塗りのボタンが「無効状態のボタン」であることが分かるのではないかと考えました。
無効状態のボタンを透明にすることで、ユーザーを混乱させることなく非アクティブ状態を示せる
無効状態のボタンを透明にすることで、必ずしも「ユーザーを混乱させることなく非アクティブ状態を示せる」とは言い切れないはずです。
無効状態のボタンデザインは「色」はもちろんのこと、「その他の要素」でも非アクティブであることが分かるようにデザインすることで、ユーザーが混乱することを減らせると思います。
1997年兵庫県生まれ。関西学院大学理工学部に在学中、デジタルハリウッド本科UI/UXD専攻に入学。1年間のWスクールを経て、2020年にAID-DCC inc. 入社。Web制作から体験型コンテンツまで様々なプロジェクトに関わる。現在は、PLAID inc. にてデザイナーとして活動中。ユーザー起点のデザインが得意。
デジタル領域のサービスのプロダクトデザインを中心としたデザイン業務を、随時お受けしています。お仕事のご依頼・クリエイティブに関するご相談など、お気軽にお問い合わせ下さい。
通常3日以内にご返信いたします。