web-dev-qa-db-ja.com

ホバー(またはタップ)が多くの要素を持つより多くの情報を表示することを示します

まず、これは、1つ余分なビットがあるため、(少なくとも私が見つけることができる)そこにある他の多くの同様のタイトルの質問の複製ではありません。最初にお読みください。

私が持っているのは説明のパラグラフであり、その後にそのパラグラフを裏付ける参照のlongリストが続きます。今、私は論文やウィキペディアのようなもので参照番号を使用していることを知っていますが、それは私が目指していることではありません。

正確には、私の場合、それは聖書の教えの段落であり、その後にそれを裏付ける聖書の一節のリストが続きます。これらはすべてスペルアウトされています。それぞれにカーソルを合わせると、参照だけではなく、全文が表示されます。

これにより、情報(i)シンボルも機能しなくなります。これまで見てきた最善の解決策は破線の下線ですが、非常に多くあり、長い文字列になっているため、インジケーターが失われているように見えます(以下の例)。

だから、私の質問は、この種のシナリオでは、このようなもののためのより良いオプションがあるか、それがホワイトスペースに適さない状況であるため(テキストのブロックが決してそうではない)、それがちょうど最善のことですか?と一緒に行きます?

enter image description here

2
David

いくつかの提案:

  • ビューに構造を追加して、参照ブロックをより明確に分離します。空白とフォントサイズも使用します。フォントサイズは、情報ブロックの重要性を伝えるのに役立ちます。参照はそれほど重要ではないことをお勧めします。
  • 参照をより区別可能にします。現在、それらは単一の下線付き段落全体のように見えます。 •(ドット)セパレーターを使用すると、リンクをより明確に分離できます。
  • リンクの数を指定して、「リンクが多い」というアイデアを伝えます
  • より良いアフォーダンスを提供するために記号を追加します。リンクに青い下線付きの書式を適用します。
  • 「アクティブ」(カーソルの下)の参照セクションのみを強調表示して、視覚的なノイズを減らします
  • 必要に応じてキューを提供します。参照領域にメッセージを表示するホバーは機能します。
  • ユーザーとのユーザビリティテストを実施します

enter image description here

オフトピック:読みやすさにもっと注意を払ってください。

2