こんにちわ、@se_inoです。
前回の記事に頂いたはてブコメントやtwitterで「フォームをエンターキーでサブミットするのが良いか悪いかは判断が難しい」というのを
チラチラと見かけたので、今回はそれについて自分の考えを書きたいと思います。

結論から述べますよ

勿体つけず結論から言いますと、そんなものは場合によるということです。

どういうことなのか

まずそもそも、フォームとは一口にいうものの、色々と種類があるということは、皆様ご存知のとおりだと思います。
ざっと思いつくだけでも、以下のようなフォームがありますね。

• ログインするためのフォーム
• 申し込みや問い合わせのフォーム
• 投稿をするためのフォーム
• 情報を登録・修正するためのフォーム
• 検索フォーム

つまり、これらを一緒くたに「フォーム」と呼んで、それに対して是か非かを問うのは
そもそも、フォームの項目や目的がそれぞれ全然異なっているので、同じ目線で扱おうとするほうがおかしいと思うわけです。

さらにそもそも、エンターキーを押してサブミットされるのが嫌なのは”なぜ”か

考察するにあたって、ここが大事だと思うのですが、そもそも”なぜ”エンターキーでサブミットされるのは嫌なのか？
それは今行っている操作を不本意に阻害される可能性があるからという言葉で表せると思います。

つまり、裏を返せばそうならない時にはエンターキーでサブミットされていいし、
そうなってしまう可能性がある場合には、エンターキーでサブミットされるのは嫌ということです。
逆に、そうなってしまう場合でもすぐに続行して操作できるUIにしておけば、エンターキーでサブミットされてもいいといえると思っています。

もっと具体的な例示

実際のフォームを想定して考えてみます。

ログインフォームの場合

例えばログインフォームです。
よく見かけるものとしては、下図のようにログインIDとパスワードを要求するものであると思います。

さらに、よくやりがちな操作として、IDを入れた時にエンターキーを押してしまい
パスワードの必須エラーが発生してしまうということがあると思います。

でもこれ、そこまでイライラしないはずだと思っています。
なぜならすぐに操作再開が可能だからです。

ただし、以下のケースについては蹴っ飛ばしたいと思うぐらいイラッとします。

フォーカスがテキストボックスじゃないところに飛んでいってる

理由は言わずもがな、すぐにログイン操作を再開出来ないからです。
というか、キーボード操作をしていたのに、フォーカスを戻すのにマウスかタップかの別の操作が要るかもしれません。イライラします。
特にリンク要素とかに飛んでいってると最低です。
間違ってもう一回エンターキーを押したら別の画面に飛んでいってしまうということですね。やる気なくします。

別のエラー画面に飛んで行く

「ログイン処理でエラーが発生しました。やり直してください。」みたいなやつですね。
戻らなきゃいけないうえに、入力した内容が消えてたりすると最低です。やる気が取り戻せません。

古いサービス等にたまーにありますが、ログイン処理をちゃんと分けて作らず、OKかNGかで表示する内容を切り替えちゃってるためにこういうおかしい画面遷移をしていると予想されます。実装者の都合で利用者につらい思いをさせるのは良くないですね。
自分で書いておいて胃が痛いかんじですが。

登録フォームの場合

これも基本的に項目数の多寡はありますが、ログインフォームと一緒だと思います。
ログインフォームと異なるのは、項目数が多いため、縦に長いという場合があること。
縦に長ーいフォームで意図せず途中でサブミットしてしまったとして、警告が出て、画面の一番上まで戻ってしまったりするとツライですね。
想像するだけで、やる気が尻から抜けていきそうです。

ただ、「何処にフォーカスがある状態でサブミットされたか／エラー表示後そこに戻すか」は結構面倒くさい実装になると思うので
それを考えると縦に長さのあるフォームはエンターキーでサブミットさせないのが無難なのではないかと思います。

合わせて、登録フォームの場合、「必須の項目は埋めたけど、まだ任意で埋めたい項目が残っている」時に
エンターキーでサブミットしてしまうと確認画面に行ったり、モノによってはそのまま登録されてしまったり。
これも相当つらいなぁと感じてます。

よって、登録フォームはエンターキーサブミットされないのがいいんじゃないかなと思います。

ただし、メールアドレスしか登録しないようなごくシンプルなフォームについては、エンターキーサブミットができてもいいと思います。

修正フォームの場合

プロフィールの修正フォームとか、これもよくある系のフォームですね。
登録フォームと分けた理由としては、誤ったタイミングでエンターキーで確定してしまっても
そのまま入力画面にとどまっていることが出来る、という点が登録フォームと違います。

実例としてはtwitterのプロフィール編集画面とかはこの形になっています。

ただ、縦に長いフォームで上に戻っていってしまうのはやっぱりツライので
修正フォームはスクロールの問題が発生しなければ、エンターキーサブミットができてOKだと思います。

投稿フォームの場合

これは、投稿フォームと言うもの自体に更に種類があるため一概に言うことはできないと思います。
要件的に挙動が不自然でないかどうか、によってくると思いますし、ものによってはユーザーが挙動を変更可能でもいいと思います。
わかりやすい例でいうと、チャットなど。
これはWebフォームにも限らずだとは思いますが、改行操作と誤ってサブミットっていうのは誰しも経験があるのではないでしょうか。
使いやすいのかどうか、よくチェックしたいですね。

検索フォームの場合

これは今までのものとは違って、エンターキーでサブミットされて欲しい要素だと思います。
Google検索するとき、検索フォームにキーワード入れたらそのまま ッターン！ ってエンターキー押しませんか？

また、やや余談ですが、検索フォームで検索した後、結果がなかった時、再度検索できるフォームのテキストボックスとかにフォーカスがあたっていて欲しいですね。
「見つかりませんでした」みたいな何もないページに飛ばされて帰らされるのはしょんぼりします。

まとめ

総括すると、こう思っています。

フォーム	エンターキーサブミットの是非への思い
ログインフォーム	操作が中断されないのであれば是。
登録フォーム	エンターキーサブミットができてもあまり良いことがないと思うので非。ただし極端に入力項目の少ない登録フォームならできても良い。
修正フォーム	挙動依存。完了画面に行ったりスクロールが荒ぶったりというまどろっこしいことがなければ是であって良い。
投稿フォーム	要件依存。これはよく考えるしかない。
検索フォーム	是。エンターキーでーサブミットされるのが当然という認識。

エンターキー１つでずいぶん長々くどくど語らせてもらいましたが、UXって言っとけばなんかカッコいい感じになるので便利な言葉だなぁと思います。

それではまた。