web-dev-qa-db-ja.com

レスポンシブサイトのサイドバーメニューを「ページタイトルアコーディオン」に隠すのは良い考えですか。

サイドバーメニューを表示するエレガントなソリューションを探していたところ、同じパターンを使用しているサイトがいくつか見つかりました。サイドバーメニュー全体をメイン画面の下の小さな画面に移動するのではなく(多くのサイトのように)、一種の変形ですページタイトルの近くに隠れているアコーディオンにいる場合:

Example of the described navigation on uchicago.edu

いくつかの例:

これはいいアイデアかと思いました。ユーザーが「ハンバーガーアイコン」を理解し、非表示のサイドバーナビゲーションをここで見つけるという大きな問題が1つあります。一方で、これはスペースを確保するのに役立ち、ユーザーがこのサイドバーメニューにネストされたサブページをさらに深く調べて探す必要がある場合は、コンテンツ全体をスクロールする必要はありません。

だから私は好奇心旺盛です、あなたはそれをどう思いますか?改善できるか?

7
Stéphanie W.

低いナビゲーションコンポーネントにハンバーガーアイコンを使用することは、ほとんどの人がすでに高レベルナビゲーション。ウィキペディアのように、下位レベルのナビゲーションコンポーネントに別のアイコンを使用してみることができます。

閉鎖 Closed

オープン Open

追加の提案:ハンバーガーアイコンの横に「メニュー」ラベルを配置すると、その認識が向上し、他のナビゲーションコンポーネントと明確に区​​別されます。

5
mitra

私は、どのWebサイトでも2つのハンバーガーアイコンを使用している人を見たことはありません。

次のサンプルを見つけてください。これは、さまざまなセクションのドロップダウンメニューとハンバーアイコンを備えたBBCホームページです。トップメニューの代わりにドロップダウンメニューを使用でき、サイドバーメニューにはハンバーガーを使用できます。

enter image description here

1
Amitis

これは実際に私がデザインした最近のウェブサイトでやったことです。これはデスクトップのサイドバーメニューではなく、セカンダリメニューです(メインのナビゲーションには表示されません。例ではシカゴ大学のように、関連するページにのみ表示されます)。しかし、モバイルでの課題は同じだと思います。 。

あなたが言ったように、ハンバーガーのアイコンを積み上げるには、ユーザビリティの課題があります。 +を使用してこれがメインのナビゲーションではなく追加の情報に到達する方法であることを示すのはそのためです。また、タイトル全体をボタンにして、このページに関連していることを示しています。ページタイトルは、それ自体がセカンダリメニューとして機能します。

このパターンのアフォーダンスが十分である限り(ここでは、灰色のボックスと+アイコン)、それは素晴らしいソリューションだと思います。私は数人のユーザーで私のをテストしましたが、それは非常にうまくいきます。

あなたはそこにそれを見ることができます: http://www.espace-sante-bellevue.ch/fitness-sante/

Espace Santé Menu

これがあなたの質問に答えてくれることを願っています。 :-)

1
Loris Grillet

これはトリッキーです。積み重ねたハンバーガーメニューは本当に嫌いです。また、注:大学は常に最高のUXを持っていることで知られているわけではないので、例を探すために注意してください(常に関連するXKCDコミック: https://xkcd.com/773/ )。

まず、サイトの分析にアクセスできますか?ナビゲーションの優先順位を変更して、情報アーキテクチャをやり直すことができますか?もしそうなら-それはあなたにとって長期的にははるかに簡単になるでしょう-人々が何をクリックするかを見て、それらを優先事項にしてください。

そうでない場合は、メインナビゲーションタブをベースにし、セカンダリナビゲーションをハンバーガーメニューにすることを検討します。それでもうまくいかない場合は、ハブアンドスポークや拡張ハンバーガーのサイドドロワーなど、他のナビゲーションのアイデアを検討します。幸運を!

0
Sarah Leigh