UWP アプリのナビゲーション デザインの基本

アプリをページの集まりと考えると、ナビゲーションという言葉は、ページ間およびページ内を移動する動作を表します。 これはユーザー エクスペリエンスの出発点です。 これによってユーザーは、利用するコンテンツと機能を見つけます。 これは非常に重要ですが、適切な設計が難しい場合もあります。

重要な API: Frame クラスPivot クラスNavigationView クラス

適切な設計が難しい理由の 1 つは、アプリの設計者には膨大な数の選択肢があることです。 たとえば書籍を設計する場合であれば、選択肢はシンプルで、各章の順序を設計すれば済みます。 アプリの場合は、書籍に例えるなら、ユーザーが順に移動するように、一連のページのナビゲーションを作成することも可能です。 または、ユーザーが必要なページに直接移動できるメニューを提供することも可能ですが、多数のページがある場合には、ユーザーを混乱させることになります。 または、すべてのコンテンツを 1 つのページに配置し、フィルタリングして表示するメカニズムを提供することも可能です。

1 つのナビゲーション デザインですべてのアプリに対応することはできませんが、アプリの適切な設計を行うための、いくつかの原則やガイドラインがあります。

優れた設計の原則

優れたナビゲーション デザインの基盤を作成するための、基本的な原則から始めましょう。調査によると、次のような原則が重要です。

  • 一貫性を保ちます。ユーザーの期待に応えます。
  • シンプルにします。必要以上のことをしないようにします。
  • クリーンにします。ナビゲーション機能がユーザーを妨げないようにします。

一貫性を保つ

ナビゲーションは、ユーザーの期待に沿ったものであり、アイコン、位置、スタイルなどの標準規則に沿ったものである必要があります。

たとえば、次の図では、ユーザーが通常、ナビゲーション ウィンドウやコマンド バーなどの機能があると期待する場所を示しています。 デバイス ファミリによって、ナビゲーション要素には独自の規則があります。 たとえば、ナビゲーション ウィンドウは、タブレットでは通常、画面の左側に表示されますが、モバイル デバイスでは画面の上部に表示されます。

推奨されるナビゲーション要素の位置
ユーザーは特定の UI 要素が標準の位置にあることを期待します。

シンプルにする

ナビゲーション デザインでもう 1 つの重要な要素は、Hick-Hyman の法則です。これは多くの場合、ナビゲーションの選択肢に関して当てはまります。 この法則によると、メニューにはなるべく少ない選択肢を含むことが推奨されます。 選択肢が多いほど、ユーザーの操作に時間がかかります。ユーザーが新しいアプリを使う場合には、特に当てはまります。

シンプルなメニューと複雑なメニュー
左側の例では、ユーザーが選ぶ選択肢が少なく、右側の例では、多数の選択肢があります。 Hick-Hyman の法則によると、左側のメニューはユーザーにとって、より理解しやすく、利用しやすいメニューです。

クリーンにする

ナビゲーションに必要な最後の特徴は、さまざまな場合のナビゲーションの物理的な操作における、クリーンな操作です。 これについては、ユーザーの立場に立って、自分のデザインを見直してみる必要があります。 ユーザーとその動作を理解する必要があります。 たとえば、料理アプリを設計している場合、買い物リストやタイマーへの簡単なアクセスの提供を検討することができます。

一般的な 3 つの規則

