web-dev-qa-db-ja.com

グループ化されたコンテンツのアコーディオンまたはアンカーリンク?

大きなチャンクに分割されたテキストコンテンツを表示する方法について、2つのUIパターンの間で引き裂かれています。これは、サイト全体で使用したいパターンです。そのため、よくある質問や、論理的なサブセクションを持つテキストが多いページなどに使用できます。

アコーディオン方式の方がコンパクトで、アコーディオンの下のコンテンツを簡単に表示でき、ページ上のセクション名の重複を回避できます。一方、複数のセクションを表示するには、追加のクリックが必要ですが、アンカーリンクを使用すると、繰り返しクリックするのではなく、単にスクロールすることができます。 (「すべて展開」オプションをアコーディオンで使用することもできますが、その場合、ユーザーはすべてを一度に読み、別のウィジェットをページに追加することを前提としています。)アンカーリンクには、セクションのリストが前にありますが、クリックせずに複数のセクションに興味がある場合は、簡単にスクロールできます。

私は多くの長所と短所を見て、これに関する研究を見つけることができなかったことに驚きました-おそらく私は単に間違った言葉をググっているだけですが。助言がありますか?スクリーンショットで2つの例をモックアップしました。

(補足:これはレスポンシブサイト用であるため、リンク/アコーディオンのタッチサイズなどはどちらの方法でも対応できます。)

Accordions vs Anchor Links

2
Michael Histen

エクスペリエンスが主にモバイルデバイスである場合は、アコーディオンスタイルを選択します。アンカーされたトップメニューと「トップに戻る」アフォーダンスは、モバイルデバイスで使用するのが少し難しく、電話では扱いにくい方法でスペースを占有します。

アコーディオンをプログラムして、別のアコーディオンを展開しても開いたままにすることができます。 「すべて展開」コントロールは提供しません。

(私の意見では)アンカーメニューよりも良い選択ですが、アコーディオンの使用を制限してください。それらには目的がありますが、不格好です。それらを使用する必要があるかどうかを確認し、各ケースを個別に取り上げてください。たとえば、ヘッダーがそれぞれ異なる3つまたは4つの段落がある場合は、アコーディオンなしでコンテンツを表示することをお勧めします。別のシナリオでは、ユーザーがページの下に重要なコンテンツを表示できるように、ページのFAQ情報を折りたたむことができます。

アコーディオンによってエクスペリエンスが中断または強化されるかどうかを判断する際は、それぞれのケースで最善の判断をすることができるはずです。

3
Evan Lange