そこそこユーザビリティの高いフォームを作った

1/18/2014そこそこユーザビリティの高いフォームを作った去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで”そこそこ”と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプトは書いてません） CSSフレームワークとして bootstrap3 を利用しています。 主な機能 入力必須箇所の強調、および入力検証 requ

[s-tomo]

これだとまだそこそこなので、ここから皆さんの意見を全て反映させてユーザービリティをボロボロにします。

[koyancya]

最初から赤いのは嫌。「分かってるよ！これから入れんだよ！」って思う。

[amnesia4646]

みんなテストしてあげてて優しい

[twotiger]

IEじゃ全く動かない模様

[karasu9113]

アドレスを辞書機能からの入力にしてあるので、逆に不便になった。あと支払い方法のラジオボタンの複数回変更が不可能。ってテスタか俺は！

[localdisk]

お申込みフォームの実装例。名前のところはSocialAPIじゃなくてキーボードイベントを拾ってくれたほうが嬉しい

[Sampo]

赤・緑・黄色はいちばんメジャーな赤緑色覚障害の人に判別できないのでそこもう一工夫。

[Rinta]

「背景色は人間の主観的な意味付けによるものなので、機械的に解釈できない」これも主観だけど入れないといけない場所は太枠でしょ。紙の申込書とか見るといい。間違った所は枠線の色を赤に変える。終わったら消す。

[C_L]

入力窓の色を変えるのもいいけど横に入力必須やvalidの記号つけるのもしばらく併用したほうがいいよ。

[gazi4]

実はパソコンの日付が狂っててせっかくのカレンダー指定が……というのはありそう（この例がどうなってるのかは分からない）。本当はトッパンみたいな所が大規模に入力フォームの研究をやって共有すべきかなとか。

[msukasuka]

参考

[Sire]

参考になる！

[norip44]

いいとこ取りをしたい感じのフォーム。「メールアドレスを大きくするといい」とかは、なるほどなーって。

[masakazu1998]

“漢字氏名が入力されたらかなに変換して、自動的によみがな欄に挿入します（Social IME かな漢字変換APIを利用） 難読漢字だと変な値が入りそうなので、やるかどうか迷うところですが、大体のケースで大丈夫そうだったの

[nilab]

そこそこユーザビリティの高いフォームを作った - Liner Note

[ropross]

大手サービスでも、このあたりのユーザビリティをちっとも考えてないところ多いよね

[field_combat]

コメント参考に

[otchy210]

みんな優しい。習作のブログ公開っていいやね。

[adsty]

入力の補助や検証等の機能が十分に盛り込まれたフォームを公開。

[ku-suke]

inputタグのフォーカスが外れないと判定がされないので、戻るボタン時のrefresh的なのいるのでは。あとユーザが既に入力していれば住所補完やよみがな補完は上書きすべきでないorサジェスト程度にするべきかな。

[magpepen]

集合知的な

[k_gobo]

色んな意見がまとまってて便利なブコメ。

[dekasasaki]

ほうほう。

[kawa_hide]

フォーム例

[lero003]

これはよいす

[nacika_inscatolare]

ブコメ駆動開発

[As_hsp]

ブコメ駆動開発

[nikokapu]

「ユーザビリティの高い○○作った」って公開すれば無料でテストしてくれて便利ってことがわかった。

[sometk]

ブコメはユーザーの本音が聞けてるってかんじ？

[gleam]

社内回覧。郵便番号のところの実装が軽快でいけてる。ブコメも参照のこと。フォームの離脱率を下げるのは大切なお仕事です。

[saharamakoto]

はてブのコメントも深い。

[ryonext]

よさそう

[tmatsuu]

いいね。Androidでクレジットカードのカード番号と有効期限が入れられない（途中で消える）点がハマるので要修正

[inulab]

はてブコメントまでがコンテンツ

[bookrock]

分かりやすい。

[vivit_jc]

良い

[Qwerty401]

変換の早い方を採用しているから、私はよみがなと漢字表記を出すために入力するかなが全く違う。人名だけ特殊よみになる人、難しい漢字の人とかもいるから変なお節介はちょっと…イラッとした

[potato777]

chromeだと type=numberにすると、スピナー表示される。

[kakei]

赤色と文字の大きさと自動入力がネック。そのまま真似はできないけど、ここ参考に見直すのはいいかもしれぬ。

[charismanbou]

メアド大きくはすごくいい。でもよみがな自動は止めたほうがいいかも。確実じゃない自動変換はストレスになる。