web-dev-qa-db-ja.com

展開/折りたたみに適した場所はありますか?

現在、必須とオプションの両方の情報グループを含むフォームを設計しています。現在、アプリケーション全体でグループセクションヘッダーを使用しているので、一貫性を保つためにここでそれらを利用しましたが、セクションを拡張するのは今回が初めてです。

私の質問は、このシナリオでは展開/折りたたみアイコンをどこに配置する必要があるのか​​、展開セクションと静的セクションが混在しているのですか?

左側の配置がより論理的であるように見えますが、右側の配置は、グループラベルが常に同じ場所から始まることを保証します。

enter image description here

1
Mike N

左いっぱいか、右いっぱいか。途中でジグザグではありません。一貫性は非常に重要です。

ただし、行全体をボタンとして機能させることを検討しましたか?これにより、はるかに大きなタッチターゲットになります。ラベルテキストを選択するのが少し難しくなるが、不可能ではないという小さな欠点があります。たとえば、右側のサイドバーから「関連する質問」の1つを選択してみてください。

あなたは this siteenter image description here どのようにスタイルを設定するかは特に問題ではありません。+またはVをドロップダウンインジケーターとして含めて、展開可能なヘッダーと非展開可能なヘッダーの違いを表示するように選択できます(お勧めします)。

十分な余白はなく十分な余白はなく、アイコンがかなりしっかりしている(ピクセルが多いため、soではなく▼を使用している)場合は、右端まで移動するので、ラベルとは区別されます。これにより、簡単にスキムして、拡張できる部分と拡張できない部分を確認できます。

2
PixelSnader

右側の展開アイコンは、フローをより「自然」に感じさせるのに役立ちます。左側に配置すると一貫した外観を作成できますが、「拡張性」は副次的な情報であり、ユーザーが気付かせたい主な情報はコンテンツ、つまりテキストです。

0
qbo

オプション1はオプション2に比べて優れています。+ボタンは、少なくとも一貫した位置に表示され、アクションを学習すると識別しやすくなります。

0
uxpalette