web-dev-qa-db-ja.com

ハンバーガーメニューと代替品の比較

彼の article では、Zoltan Kollinがハンバーガーメニューのいくつかの代替案を提供しています。残っているアプリソリューションの削除:


もっと

主なオプションを表示し、[その他]で他のオプションを非表示にします。

enter image description here


徐々に崩壊

小さい画面では、できる限り何でも表示し、「その他」の下にあるものはすべて非表示にします。画面が大きいほど、表示される項目が多くなります。

enter image description here


スクロール可能なナビゲーション

右にスワイプしてその他のオプションを表示します。

enter image description here


今問題は、これらのうちどれがウェブサイトで最もうまくいくかについての調査(A/Bテストなど)がありますか?これらがハンバーガーと比較してどれほど優れているか(あるいはさらに悪いか)についての調査はありますか?.

3
Runnick

Nielsen/Norman Groupはこれについていくつかの調査を行いました。

https://www.nngroup.com/articles/hamburger-menus/

概要:ウェブサイトのメインナビゲーションを非表示にすることで、見つけやすさがほぼ半分になります。また、タスク時間が長くなり、知覚されるタスクの難易度が増加します。

非表示のメニュー(ハンバーガーアイコンなど)と可視のメニュー(ページ上部のリンクなど)の定量的なユーザビリティテストでは、次のことがわかります。

  • 非表示のナビゲーションは、表示または部分的に表示されるナビゲーションよりも発見されません

    • ナビゲーションが非表示の場合、ユーザーはナビゲーションを使用する可能性が低くなります。
    • ユーザーが非表示のナビゲーションを使用する場合、表示されている場合よりも、タスクの後半で使用します。
  • 非表示のナビゲーションは、携帯電話とデスクトップユーザーインターフェイスの両方で、表示または部分的に表示されるナビゲーションよりもユーザーエクスペリエンスが低下します。この発見は、ユーザーによるタスクの難易度の評価、タスクに費やされた時間、タスクの成功など、複数のUX指標に当てはまります。

  • デスクトップでは、ナビゲーションを非表示にすると、電話よりもエクスペリエンスとナビゲーションの検出可能性が低下します。

  • ナビゲーションを非表示にすると、ほとんどの場合、ページはめ込みリンクから直接アクセスできないコンテンツに影響します。

3
SteveD

多くの場合、ハンバーガーメニューは他のメニュータイプよりも効率的ではありません。たとえば この記事 を参照してください。

私の個人的な作業で、ハンバーガーメニューは解決策にはならないことに気付きました。下部のナビゲーションバーは、主に私が作業しているWebサイトに最適ですが、自分のサイトでテストして、最適な方法を決定する必要があります。あなたの訪問者。

また、UX.SEの関連する質問については この回答 を参照してください

良い代替案は、最大5項目の下部メニューです。ここではいくつかの例を示します。

Spotifyメニュー

enter image description here

Facebookメニュー

enter image description here

その他の各種メニュー

enter image description here

0
MJB