Windows アプリのナビゲーション デザインの基本
アプリをページの集まりと考えると、ナビゲーションは、ページ間およびページ内を移動する動作を表します。 これはユーザー エクスペリエンスの出発点です。これによって、ユーザーは利用するコンテンツと機能を見つけます。 これは非常に重要ですが、適切な設計が難しい場合もあります。
ナビゲーションには膨大な数の選択肢があります。 以下のような方法で対処できます。
ユーザーに一連のページを順番に移動するように要求します。
ユーザーが任意のページに直接ジャンプできるメニューを提供します。
すべてを 1 つのページに配置し、コンテンツを表示するためのフィルター処理メカニズムを提供します。
1 つのナビゲーション デザインですべてのアプリに対応することはできませんが、アプリの適切な設計を判断するための原則やガイドラインがあります。
優れたナビゲーションの原則
優れたナビゲーション デザインの基本原則から始めましょう。
- 一貫性: ユーザーの期待に応えます。
- シンプルさ: 必要以上のことをしないようにします。
- 明確さ: 明確なパスとオプションを提供します。
Consistency
ナビゲーションは、ユーザーの期待に沿ったものである必要があります。 ユーザーが使い慣れた標準コントロールを使用し、アイコン、場所、スタイルの標準的な規則に従うことで、ナビゲーションがユーザーにとって直感的で予測可能なものになります。
ユーザーは特定の UI 要素が標準の位置にあることを期待します。
シンプルさ
ナビゲーション項目が少ないほど、ユーザーの意思決定がシンプルになります。 重要な移動先に簡単にアクセスできるようにして、重要度の低い項目を非表示にすることで、ユーザーは目的の場所にすばやく移動できるようになります。
なじみのあるナビゲーション メニューにナビゲーション項目を表示する。
多数のナビゲーション オプションでユーザーを圧倒しない。
明確さ
明確なパスを示すと、ユーザーは論理的なナビゲーションを行うことができます。 ナビゲーション オプションをわかりやすくし、ページ間の関係を明確にすることで、ユーザーが自分の位置を見失うことを防止できます。
移動先にはわかりやすいラベルが付けられているため、ユーザーは自分の位置を知ることができます。
一般的な推奨事項
一貫性、シンプルさ、明確さという設計原則を念頭に置いて、一般的な推奨事項を作成しましょう。
- ユーザーのことを考えてください。 アプリ使用時のユーザーの一般的な移動パスを追跡し、ページごとに、ユーザーがそのページを表示している理由と、次にどこに移動しようとしているかを考えてください。
- ナビゲーションの深い階層を避けます。 ナビゲーションのレベルが 2 つを超える場合は、ユーザーに現在の場所を示す階層リンク バーを提供し、ユーザーがすばやく元の場所に戻れるようにします。そうしないと、ユーザーが深い階層に入り込み、簡単に抜けられなくなるおそれがあります。
- "ホッピング" を避けます。ホッピングは、関連するコンテンツがある場合に発生しますが、そこに移動するには、ユーザーが上のレベルに移動し、もう一度下りてくる必要があります。
適切な構造を使う
ナビゲーションの一般的な原則について説明しました。次に、アプリの構造について考えます。 2 種類の一般的な構造があります。フラット構造と階層構造です。
フラット構造/水平構造
フラット構造/水平構造では、ページは横方向に存在します。 どのような順序でもページ間を移動できます。
次のような場合に、フラット構造の使用を推奨します。
- ページをどのような順序でも表示できる場合。
- 各ページはそれぞれ異なるページであり、明確な親/子関係がない場合。
- グループ内のページ数が 8 ページ未満の場合。
(ページ数が多い場合、ユーザーがページがどのように一意であるかを理解したり、グループ内の現在の場所を理解することが困難になる場合があります。それがアプリの問題ではない場合は、先に進み、ページをピアにします。それ以外の場合は、階層構造を使用してページを 2 つ以上の小さなグループに分割することを検討してください)。
階層構造
階層構造では、ページはツリー状の構造に配置されています。 それぞれの子ページの親は 1 つですが、親ページは 1 つ以上の子ページを持つことができます。 子ページにアクセスするには、親ページを経由します。
階層構造体は、多数のページにわたる複雑なコンテンツを配置する場合に適してします。 欠点は、ナビゲーションのオーバーヘッドが発生することです。階層が深くなると、ページからページへの移動するために、多くのクリックが必要となります。
次のような場合に、階層構造の使用をお勧めします。
- 特定の順序でページを移動する必要がある場合。
- ページ間に明白な親子関係がある場合。
- グループ内のページ数が 7 ページを超える場合。
構造を組み合わせる
どちらか一方の構造を選択する必要はありません。多くの適切に設計されたアプリでは、両方を使用します。 アプリでは、トップレベルのページにはフラット構造を使って、任意の順序で参照できるようにし、複雑な関係のあるページには階層構造を使うことができます。
ナビゲーション構造に複数のレベルがある場合は、現在のサブツリー内のピアにのみリンクするピア ツー ピアのナビゲーション要素を使うことをお勧めします。 2 つのレベルを持つナビゲーション構造を示す横の図について考えてみましょう。
- レベル 1 では、ピア ツー ピアのナビゲーション要素によって、ページ A、B、および C へのアクセスが提供されます。
- レベル 2 では、A2 ページのピア ツー ピアのナビゲーション要素は、他の A2 ページにのみリンクしています。 これらのナビゲーション要素は、C サブツリー内にあるレベル 2 のページにはリンクしていません。
適切なコントロールを使用する
ページの構造を決定したら、ユーザーがページ間をどのように移動するかを決定する必要があります。 XAML には、アプリで一貫した信頼性の高いナビゲーション エクスペリエンスを確保するのに役立つさまざまなナビゲーション コントロールが用意されています。
少数の例外を除き、複数のページがあるアプリではフレームを使用します。 通常、アプリにはフレームと、ナビゲーション ビュー コントロールなどの主要なナビゲーション要素を含むメイン ページがあります。 ユーザーがページを選択すると、フレームがページを読み込んで表示します。
同じレベルにあるページへのリンクの横方向の一覧を表示します。 NavigationView コントロールは、上部のナビゲーション パターンを実装します。
上部のナビゲーションは次の場合に使用します。
- 画面上にナビゲーション オプションをすべて表示する場合。
- ご利用のアプリのコンテンツ用にスペースを追加する場合。
- アイコンでは、ご利用のナビゲーション カテゴリを明確に説明できない場合。
上の各レベルにあるページへのリンクの横方向の一覧を表示します。 BreadcrumbBar コントロールは、上部のナビゲーション パターンを実装します。
階層リンクは次の場合に使用します。
- 現在の場所へのパスを表示したい
- ナビゲーションのレベルが多い
- ユーザーが元のどのレベルにも戻れるようにしたい
トップレベルのページへのリンクの縦方向の一覧を表示します。 次の場合に使用します。
- ページがトップレベルに存在する場合。
- ナビゲーション項目が多い場合 (5 個を超える)
- ユーザーが頻繁にページ間を切り替えることを前提としていない場合。
項目の一覧を表示します。 項目を選ぶと、対応するページが詳細セクションに表示されます。 次の場合に使用します。
- ユーザーが頻繁に子項目間を切り替えることを前提としている場合。
- ユーザーが個々の項目や項目のグループに対して高いレベルの操作 (削除や並べ替えなど) を実行できるようにする場合、およびユーザーが各項目の詳細情報の表示や更新を実行できるようにする場合。
リストと詳細は、メールの受信トレイ、連絡先リスト、データ入力に適しています。
埋め込まれたナビゲーション要素は、ページのコンテンツに表示されます。 他のナビゲーション要素はページの全体で一貫性がありますが、それとは異なり、コンテンツに埋め込まれたナビゲーション要素はそれぞれのページに固有のナビゲーション要素です。
次の手順:アプリにナビゲーションのコードを追加する
次の記事 「基本ナビゲーションを実装する」では、コントロールを使用 Frame してアプリ内の 2 つのページ間の基本的なナビゲーションを有効にするために必要なコードを示します。
Windows developer
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示