ユーザーエクスペリエンス分析: 入力を簡素化すると、Web フォームがより使いやすくなります

ほとんどの人はフォームに記入することを好みません。なぜなら、ウェブサイトにアクセスする主な目的はフォームに記入することではなく、閲覧したり購入したりすることだからです。適切に設計されたフォームは入力をスムーズかつ快適にしますが、適切に設計されていないフォームは入力を困難にします。では、優れたフォームとはどのようなものでしょうか。ページのレイアウト、論理的な構成、視覚的なスタイルは、どれも注目に値する細部です。その中でも、最近よく言われているのが、入力の簡素化です。ここでは、私の仕事での経験を共有します...

1. 入力ボックスを高くする

入力ボックスの高さを増やし、フォントを太字にすると、Web ページ上の入力ボックスへの入力や読み取りが容易になります。コンピューターのモニターが大きくなるにつれて、このような入力ボックスもより印象的になります。

2. セレクターを追加します。

ユーザーに入力を求めるのではなく、選択肢を提供する方がよいでしょう。数回クリックするだけで、選択したコンテンツが入力ボックスに自動的に入力されます。これにより、入力障壁が軽減されるだけでなく、エラーも防止できます。日付、色、住所、履歴記録など、任意のデータをセレクターにすることができます。

たとえば、先ほどの「相手方の口座開設名」入力ボックスには、相手方の名前を入力する必要があります。相手方の名前に知らない漢字が含まれていたらどうしますか？そこで、図に示すように、珍しい文字のセレクターを追加できます。

文字ライブラリを開き、あいまいな発音に基づいて中国語の文字を選択し、入力ボックスに入力します。また、名前入力ボックスにはチェックサムが付いています。選択が完了したら、入力ボックスの内容を再度確認することを忘れないでください。

3. テキストをプリセットします。

入力を簡素化するためにプリセットテキストを使用する方法は、携帯電話でよく見られ、現在では Web ページでも一般的に使用されています。例えば、Weiboのコメント入力ボックスには前回送信しなかった内容が保持されるので、再編集することができます。

インターネット上では「入力ヒント」と「プリセットテキスト」が混同されていることもあります。もちろん、好きなように呼ぶことができますが、これらは対話するための 2 つの方法であることを理解してください。入力ヒントの目的は入力をガイドすることであり、入力ボックスにフォーカスするとテキストは消えます。一方、プリセットテキストは変更される正式なコンテンツであり、フォントスタイルは正式な入力スタイルと同じである必要があり、フォーカスしてもテキストは消えません。

フォーム入力でオプション フィールドと必須フィールドのどちらにするか決めるのが難しい場合は、事前設定テキストを検討すると良い妥協策になります。例えば、支払申込書では、利用者が主に記入する必要があるのは「相手方の口座番号」と「支払金額」であり、支払指示はオプション項目です。ただし、システムは取引認証情報の一つとして支払指示を収集する必要があります。この支払指示をどのように処理するのでしょうか。次の3つの方法を比較すると、チェックボックス方式は適していないことがわかります。ユーザーが記入しないとデータを収集できず、入力プロンプト方式ではユーザーが記入する必要があるため、あまり意味がありません。企業とユーザーの間の妥協策として、「転送」という単語を事前に設定しておくことをお勧めします。入力したくない場合は、単にスキップすることができます。

4. デバイスの読み取り。

カメラ読み取り、音声入力…最近、携帯電話ではさまざまなインテリジェント入力方法が大人気です。Webページも負けず劣らずこれらの機能を追加しています。顔認識もあります。すぐに普及するのでしょうか？

5. 入力プロパティを設定します。

現在、より信頼性の高いのは、Html5 によって提供されるいくつかのフォーム タイプ属性です。入力タイプを制限する以外にも、興味深い設定がいくつかあります。属性をドラッグ アンド ドロップすると、デスクトップから対応する入力ボックスに直接ドラッグできます。添付ファイルをメールボックスにドラッグすると、件名が空の場合は自動的に入力されます。 range 属性と number 属性は入力ボックスを直接置き換えることができるため、数値入力に非常に便利です。Chrome では以下のように表示されます。

6. 追加入力プログレッシブ拡張

高度なオプションや追加オプションを追加する必要がある場合は、即時追加および削除の方法を使用できます。記入する必要がない場合は、完全に無視してかまいません。記入する必要がある場合は、クリックするだけで表示されます。

7. 入力フィードバックを使用します。

情報が正しく入力されているかどうかを確認するだけでなく、入力フィードバックはユーザーの入力を簡素化するのにも役立ち、そのためのヒントが多数あります。

たとえば、携帯電話のリチャージフォームでは、送信を確認する前に番号を再度入力する必要があります。間違いなく間違いを犯すと想定して、入力をもう一度繰り返します。番号の場所に関するフィードバックを（履歴記録と組み合わせて）追加すると、このやや面倒な方法を回避できます。

次の例では、検証によって得られた推奨郵便番号を入力ボックスに入力し、コンピューターをよりスマートにします。推奨コンテンツにより、思考と入力のプロセスが削減されます。

フィードバックの表示方法についても注意が必要です。たとえば、数値入力ボックスに文字が入力されていますが、これは間違った形式です。最も単純なエラー プロンプトに満足できない場合は、入力文字を 1 秒間表示してから削除してみることもできます。これは、入力タイプを単純に制限するよりも理解しやすい方法です。さらに、表示形式は自動的に変更でき、数字を入力すると読みやすくするためにスペースが自動的に追加されます。これは、強調が必要な場合にユーザーに確認を促すためにも使用できますが、通常の入力ボックスではそれほど複雑にする必要はありません。

金額の小数点以下を自動的に補完します。たとえば、以下の例では、サービス料金は小数点です。金額の小数点以下を自動的に補完すると、懸念が軽減され、非常に興味深いものになります。

この時点で、一見普通のフォーム デザインに興味がありますか? 入力ボックスは最も基本的な人間とコンピューターのインタラクションであり、人によって理解が異なります。上記は単なる出発点です。お読みいただきありがとうございました。今後も共有と議論を楽しみにしています。

出典: http://uedc.163.com/8957.html

元のタイトル: ユーザー エクスペリエンス分析: 入力を簡素化すると Web フォームがより使いやすくなる

キーワード: ユーザー、エクスペリエンス スコア、簡素化、入力、Web ページ、フォーム、より使いやすい、ほとんどの人、気に入らない、Web マスター、Web サイト、Web サイトのプロモーション、収益化