開発者のためのフォームデザインパート1

これまでサインアッププロセス中にドロップしたり、Webフォームを充填中にイライラ感じ?チャンスは、フォームの充填中に悪いユーザーの専門知識のためです.
フォームは、インターネット上で、ここではより良いユーザーエクスペリエンスのためのフォームのデザインのヒントです.

HTML入力タイプの活用
HTML入力フィールドは、データの種類を指定するさまざまな種類のコレクションを提供します.クライアント側のブラウザに簡単なエラー処理を委任しながら、より良いユーザーエクスペリエンスを提供することができます.
入力タイプ:
1＞type =“email”は入力のタイプがメールアドレスでなければならないことを指定します.

<input type="email" id="email" name="email">

長所

ユーザーが無効なIDを入力すると、最新のブラウザが適切なエラーメッセージを表示します.

携帯電話で

、ほとんどのキーボードは、ユーザーの経験を向上させる順番に簡単にアクセスするための"@"シンボルを示しています.

短所
その制限のために、それは有効な電子メールIDとして[email protected]を受け入れます.
2＞type =“number”は入力の型が数値でなければならないことを指定します.

<input type="number" id="plotNumber" name="plotnumber">

これは、誤ったアルファベットの入力を防止するだけの数入力を許可しながら、ユーザーがミスを防ぐことができます.
携帯電話では、ユーザー番号を迅速に入力する能力を与える数字キーパッドを開きます.
3＞type =“tel”は入力の種類が電話番号であることを指定します.

<input type="tel" id="phoneNumber" name="phonenumber">

デスクトップ上で、それは通常の入力に似ていますが、携帯電話では、それは彼らに自由数字を入力するために自由を与えながら、ユーザーが能力を迅速に入力する能力を与える特殊文字やアルファベットを入力する能力を持っている数値キーパッドを開きます.

オートフィルを使用します.
ブラウザに保存されているフォームをオートフィルする機能をユーザーに与えます.ユーザーはすぐにオート、名前、電子メールなどのような共通のフィールドを埋めることによってフォームを埋めることができると、より重要な入力タスクに焦点を当てる.
Googleは正しくオートフィルを使用して、ユーザーが30 %速くフォームを記入したことがわかりました.詳しくはこちらをご覧ください.

<input type="tel" name="phone" id="phoneNumber" placeholder="+91-45345345435" autocomplete="tel">

Google Developers
ドロップダウンは最後の手段であるべきです.
ドロップダウンフォームのスイスアーミーナイフのように、彼らは入力を標準化、予測可能性を提供し、柔軟ですが、ユーザビリティの研究は、ドロップダウンを使用してフォームを充填しながらユーザーの努力を増加させることを示しています.
詳しくはこちらをご覧ください.
TLDR

は使用するのが難しくて、形

を完了するためにより長い時間をとります
ユーザーは頻繁に彼らの選択を修正しました

は利用可能なオプション

を隠します

ユーザーは、時々それを

彼らは特にユーザを遅くする.

解決策
バイナリ入力では、トグルスイッチを使用します.
方法:
別の方法は、7つ未満のオプションがあるラジオボタンでリストボックスを使用することです.
詳しくはこちらをご覧ください.
Blog
4 .検索にドロップダウンを使用します.
ユーザーが自分の国を選択する必要がある場合、ドロップダウンは、おそらくそれはコンパクトだが、最高のオプションですが、まだ、ユーザーは150 +国のリストを検索する必要があります.
良いユーザーエクスペリエンスを提供する方法は、ユーザーが手動で検索クエリを入力し、動的に使用可能なオプションのリストをフィルタリングできるようにすることです.
HTMLは、入力タグと組み合わせると、強力なドロップダウン+検索機能を提供する

<form action="/action_page.php" method="get">
  <label for="browser">Choose your country from the list:</label>
  <input list="browsers" name="browser" id="browser">
  <datalist id="browsers">
    <option value="Japan">
    <option value="India">
    <option value="Singapore">
    <option value="Thailand">
    <option value="United States">
  </datalist>
  <input type="submit">
</form>

続きを読む:w3schools
NN group
訂正の防止
フォームを埋めるプロセスを経るより、イライラすることは何もありません.そして、「交通明り」のように見えるcaptchaイメージタイトルをクリックするだけで、入力のうちの1つが誤って満たされたという提出をクリックすることを見つけます.
それを経験したいですか?
ドリブルしなさい.com(デザイナーが仕事を共有する場所)とサインアップしようとします.

サインアッププロセスのイライラする部分は、ユーザがsignupプロセス中に「ユーザ名」が利用可能かどうかを知る方法がないということです.ユーザー名が利用できないならば、我々はそれを提出した後にそれをエラーとして示します、それで、我々は再び新しい「ユーザー名」を推測するプロセスを通り抜けなければなりません.
ユーザが搭乗を改善するために何をしたかは、ユーザが自分のメールでサインアップするのを許すことであり、ユーザがオンボードされると、ユーザはユーザ名を見つけるプロセスを通過させることができます.
ここでhashnodeは似たような方法を実行しますが、他の方法はとてもスムーズです.
w3school
「errは人間です」というのは、ユーザーがフォームをいっぱいにする退屈なプロセスを経た後に、それらを修正するのではなく、途中でエラーを防ぐ方法を理解することが重要です.
あなたがここまでそれを作ったならば、読んでくれてありがとう!
これはフォームデザインのガイドラインの第1部です.