Windows アプリのナビゲーションの基本 - Windows apps

アプリをページのコレクションと考える場合、 ナビゲーション はページ間とページ内を移動する動作を表します。ユーザーエクスペリエンスの開始点であり、ユーザーが関心のあるコンテンツや機能を見つける方法です。それは非常に重要であり、正しく取得することは困難な場合があります。

ナビゲーションには膨大な数の選択肢があります。次の方法があります。

ユーザーが順番に一連のページを通過することを要求します。

ユーザーが任意のページに直接ジャンプできるメニューを提供します。

すべてを 1 つのページに配置し、コンテンツを表示するためのフィルター処理メカニズムを提供します。

すべてのアプリに対して動作するナビゲーションデザインは 1 つはありませんが、アプリに適した設計を決定するのに役立つ原則とガイドラインがあります。

優れたナビゲーション設計の基本原則から始めましょう。

一貫性： ユーザーの期待に応える。
シンプルさ： 必要以上のことをしないでください。
明快さ： 明確なパスとオプションを指定します。

一貫性

ナビゲーションは、ユーザーの期待と一致している必要があります。ユーザーが使い慣れている標準コントロールを使用し、アイコン、場所、およびスタイル設定に関する標準的な規則に従うと、ユーザーにとってナビゲーションが予測可能で直感的になります。

ユーザーは、標準の場所で特定の UI 要素を見つけることを期待しています。

簡略

ナビゲーション項目が少ないほど、ユーザーの意思決定が簡略化されます。重要な宛先に簡単にアクセスし、重要度の低い項目を非表示にすると、ユーザーが必要な場所にすばやくアクセスできるようになります。

使い慣れたナビゲーションメニューにナビゲーション項目を表示します。

多くのナビゲーションオプションでユーザーを圧倒しないでください。

Clarity

クリアパスを使用すると、ユーザーの論理ナビゲーションが可能になります。ナビゲーションオプションを明確にし、ページ間の関係を明確にすることで、ユーザーが迷子にならないようにする必要があります。

宛先には明確なラベルが付いているため、ユーザーは自分の場所を把握できます。

一般的な推奨事項

次に、設計の原則 (一貫性、シンプルさ、明確さ) を取り、それらを使用していくつかの一般的な推奨事項を思い付いてみましょう。

ユーザーについて考えます。ユーザーがアプリを通過する可能性がある一般的なパスをトレースし、ページごとに、ユーザーが存在する理由と、ユーザーが移動する場所について考えます。
深いナビゲーション階層は避けてください。 2 つのレベルのナビゲーションを超える場合は、ユーザーがどこにいるかを示す階層リンクバーを提供し、すばやく元に戻すことができます。そうしないと、ユーザーが離れるのが困難になる深い階層でユーザーが足を引き離すリスクがあります。
"ポゴスティッキング現象" は避けてください。ポゴスティッキング現象は、関連するコンテンツがあるにもかかわらず、それにアクセスするためにはユーザーが一度上の階層に戻ってから再度下の階層に移動しなければならない場合に発生します。

適切な構造を使用する

一般的なナビゲーションの原則に慣れたので、アプリをどのように構成すればよいでしょうか。フラット構造と階層構造の 2 つの一般的な構造があります。

フラット/水平

フラット/ラテラル構造では、ページは並べて存在します。 1 つのページから別のページに任意の順序で移動できます。

次の場合は、フラット構造を使用することをお勧めします。

ページは任意の順序で表示できます。
ページは互いに明確に区別され、明確な親子関係はありません。
グループ内のページ数は 8 ページ未満です。
(ページが多い場合、ユーザーがページがどのように一意であるかを理解したり、グループ内の現在の場所を理解することが困難になる場合があります。それがアプリの問題でないと思われる場合は、先に進んでページをピアにします。それ以外の場合は、階層構造を使用してページを 2 つ以上の小さなグループに分割することを検討してください)。

階層的

階層構造では、ページはツリーのような構造に編成されます。各子ページには 1 つの親がありますが、親には 1 つ以上の子ページを含めることができます。子ページにアクセスするには、親ページを通じてアクセスします。

階層構造は、多数のページにまたがる複雑なコンテンツを整理する場合に適しています。欠点は、ナビゲーションのオーバーヘッドです。構造が深いほど、ページ間で取得するために必要なクリック数が多くなります。

階層構造は、次の場合にお勧めします。

ページは特定の順序で走査する必要があります。
ページ間には明確な親子関係があります。
グループには 7 ページを超えるページがあります。

構造体の組み合わせ

1 つまたは複数の構造を選択する必要はありません。多くの適切に設計されたアプリでは、両方を使用します。アプリでは、任意の順序で表示できる最上位ページのフラット構造と、より複雑なリレーションシップを持つページの階層構造を使用できます。

ナビゲーション構造に複数のレベルがある場合は、ピアツーピアナビゲーション要素が現在のサブツリー内のピアにのみリンクすることをお勧めします。次の 2 つのレベルを持つナビゲーション構造を示す、隣接する図を考えてみましょう。

レベル 1 では、ピアツーピアナビゲーション要素は、ページ A、B、および C へのアクセスを提供する必要があります。
レベル 2 では、A2 ページのピアツーピアナビゲーション要素は、他の A2 ページにのみリンクする必要があります。 C サブツリー内のレベル 2 ページにはリンクしないでください。

