ヘルプテキスト付きの多くのチェックボックスのレイアウトの改善
ウェブサイトにアクセス権を設定するためのページがあります。フォームには多数のチェックボックスがあります。これらの各チェックボックスには、オプションの詳細な説明を提供するヘルプテキストホバーツールチップがあります。ただし、レイアウトは、特にすべてのツールヒントを使用すると、見栄えがよくありません。
このフォームのレイアウトを改善するにはどうすればよいですか？チェックボックスのすぐ横にヘルプテキストを表示することを考えましたが、それも魅力的ではありません。現在、レイアウトにBootstrap列を使用しています。
ダニエル、
Joaoのレイアウトの提案に同意します。これは、関連するオプションをより近くに配置するため（ " Gestalt Law of Proximity "と考えてください）、グループ化の認識が強くなります。垂直方向のレイアウトにより、特にラベルの長さがかなり異なる場合に、オプションのラベルをスキャンしやすくなります。
ツールチップについては、職場でのUX Debtアイテムで同様の問題に遭遇しました。結局のところ、ほとんどのツールチップテキストはチェックボックスのラベルテキストを繰り返すだけなので、あまり情報を追加していません。
したがって、ツールチップに入力したものが実際に必要であることおよびが正確であることを確認してください。また、テキストを簡潔にし、長い文章を避けます。ワイヤーフレームでこの例を使用するには、「管理者は表示できるようになる」の代わりに、「管理者が表示できるようにする」のが望ましいので、少し簡単に取り込むことができます。
ここで率直に言って申し訳ありませんが、ここで行われた他の2つの提案に関して、私は以下を指摘したいと思います。
トグルスイッチは通常、それぞれの設定に加えた変更がすぐに適用され、送信ボタンをクリックする必要がないことを示します。対照的に、チェックボックスでは、変更を確認するための追加の手順が必要です。言い換えると、ダイアログボックスでこれらのオプションを提供する場合、ユーザーが[キャンセル]ボタンと[保存]ボタンのペアを使用して閉じる必要があるということは、トグルスイッチを使用すると混乱を招き、チェックボックスは適切なウィジェットです。
また、状況に応じたヘルプを提供しているかどうかを確認するためだけに、「私」（つまり、ユーザー）を画面上の項目の上に移動させないでください。ツールチップがある場合は、オプションの横にツールチップアイコンを表示すると、それが利用できることがすぐにわかります。そうでなければ、「私」はそれを発見することすらできず、したがって、有用な情報を見逃す可能性があります。
ちなみに、ヘルプアイコンには、使用しているものとは逆の、わずかに異なるバリエーションがあります。つまり、ワイヤーフレームが表示する中実の円盤ではなく、疑問符が内側にある円です。サークル1は視覚的にあまり目立たないことがわかります。
最後に、オプションのsomeのツールチップのみを表示する場合は、すでに述べたように、オプションのすぐ下に表示することを検討してください。すべてのツールチップが必要な場合は、すべての追加情報を表示するか、すべてのツールチップを実行するA/Bテストレイアウトを検討して、ユーザーがより役立つと思うものを確認することができます。
黒いバルーンアイコンの付いた疑問符は、孤立した状況に適していますが、フルテキストに各オプションのツールチップアイコンがある場合、冗長な視覚的ノイズであることに加えて、まったく不要です。
ヘルプ情報は、余分なアイコンなしでテキストをホバーしたときに簡単に表示できます。 この例を参照
これが私の提案です：
チェックボックスの代わりに、ユーザーが機能を「アクティブ化/非アクティブ化」しているのでトグルを使用し、ヘルプアイコンについては、ユーザーがオプションにカーソルを合わせているときにそれを表示します。
すべてのオプションが垂直方向に配置されているという事実は、トグルを左に配置し、テキストを上から下に読みやすくするのに役立ちます。
