web-dev-qa-db-ja.com

ラジオボタンの詳細情報/ヘルプアイコンボタンの配置

システム全体を通して、特定の入力フィールドでより多くの情報/ヘルプがいつどのように使用されるかを標準化します。

一般に、標準はアイコン/ボタンが次のようにフィールドに従うようにすることです: enter image description here

enter image description here

ラジオボタンコントローラーの場合、情報/ヘルプアイコンはどこに配置する必要がありますか?

追伸情報/ヘルプアイコンは、全体として設定されたラジオボタンを参照します。

可能なオプションは次のとおりです。情報/ヘルプアイコン付きのラジオボタンコントローラーを設計するためのベストプラクティスに従って、最適な設計は何ですか?

enter image description here

8
L. Lemmer

コンセプト(ラベル)のレベルと利用可能な選択肢のレベルでの理解には違いがあります。柔軟性を得るには、いくつかのパターンが必要になる場合があります。

ラベルとその選択について理解を深めようとしている場合は、iをラベルの近くに配置し、ホバーに関する情報を提供し、必要に応じてさらに理解するためのドキュメントへのリンクをいくつか提供できます。

規模と複雑さを考え、弾力性のあるシステムを持っています。

私は単純な「このようにしてください!」ではなく、優先順位付けされたコンテキストの考え方を提供しているので、ある程度の柔軟性があります。ここに私が見たいくつかの状況があります。

なじみのないラベル、やや馴染みのあるいくつかの選択肢:

enter image description here

なじみのないラベル、多くの選択肢、複雑なもの:

いずれにせよ、?(またはi)は、説明する必要があるものに近いです。

enter image description here

フォームを上揃えする場合:

enter image description here

これは、いくつかのドロップダウンメニュー(長いラジオボタンのリストと同じように機能します)にも表示されます。以下はGoogleアナリティクスの例です。

enter image description here

16
Mike M

論理的な順序と適切な配置を考える

enter image description here


代わりにこれを使用できます:

enter image description here



更新

OP(元のポスター)からのコメントに基づく:

「そのため、提供したオプションに制限があります。システムの下では、コントロールをラベルの下ではなく右に移動させるのが標準です」

2つのシナリオ:

1-水平方向のスペースに制限はありません:

enter image description here

2-水平方向のスペースに制限があります:

enter image description here

*最後のオプションは、ラベル自体に下線を引くことであり、ホバーすると、ツールチップが表示されます。下線はここであなたの視覚的な手がかりになります(情報アイコンほど明確ではなく、クリック可能なテキストとして混乱するかもしれません)

更新の終わり


12
Mo'ath

ラベルの中央中央にある情報を使用します。

どうして? wristは右に向かう傾向があるため、ユーザーがクリックしやすくなり、質問のレイアウトが崩れることはありません。

目が左から右、下、左に移動してスキャンを続けるよりも上から下にスキャンできるため、ラジオボタンは垂直方向に整列している場合に最適に機能します。

ただし、テストした後、ユーザーが情報ツールチップを確認するように促された場合は、ラジオボタンに合わせて左に使用します。いずれの場合もマウスの動きを確認できます。

enter image description here

フィッツの法則の詳細については、こちらをご覧ください https://en.wikipedia.org/wiki/Fitts%27s_law

ラベルとラジオボタンにグリッドを使用すると、ユーザーはパターンを学習し、できるだけ早くフォームに入力します。

私の意見では、ツールチップの使用頻度に依存します。ユーザーがこの情報を頻繁に使用する場合は、左、そうでない場合は右。

2

上部のラジオオプションの後。

ラベルとオプションをスタックできないという追加のコンテキストを考えると、これは他の入力のコンテキストでは理想的だと思います。ユーザーはそこで見るのに慣れているでしょう。

垂直方向のセンタリングよりも一貫性があります。

0
Dustin Graham

列挙型の場合は、コンボボックスを使用することにしました。絶対に必要な場合にのみ、より多くの情報を使用することが私たちの慣習だからです。したがって、それらが表示されることはかなりまれですが、それが必要で列挙型の場合は、コンボボックスコントロールを使用してすべての混乱を回避します。

enter image description here

0
L. Lemmer