web-dev-qa-db-ja.com

非常に長いフォームラベルを処理する最良の方法は何ですか?

モーダルウィンドウのフォームを含む、いくつかのフォームに非常に長いラベルがあります。 80文字を超えるラベルがある場合があります。

  • ユーザーはフィールドを識別するためにすべてのラベルを読み取り/追跡する必要があり、ほとんどの場合、フィールドを識別するための最も重要なWordはラベルの最後にあります。
  • 同じフォームに非常に短いラベルのフィールドがあるため、フォームをデザイン/配置するのは困難です。
  • ページの垂直スクロールを増やします。
  • 美的には良くない。

以下に「悪い」状況が表示され、すべてのラベルがそのまま表示されます。

Simple approach, not using any kind of grouping or abbreviation

これを修正しようとする調査は次のとおりです。

  • フォーム内の指定された「セクション」のサブタイトルとしてラベル内の一般的な用語をグループ化し、フィールドの一番上に、あるフィールドを別のフィールドと本当に区別する用語を表示します。

  • ツールチップを使用して、フィールドの説明に疑問がある可能性のある完全なラベルをユーザーに表示する。

More sophisticated approach trying to group similar fields, using subtitles and tootltips to define the complete label to help users that might have some doubt

2番目のアプローチは優れたUXですか?改善または修正できることはありますか?より正しい別の解決策はありますか?

16
Marcos Rocha

ここでは手助けは必要ありません。最初のアプローチで問題を理解して特定し、研究でそれを明確に対処しました。

専用の情報アイコンも、フィールドラベル全体に焦点を当てたツールチップも、正しいか間違っていますか。これは個々のユーザーの好みであり、ユーザーテストで繰り返すことができますが、どちらも正しくありません。

問題を特定し、最初のリワークでそれを解決する素晴らしい仕事。

14
nkcedwards

2番目のアプローチは、最初のアプローチよりも多くの意味があります。製品が一般市場向けである場合、ユーザーが初めてそれを利用することになるので、ツールトップが有益になる可能性があります。ただし、IMOの場合、既存の製品の場合、ユーザーはそれを使用しなくてもコンテンツを理解できるため、ツールヒントは不要です。私達はその製品についてあまり知らないので、これは私が言える範囲です。

4
lamahewa

はい、2番目のアプローチは優れたUXのようです。詳細(ユーザーは誰か?テキストを読むことがどれほど重要か?フォームを完成させる動機はどれくらいか?)などがわからないと、確実に知ることはできませんが、問題を解決するには良い方法のようです。あなたが育てた。

それでもユーザーがテキストを読む可能性を高めたい場合は、ユーザーがアイコンをクリックするのを待たずに、フィールドにフォーカスがあるときは常にツールチップを表示することができます。これは初心者には非常に有益ですが、頻繁に使用するユーザーにとってはかなり煩わしいものになる可能性があります。

2

私は2番目のアプローチに実際の問題はなく、それが確かに1つの解決策を提供すると信じていますが、個人的には代わりにプレースホルダーを使用する別のアプローチをとるでしょう。以下の私のモックアップを参照してください:

Single column mockup

これにより、フォームに必要なスペースの量が減り、箇条書きリストと同じように読み取ることができるように、ユーザーにはさまざまなフィールドラベルが通常の「段落」形式で引き続き表示されます。フォームを完成させるには、ユーザーはフィールドをクリックするだけで、プレースホルダーテキストを入力した応答で置き換えます。

垂直方向のスペースが問題になる場合は、以下のモックアップのように、代わりに2列で同じことを行ってください。

Dual column mockup

なんらかの理由でプレースホルダを使用できない場合は、ラベルとフィールドの箇条書きのリストを使用することもできますが、これでは明らかに画面の領域が多く使用されます。

1
Monomeeth

あなたのソリューションははるかに洗練されており、あなたが特定した特定の問題に実際に対処します。

この段階では、私はあなたの製品が何であるか、または何をしているのかについての幅広いコンテキストを知りません(そして、あなたはそれを説明しないための確かな商業的理由があるかもしれません)。

フォームを使いやすくするためのツールチップの使用について言及しました。これらのツールチップが言うことは、聴衆があなたの製品やサービスにどれだけ精通しているかに応じて、非常に重要であると判明する可能性があります。

たとえば、対象読者が初心者の場合は、元のフォームラベルの全文を表示するのではなく、ツールチップをもう少し情報量の多いものにすることをお勧めします。ユーザーが入力できる情報の例や、フォームフィールドの意味の簡単な説明を含めることができます。

0
Paj