web-dev-qa-db-ja.com

フィールドにフォーカスしたツールチップとクリック可能な情報アイコン

私は公開Webサイトを構築しており、フォームに入力するときにユーザーをガイドするために役立つ情報を表示する必要があります。フォームには、テキスト入力、ドロップダウンリスト、スライダーを含めることができます...サイトはモバイル対応になります。

ツールチップを表示する2つの方法を考えました。

  • ツールチップは、ユーザーがフィールドにフォーカスすると表示されます
    長所： UIが乱雑にならない
    短所：ユーザーがフィールドをクリックしないと、見逃してページを離れてしまう可能性があります。
    フィールドがフォーカスされている場合、情報は常に表示されますが、ユーザーはそれを必要としない場合があります。

  • ツールチップは、ユーザーが「？」をクリックすると表示されます。アイコン
    長所：必要な場合にのみ表示される情報。
    ユーザーは簡単にヘルプを見つけることができます
    短所： UIが煩雑
    通常、「？」アイコンはクリックできません

ここでのベストプラクティスは何でしょうか？

formstooltips
3
ThunderDev

それはあなたが助けが必要であると期待する頻度に依存します。

  • クリック可能な?アイコンは、通常は説明がなくても答えがはっきりしている場合に適していますが、場合によってはヘルプが必要になることがあります。簡単にアクセスできますが、それを必要としない大多数のユーザーの邪魔にはなりません。

    多くのサイトがこのパラダイムを使用しているのを見てきましたが、それは一般的に非常に明確です。重要なのは、スタイリングを使用して?はクリック可能です。多くの場合、小さく丸いボタンのように見えます。

  • フォームに入力するために常に必要な説明がある場合は、フィールドが強調表示されているときに説明を表示するか、ページに常に表示されている必要があります。

    私が見た例の1つは、特定の強度要件を満たす必要があるパスワードです（特殊文字を含む必要があり、長さが12文字以上であるなど）。ユーザーがカスタムルールを知ることは期待できないため、表示する必要があります。ルールはページに静的に表示されるか、Javascriptを使用してパスワードを動的に検証し、不足しているものを示します。

状況に最も適したものを選択してください。

3
user31143

なぜ情報を非表示にしたいのですか（フォーカス/クリック時）。スペースに制限がない場合は、コンテキストに依存しないラベル付けと例を使用します。

  • ユーザーをインテリジェントな人として扱います。
  • 注文しているように話さないでください：「メールアドレスを入力してください」の代わりに「メールアドレス」
  • 予想されるデータの例を挙げてください
  • 書式やその他の特殊なケースを通知する

この設計の利点は、ユーザーが必要な情報に精通していない場合でも、この例は期待される内容に関する追加の詳細を提供することです。 クレジットカードのフォームに、セキュリティ/ CVV番号の場所が表示されていることを覚えておいてください。

ユーザーは情報が存在することを知っているので、常に情報を表示することは良いことです。フォーカスツールチップを使用している場合、ユーザーが到着したときにすべてのフィールドにツールチップが表示されるかどうかはわかりません。最初のフィールドだけに例/説明があるページ長フォームを見ると、気が遠くなるかもしれません。

?を使用するとスペースを節約できますが、ユーザーはヘルプが必要になるたびにアイコンをクリックする必要があります。頻繁に発生すると脱気することができます（ '私は愚かです: '）常に目に見える簡単なアクセスの助けを持っているほうがいいです。

mockup

---（download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

1
rk.