web-dev-qa-db-ja.com

アコーディオンコントロールを使用するのはいつ悪い習慣ですか？

多くの設計状況でアコーディオンコントロールを使用しています...

私はそれらが次の場合に役立ちます：

  • 長いウィザードの段階的な開示（ページ数を削減）
  • 回答を表示したり、すぐに終了したりできるアンケート（下の図を参照）
  • チェックアウト、例えば www.johnlewis.com

なぜこれらのパターンはそれほど人気が​​ないのでしょうか。長所がわかります...短所は何ですか？

UX SEに関する質問で、最近 そのようなコントロールは好意から脱落している ...が本当ですか？もしそうなら、代替設計パターンは何ですか？

enter image description here

[〜＃〜] update [〜＃〜]質問に興味深い情報が見つかりました タブvsアコーディオン 。ただし、この手法の欠点は扱いません。

UIパターンには アコーディオンコントロール についていくつかの便利な点があります。 "非常に長いアコーディオンの扱い方" 質問に対するRahulsの回答も気に入りました。

accordion
19
Lisa Tweedie

アコーディオンが支持されなくなっているとは思いません。アコーディオンがタブとして一般的に使用されているのを見たことはありませんが、いくつかの有名なサイトではまだ使用されています。

Facebookの「一般アカウント設定」ページの例です。 enter image description here

ただし、いくつかの欠点があるため、以下が当てはまる場合にのみアコーディオンを使用します。

  • セクションを展開すると大量のスクロールが発生する場合は、ユーザーがスクロールして次のセクションをクリックして開くために検索する必要があるため、アコーディオンは避けます。これは、フローが線形的に進行する場合、セクションごとに閉じるボタンとセクションごとに「次へ」ボタンを配置することで軽減できます。

  • プロセスが直線的で、各アコーディオンのヘッダーのテキストが非常に短い場合、タブを前後にナビゲートするのに役立つ可能性があります。

enter image description here

Amazonの例では、「タブ」はチェックアウトプロセスのフローを強制したいのでクリックできませんが、必要に応じてクリック可能にして、ユーザーが前の画面に簡単に戻ることができるようにすることができます。

要約すれば：

  • アコーディオンは良いです。 stoicfuryの回答と同様に、純粋なCSSで実装できます。最後に、多くのJavaScriptフレームワークにはアコーディオンウィジェットが付属しています： JQuery および [〜＃〜] yui [〜＃〜] いくつか例を挙げると、実装はかなりまっすぐ進む。

  • アコーディオンに多くのペインが含まれているために多くのスクロールが発生する場合、おそらくアコーディオンはそのような適切なウィジェットではありません。たとえば、非常に多くのアイテムが含まれている場合、ユーザーは前に戻って前の手順に戻る必要がありますか？

  • ペインがない場合、または各ペインが非常に小さい場合は、アコーディオンが適しています。 facebookの例は、アコーディオンが非常に適切に実行されていることを示す良い例です。投稿したモックアップも非常に優れた実装ですが、各ペインがより複雑になり、大きなフォームが含まれる場合、アコーディオンはできません。うまく対処するには。

21
F21

私の意見では、アコーディオンはいくつかの状況で問題を引き起こす可能性があります。

  1. 高すぎる場合。アコーディオンがページより高い場合、ユーザーは一部のオプションを表示できません。これは、一度に2つ以上のパネルを開くことができる場合に発生する可能性があります。
  2. 別のアコーディオン内にネストされている場合。混乱するため機能しません。パネルを細分化する必要がある場合は、タブなどの他のパタ​​ーンを使用することをお勧めします。
  3. Webページをナビゲートしているときに状態が保存されない場合。最後にパネルをどのように離れたかをシステムが覚えていない場合は、煩わしい場合があります。あなたがそれを使用した時間。

このパターンの詳細：

10
Pep López

Ben Brocka と同様に、「支持から外れる」ということは聞いたことがありません。歴史的に、特定のブラウザー（主にIE）との互換性についていくつかの当初の懸念がありましたが、それらは（携帯電話の互換性に関する場合を除いて）おおむね落ち着いており、今ではアコーディオンを作ることができます 純粋なCSSに基づいて 。

フォーマットベースの変更

なんらかの理由でアコーディオンが適切でないと思われる場合は、コンテンツセクションを非常に長くするか、コンテンツを複数のページに分割することができます。 「複数ページ」が約5を超える場合は、サブページごとに関連するナビゲーションも必要になるでしょう。

コンテンツベースの変更

または、コンテンツに対処することもできます。本当にそんなに長くする必要があるのでしょうか？それは過度に冗長または冗長ですか？パーツを組み合わせることができますか？等.

5
stoicfury

次のステップに進む前に検証する必要がある複数のパネルで情報が必要なフォームでアコーディオンを使用することは悪い習慣だと言えるかもしれません。たとえば、各パネルに「保存」ボタンがない場合（以前にここで共有したFacebookの設定など）は、ユーザーがページの下部にある[保存して続行]ボタンをクリックすると表示されない複数のエラーが発生する可能性があります。 。これは、複数のエラーを表示しなければならず、UXをごちゃごちゃにして、UIを実際に混乱させる可能性があります。

1
Duskus

Jacob Nielsenのチームもこれを調査しています： http://www.nngroup.com/articles/accordions-complex-content/?utm_source=Alertbox&utm_campaign=8f701d82e8-Alertbox_email_05_19_2014&utm_medium=email&utm_term=0 8f701d82e8-24102777

たとえば、アコーディオンの1つの利点。ウィザードでは、ヘッダーを使用して以下のコンテンツと選択の概要を確認できますが、ウィザードは順次使用する方が適しています。したがって、アコーディオンはウィザードとタブの間のどこかに着陸します

0
martinnova