By maiko

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

Pocket

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

こんにちわ!@se_inoです。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:続きを書きました。よろしければ。

よろしければこの記事のシェアをお願いします!

Pocket


38 Comments on this post

  1. やってられるか!!蹴りたいフォームの12要素 – WP-E(仮)Web Professional Education

    akanuma2 /
  2. かきました。

    se_ino /
  3. あるあるー。あと電話番号入力時に11文字制限されててハイフン付きでコピペすると最後までペーストされない系の奴つらい

    nazoking /
  4. これあるわww

    lunaluna_dev /
  5. 勉強になりやす。

    yosi0422jp /
  6. 昔、電話番号入力を2・4・4ケタで三分割して。入力後、自動でカーソルが移動するように言われて作ったことがある・・・やっぱ、そういうの使いにくいよね。

    show-tima /
  7. 確認画面から戻った時にパスワードが消えてるのは仕方のない仕様だったりするからそこは我慢してやってほしい‥ほかは同意

    gragragracia /
  8. 日本の金持ち非IT企業のフォームによくあるよね

    mobius118_7 /
  9. 名前を「カナ」で入れさせる、が一番嫌い。IMEが変に学習しちゃうので。

    tmurakam /
  10. わかるーわかるよー。個人的にはメアド郵便番号が分割されてるのが死ぬほどめんどくさい。

    gla69 /
  11. Web開発に入っている場合は仕方ないと思ってしまうことがある

    m_shige1979 /
  12. 内容は日付入力に賛否両論を感じる以外はおおむね同意/selectをコンボボックスっていうの、わりと通用してるけどなんなんだろ。リスト選択とテキスト入力のコンボ、が由来のはずなんだが。

    altar /
  13. 細かいけどCSRFですね。XSSとかCSRFとかは直接どうこうっていうより、作りが甘いから情報預けるのに不安てことかな。

    oropon /
  14. めっちゃ共感した。いい加減こういうのの仕様とか統一してくれないかね。

    ksy3015 /
  15. tec

    affec /
  16. […] 23category: テクノロジーやってられるか!!蹴りたいフォームの12要素 – WP-E(仮)Web Professional…UXとか難しいことはよくわかんないですが […]

    2014/3/2のホットエントリー | 話題のニュースまとめ / 返信
  17. メールアドレスを2回入力させて2回めをコピペ出来なくさせてるのも腹が立つ。

    zorio /
  18. ここ以外ではカナ入力を求められるのとメールアドレスのところで半角固定になるのが嫌い / リストボックスとコンボボックスを混同する人は私の職場(昔)にもいて、半ば社内共通語と化してたのが地味にストレスだった

    KamPinTang /
  19. ボタンはSubmitが1つあればいいんだよなー。リセットとかそもそも押さねえし、やり直すなら出直してこいと。ボタン並んだらラベル読まなきゃならん。

    Dy66 /
  20. この記事とは関係無いかもしれないが個人情報扱うのに通信がSSLじゃないところもな… パスワードを平文で送るなよと…

    hisax23 /
  21. Enterで送信とか戻るボタンでパスワード消えるとかはメリット・デメリット判定が難しいんだよね。

    kijtra /
  22. あるある。 http://t.co/Me6IXEUAne

    aryuaryu /
  23. 某IT系転職エージェントのサイトで、ピリオドが入っているメールアドレスだと登録エラーになる登録フォームがあり、相当イラついたことがある。

    kuroaka1871 /
  24. その次のステップになるのですが、登録確認メールの本文に設定したパスワードが晒されて返ってくるのは血の気が引きます。

    JD30671011 /
  25. イライラあるある集。

    anoncom /
  26. 意識低い系制作者なのでディレクタ様の言いなりでフォームつくってるけど、いつも「こんなに大量の項目誰も入れたくないし入れないだろ・・・」って思ってる

    woodnotexx /
  27. 良いまとめ。リストボックスは項目が多いと後ろの方を選択するのがけっこう面倒。生年月日入力で誕生日が月末近い人とか。年なんかは高齢者ほど入力大変だと思う。

    aike /
  28. あるある( ´ ▽ ` )ノ

    kazuyadesse /
  29. これはイラつくわw

    amberjack115 /
  30. あるわー

    k_wizard /
  31. 分かるーwww

    qaz76 /
  32. 概ね同意。12はまあアレです。パスワード登録だけ別にしておくのがいいんじゃないかと。

    wkbyshnbtk /
  33. […] 書くきっかけになった記事は下記。 やってられるか!!蹴りたいフォームの12要素 […]

  34. […] (1)要件的に適…[ このサイトへ ] [ ニコニコ風に見る ][ ブックマーク ] はてブ:165 / Livedoor:0 / […]

    やってられるか!!蹴りたいフォームの12要素 – WP-E(仮)Web Professional Education | アフィリエイトブログ / 返信
  35. やってられるか!!蹴りたいフォームの12要素 @WPE34さんから

    daikidanno /
  36. […] URLhttp://wp-e.org/2014/03/02/354/ […]

    気になった記事・ブックマークまとめ 3/2~3/8 2014 / 返信
  37. 7は手拍子クリックを防ぐために有用では。少なくとも、やってられるか!ってレベルではない。何度も入力する業務系フォームならアレだけど。

    Lhankor_Mhy /

コメントを残す

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

*