<form>
- 電話番号はハイフン抜きの半角で…（はいはい）
- フリガナはカナで… (カナで名前を学習してしまうのが嫌だけど…)
- 郵便番号は前と後ろに分けて… (めんどくさいなぁ…)
- 住所は全角で… (あーはいはい…)
- … (できた！)
- (これで送信、と…)
※住所は全角で入力してください
- (え？ したよ？)
- (ああっ！番地が半角だった！)
- …
- (入力しなおして…、送信、と)
※パスワードが入力されていません
- (さっき入れてただろバカ！！！)
- (勝手に消すな！！)
- (もういいよ！)
- (閉じる)
半角にしたり全角にしたり
なんで人間が機械に使われなきゃいけないんだろう？
というわけで
ユーザーがストレスを感じないような
フォームを作るには、どうすればいいんだろう
ってことを考えてみたいと思います。
送信して数秒、待たされた後
「入力エラー」とか言われたら、
イラッときます。
送信して数秒、待たされた後
「入力エラー」とか言われたら、
イラッときます。
イラッときます。
- 入力位置が移動したタイミングとか
- ボタン押されたタイミングとか
- サーバーに送信する前に
- JSでチェックしてあげましょう。
- それなら0.1秒も待たされない。
- たったのコンマ何秒すごくだいじ。
- チェック用ライブラリも色々あるよね。
全角が都合がいいなら、それシステム側でやってください。
それ設計の都合。機械の仕事。
ユーザーにやらせないで。
全角が都合がいいなら、それシステム側でやってください。
それ設計の都合。機械の仕事。ユーザーにやらせないで。
たとえば電話番号。
- 全角でも半角でも、受け入れてあげて。
- 混在していても、受け入れてあげて。
- 「ハイフンあり」でも「ハイフンなし」でも受け入れてあげて。
- おまけに全角ハイフンや音引き「ー」までも受け入れてあげたい。
- 昨日パソコン買ったばかりのオカンでも悩まないフォームがいい。
オカンなら、こんな電話番号いれるかもしれない。
- 入力： 03 １２３４ー〇一二三
- ↓
- 確認： 03-1234-0123
あと ime-mode も検討する
場合によっては、
IE独自拡張のcssプロパティ ime-mode も検討してもいいかもしれない。
<input style="ime-mode:active"> IMEの初期値が日本語になる
<input style="ime-mode:inactive"> IMEの初期値が英数になる
<input style="ime-mode:disabled"> 英数しか入力できない
もしユーザーにとって便利になりそうなら検討。
ただしactiveとinactiveはIMEの状態を変えてしまうので、どんな場合でもおすすめできない。
ちなみにiPhoneならinputのtype属性でキーボード変えられるよね
<input type="text" /> 普通のキーボード
<input type="search" /> 検索用。「開く」が「検索」になる
<input type="url" /> URL用。「/」と「.com」を表示
<input type="email" /> メール用。「@」と「.」を表示
<input type="tel" /> 電話番号用。数字と「＋」「＃」「＊」
<input type="number" /> 数字用。数字と記号
<input type="password" /> パスワード用。英数のみ、地球アイコンなし
だけどメールアドレスを辞書登録してる人もいる。
キーボードやIMEの挙動を変えるのは慎重にね。
開発者の言葉を使わない
- たとえば「遷移」
- たとえば「押下」
- 個人的には「何々画面」という表現すら微妙
- それらは「開発側には慣れた言葉」
- 飛影はそんなこと言わないし
- オカンはそんな言葉知らない
二重送信や
送信後のリロードによる
再POSTを防止する
システム側で防止してあげてください。
- フロント側でクリック直後にボタンを効かなくするとか
- サーバー側でも二重送信に対応しておくとか
- あとリロードによる再postは、Ajaxやらリダイレクトなどで防いであげる
入力位置へフォーカスする
例えばGoogleを開くと入力欄にフォーカスされる。
いちいち入力欄をクリックしなくていいから便利。
入力位置へフォーカスする
だけど、どんなページでも有効なわけじゃない
それによってページがスクロールしてしまうようなら見直した方がいいし
「みんなが必ずここに文字を入力する」というページで検討する。
入力位置へフォーカスする
例えば、キーワード予測が導入される前のGoogle。
トップページでは入力欄にフォーカス。
結果ページでは入力欄にフォーカスしない。
ただし結果が0件だった時は、入力欄にフォーカスするといった感じでした。
自動的に移動しないで
自動的に次の項目にフォーカスが移るのは混乱する。
入力後にtabで次の項目へ移動することに慣れているユーザーも多い。
契約者番号(10ケタ) -
例えば、ちょっと前まで住友銀行のログインフォームがそうでした。
<input type="radio" name="foo" id="uma" /><label for="uma">うまい</label>
<input type="radio" name="foo" id="mazu" /><label for="mazu">まずい</label>
こういうやつ。
テキストをクリックすると、ボタンをクリックしたことになります。
iPhoneだと何故か効かないけど、ググればやり方がでてきます。
左に揃えると、ラベルと入力欄が離れすぎてしまう場合がある。
ふつうでいこう
- 文字の上のマウスカーソルは、いわゆる「Iビーム」だし
- IDとPWを入力してエンターおしたら送信されるもの
- これが普通のはずなのに
- ふつうじゃないページがたまにある
- Flashのフォームにわりと多い。今は亡きニコゲーのログインフォームとか。