一貫性、シンプル、クリーンという設計原則を念頭に置いて、一般的な規則を作成します。 これらを出発点として利用し、必要に応じて調整することを推奨します。

  1. ナビゲーションの深い階層を避けます。 ユーザーに最適なナビゲーションのレベルの数はどれだけでしょうか。 トップレベルのナビゲーションと、その下に 1 つのレベルのナビゲーションがあれば、通常は十分です。 3 レベルよりも多いナビゲーションでは、シンプルな操作の原則に反します。 ユーザーは迷ってしまい、深い階層から抜け出せなくなる可能性があります。

  2. ナビゲーションの選択肢が多すぎないようにします。 各レベルで 3 ~ 6 個のナビゲーション要素とすることが最も一般的です。 (特に階層のトップ レベルで) それより多いナビゲーションが必要な場合、1 つアプリであまりに多くのことをしようとしています。アプリを複数に分割することを検討する必要があります。 アプリのナビゲーション要素が多すぎるのは、多くの場合、一貫性がなく関係のない目的によるものです。

  3. 「ホッピング」を避けます。 ホッピングとは、関連するコンテンツに移動するために、ユーザーが上のレベルに移動して、それから下のレベルに移動する必要があるナビゲーションを意味します。 ホッピングは、目的を達するために、不要なクリックや不要な操作を必要とするため、クリーンな操作の原則に反します。次の例では、一連の関連するコンテンツを見るという目的です。 (検索と参照を行うとき、必要な幅と深さを提供するためにホッピングが唯一の方法である場合は、このルールの例外となります。)

    ホッピングの例
    アプリのナビゲーションでのホッピング — ユーザーは緑の [戻る] 矢印を使って、メイン ページに戻ってから、[プロジェクト] タブにナビゲーションする必要があります。
    スワイプによる水平方向ナビゲーションにより、ホッピングを解決する
    アイコンを使ってホッピングの問題を解決できます (緑のスワイプ ジェスチャに注目してください)

適切な構造を使う

ナビゲーションの一般的な原則と規則について説明しました。次に、ナビゲーションに関して最も重要な決定を行います。それはアプリの構造です。 2 種類の一般的な構造があります。フラット構造と階層構造です。

フラット構造/水平構造

フラット構造/水平構造では、ページは横方向に存在します。 どのような順序でもページ間を移動できます。

Pages arranged in a flat structure
フラット構造で配置されたページ

フラット構造には多くのメリットがあります。シンプルで、理解が容易です。ユーザーは、中間ページを経由する必要なく、特定のページに直接移動できます。 一般に、フラット構造は優れていますが、すべてのアプリに対応できるわけではありません。 アプリに多数のページがある場合には、フラット構造では圧倒されてしまいます。 ページを特定の順序で表示する必要がある場合には、フラット構造は適しません。

次のような場合に、フラット構造の使用を推奨します。

  • ページをどのような順序でも表示できる場合。
  • 各ページはそれぞれ異なるページであり、明確な親/子関係がない場合。
  • グループ内のページ数が 8 ページよりも少ない場合。
    グループ内のページ数が 7 ページを超える場合、ページが一意であるかどうかを判断したり、グループ内の現在の位置を把握したりするのが難しくなる場合があります。 このことがアプリでは問題にはならないと考えられる場合は、ページをピアとして作成します。 このことが問題となる可能性がある場合は、階層構造を使って、ページを 2 つ以上の小さなグループに分割することを検討してください (ハブ コントロールを使うと、ページをカテゴリにグループ化できます)。

階層構造

階層構造では、ページはツリー状の構造に配置されています。 それぞれの子ページの親は 1 つだけですが、親ページは 1 つ以上の子ページを持つことができます。 子ページにアクセスするには、親ページを経由します。

Pages arranged in a hierarchy
階層構造で配置されたページ

階層構造は、多数のページにわたる複雑なコンテンツを配置する場合、またページを特定の順序で表示する場合に適してします。 欠点は、階層構造のページでは、ナビゲーションのオーバーヘッドが発生することです。階層が深くなると、ユーザーがページからページへの移動するために、多くのクリックが必要となります。

次のような場合に、階層構造の使用を推奨します。

  • ユーザーが特定の順序でページ間を移動する必要がある場合。 その順序を強制的に適用するように階層を配置します。
  • グループ内の各ページ間には明確な親子関係がある場合。
  • グループ内のページ数が 7 ページを超える場合。
    グループ内のページ数が 7 ページを超える場合、ページが一意であるかどうかを判断したり、グループ内の現在の位置を把握したりするのが難しくなる場合があります。 このことがアプリでは問題にはならないと考えられる場合は、ページをピアとして作成します。 このことが問題となる可能性がある場合は、階層構造を使って、ページを 2 つ以上の小さなグループに分割することを検討してください (ハブ コントロールを使うと、ページをカテゴリにグループ化できます)。

