web-dev-qa-db-ja.com

非常に長い名前のネストされたカテゴリを表示する最良の方法は何ですか?

多くの構造化された情報(イスラエルの高校の最終試験に合格するための資料)を含むウェブサイトを作成しています

情報はすでに教育省によってカテゴリーとサブカテゴリーに構成されています。私の目的は、その構造を取り入れて、できるだけ直感的で親しみやすい方法で表示することです。

基本的に私は8つの主要な主題を持っています

現在、私はこれらをウェブサイトのメインナビゲーションアイテムとして表示することを選択しています:

[英語] [文学] [歴史]など...

各サブジェクトには、さらに2つのサブレベル、カテゴリ、およびサブカテゴリに分割する必要があるサブジェクトページがあります。

カテゴリは通常、各主題について約3〜6であり、長い名前を付けることができます。サブカテゴリは15まで可能であり、非常に長い名前を持つ場合があります。たとえば、履歴内のカテゴリのサブカテゴリには次の名前が付けられます。

シオニスト運動と19世紀のヨーロッパの他の民族主義運動の類似点と相違点

注:名前はどれも言い換えることはできず、私が所属していない教育省によって正式に名前が付けられています。

各サブカテゴリには、それぞれのページへのリンクがある資料のリストが含まれます。これは、ユーザーが検索している特定の学習資料です。

私の直感は、いくつかの種類のネストされた拡張アコーディオン、またはカテゴリの可能なタブ、およびサブカテゴリの各タブ内のサイドナビゲーションを可能にすることですか?

私はUXの専門家とはほど遠く、答えが明らかな場合は申し訳ありませんが、いくつかの調査を行いましたが、正しい方法がまだわかりません。

3
davegri

あなたの問題は中程度から深い階層の問題のようです。この場合、カーンアカデミーからヒントを得ることができます。彼らも持っていますSubjects> Categories> Sub-categories> More sub categories

通常、各サブカテゴリには長い説明があります

サブジェクトをクリックすると、サブジェクトのリストが表示され、ホバーするとサブカテゴリのリストが表示されます。

Khan Academy - 1

特定のサブカテゴリ(代数の基本など)をクリックすると、詳細な説明が記載された別のサブカテゴリのセットが表示されます。 メインメニュー名がサブカテゴリ名にどのように変更されたかに注意してください。

Khan Academy - 2

あなたはさらに深く行くことができます。メニュー項目の変更に加えて、前のサブカテゴリへのリンクも提供されていることがわかります。

Khan Academy -3

ナビゲーション全体がきちんと表示されているため、カーンアカデミーで機能します。かなり深くなっていても、ユーザーにとってわかりやすくなります。また、searchにこの種の深い階層の問題を提供することもお勧めします。

Khan Academy - 4

お役に立てれば!

編集:カーンアカデミーのナビゲーションメニューはモバイルで完全に機能します。完全に応答。

4
Adit Gupta

さて、まず、デスクトップ、モバイル(アプリ)、またはデスクトップとモバイルの組み合わせ(レスポンシブ)のどちらにこれが必要かを定義する必要があります。コンテキストに応じて異なるアプローチを必要とする特定のニーズがあるため、これは質問にとって最も重要です。

デスクトップの場合は、 "mega menu dropdown"のようなものがより魅力的なアプローチだと思います。しかし、私はあなたの場合それをお勧めしません。まず最初に、ユーザーをそれぞれのカテゴリーとサブカテゴリーに送るところから「スプラッシュ」ページ幅のサブジェクトを作成していることをすでに述べました。これらのカテゴリおよび/またはサブカテゴリがサブジェクト間で類似している場合は、問題に対して適切なアプローチをとっています。

もう1つ:数年前に「メガメニュー」が大流行していましたが、 ソリューションよりも多くの問題 を作成し、 ユーザーの煩わしさを生み出したため、どのように放棄されているかを確認できます。

概要:州の略称を入力するためにユーザーにドロップダウンメニューを表示させることは、効率が悪く快適なユーザーエクスペリエンスをもたらす多くの小さな煩わしさの1つです。これらのユーザビリティの刺激の多くをできる限り修正する価値があります。

私が提供している2つのリンクに加えて、これが私の個人的な見解です。これらの巨大で大胆なメガメニューについて考えてみてください。スマートフォンを手に入れましょう。何かを見つけてみてください。複雑ですね。言うまでもなく、ホバー状態がないため、結果を表示するために実際にクリックする必要があることは決してわかりません。

要するに、メガメニュー?可能であればそれらを避けてください。

じゃあ何をすればいいの?

個人的には、 NavigationNavigational TransitionsMaterial Design のページをよく読んでください。行動を表示するビデオを見てください。 Materialを使用するかどうかに関係なく、必要な作業を行うための優れた出発点を提供します。たとえば、これを説明するためにマテリアルでクイックワイヤフレームを作成しました。 enter image description here

ここでは、階層がどのように拡張し、ユーザーにとって既知のアフォーダンスを持っているかを確認できます。そして、ご想像のとおり、積み重ねられたカードはデスクトップのグリッドに合わせて調整されます(たとえば、デスクトップ上に4列のカードを配置できます)。

ただし、これは単なるアプローチです。 Multi-Level Push Men のような他のオプションを使用できます(以下を参照)

enter image description here

または Responsive Multi Level Men (下記参照)

enter image description here

ただし、これら2つのソリューションはクールで洗練されていますが、メガメニューと同じ問題が発生する可能性があることに注意してください(要素のサイズによって異なります)。

まあ、それが役に立てば幸い!

2
Devin