非常に長いアコーディオンを処理する方法は？

Question

最初はタイトルのみが表示され、アコーディオンが展開して詳細が表示されるように、アイテムのかなり長いリストをアコーディオンに圧縮しました。リストには、ナビゲーションではなく、ページのメインコンテンツが含まれています。

ユーザーは自分に当てはまる見出しを探しているため、これはうまくいくと思います。他の見出しの詳細を気にする必要はないので、非表示にするとうまくいき、必要な見出しを見つけることができます。より早く。

これが私が話しているインターフェイスのタイプの例です。違いは私のものにあり、一度に1つだけ開くことができ、それらは開いたり閉じたりするアニメーションであり、私のコンテンツセクションの一部（実際には1つだけ）はかなり背が高い）

トリッキーなことは、25以上のアイテムを持ついくつかのカテゴリがあり、現在開いているものよりもかなり多くのコンテンツ（または何も開いていない場合はさらに悪い）の下部にあるアイテムがある場合、開いたとき、コンテンツのほとんどを拡張するだけですページの下から。

私の質問は2つあります。

一般に、すべてを表示するためにスクロールが必要な多くの多くのオプションをアコーディオンに持つのは、悪い決定か疑問の余地のある決定ですか？（私はそうは思いませんが、それがパターンを脅かすかどうかはわかりません）
ページの下部にある多くのコンテンツを含むオープニングアコーディオンセクションを処理する方法（このアコーディオンにはさまざまな高さの内部セクションがあります）。私が最初に考えたのは、ページを上にスクロールして、クリックしたセクションがビューポートの最上部に移動し、開いたセクションをできるだけ上に表示できるようにすることです。これがユーザーにとってぴくぴくしたり奇妙な感じになるのではないかと心配しています。

Rahul · Accepted Answer

アコーディオンを使用する場合

アコーディオンはどのような問題を解決しますか？すべてのアイテムを表示するのに十分なスペースがないという問題を解決するので、代わりに、1つを除いてすべてを折りたたみ、ユーザーがそれらを切り替えられるようにします。欠点は、トグルコントロールが含まれているコンテンツの長さに依存することです。あなたの場合、含まれているコンテンツがアコーディオンを非現実的にする可能性があるようです。

これが I-patterns.comがアコーディオンパターンについて述べなければならないことです。

使用法

通常のサイドバーメニューのメリットを望むが、すべてのオプションをリストするスペースがない場合に使用します。

Webサイトに2つ以上のメインセクションがあり、それぞれに2つ以上のサブセクションがある場合に使用します。

メインセクションが10未満の場合に使用します

メインナビゲーションに表示するレベルが2つしかない場合に使用します。

これらの数値のいくつかは少し恣意的であるように見えますが、それらは従うのに適した経験則です。基本的に彼らが示しているのは、データが多すぎる場合、アコーディオンパターンが不要になる可能性があるということです。

代替案

UI-patterns.comは、魅力的な代替手段である垂直ドロップダウンメニューを実際に提供しています。それはあなたの状況にとって良いアプローチです。なぜなら、それはより長いアイテムのリストのために多くの垂直方向のスペースを開くからです（リストが他のコンテンツの上に表示されるため）。コントロールをサイドバーに合わせる必要がある場合は、同じサイトの水平ドロップダウンメニューを検討してください。

とにかくアコーディオンを使う

それでもアコーディオンパターンを適用する必要がある場合は、UI-patterns.comの右側のメニューにあるアコーディオンを検討してください。そこにある見出しの中には、約25項目を含むものがあります。下の見出しは、見ていると見えなくなりますが、混乱しないでしょう。これは、アコーディオンが開いた状態から閉じた状態への遷移をアニメーション化するためです。これは、見出しをクリックしたときに見出しに何が起こっているかをユーザーに通知するため、重要です。ジャンプして閉じただけでは、見出しが消えてどこに行ったのか不明確になるかもしれません。とにかくアコーディオンを実装する場合は、アニメーションを使用して遷移をさらに明確にすることを検討してください。

Vitaly Mijiritsky · Answer

あなたの懸念は正当化されます。アコーディオンは、アイテムの数とスペースの両方の点で適切にスケーリングされません。それがあなたが扱っているコンテンツであるなら、多分アコーディオンは正しい解決策ではありませんか？右側の I-Patterns にあるアコーディオンナビゲーションメニューを見てください。一番上のアイテムを開き、少し下にスクロールして、一番下のアイテムを開きます。上部の大きなアイテムが折りたたまれ、展開したばかりのアイテムが上に移動してビューから消えます。

標準の拡張可能なセクションのアプローチを使用すると、アコーディオンを使用せずにコンテンツを折りたたむことができます。この方法では、必要な数のアイテムを同時に拡張できます。これは、FAQなどの非常に広く使用されているUIパターンです。 iToldem.com で。

Tarek · Answer

私はイントラネットで私のクライアントと同じ問題に直面しました。

はい、ページが長くなりすぎることはユーザーにとって問題になり、情報を探す必要があると苦情を述べました。これを（すばやく）解決するために、アコーディオンコンポーネントが配置されるタブのレイヤーを追加しました。アイテムを再編成した後、コンテナあたりのアイテム数を減らしました。ただし、これが当てはまらない可能性もありますので、よくわかりません。

これは、上で述べた例のはるかに優れた例です。 http://unowhy.com/#/actu/index.htm しかし、これをきれいにするためにリソースを割り当てる余裕はありませんでした。

2つ目の質問については、どういう意味かわかりません。ページに表示される余分なコンテンツに対応するためにページを拡張するときに問題が発生するとは思わない。視覚的にどのように開発されているかによっては、アコーディオンがフッターやその他のコンポーネント（開発の初期段階で直面したバグ）を覆わないようにする必要がありますが、それ以外は問題はありません。

私が助けてくれたことを願っています！