Formの送信Buttonにdisableを付与することは正義なのか
Formに必ず存在する送信Button。
このButtonにdisable属性を付与することはユーザーにとって本当に適切なのか考えを述べていきます。
結論
送信Buttonにdisable属性を付与することは不適切だと考えています。
一見、disable属性を付与することはFormの入力を促す一つのUIとして捉えられていますが、ユーザーは何をすればButtoが押せる状態になるのか判断がつきにくいと思っています。
なぜdisable属性を付与したいのか
そもそも、なぜdisable属性を付与したいのでしょうか？理由は様々あると思いますが、個人的には受け入れらることのできないデータ形式で送信させないためだと思っています。
理由としては適切な気がします。
受け入れられないデータ形式で送信されても結果的にserver側のvalidationに引っかかってしまうだけなので。
では、果たしてユーザーはどのタイミングで入力したデータが、受け入れられることのできるデータ形式になったことを知るのでしょうか？
例えばこのようなFormをよく見かけます。（個人開発で作成してるFormです）
項目が2つしかないので、webに慣れたユーザーは下記のように簡単に分かるかもしれません。
- 赤いアスタリスクは必須項目である
- つまり
Input valueとRadio valueを入力または選択する必要がある
しかし、世の中のFormはこんなにシンプルではありません。このFormのように必須項目が2個と任意項目が1個といった組み合わせのFormも多数存在します。
このような組み合わせになると一気に難易度が増します。赤いアスタリスクが一般的には必須項目を記す傾向にあることを知らないユーザーなら尚更です。
とは言え、項目数は少ないですし上から順番に入力していくとは思うのでRadio value 01を入力したタイミングでButtonはactiveになるためそこまで困らないかもしれません。
しかし、入力の項目数が増えるとどうでしょうか？デザインの都合上必須項目と任意項目を揃えられないかもしれませんし、ユーザーは上から入力するとは限りません。
果たしてユーザーはどのタイミングで入力したデータが、受け入れられることのできるデータ形式になったことを知るのでしょうか？
冒頭での質問に対する自分の解はこちらです。
「1つ1つの項目のvalidation messageを頼りに、受け入れられることのできるデータ形式を構築するしかない」
どう解決するのか
結論でも書いていますが、Buttonにdisable属性を付与しないことだと思っています。つまり最初から押せる状態にしておく。ただし、受け入れられることのできるデータ形式で入力してもらう必要はあるのでもちろん項目ごとのvalidationの処理は必要です。
最初から押せる状態になっているFormがこちらです。
項目を埋めずにSubmit buttonを押すとこうなります。受け入れられることのできるデータを構築するために必要な項目がどれか分かった状態になるのです。
あとは、項目ごとのvalidationに従って入力データを整えていき、画面上のvalidation messageが消えたらユーザーは再度Submit buttonを押すでしょう。
ユーザーが簡単に自己解決するUIを目指す
- Buttonにdisable属性が付与されているForm
- Buttonにdisable属性が付与されていないForm
どちらが簡単にユーザーが自己解決できるFormなのかを考えることが大事だと思います。
前者は、自身でButtonが押せる状態になる条件を探さないといけないですが、後者はButtonを押すと足らない項目を教えてくれます。
これはFormに限らずとも同じことが言えると思います。
何かのactionを起こすためには、そのactionを起こしても良い状態にしてもらう必要があり、その状態をユーザーが簡単に実現できるようにしなければなりません。
例えば、Buttonにdisable属性が付与されていないFormでもvalidation messageが「入力値が適切ではありません」といった文言だと良いFormとは言えないと思います。
ユーザーは何が適切な入力値なのか探る必要があるためです。
「文字数は8文字以上入力してください」などと言ったように具体性を持たせ、受け入れられることのできるデータを構築するための手助けを行うべきだと思っています。
まとめ
今回はFormのButtonに焦点をあてた記事を書いてみました。
様々な理由（社内政治とか納期とかね・・・）で自分達が考える最高のUIを実現できない場合ももちろんありますが、その中でもBestなUIを提供しUXの向上を常に考えるエンジニアでありたいですね。
Discussion