Disableボタンの使い方考察
今回、プロダクト改善する中で、ボタンをDisableにするのか、Activeにしてfeedbackを表示させるのか、悩む機会があったので、参考記事を活用しながら考えをまとめていきたいと思います。
Disableボタンの役割
Disableボタンは、ユーザーに対して現在の条件下で利用できないことを伝える役割を担っています。これによって、ユーザーの意図しない操作を未然に防ぐことができます。例えば、ECサイト上で在庫がない商品を購入させないために商品のボタンDisableにする、ネットバンキングで二重送金を防ぐために送金ボタンを一度押下後にローディング中Disableにする、といった使い方があります。
このようにDisableには、それ自体がガイダンスとなったり、予期せぬエラーを防止する役割を担っています。しかし、これを扱う上で気をつけるべき点があります。
注意点
Disable状態にはフィードバックがないため、ユーザーに混乱を与えるケースがあります。例えば、フォームデザインをする際に、入力が完了したとユーザーが思っても、なぜか送信ボタンがDisableのままだと、ストレスを感じる可能性があります。このような場合、常時、ボタンをActive状態にして、入力項目に不備がある箇所に対してエラーテキストを表示する流れが分かりやすいと思います。つまり、実行不可の理由が分からない場合にDisableを使うと、ユーザーにストレスを与えるので注意が必要です。
まとめ
色々書きましたが、Disableボタンの使用は、実行不可の理由が明確な時に効果的だと思います。それが不明な場合は、エラー表示などのフィードバックを活用してユーザーに情報を提供する。そして、最も重要なのは、そもそもユーザーがミスを犯さないような直感的なデザインを心がけることです。そのために、ボタン自体だけでなく、画面の前後関係や文脈を整理し、ユーザーがスムーズな体験を得られるようにすることが大切と思いました。
参考記事
この記事が気に入ったらサポートをしてみませんか？