適切なコントロールを使用する

ページ構造を決定したら、ユーザーがそれらのページ間を移動する方法を決定する必要があります。 XAML には、アプリで一貫性のある信頼性の高いナビゲーションエクスペリエンスを確保するために役立つさまざまなナビゲーションコントロールが用意されています。

Frame

例外はほとんどありませんが、複数のページを持つアプリではフレームが使用されます。通常、アプリには、フレームとナビゲーションビューコントロールなどの主要なナビゲーション要素を含むメインページがあります。ユーザーがページを選択すると、フレームが読み込んで表示されます。

上部のナビゲーション

同じレベルのページへのリンクの水平方向の一覧を表示します。 NavigationView コントロールは、トップナビゲーションパターンを実装します。

トップナビゲーションは、次の場合に使用します。

画面にすべてのナビゲーションオプションを表示する場合。
アプリのコンテンツに対してより多くの領域が必要です。
アイコンでナビゲーションカテゴリを明確に記述することはできません。

タブ

タブとそれぞれのコンテンツの水平セットを表示します。 TabView コントロールは、複数のページ (またはドキュメント) を表示しながら、タブを再配置、開く、または閉じる機能をユーザーに提供する場合に便利です。

次の場合にタブを使用します。

ユーザーがタブを動的に開いたり、閉じたり、並べ替えたりできるようにします。
一度に多数のタブが開いている可能性があります。
ユーザーは、Microsoft Edgeなどの Web ブラウザーと同様に、タブを使用するアプリケーション内のウィンドウ間でタブを簡単に移動できることが期待されます。

ブレッドクラム

各上位レベルのページへのリンクの水平方向の一覧を表示します。 BreadcrumbBar コントロールは、階層リンクナビゲーションパターンを実装します。

階層リンクは、次の場合に使用します。

現在の場所へのパスを表示する
多くのレベルのナビゲーションがある
ユーザーが以前のレベルに戻ることができると想定している

左側のナビゲーション

最上位ページへのリンクの垂直方向の一覧を表示します。次の場合に使用します。

ページは最上位レベルに存在します。
ナビゲーション項目が多数あります (5 つ以上)
ユーザーが頻繁にページを切り替えるとは思われません。

リスト/詳細

項目の一覧を表示します。項目を選択すると、詳細セクションに対応するページが表示されます。次の場合に使用します。

ユーザーは子項目を頻繁に切り替える必要があります。
ユーザーが個々のアイテムまたは項目のグループに対して、削除や並べ替えなどの高度な操作を実行できるようにし、ユーザーが各項目の詳細を表示または更新できるようにする必要があります。

リスト/詳細は、電子メールの受信トレイ、連絡先リスト、データ入力に適しています。

ハイパーリンク

埋め込みナビゲーション要素は、ページのコンテンツに表示できます。ページ間で一貫性を保つ必要がある他のナビゲーション要素とは異なり、コンテンツ埋め込みナビゲーション要素はページ間で一意です。

独自のバックスタックナビゲーションを提供する場合は、エクスペリエンスが他のアプリと一致している必要があります。ナビゲーションアクションには、次のパターンに従うことをお勧めします。

ナビゲーションアクション	ナビゲーション履歴に追加しますか?
ページ間、異なるピアグループ	はいこの図では、ユーザーはアプリのレベル 1 からレベル 2 に移動し、ピアグループをまたぐので、ナビゲーションがナビゲーション履歴に追加されます。次の図では、ユーザーは同じレベルの 2 つのピアグループ間を移動し、もう一度ピアグループ間を移動するため、ナビゲーションがナビゲーション履歴に追加されます。
ページ間、同じピアグループ、画面上のナビゲーション要素なしユーザーは、同じピアグループを持つページ間を移動します。両方のページに直接ナビゲーションを提供する画面上のナビゲーション要素 ( NavigationView など) はありません。	はい次の図では、ユーザーは同じピアグループ内の 2 つのページ間を移動し、ナビゲーションをナビゲーション履歴に追加する必要があります。
ページ間(同じピアグループ)、画面上のナビゲーション要素ユーザーは、同じピアグループ内のあるページから別のページに移動します。どちらのページも、 NavigationView などの同じナビゲーション要素に表示されます。	事によりけりですはい。2 つの注目すべき例外を除き、ナビゲーション履歴に追加します。アプリのユーザーがピアグループ内のページを頻繁に切り替える必要がある場合、またはナビゲーション階層を保持する場合は、ナビゲーション履歴に追加しないでください。この場合、ユーザーが戻って押すと、ユーザーが現在のピアグループに移動する前に最後のページに戻ります。
一時的な UI を表示するアプリには、ダイアログ、スプラッシュ画面、スクリーンキーボードなどのポップアップウィンドウまたは子ウィンドウが表示されるか、アプリが複数選択モードなどの特別なモードに入ります。	いいえユーザーが [戻る] ボタンを押したら、一時的な UI を閉じて (スクリーンキーボードを非表示にし、ダイアログをキャンセルするなど)、一時的な UI を生成したページに戻ります。
アイテムを列挙するアプリは、リスト/詳細リストで選択した項目の詳細など、画面上のアイテムのコンテンツを表示します。	いいえ項目の列挙は、ピアグループ内を移動するのと似ています。ユーザーが押し戻したら、アイテム列挙を持つ現在のページの前にあるページに移動します。