web-dev-qa-db-ja.com

詳細を展開/折りたたむ

文書の一部の詳細を展開したり折りたたんだりするための提案をお願いします。プロトタイプへのリンクがあります。詳細を表示/詳細を非表示にするだけです。ボタンを使用する代わりに、このアクションで詳細を非表示および表示するより良いアイデアはありますか?レポートが付いたボタンが2つあります。スクリーンショットも添付されています。 enter image description here

enter image description hereenter image description here

Link1: https://xd.Adobe.com/view/f1dd2756-5e0c-4323-7b84-f8c012d90a50-87ec/ Link2: https://xd.Adobe.com/view/b2fa40c8-ec8b-4898-711f-b423212283a0-c4cb /

1
gm1995

サイト階層

サイト階層は、レイアウト関係をユーザーに通知するために非常に重要です。私への詳細表示ボタンは、それが明らかにする追加の詳細とあまり関連がありません。プロトタイプを確認するとき、レイアウトを移動して詳細に対応できるようにしたので、実際に何が変化しているかを見つけるために、このボタンをクリックする必要があります。

勧告

コンテンツを変更する領域にボタンを近づけることをお勧めします。上ではなくボタンの下でコンテンツを変更します。ユーザーとして、私はすでにこの領域をすくい取り、記憶しています。あなたが私にそれを変更するために、認知過多のビットを構築します。

実行

実行ごとに、詳細ボタンにレポートと同じ重み(サイト階層)を与えます。詳細は主な行動を促すフレーズではないので、ユーザーには別の方法で提示する必要があると私は主張します。

私が見るところから、この情報をそのままに十分にありました。おそらく、認知負荷を軽減するためにこれを行う場合は、ユーザーがツールチップを使用してデータを深く掘り下げることができるようにします(これがタブレットや携帯電話で使用される場合を除く)。

オプション(必ずしも最高とは限りません)

enter image description here

1
Bromox

ビューを再構築できると思います。 2つの列と2つの列を持つ2つの行ではなく、最も重要な研究名-を示す1つの列と1つの行を使用します。

次に、次の行で、行をに分割してその他の詳細に対応できますが、視覚的階層を最適化するためにフォントサイズを小さくできます。

幅のスペースがたくさんあるので、他の詳細をスタディ名の下の1行に合わせると、完璧に見えます。

0
Edward Bella

この機能は自動化されていると考えることができます。ユーザーが下にスクロールすると、詳細に関心がなくなり、データが非表示になる可能性があります。彼が後ろにスクロールすると、詳細が表示されます。シナリオを検証し、実装を微調整できます。

0
sruzan