『ふつうのformをつかいたい』
「はまちちゃん」とかで適当にググってください。
なんで人間が機械に使われなきゃいけないんだろう？
ユーザーがストレスを感じないような
フォームを作るには、どうすればいいんだろう
ってことを考えてみたいと思います。
送信して数秒、待たされた後
「入力エラー」とか言われたら、
イラッときます。
送信して数秒、待たされた後
「入力エラー」とか言われたら、
イラッときます。
イラッときます。
全角が都合がいいなら、それシステム側でやってください。
それ設計の都合。機械の仕事。
ユーザーにやらせないで。
全角が都合がいいなら、それシステム側でやってください。
それ設計の都合。機械の仕事。ユーザーにやらせないで。
たとえば電話番号。
オカンなら、こんな電話番号いれるかもしれない。
あと 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の挙動を変えるのは慎重にね。
開発者の言葉を使わない
とかアホか
システム側で防止してあげてください。
入力欄を分けすぎない
郵便番号： -
メール： @
郵便番号の前と後ろを別の欄にしたり、
メールの @ の前と後ろを別の欄にしたりするのは設計側の都合。
自分のメアドを辞書登録してるひとだっているよ。
入力位置へフォーカスする
例えば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だと何故か効かないけど、ググればやり方がでてきます。
うっかり全消去するだけの存在。
| 名前 | |
|---|---|
| メールアドレス |
| 名前 | |
|---|---|
| メールアドレス |
左に揃えると、ラベルと入力欄が離れすぎてしまう場合がある。
ふつうでいこう