web-dev-qa-db-ja.com

フォームのレイアウト。垂直ラベルと水平ラベル。内部の画像

http://www.lukew.com/ff/entry.asp?1502 および http://www.uxmatters.com/mt/archives/2006/07/labelを読んだ後-placement-in-forms.php入力フィールドの上にラベルを配置することをお勧めしますが、入力フィールドの左側にラベルを配置する場合は、少なくとも右揃えにします。

ユーザーが顧客レコードを作成するためのフォームを設計する必要があります。つまり、多くのフィールドとユーザーが1日に何度もこの操作を1日数回実行する必要があります。

最初に、フォームを画面の中央に配置する水平ラベルを使用します enter image description here

次に、画面の最大水平サイズを使用することにしたので、これを使いました enter image description here

そして記事を読んだ後、私はこれをテストしました enter image description here

結局のところ、1が最高で3が最低だと思いますが、どう思いますか?多くのコントロールがあり、毎日数時間ユーザーワーカーが使用するフォームのレイアウトについてアドバイスをいただけませんか。

7
fjrr

フォームを意味のあるセクションに分割する必要があります。長いフォームはユーザーを非常に疲れさせ、間違った情報を入力した後、フォーム全体に再度入力しなければならないという問題を引き起こします。

ストーリー性のある段階的なフォームを提供し、先に何があるかを手掛かりにして、おそらくユーザーが過去に編集したものに簡単にアクセスできるようにすると、フォームへの入力がドラッグではなく、より目的志向になります。フォームを小さくすると、同じ情報を入力している場合でも、ユーザーはより多くのことを達成しているように感じます。ただし、フォームを分割しすぎないでください。フォームの入力にかかる時間が長くなります。

この本を以前に参照したことがあるのは知っていますが、それは本当に素晴らしい読み物であり、誰もがそれを読むべきです。もうすぐまた読んでみたいと思います。 すべてのデザイナーが人々について知る必要がある100の事柄

1ページのフォームを使用するように設定されている場合、これは最も近いオプションです。

enter image description here

編集:

他の2つのオプション(特に3つ)は雑然としており、ガイドラインに従ってプロセスを進めているように見えますが、フォームがグリッドとして表示されています。おそらく、すべてがページの下の1行にあるオプションを試してみてください。

2
NotSimon

これらすべてのフィールドを同じページに配置する必要がある場合は、フィールドセットコントロールを使用してグループを作成します。たとえば、最初のスクリーンショットを検討すると、独自のフィールドセットに配置できる4〜5個の明確に区別可能な領域があり、さらにいくつか追加する必要があります。それらの間の空白。

各セクションのタイトルも提供できる場合は、フォームの使いやすさに大きく貢献しています。

もう1つ、アクションボタンの下にフォームフィールドを配置しないでください。「el cliente es promotor」はボタンの前にある必要があります。それが以前のどの領域にも関連していない場合は、そのためのセクションを作成できますが、しないでください。 t後に残します。

セクションを作成するには、フィールドセットのborderプロパティを使用できますが、視覚的な領域を作成するのに十分な明るい色を使用することもできます。

場所に関連するセクションでは、2列目を少し右に移動し、間にスペースを残してください。

読みやすくするもう1つのことは、すべての長さの入力フィールドとドロップダウンを同じ長さにして、レイアウトに均一性または一貫性を与えることです。

1
PatomaS

ユーザーがフォームに一般的に慣れている場合(およびフォームに10回入力した後)、フィールドの上に配置することは一般的にお勧めできません。

Right alignentは、それ自体が理にかなっています。

大きな問題は、これらのフォームがほとんど読み書きされているかどうかです。

たくさん書かれているとすれば、本当に重要な重要な要素はキーボード操作です:クリックするよりも、一日に大量のデータをTAB /下向きに移動する方がはるかに便利です。

それはウェブフォームには当てはまりませんが、ここではそうです:人々はキーボードの取り扱いなどのことを学ぶことをいとわないのです。

