web-dev-qa-db-ja.com

ラベルとテキストボックスの配置。ケースを読む

注:私はこの漠然と似た質問とその回答を読みました: 右揃えのフィールドラベルの方が良いのはなぜですか?

ケース:私は長い(1つのフォームで約10-15のフィールド)B2Bフォームここで、予想される入力データサイズ/に従って入力を取得するために、テキストボックスのサイズが異なると決定しました/長さ。 Iフォームは、財務担当者や販売担当者によって埋められることが想定されています。あらゆる種類の急いで/急いで;どんな間違いもする。

質問:次の6があります(添付の画像を参照)可能なオプションラベルをtext_boxesに揃える方法。どれを選べばいいですか?どうして?

enter image description here

Luke Wroblewski(別名LukeW)が異なるラベルの位置に関する記事を書きました。 UXデザインの多くのことと同様に、それは長所と短所に関する質問です。 http://www.lukew.com/ff/entry.asp?1502

Label above fieldenter image description hereenter image description here

次に、Mateo Penzoがアイトラッキングを行い、ラベル配置に関するルークの記事をテストしました。 http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

フィールドの上に左揃えのラベルの場合:

入力フィールドの真上にラベルを配置することで、ユーザーは1つの目の動きで両方の要素をキャプチャできました。

左揃えのラベルの場合:

一部のラベルと入力フィールドの間の距離が長すぎると、ユーザーがフォームを視覚的に操作するために不必要に多くの時間を費やす必要がありました。

右揃えのラベルの場合:

ラベルの正しい配置により、固定の総数がほぼ半分に減少しました。このレイアウトは、ユーザーがタスクを完了するために必要な認知的負荷を大幅に削減したことを示しています。

だからあなたのオプションに基づいて5は最高のようです。ソリューションをグローバルに使用するために翻訳する必要がある場合は、特定の言語に翻訳するとラベルの長さが長くなることが多いため、フィールドの上にラベルを配置することを検討してください。

36
SteveD

上記のSteveD(すばらしい投稿BTW)のようなグラフィック表現を使用した実際の科学的証拠はありませんが、通常、垂直に表示されたラベルと水平に右揃えされたラベル(および左揃えフィールド)の間を移動します。

私の経験則では、ラベルが同じようなサイズの場合、右揃えのラベル/左揃えのフィールドアプローチを採用する傾向があります。この方法では、読みやすさが損なわれることはなく、ユーザーが入力したいフォームをスムーズに流れるようになります。ラベルが複数のサイズである場合は、垂直ラベルアプローチを使用するのが最善です。このルールにはいくつかの例外があり、主にフォームのビューポートサイズとコンテンツに基づいています。

インスタンス#1-モバイルデバイスでページを表示している場合、元のデザインに関係なく、通常は垂直ラベル。スペースは左右に大きな問題であるため、縦のラベルは小さい画面でうまく流れる傾向があります。

インスタンス#2-ラベルの長さが異なる場合、これらの長いラベルまたは短いラベルは異なるセクションに分割できます-私はまだ右揃えのラベル/左揃えのフィールドアプローチを使用しています。たとえば、連絡先情報(姓、名、住所、電話番号、電子メールアドレスなど)のフィールドがたくさんあります。次に、1つまたは2つのフィールドで詳細情報(例:特別な配送方法、母の乙女の名前など)を入力します。これらのフィールドは、水平線で区切られた最初のセクションの下に追加できます。このようにして、フィールドは同じ基本フォーマットを使用して同じページ上にありますが、余分なスペースと水平方向のルールにより、これらを少し簡単に組み合わせることができます。

これらすべてを念頭に置いて、あなたの質問に直接答えるには、上記のSteveDに同意し、オプション5が最善の策だと言います。

2
Jon Gallup

使い方の問題です。

過去にデータを入力したことがある人として、繰り返し入力するための最も重要な要素は次のとおりです。

  1. 適切な順序-論理関係に一致するようにフィールドを順序付ける必要があります。または、物理媒体から転送される場合、フィールドはその媒体の読み取り順序に一致する必要があります。データストレージの順序に基づいてそれらを整理すると、人間が、脳が情報をマップしようとする方法と、マシンが優先する順序との間の不一致に常に調整するように強制します。エラーの。

  2. スキャン可能なラベル-注文内のあなたの場所の追跡に役立つので便利です。したがって、簡単にスキャンできるEdgeのリストにラベルを付けると役立ちます。

  3. 左揃えの入力フィールド-カーソルの配置に役立ちます。一貫した視覚的な位置があると、カーソルの追跡が容易になり、マウスで位置を変更する必要がある場合に役立ちます。右揃えのフィールドは、画面の長さを下っていくと一貫していますが、ラベルから視覚的に離れているため、アイテムをスキャンするのに少し時間が必要になります。

上記のすべては、繰り返しのデータ入力に固有です。ユーザーが一度入力するカジュアルなフォームの場合、インラインラベルの方が、ユーザーにプロセスを段階的に案内するのに適しています。ただし、反復的なデータを入力するユーザーはフォームを学習するため、長期的には、データの方向付けと空間関係を容易にするものがより重要になります。

0
tealdev