ダブルナビゲーションのための最も効率的なモバイルUI

Question

モバイルブラウザーで人を検索および表示するために使用するWebサイトを設計する。 2つのタイプのナビゲーションが必要です。1つはプライマリ（包括的な機能用）、もう1つはセカンダリ（人物が見つかったら機能用）です。どちらの場合もサブナビゲーション項目が存在する可能性があるため、垂直ナビゲーションが推奨されます。可能な限り多くのナビゲーション機能を試して表示したいと思います...水平セカンダリナビゲーションにアクセスするにはアイテムが多すぎます。また、検索機能をできる限り簡単にしたいと考えています。

このシナリオでは、どのパターンを使用するのが最適ですか？

Mindaugas Vaiciulis · Answer

Dipakによる興味深い質問と優れたビジュアル。ユーザーとさまざまな設計パターンをテストしないと、正しい答えはありません。

モバイルナビゲーションの基本パターン

要約：モバイルナビゲーションは、見つけやすく、アクセス可能で、画面スペースをほとんどとらない必要があります。ナビゲーションを公開し、ハンバーガーで非表示にすることには、それぞれ長所と短所があり、サイトのタイプによって、モバイルナビゲーションの難問に対する解決策が異なります。

トップナビゲーションバー

トップナビゲーションバーは基本的にデスクトップデザインから継承されます。これは、画面上部の主なナビゲーションオプションを列挙する単なるバーです。これは非常に効率的ですが、次の2つの欠点があります。

ナビゲーションオプションが比較的少ない場合にのみ機能します。
スクロールせずに見える範囲で貴重な不動産を占有します。

タブバー

アプリに固有の上部ナビゲーションバーの相対位置を閉じます。ページの上部（ほとんどのAndroid）またはページの下部（ほとんどのiOS）に表示されます。通常、アプリ内のほとんどのページに存在し、ナビゲーションバーと同じ欠点があります。タブバーとナビゲーションバーの1つの重要な違いは、タブバーが永続的であることです。つまり、ユーザーがスクロールしても、タブバーは常に画面に表示されます。ページかどうか。ナビゲーションバーは通常、ページの上部に表示されますが、ユーザーが1つ以上の画面を下にスクロールすると消えます。（ナビゲーションバーの付箋バージョンは画面の上部に表示されたままになるか、ユーザーが上にスクロールし始めるとページの上部に再表示されます。）

ハンバーガーメニュー（およびバリエーション）

ナビゲーションメニューは、メインのナビゲーションオプションを含むメニューで、通常は詳細なオプションを非表示にしますが、要求に応じて表示します。ハンバーガーアイコンはおそらくナビゲーションメニューで最も話題になる記号ですが、他のラベルやアイコンをナビゲーションに使用できます。（実際、サードパーティの調査では、ハンバーガーアイコンの代わりにWordメニューを使用する方がユーザーに少し人気があることが示唆されています。）ナビゲーションメニューの主な利点は、ナビゲーションメニューに多数のナビゲーションオプションを含めることができることです。小さなスペースで、必要に応じてサブメニューも簡単にサポートできます。不利な点は、古い格言が言うように、「見えないところは頭にない」ため、発見されにくいことです。

結論

ナビゲーションを重要かつアクセスしやすくすることは、小さな画面の制限と、UI要素よりもコンテンツを優先する必要があるため、モバイルの課題です。さまざまな基本的なナビゲーションパターンがさまざまな方法でこの課題を解決しようとし、さまざまなユーザビリティの問題に悩まされています。重要なのは、モバイルナビゲーションのタイプを選択することです。これにより、（必然的な）マイナス面が、ユーザーがサイトで実行する可能性が最も高い種類のタスクの影響を最小限に抑えることができます。

ハンバーガーメニューには多数のオプションが用意されていますが、これらのオプションはあまり見つかりません。これらは、主に閲覧サイトに特に適しています。
ナビゲーションバーとタブバーはページ上のスペースを占め、ナビゲーションオプションの数が少ない場合に適切に機能します。
主にタスク指向のサイトでは、ホームページをナビゲーションハブとして使用できます。

より多くの試合メニューパターンがここにあります https://www.nngroup.com/articles/mobile-navigation-patterns/ モバイルパターンについてのLukeWによる素晴らしい講演（メニューが含まれています） https ：//youtu.be/Y-FMTPsgy_Y？t = 2324