ラベルが収まらない場合、ユーザーはほとんどの2就業日で略語に慣れているので、レイアウトを壊す代わりに、ラベルを短くしてツールチップを提供できますが、目の動きは毎回壊れます。

一般に、情報の各部分に対して単一の垂直位置合わせ線を維持することが重要です。つまり、ユーザーは、左または右を見ずに、必要なフィールドのフォームを垂直にスキャンできる必要があります。

もちろん、すべてが1行に収まるわけではありませんが、一般的には、何らかの特別な情報があり、他の情報と同じ方法(完全な住所など)で検索されない可能性がある場合は、独自の列を持つことができます。

一般的に、情報をラベルとフィールドの両方の列に並べ、それぞれの幅、ガター(ギャップ)、およびベースライン(垂直距離、行の高さ)を一定に保つ必要があります。すべてのフィールドは同じ幅、すべてのラベルでなければなりません。フィールドと同じ幅である必要があり、ラベルとフィールド間の距離(右揃えの場合)は一定でなければなりません。これらはビジュアルデザインでは「グリッド」と呼ばれます。

これらの列とベースラインを一種の単位として使用します。2つのフォームセクションを分離する場合は、列全体または行全体を省略できます。必要に応じて、列幅を2倍にしたり、ベースライン高さフィールドを2倍にしたりできますが、常にこれらの単位を考慮してください。それらの境界に合わせます。

非常に厳密なフィールド行の順序を維持する必要はありません(ユーザーはとにかくすべての行をスキャンするため)。ただし、フィールドを見つけたらスキャンを停止するため、最も頻繁にフィールドを検索することをお勧めします。探していましたが、いくつかの情報を別の列に入力するための絶対的で自明な論理的な理由が必要です。「スペースがありませんでした」とは言えません。

しかし、最も重要なのは:ユーザーに尋ねる。彼らにあなたのデザインのアイデアを見せ、彼らがそれを使おうとするのを見て、それらをさらに評価するために記録します(画面と顔の両方)、そして予算内であれば(ウェブカメラをツールにハッキングするのに約200ドルかそれと同等の費用がかかります)、アイトラッキングを使用してください彼らが何を見ているかを知っている。

1
Aadaam

私も同じようにして、列に分割します。背景色または境界線を使用して、列が明確にマークされていることを確認します。これにより、目が途中で次の列に流れ込むのを防ぎます。

本当にPDFと呼ばれる Webフォーム:空白を埋める もあります==

1
Adam C

投稿へのコメントで指摘されているように、ユーザーエクスペリエンススタックエクスチェンジ(http://ux.stackexchange.com)は、このためのより良い場所です。

しかし、ここにいくつかのスニペットを与えるために...

ラベルを右揃えにする目的(例では行いません)は、ラベルと入力フィールドの間の水平方向の空白を減らすことです。これにより、スキャン時間が短縮され、ユーザーが関連する入力フィールドに適切なラベルをより適切に識別できるようになります。

右揃えも、入力フィールドの上にラベルを配置することと同様に、すべての入力フィールドの左側を同じ水平位置に揃えます。ユーザーはページをまっすぐにスキャンでき、すべての入力フィールドの左端の行が各行の同じ位置にあります。これにより、ページの視覚的なスキャンパターンが向上します。

また、フィールドは一般的に同じサイズでなければなりません。ある行から次の行に移動しても、他の行よりも長い/短い入力フィールドは生成されません。

もう1つのポイントは、入力フィールドを垂直プレーンと水平プレーンの両方に配置することです。ユーザーは、上下と左から右の両方をスキャンする必要があります。これは理想的ではありません。単一の視覚スキャンフィールドが推奨されます。

もちろん、ルールには常に例外があります。あなたは他の人に反対するUXの人々を見つけるでしょう。 UX担当者として、質問に投稿した記事に概ね同意します。

1