「詳細情報」を表示する最良の方法、ツールチップとツールチップなし

Question

フォームに最小限の方法で小さなスペースで入力しながら、オプションの横に詳細情報を表示する最良の方法はどれですか？

クリックまたはホバーできる「i」アイコンとツールチップが表示されます
テキストエリア内をクリックするだけでツールチップが表示されます
ツールチップなし、情報は最初から表示されます

Joel Garfield · Answer

CSSやJavaScriptを使用して、Web上のセカンダリコンテンツや追加コンテンツを表示および非表示にする傾向があります。 CSSNewbie の古い例を次に示します。非表示のコンテンツを表示するには、[もっと見る]をクリックします。

「さらに隠す」をクリックして、公開されたコンテンツを非表示にします。

どのアプローチが「最適」かを判断するのは、お客様にお任せします。この方法（クリックすると表示される非表示のdivとして「詳細情報」を設計する）は、Webにプログレッシブ開示を実装するためのますます人気のある方法です。

jackiemb · Answer

各フィールドの隣に情報を置くことの問題は、多くの場合、それが必要ではないことです。あなたがしたくない場合でも、あなたは結局すべてのためにそれを記入する義務を負うことになります。 2つの例では問題ありませんが、頻繁に使用されるデザインパターンとして、すぐにそれにコミットしていなかったと思うかもしれません。

この場合、見出しのレベルでホバー「i」に情報を置く方がよいでしょう。また、フィールドサイズの縮小にも役立ちます。

EBayがどのようにそれを行っているかを見てください。あなたがあなたが販売しているものについてのさらなる情報をリストするようにあなたを招待するとき。

いつものように、それは文脈の問題です：

ほとんどの場合、「i」ホバーはうまく機能します。医師の手術環境で医療システムをテストしました。医者はホバリングで大丈夫でしたが、それを最も頻繁に使用する2人の古い受付係は自宅でインターネットを使用したことがなく、それが何のために、どのように使用するかを理解していませんでした。これらは重要ですが、全国的なシステムのマイナーなユーザーサブセットでした。そのため、指示をより明確にすることを検討しました。ただし、システムを1日に複数回使用するため、専門知識をすぐに得ることができ、とにかく助けを必要としません。さらに彼らは訓練を受けるでしょう。したがって、その場合の決定は、インターフェースを変更せず、ホバーオーバーを維持することでした。ユーザータイプ番号が大きく、使用頻度が少ない場合は、変更した可能性があります。