Konifar's ZATSU

私はのび太の味方じゃないわ、悪の敵よ

フォームバリデーションと送信ボタンの状態の最適解

タイトルを見て「あーあれね」と思った人もいると思うが、アプリデザインの世界ではすでに議論され尽くされているであろうこの話題について雑に考えをまとめておきたい。とは言っても明確な答えがあるわけではないので意見がほしいというのが正直なところなので、もしフィードバックがあれば @konifarまで直接教えてもらえると嬉しい。

何を言いたいのかというと、『フォームに入力されていない or 入力された文字が異常である場合に送信ボタンを押せる状態にするか押せない状態にするか』という話だ。たとえば次のように氏名を両方入力しなければいけないケース。

f:id:konifar:20180129112140p:plain

f:id:konifar:20180129112258p:plain

初期状態の送信ボタンがdisabledで、入力に応じて状態が切り替わる。

f:id:konifar:20180129112621g:plain

本当に送信できる時だけ送信ボタンがenabledになるというのはわかりやすそうだが、問題もある。入力項目が多くなってきた時に、ユーザーがなぜ送信ボタンを押せないのかわからないかもしれないということだ。

これに対するやりかたとして、最初から送信ボタンはenabledにしておいて、押した時に教えてあげるという方法もある。たとえば次のような感じ。

f:id:konifar:20180129113014g:plain

こちらの場合、送信ボタンをタップできずにオロオロするということは防げる。

先に結論をいうと、バリデーションつきのフォームが複数ある場合、リアルタイムでもエラーを表示しつつ送信ボタンはenabledにしておくのがよいのではないかというのが自分の考えである。今までの自分の経験でいうと「それはさすがにわかるやろ?!」という画面の操作をユーザーはわかってくれない。これはユーザーが悪いわけではなく、作る側は自分の常識を全て捨てて考えて作る必要があるということだ。

たとえフォームと送信ボタンが画面にひとつずつだけだったとしても、送信ボタンはenabledにしておいた方がいいと思う。もちろん「押せる状態だったから押したのにエラー出るんかい!」というユーザーの期待値と異なるフィードバックを返すことにもなるかもしれないが、すべてのユーザーを考えて最適解をひとつに決めるとすれば、送信ボタンはつねに押せる状態にした方がいいと思う。

あとは、押した時にどこが間違っているかをどう教えるかという問題である。ダイアログを表示するのか、問題の箇所までスクロールするのか、といった細やかなサポートを考える必要があるが、それは画面によって違うのだろう。

ちなみにアプリの話でいえば、一画面にそんなにたくさんのフォームとバリデーションを置くのはそもそもよくないという話がある。そこまで行くと議論が広がってしまうので、今回はフォームバリデーションと送信ボタンの状態についてだけに話をとどめておく。私からは以上です。