web-dev-qa-db-ja.com

小型のデバイスで表示するときにメニュー項目の数を減らす必要がありますか、それとも「ハンバーガー」レスポンシブメニューを使用する必要がありますか?

だから、ハンバーガーをアイコンとして持っているモバイルのドロップダウンにそれを発射するだけでなく、レスポンシブメニューをより良いエクスペリエンスにする方法を考えていました。

たとえば、次のような場合、ナビゲーション項目の数を制限する方がユーザーエクスペリエンスが優れているでしょう。

(このサイトを例として使用します)

質問、タグ、ユーザー、バッジ、未回答、質問する...

おそらくメニューを表示したままにしますが、次のようにmoreを呼び出すドロップダウンの下にある重要度の低いナビゲーション項目のみを非表示にします。

質問、詳細、質問

それともハンバーガーメニューの方がいいですか?

9
user51171

Paddi MacDonnellが興味深い ハンバーガーメニューの記事 と、数日前に設計するための関連するモバイルファーストアプローチを書いた。

それはハンバーガーメニューのいくつかの問題を概説し、デバイスはハンバーガーアイコンのカーペットの下で複雑なアプリのナビゲーションを磨く方法の一部であるという観察で締めくくります(私のカーペットのたとえではなく、彼女のカーペットのアナロジー!)。

Facebookのアプリは、ハンバーガーアイコンをタブバーに入れ替えたことが有名で、その結果、コンバージョンが改善されました。しかし、Facebookはスワップメニューのデザインよりもはるかに重要なことをしています。最近、彼らはメッセンジャーアプリをリリースしましたが、それについての大きな問題は、メッセージングを統合することができる完全に機能的で人気のあるアプリがすでにあったということです。 Facebookは、複雑な1つのアプリではなく、2つのシンプルなアプリに到達した各アプリの役割に焦点を当てることにより、機能を区分しました。機能が減ると、メニューオプションのセットが減り、ハンバーガーメニューの必要性が少なくなります。

優れたアプリは非常に重点が置かれており、Webが受けるよりもはるかに厳密なユーザーテストを経て進化しました。アプリスタイルのエクスペリエンスを作成するには、サイトを単純化し、再度単純化してから、もう少し単純化する必要があります。必要に応じて、アーキテクチャを、扱いやすい一口サイズの部品、マイクロサイトに分割します。ユーザーに単純なオプションのセットを提示すると、複雑なメニューの問題が発生することはありません。

ハンバーガーアイコンを使用することは、負傷時にバンドエイドを叩くようなものです。それはパッチをあてますが、何かがまだ壊れています。

質問で示唆されているように、ハンバーガーアイコンに頼ることなく、関連性が高く有用なナビゲーション項目を十分に提供できるような方法で、アプリ/サイトのアーキテクチャをうまく分解できれば、ユーザーにとって簡単になります。

表面上、アイテムの数を管理可能な数に減らすことが不可能であると思われる場合は、おそらく一歩下がって、それを可能にするために何をしなければならないかを検討する価値があるかもしれません。モバイルエクスペリエンスを全体的に改善します。

ハンバーガーメニューが必要ないところまでナビゲーションを減らしながら、元の場所に戻って同様のアイテムに進み、移動できるという基本的なナビゲーションのニーズを確実に提供する必要があることを付け加えます。次の段階に行き、行き止まりに放置されないようにしてください。

編集:関連項目: ハンバーガーメニューを回避する理由と方法 ルイスアブレウ著、同じ結論に達した場合:

ソリューションは情報アーキテクチャを確認しています。

11
Roger Attrill

できれば、ナビゲーション項目を少なくすることをお勧めします。ブレントジャクソンは、フライアウト(ハンバーガー)ナビゲーションの最初の部分について議論しました。ハンバーガーソリューションが実際にカバーするのは、ナンバー1または次のユーティリティのみです。

優れたナビゲーションは、少なくとも次の3つのことを行う必要があります。(1)ユーザーがナビゲートできるようにする必要があります。 (2)これは、ユーザーがどこにいるかを知らせるための経路探索として機能する必要があります。 (3)ユーザーが製品の機能を理解できるようにする必要があります。ナビゲーションがこれら3つのことを実行していない場合、何かがおかしいです。

http://jxnblk.tumblr.com/post/36218805036/hamburgers-basements-why-not-to-use-left-nav-flyouts

0
trbaldwin

モバイルデバイスでは、展開および折りたたみ可能な親メニュー項目を使用します。展開された各親アイテムは、他のアイテムを自動的に閉じます。これにより、ナビゲーションがコンパクトになり、モバイルデバイス全体でユーザーフレンドリーになります。

ハンバーガーアイコンを介してこのメ​​ニューをトリガーするかどうかは、多くのオプションの1つにすぎませんが、少なくとも携帯電話で現在知られているメニューの表現です。

以下の行に沿って:-

UX Mobile Navigation Menu

モバイルデバイスのメニュー項目をできる限り減らしますが、少なくともこの方法は、比較的大量のメニュー項目を提供する機能を提供しながら、凝縮されたユーザーフレンドリーな機能を提供します。

0
zigojacko