web-dev-qa-db-ja.com

上または左揃えのフィールドラベルは、フォームの完成時にパフォーマンスが向上しますか?

私はこれら2つのフォームを設計しましたが、どちらが変換、つまりフォームの入力でより効果的であるか知りたいのですが。

ここに私が最初に感じるのは、個別の四角形のコンテナが目の動きを壊し、次の要素に目を合わせると左から右に読み取られるため、より効果的な理由です。これは、ユーザーがフォームを1ステップずつ入力するのに役立ちます。

enter image description here

これが作成された別のフォームです。フォームフィールドは異なりますが、これはAndroidで使用されるものです。 enter image description here

どちらが優れているでしょうか?ユーザーの種類:20代から30代の中間レベルの収入で、常に農家と連絡を取り合っており、会社から提供される通勤用の乗り物を持ち、主に電話をかけたりテキストメッセージを送信したりするために電話を使用しています。スマートフォンの価格帯は100ドルから150ドルです。 Samsung、OPPO、Motorolaを作成します。

私のコンセンサスは、ユーザーが最初の画像のテキストを読んで、灰色のテキストを見て、塗りつぶす必要があることを認識し、それを埋めることです。これは、モバイルユーザーがフォームを読む方法のトップダウンアプローチに反します。しかし、それはユーザーが入力している1つのフィールドに集中するのに本当に役立ち、材料設計フォームフィールドのトレードオフの価値があると思います。

3
AmpleUX

左揃えよりも上揃えを推奨する記事がたくさんあります。

上部に配置されたラベルとインフィールドラベルが最も速くて簡単なスキャンではないことは明らかですが、より良いアプローチは何ですか?より良いアプローチは、内野の上部に配置されたラベルです。

http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/

次の記事は、アイトラッキングパターンを示し、TOP ALIGNEDラベルがよりスキャン可能であるという同じ結論に達しています。

ラベルの位置-ほとんどの場合、ユーザーがラベルと入力フィールドを別々に見る必要がないため、入力フィールドの上にラベルを配置すると効果的です。

http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

フィールド上部のラベル

利点

  • 小さな画面では、フォーカスがフィールド内にある場合でも、ラベルが表示されます(ズームにもかかわらず)。
  • ユーザーはラベルとフィールドを一目で確認できる場合があります。
  • ラベルの長さはフィールドの長さより長くすることができます。
  • フォームを他の言語に翻訳するときに、さまざまなラベルの長さを使用できます。
  • フォームは、フィールドの横にラベルを付けるよりも狭いです。目が戻るための一貫した左端があるので、折り返す長いラベルは読みやすくなります。
  • ラベルは対応するフィールドに非常に近接しているため、どちらが適切かを簡単に確認できます。
  • 対応するフィールドが入力されている間でもラベルは表示されるため、ユーザーはラベルが何であったかを覚える必要がなく、中断に対処できます。
  • ユーザーはいつでも自分の回答をラベルと比較できます。
  • 実装も簡単です。
  • HTMLでは、プレースホルダー属性をラベルのプロキシとして使用する必要がないため、アクセシビリティの維持に役立ちます。
  • ユーザーが情報を入力する必要がある場所を簡単に確認できます。
  • フィールドの種類(テキストボックス、ラジオボタン、チェックボックス、ドロップダウンなど)に関係なく機能します。
  • タッチインターフェイスで動作します。

短所

  • フォームは、フィールドの横にラベルが付いているフォームと比較して2倍の長さです。
  • ラベルはフィールドで区切られているため、スキャンが困難です。

https://www.sitepoint.com/definitive-guide-form-label-positioning/

6
Mayo