web-dev-qa-db-ja.com

ネストされたアコーディオンの使いやすさ

複数の階層レベルで情報を表示/非表示にするアコーディオンをネストするいくつかのインターフェース設計を見てきました。

enter image description here

また、この例では、垂直階層と水平階層の両方を使用して、情報のナビゲーションと相互作用をさらに複雑にしています。

これが特定の種類のWebサイトやデザインパターンの一般的な方法なのか、それとも複数のレベルの表示/非表示にユーザビリティの問題があるというのが本能なので避けた方がいいのかと思いました。

たとえば、すべてを表示/すべてを非表示にする機能を実装する場合、ユーザーが吸収するさまざまな可動部分をすべて混乱させるのではないでしょうか。

6
Michael Lai

私はあなたが説明するように正確に採用されたこのパターンを見たことがありません。情報が豊富なWebアプリケーションでの関連する経験は、深いナビゲーション階層を持つエンタープライズヘルスモニタリングおよび展開ソフトウェアから生じています。

私の意見では、左ナビゲーションとメインコンテンツの両方にアコーディオンを使用するべきではありません。左側のナビゲーションは通常垂直であり、あなたが言及するように、コンテンツ領域は通常、残りの水平不動産を支配します。

そのため、次のようなことをお勧めします。 enter image description here

7

これは一種の2Dツリービューコントロールであり、使用されることは非常にまれです。ラベルの代わりにアイコンを使用してこのようなものを見たことがありますが、これはこれよりも少し見栄えが良くなりました。

私の意見では、ツリーを成長させるのではなく、別の場所にサブオプションを表示する方が良いです。

1
SSuad

このタイプのコントロールを見たことがありませんが、うまくいくと思います。情報アーキテクチャがユーザーにとって論理的であり、実装が期待どおりに機能する場合はすべて。

これはおそらく、ナビゲーションなど、コンテンツに属していないものを非表示にする方法が必要な、情報量の多いWebアプリケーションをナビゲートする必要性に由来します。また、開発がモバイルファーストアプローチから始まった可能性もあります。このアプローチは、後に、よりスペースのあるWebページに実装されました。従来のWebナビゲーションを適用するのではなく、チャネル間で一貫性を保つことが決定されたようです。ユーザーに認知負荷を追加せず、一貫したナビゲーションインターフェースを使用してユーザーが「くつろいでいる」と感じるので、それはすべて悪いことではありません。

この投稿は、質問で言及されたコントロールの個人的な反映にすぎないことに注意してください。このナビゲーションアイテムのレコードはこれまで見つかりませんでしたが、有望に見えます。

0
Benny Skogberg