web-dev-qa-db-ja.com

モバイルのサブメニュードロップダウンとタブ

私は携帯電話でより良いUXが何であるかを理解しようとしています。サブナビゲーションをタブとして持つか、ドロップダウンにするか。

方法1-モバイルでのドロップダウン

次の画像では、サブナビゲーションがデスクトップのタブから携帯電話のドロップダウンに変わります。 Desktop view. Each sub-menu is visible along the top as a tabMobile view. The sub-menu is a dropdown

デスクトップの上部にサブナビゲーションが白で表示されます。それぞれのオプション(トップストーリー、世界、米国、ビジネスなど)を確認できます

上部のナビゲーションには、アクティブなサブメニューのみが表示されます。ドロップダウンを使用して、他のオプション(世界、米国など)にアクセスします。

長所:

  • 貴重な画面の不動産を節約
  • とてもきれいに見える

短所:

  • ドロップダウンをクリックするまで、ユーザーは他のオプションを知りません
  • メインメニューを展開するための余地が少ない(メインメニューを展開するためのハンバーガーボタンに見出しテキストは含まれていません)
  • 第3レベルのナビゲーションが難しい

方法2-モバイルのタブ

次の例では、メインメニューはタブのままです。 Mobile view. Sub-nav is tabs

長所:

  • ユーザーはすべての重要なアクションを即座に認識している
  • ハンバーガーメニューをテキストと組み合わせて、ヒット領域を大きくすることができます

短所:

  • より貴重な画面の不動産を取り上げます
  • ナビゲーションの3番目のレベルを与えるのは難しい

方法3-左ナビゲーションのすべて

すべてをメインナビゲーションに配置すると、通常、メインナビゲーションはクリックできなくなります。通常は拡張可能です。または、次のスクリーンショットのようにヘッダーとして表示されます。サブナビゲーションは直接クリック可能なものです。 (「お気に入り」は「ニュース」であり、その下のすべてが異なるリンクであったと仮定します)。 Mobile View. Sub-nav links are directly clickable in the main-menu.

長所:

  • 画面の不動産を節約
  • 第3レベルのナビゲーションをタブとして表示できます

短所:

  • 左ナビゲーションを通過するのが難しく、特に多くのリンクがあると乱雑に見える
  • ユーザーは、メインメニューをクリックしてすべてを調べなければ、すべてのオプションを知ることはできません。

最後に1つの考え

私の例のほとんどはニュースアプリでした。これらのニュースアプリのサブナビゲーションは、ニュースストーリーの大きなフィルターと見なすことができます。つまり重要なスポーツストーリーを表示するために、必ずしもスポーツリンクをクリックする必要はありません。ただし、メインタブで見つけることができるものを正確にフィルタリングするのではなく、追加の情報を表示している場合はどうでしょうか。つまり死亡記事セクション。それはメインページには表示されませんが、それでも誰かがナビゲートしたいものです。

7
Billy McKee

ユーザーがクリックするまでユーザーはその質問を知らないと言って、あなた自身の質問に答えたと思います。また、ドロップダウンメニューまたはサイドメニューをクリックした場合も同様です。

ユーザーがそこにあることを知らなければ、そこにもないかもしれません。タブはより多くの可視性を提供し、それらはより多くの不動産を占有しますが、私はそれを大きな問題とは考えていません。また、タブを使用してより深いナビゲーションを実現できると思います。タブを使用するほとんどのiOSアプリを見て、Androidも同様です。

答えはそれほど多くありませんが、これが役に立てば幸いです。

1
El Wexicano

タブはより多くの領域を占める可能性がありますが、多くのアプリは、ページを下にスクロールするときに、タブ(または任意のサブヘッダー/ボタンバー)がメインヘッダーの後ろに上にスライドするパターンを使用しています。ページの上部に向かって単純にスクロールすると、タブが表示されます。これにより、ユーザーはアプリ内のどこにいるかを知ることができますが、下向きにブラウジングしている間、親指の価値がある不動産が得られます。

Yik Yak、Facebook、Instagramなどで見られます。

1
Kyle Alwyn