web-dev-qa-db-ja.com

対応するフィールド(短い入力が必要)よりも長いフォームラベルを表示する最良の方法は何ですか?

短い入力フィールドのラベル付けに問題があります。一部のラベルは、標準の幅がおよそ280pxですが、予想される入力(文字)の手掛かりを提供するために非常に小さいラベルもあります。

垂直方向に配置されたトップオブフィールドラベルを使用しています。

ユーザーはさまざまな入力フィールドに非常に精通していますが、ユーザーが電話で話しているときや急いでいるときなどにフォームに入力するため、フォームは人為的エラーが発生しやすいので、正確なラベルとツールチップのみを表示したいいくつかの追加情報をクリアしますが、ラベルのテキストを完成させません。

私が直面している問題:

  1. 類似したラベルがたくさんあるので、ラベルのテキストを切り取ることができません(USDで費やされた金額はEURで受け取った金額とは異なります...)
  2. ラベルが非常に長くなるため、ラベルの右側のフィールドの配置を変更するかどうかはわかりません。そして、トップオブフィールドのラベル付けが最善のアプローチになると私は信じています。
  3. ラベルの2行のテキストは、一部のフィールドには適していますが、短いフィールド(たとえば、3文字の入力フィールド)には適していません。
  4. ツールチップが必要な場合がいくつかあり、ラベルが短い場合でも、ツールチップによってラベルの長さが長くなります。

Here is the example of the form

and the possible solutions, with the respective problems I see

アドバイスをしてくれてありがとう!

可能な解決策の編集:私はいくつかの提案を検討しましたが、読み取り可能な配置、明確なラベル、現実的なフィールド長を提供するための最良の解決策にはまだ確信がありません視覚的な手がかり。 First round of attempts

6
redux

上記のラベルを保管してください。ラベルとそのフィールドが一定の開始位置にあると、ユーザーはフォームをスキャンする時間が簡単になります。右に配置することは、フィールド全体が飛び越えてしまうか、ほとんどのラベルで多くの列スペースが無駄になることを意味します。

例が実際の長さを表すものである場合は、ラベルで言いすぎているかどうかを検討してください。ラベルで説明していることに気づく2つのオプションは、説明テキストまたはインラインヘルプポップアップです。スキャンには短いラベルを使用し、明確にするために追加のテキストを使用します。

Inputs with and without descriptive text

7
plainclothes

提供されたオプションから、私はおそらくオプションBを選択します。ただし、ここでも、入力フィールドの幅は、ユーザーの入力の予想される長さ(たとえば、住所と郵便番号の違い)を反映する必要があります。

私はあなたの場合、ラベルを最小値、この場合は「正味金額」に短縮する必要があると思います。$のプレースホルダーがあるため、USDでの値を期待していることは明らかです。

TL; DR:ラベルを短くできない場合は、入力フィールドの幅を調整します。

1
matejlatin

これらはあなたの提案に基づいて、私が取り組んだ解決策です

最良のエクスペリエンスを導き出すためのオプションがまだわからないので、次のような解決策が役立ちます。

  1. 予想される入力(フォーマット、平均文字数)を直感するユーザー。
  2. ラベルを理解するためのユーザー(説明不要)(難しい質問に提供されるツールチップ)
  3. できるだけ読みやすいフォーム(アイトラッキングを支援)
  4. 美しく一貫したフォルム。

上記のニーズに応じて、最適なオプションを参照してください。ありがとう!

Options to show and place form labels, that work for short input fields

0
redux