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