馬鹿野郎!!やってられるか!

やってられるか!!蹴りたいフォームの12要素

UXとか難しいことはよくわかんないですが

こんにちわ!@ampersand_xyzです。UXとかUIデザインとか、かしこさが低いので小難しいことはわからないですが、個人的にかつ主観バリバリで「イヤだな」って思うことはわかる!
飛行機やホテルの予約などで、ちょいちょいお問い合わせフォームや予約フォームを使うのだけど、その時に思わずイラッとしちゃうようなフォームの要素を思い出してまとめてみました。

(1)要件的に適切でなさそうな必須項目が多い

名前や返信先などの情報が必須になるのはそれはもちろん構わないけれども、
所属部署名、とか、業種、とかそういうのが必須の場合。

もちろん、問い合わせる先やその内容によって、
例えば、保険等に関する問い合わせだと業種によって契約の内容が違ってきたりするので必須になるのは頷けるけれども、これが食べ物の通販の問い合わせフォームとかで必須だったら「?」って感じる。
必須の理由に妥当性がなさそうな要素を入力するのは面倒だし、場合によっては不安に思う。

(2)全角半角・カタカナひらがなによってエラーになる

全半角、かなカナはプログラム側で変換可能なので、入力された内容をサブミットを受け取る側の都合の合う形に変えればいいのでは
入力された内容が条件に合致しないかつ、合致する形に変えられない場合にはじめて入力エラーにすれば十分じゃないかな・・・。
ただし、これは問い合わせ系フォームに限りで、登録系フォームでは入力内容をプログラム側で勝手に変えるのは好ましくないとは思う。

(3)年月日の入力要素がバラバラのテキストボックス

スマホでもPCでも面倒くさい
入力される予想と近い年月日がデフォルトではいっていて、入力値はリストボックスで選べるのが自分的には使いやすい。
カレンダーが出るやつは、スマホだと動作がモッサリしてる場合があるのと、誤タップ多くてちょっとつらい。

(4)フォーカスが勝手に移動

年月日がテキストボックスになってるやつでたまにある。打ち損じを直したいだけでフォーカス迷子になる。
フォーカスが勝手に移動するのは、おそらく業務などで何度も何度も繰り返し同じような数字や内容を入力するような場合のものであれば、利便性を高められる機能であると思うのだけど、単発でしか使わないフォームでこれをされても余計なお世話って動きにしか感じない。

(5)勝手にスクロールする

あまり多くは見ないけど、要素が縦にいきなり展開して伸びたり、画面遷移の代わりにスクロールするやつ。
現在位置迷子になる場合や、直前の要素を直しに行きたい場合に戸惑う。

(6)リセットボタンが存在している

罠だろ・・・。間違って押してイラッとした経験しかない。リセットボタンて誰得要素なの?

(7)進む動作、戻る動作のボタンが入力画面と確認画面で逆

言葉だとうまく伝わらないので図解、こういう配置になっているやつ。

入力画面でのボタン例
入力画面でのボタン例

確認画面でのボタン例
確認画面でのボタン例

確認画面で突っかかるというか、ボタンを押すときに気をつけなくてはいけない。
そもそも入力内容の修正と送信するという操作について、プライオリティが一緒じゃないと思うので、同じレベルの要素っぽく配置されているのが気持ち悪い。
あと、この画像みたいにボタンが同じ位置に配置されているような場合、
うっかりクリック連打してしまった時に確認画面と入力画面を行ったり来たりしなくてはいけないのが地味ながら攻撃力が高い。

(8)エンターキーでサブミット

ログインフォームや、検索フォームのような項目がものすごく少ない場合ならありがたいけど、
3つ以上の項目のあるフォームでエンターキーでサブミットされると大体入力漏れで怒られる、というか途中で意図しないサブミットになる。つらい。

(9)入力エラーが要素の近くに出ない

意外とよく見るやつ。
入力エラーが出た場合に警告内容がフォームの上の方にゴソッと固まって表示されるタイプの入力フォーム。
警告を含め、画面全体がスクロールせず1画面内で収まるならいいのだけど、レジュメとか沢山の項目を入れなきゃいけないフォームでこれをされると何が間違ってたのか確認するのに心が折れる。
警告内容は項目の横とか下とかに出してほしい。

(10)入力エラーが出た場所の色が変わったりしない

上の項目と一緒で、何処でエラーになってるのかパッと見で判別したいので、警告アイコンや背景色を変えて、どこが間違っているのか教えてほしい。
これがないと項目数の多さに比例してつらさが増す。

(11)入力エラーとして表示される内容が具体的でない

「入力した内容にエラーがあります」・・・って言われても。どこが!?何が!?
入力している側としては、そこを教えてもらえないと直すに直せない。

実体験として、住所の項目に半角数字が入ってたのがエラーだったというのがあったのだけども、
「エラーです」としか表示されなかったため、何が間違ってるの分からず相当苦戦した。
急いで問い合わせしなきゃいけない場面だったのでかなり辛い思いをした。

(12)入力エラーが出た後とか、確認画面から戻った際にパスワードの要素が消えてる

そんで再度必須エラーとか出ると、ものすごくイラッとする

自分がされて嫌なことは他の人にしちゃいけないってばっちゃが言ってた

最適解やユーザー心理に則したもの、とかの答えはわからないけども、
使ってて不便だな、イヤだな、と感じるものは作らないようにしようと思うわけです。
どういう時にイヤだとおもうか、それを防ぐためにどう改善すればいいのか、気をつけたいですね。

おまけ 論外実装編

使い勝手とかとはまた別に、イタズラしようと思って出来ちゃうやつ。怖い。
これらに該当するフォームには取り敢えず重要情報とか入れたくないかんじ。

  • CSRFできちゃう
  • XSSできちゃう
  • ブラウザバックで連投できちゃう
  • GET要素に書き換えたらなんかできそうなパラメータがついてる

追記1:CSRFをTYPOしてたので修正しました。
追記2:コンボボックスをリストボックスと誤用していた部分を修正しました。
追記3:続きを書きました。よろしければ。

5 thoughts on “やってられるか!!蹴りたいフォームの12要素

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です