web-dev-qa-db-ja.com

親セクションが子を表示し、どこかにリンクする必要があるマルチレベルサイドバーメニューを解決する方法

注：これを読むとき、メニューの使いやすさよりも情報アーキテクチャの問題のほうが多いかもしれません。


次のメニューがあるとします。

Item 1              ............  Should link to Page 1 AND somehow show its children
    Item 1.1        ............  Should link to Page 1.1
    Item 1.2        ............  Should link to Page 1.2
    Item 1.3        ............  Should link to Page 1.3 AND somehow show its children
        Item 1.3.1  ............  Should link to Page 1.3.1
        Item 1.3.2  ............  Should link to Page 1.3.2
Item 2              ............  There is no Page 2. This should not link anywhere. Only show its children.
    Item 2.1  
    Item 2.2
    Item 2.3

Etc. with more items....


チャレンジ：

  1. 子供と孫のアイテムはデフォルトで非表示にする必要があるため、オンデマンドで表示する方法が必要です。
  2. ユーザーが問題を抱えているフライアウト/ホバー操作を使用したくありません。クリックだけを使いたい。
  3. 一部の親アイテムはそれ自体がページなので、何らかの方法でリンクする必要があります。他の親アイテムは、子を囲み、サイト構造を示す一種のグループタイトルを提供するためにのみ存在しますが、これらの親アイテム自体はページではありません。
  4. ユーザーベース：40歳以上で、インターネットの経験がほとんどなく、視覚/器用さが制限されている場合。彼らはあなたが想像していないことで問題を抱えています。


私は次のようなことをすることを考えました：

Link 1  [+]
    Link 1.1
    Link 1.2
    Link 1.3 [+]
        Link 1.3.1
        Link 1.3.2
Non-link 2  [+]
    Link 2.1
    Link 2.2

[+]記号は、サブレベルを開閉できることを示すアイコンです。クリックして子アイテムを表示しますが、テキストをクリックして実際にページに移動します。 [+]アイコンが小さすぎてユーザーが簡単にクリックできないのではないかと心配です。


現在、3つのプロジェクトでこの問題を抱えており、満足できる解決策を実際に見つけたことがないので、他の提案はありがたいです。

================================================== ==========

更新：

さて、上記のようにIAを変更するかツリービューを実行して、以下の回答の1つに例示するように見えます。誰かがこの投稿を見て、より良いアイデアを持っているなら、私に知らせてください。

usabilitymenuaffordancehoverclick
2
Andres Diez

申し訳ありませんが、IAを変更する準備ができていない場合の解決策はありません。

1つ（安くてあまりエレガントではない）の解決策は、親のコンテンツを常に1レベル下に移動し、「概要」や「はじめに」などの名前を付けることです。このように、親をクリックすると、サブレベルが開き、サブレベルの最初のアイテムがアクティブになります。ナイスではありませんが、プラスアイコンやそのようなものよりも優れています。

Philがお役に立てば幸い

1
Phil

ここで必要なのはクラシックツリービューではありませんか？

例： http://cssglobe.com/lab/sitemap_styler/01/# および http://boagworld.com/demos/sitemap/#

これは実際にはあなたが提案した答えに非常に近く、[+]ボタンの位置のみがリンクの左側にあります。

1
Bart Gijssens

アイコンを使用してリンクをたどりながら、相互作用モデルを変更し、タイトルに子を展開/折りたたみさせます。

このメニューとの相互作用のほとんどはメニュー自体をナビゲートすることであり、この探索はリンクをたどるよりもはるかに一般的なアクションになるようです。したがって、このアクションを、大きくて簡単に到達できる要素（ラベル）に割り当てることは理にかなっています。親と同じレベルの子のないアイテムは、色分けしたり、親を太字にしたり、その他の書式を設定したりして区別できます。

これで、リンクされたページにつながる要素をラベルの右側に配置できます。視覚的に解決するために、目次と同様に、これらはすべて列の右側に配置できます。この列にラベルを付けて、アイコンの意味を理解してもらうこともできます。目次との視覚的な類似性は、おそらく慣れ親しんでいるメタファーを使用しており、実際のナビゲーションは要素（ページ番号）の右側で行われます。

1
Vitaly Mijiritsky

設計の詳細に応じて、レイアウトでツリービューモデルを改善できる場合があります。

Link 1             [+]
  Link 1.1
  Link 1.2
  Link 1.3         [-]
    Link 1.3.1
    Link 1.3.2
Non-link 2         [-]
  Link 2.1
  Link 2.2

これにより、[+]のクリックターゲットがテキストリンクから離れ（誤って別のアクションをトリガーすることなく大きくなり、簡単にヒットできるようになります）、それらの位置が揃うため、ユーザーが狩る必要がなくなります。特定の行の「表示」機能を見つけるため。

また、あなたの非リンクのケースは、特に年配のユーザーの間で、ユーザーを混乱させる結果になると思います。 IA内の同様のアイテムは、並行する形を取る必要があります。あるトップレベルのアイテムをクリックしてそのページに移動でき、別のアイテムをクリックできないと、壊れているように感じられます。

0
Drew Beck