ぼくはまちちゃん!(ブログ) @Hamachiya2 hamachiya.com tumblr[hmcy] ソーシャルゲーム速報 ドリームメーカー : ブラウザで簡単にノベルゲームが作成できるWebサイト ライフカウンター

『ふつうのformをつかいたい』

はまちや2
@Hamachiya2

自己紹介

こんにちはこんにちは!!

はまちや2 はまちや2 (@Hamachiya2)
ブロガー、クラッカー。特技は洗濯、趣味は破壊、苦手なことはプログラミング。
WEB+DB PRESS のお便りコーナー担当。

はまちちゃん」とかで適当にググってください。

本日のテーマ

無料で
プレミアム機能を
使う方法

見つける時間がありませんでした。

何話そう?

そんなわけで普通のことを話します。

本日のテーマ

本日のテーマ:
『ふつうのformを使いたい』

<form>

<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の挙動を変えるのは慎重にね。

「開発者の言葉」
を使わない

開発者の言葉を使わない

 

二重送信や
送信後のリロードによる
再POSTを防止する

「絶対に2度押さないで下さい!」

 

「絶対に2度押さないで下さい!」

とかアホか

システム側で
防止してあげてください

システム側で防止してあげてください。

 

入力欄を分けすぎない

入力欄を分けすぎない

 

郵便番号: -

メール: @

 

郵便番号の前と後ろを別の欄にしたり、

メールの @ の前と後ろを別の欄にしたりするのは設計側の都合。

自分のメアドを辞書登録してるひとだっているよ。

入力位置へ
フォーカスする

入力位置へフォーカスする

 

例えば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だと何故か効かないけど、ググればやり方がでてきます。

 

名前

住所

 

うっかり全消去するだけの存在。

 

名前
メールアドレス
名前
メールアドレス

 

左に揃えると、ラベルと入力欄が離れすぎてしまう場合がある。

ふつう

いこう

ふつうでいこう

 

ちゃんと
してください。

Prev Top Next