構造を組み合わせる

1 つの構造のみを選択する必要はありません。優れた設計のアプリの多くは、フラット構造と階層構造の両方を使用しています。

ハイブリッド構造のアプリ

これらのアプリでは、トップレベルのページにはフラット構造を使って、任意の順序で参照できるようにし、複雑な関係のあるページには階層構造を使っています。

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

2 つのサブツリーを含むアプリ

  • レベル 1 では、ピア ツー ピアのナビゲーション要素によって、ページ A、B、C、および D へのアクセスが提供されます。
  • レベル 2 では、A2 ページのピア ツー ピアのナビゲーション要素は、他の A2 ページにのみリンクしています。 これらのナビゲーション要素は、C サブツリー内にあるレベル 2 のページにはリンクしていません。

2 つのサブツリーを含むアプリ

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

ページの構造を決定したら、ユーザーがページ間をどのように移動するかを決定する必要があります。 UWP では、さまざまなナビゲーション コントロールを提供しています。 これらのコントロールは、すべての UWP アプリで利用できるため、それらを使用すると、一貫性と信頼性を備えたナビゲーション エクスペリエンスを実現できます。

コントロール 説明
フレーム 少数の例外を除き、複数のページを持つアプリでは、フレームを使用しています。 通常のセットアップでは、アプリには、フレームとナビゲーション ビュー コントロールなどの主要なナビゲーション要素を含むメイン メージがあります。 ユーザーがページを選択すると、フレームがページを読み込んで表示します。
タブとピボット

Tab-based navigation
同じレベルにあるページへのリンクの一覧を表示します。

次のような場合に、タブ/ピボットを使います。

  • ページ数が 2 ~ 5 ページの場合。

    5 ページを超える場合でもタブ/ピボットを使うことはできますが、すべてのタブ/ピボットを画面に収めることが難しくなることがあります。

  • ユーザーが頻繁にページ間を切り替えることを前提としている場合。
ナビゲーション ビュー

A navigation pane
トップレベルのページへのリンクの一覧を表示します。

次のような場合に、ナビゲーション ウィンドウを使います。

  • ユーザーが頻繁にページ間を切り替えることを前提としていない場合。
  • ナビゲーション操作の速度を低下させて、領域を節約する必要がある場合。
  • ページがトップレベルに存在する場合。
マスター/詳細

Master/details
項目の概要の一覧 (マスター ビュー) が表示されます。 項目を選ぶと、対応する項目ページが詳細セクションに表示されます。

マスター/詳細要素を使う場合

  • ユーザーが頻繁に子項目間を切り替えることを前提としている場合。
  • ユーザーが個々の項目や項目のグループに対して高いレベルの操作 (削除や並べ替えなど) を実行できるようにする場合、およびユーザーが各項目の詳細情報の表示や更新を実行できるようにする場合。

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

戻る ユーザーは、アプリ内のナビゲーション履歴や、デバイスによってはアプリ間を移動できます。 詳しくは、「ナビゲーション履歴と前に戻る移動」をご覧ください。
ハイパーリンクとボタン コンテンツに埋め込まれたナビゲーション要素は、ページのコンテンツに表示されます。 他のナビゲーション要素はページのグループやサブツリー全体で一貫性がありますが、それとは異なり、コンテンツに埋め込まれたナビゲーション要素はそれぞれのページに固有のナビゲーション要素です。

次の手順: アプリにナビゲーションのコードを追加する

次の記事「基本的なナビゲーションを実装する」では、アプリで基本的なナビゲーションを行うための、XAML と Frame コントロールを使用するために必要なコードを説明します。