Webおよびモバイルでのアイテムの長いリストの表示
以下の画像のようなクイックリファレンスの長いリストを表示するためのUXのベストプラクティスは何ですか？
このページは、ユーザーがダイエット中に何を食べることが許可されているかをすばやく参照するために使用されます。このため、クリックの量を最小限に抑えたいので、アコーディオンで情報を非表示にしたくありません。
大きな画面では、私の懸念のほとんどは、アイテムとコンテンツの量が圧倒的であるということです。これを解決するにはどうすればよいですか？ほぼ「インフォグラフィック」タイプのページを作成することは効果的なソリューションでしょうか？
さらに重要なのはモバイルでこの情報をすべて表示するにはどうすればよいですか？特に、圧倒的ではなく、簡単に参照できる方法で。
特にモバイルでは、クリック数を最小限に抑えることを忘れることをお勧めします。ユーザーが何を望んでいるかが正確にわかっている場合、クリック数は重要ではありません。
ページ、タブ、またはアコーディオンメニューのコンテンツを単純に分割できます。
大量のデータをモバイルで表示することは常に難しいと思います。あなたはそれらをテーブルに、またはリストタイプとして表示することを考えることができます。タブは、あなたが栄養素のためにそこに持っている4つの「カテゴリー」にとって悪い考えではありません。
https://material.angularjs.org/latest/demo/tabs または https://material.google.com/components/tabs.html
ユーザーが直面する問題は、すべてのコンテンツが同時にユーザーに表示される場合、目的のコンテンツを「すばやく参照する」ことができないことだと思います。 4つの長いリストを表示しても役に立ちません。
このシナリオでは、タブベースのビューがより適切に機能します。ユーザーは引き続き1か所で最上位トピック（炭水化物、野菜、タンパク質...）にアクセスでき、モバイルでも完全に機能します。タブベースの構造を通じてエンゲージメントの増加に集中できれば、追加のクリックは問題になりません。
これを行う最善の方法は、クイック検索機能も備えることです。これは、LOTのユーザーに役立ちます。
たとえば、ユーザーとして、米を食べることが許可されているかどうかを確認したいので、米が見つかるまですべての項目を確認する必要があります（リストにある場合） ）。クイック検索は間違いなくここで役立ちます。