エクスポート (0) 印刷
すべて展開

Windows Phone のホーム ページ メニュー (Panorama コントロールまたは Pivot コントロール) を持つセントラル アプリ ハブ

2013/12/05

対象: Windows Phone 8 | Windows Phone OS 7.1

今、あなたは多くの機能を持つアプリをデザインしているとしましょう。そしてそれらの機能をいくつかのエリアに分けようと考えているかもしれません。その場合、それらのエリアはアプリ内でそれぞれ独立した部分となり、ユーザーは必要に応じて各部分を訪れることになります。このため、ユーザーが各 UI エリアを移動しやすいようにデザインしなければなりません。このようなタイプのアプリには、ユーザーが各サブエリアに移動できるようなセントラル アプリケーション ハブが必要です。

たとえば、サッカー チームを管理するアプリのデザインを考えてみましょう。このアプリには、試合や練習のスケジュール、チームの名簿、スコアと選手の統計、過去の試合のビデオなどのいくつかの機能エリアが必要となります。それぞれの UI エリアにユーザーが簡単に移動できるようにするにはどうすればよいでしょうか。この場合、アプリを起動したときに表示されるホーム ページという形で、セントラル アプリケーション ハブを実装する方法があります。

UX_AppNavModels_01

サッカー チーム管理用のセントラル アプリケーション ハブ UI

ユーザーは、アプリケーション内のすべてのエリアにこのセントラル UI ハブから移動することができます。サブエリアに移動した後は、そのエリアで必要となる UI のみが表示されます。たとえば、サッカー チーム アプリのセントラル アプリケーション ハブ ページから、特定の試合での選手の統計を表示できるページに移動します。そのページでの作業を終えて別のサブエリアに移動するには、まずセントラル アプリケーション ハブに戻ります。ユーザーは [スコアと統計] から [カレンダー] に直接移動することはできません。まずセントラル アプリケーション ハブに戻る必要があります。

ヒントヒント:

このように、ホーム ページとして表示されるセントラル アプリケーション ハブを介してアプリの各エリアに移動するというのは、ユーザーが効率的にアプリの操作を行うことができる非常に優れたデザインです。

アプリケーション ハブをユーザーに視覚的に表示する方法はいくつかあります。Windows Phone Panorama コントロールを使用することをお勧めします。このトピックでは、このデザインについて説明し、またそのバリエーションも紹介します。

このトピックは、次のセクションで構成されています。

Microsoft は、セントラル アプリケーション ハブとして使用できる、Panorama コントロールと呼ばれる UI コントロールを提供しています。このコントロールを使うことで、ユーザーはアプリのすべての機能エリアに移動することができます。Panorama コントロールは、コントロール全体の背後に置かれるパノラマのバックグラウンド画像、アプリ起動時に表示されるホーム パネル、そしてアプリの最上位で UI を分割する追加パネルで構成されています。

UX_AppNavModels_02

[ミュージック+ビデオ] ハブ

Panorama コントロールは、画面領域より大きなキャンバス サーフェイスを提供します。ユーザーはパネル間をフリックして、キャンバス上を左右に移動することができます。アプリが起動すると、ユーザーはパノラマの最初のパネルに移動します。ここから先は、どのように移動したいかに応じて、さまざまなバリエーションから選択することができます。それぞれのバリエーションについて説明します。

一番左にある最初のパネルは、アプリのサブエリアへの移動を開始するためのホーム ページとして使用できます。このパネルにはエリアのメニューが表示され、ユーザーはその中から移動先を選択することができます。前述の図に示した [ミュージック+ビデオ] ハブのアプリでは、[ラジオ] をタップすると、ラジオ ページに移動します。このページは実際は [ミュージック+ビデオ] ハブ アプリ内にあるサブ アプリケーションです。パノラマ UI は完全に置き換えられ、ユーザーには [ラジオ] UI が表示されます。ユーザーが [ポッドキャスト] エリアに行きたくなったら、まずハードウェアの [戻る] ボタンを使ってパノラマ ホーム パネルに戻り、その後メニュー リストの [ポッドキャスト] をタップします。サブエリアのリストが画面に入りきらない場合は、ホーム パネルでスクロール ビューを使うことができます。

UX_RadioApp

Windows Phone 7 用の [ミュージック+ビデオ] ハブ アプリの [ラジオ] ページ

ホーム パネル内の移動先リストには、まったく別のアプリを起動するエントリを含めることもできます。たとえば、[ミュージック+ビデオ] ハブ アプリのホーム ページには、Windows Phone Store に移動するためのエントリもあります。これをタップすると、Store の [ミュージック] サブエリアに移動します。これ自体も 1 つの Panorama コントロールです。

ホーム パネルの右側のパネルには、ユーザーが簡単にアクセスできるように、必要な UI を配置します。このパネルの使い方は自由です。別の方法でアクセスするサブエリアを含めると、ユーザーが混乱します。このため、これら右側のパネルには、サブエリアの内容に関する何らかの要約情報を含めることをお勧めします。たとえば、[ミュージック+ビデオ] アプリの場合は、最近アクセスしたメディアを表示するパネルが 2 つ用意されています。

この [ミュージック+ビデオ] アプリの [履歴] パネルを使うと、サブエリアに移動することなく、最近視聴した音楽やビデオにすばやく移動することができます。[ミュージック] サブエリアに移動してある曲を聴くと、その曲が [履歴] パネルに表示されるので、後で聴きたいときにすぐにアクセスできます。つまりこの例では、このパネルは、サブエリアでアクセスしたことのあるコンテンツにすばやく戻るために使われています。

ユーザーがさまざまな機能に簡単に移動できるようにするために Panorama コントロールを使っているもう 1 つの例に、Facebook アプリがあります。このアプリにも、ユーザーが移動できるエリアがリストされたホーム パネルがあります。たとえば、[友だち] エントリをタップすると、友人のリストを操作するための UI に移動します。

基本的に、最上位の Panorama コントロールの右側のパネルは、特定の項目 (最上位からアクセスできればユーザーにとって便利だろうとデザイナーが考える項目) にすばやくアクセスできるようにするために使われます。パノラマ内の [最近使用した順] パネルは、実際はサブエリアの UI です。ホーム パネルからここに移動するには、[ニュース フィード] をタップします。すると Pivot コントロール内でこのサブエリアに移動します。このサブエリアも実際は Pivot コントロールです。[ニュース フィード] サブエリアの Pivot コントロールには、[最近使用した順]、[フォト]、[リンク]、[ビデオ] のページがあります。これは、いったん [ニュース フィード] に移動してから [最近使用した順] に移動するより、これらが最上位の Panorama コントロールのパネルに表示された方が便利だろうとデザイナーが考えた結果です。最上位の Panorama コントロールにある [フォト] や [イベント] パネルも同様です。

UX_AppNavModels_03

Facebook アプリのセントラル アプリケーション ハブ UI

ホーム ページから移動できるエリアのリストを表示するよりも、グリッドに配置したイメージから選択できるようにしたいとお考えかも知れません。実行できることは同じですが、見た目が少し異なります。視覚的に表現することで、その選択肢を選んだ結果どこに移動するかがわかりやすくなる場合があります。また、各イメージ上に、そのアプリのエリアや動作に関する情報を提供するためのテキストをオーバーレイすることもできます。

3 x 3 グリッドの場合なら、必要に応じて最大 9 個のイメージを選択肢として表示できます。ユーザーは、イメージ グリッドをホストしているホーム パネル上で任意のイメージをクリックすることで、アプリ内のさまざまな機能エリアに移動することができます。

ホーム パネルは、一度に表示可能なパネル幅を超える大きさにすることもできます。たとえば、イメージを並べたホーム パネルを必要に応じて少し右側に広げることができます。次の図に示す Kelley Blue Book アプリではグリッドが右側に伸びています。表示されていない部分を見るには、フリックして横にパンします。この場合の Panorama コントロール ホーム パネルは 2 倍幅のパネルです。

UX_AppNavModels_04

Kelley Blue Book アプリのアプリケーション ハブ UI

イメージ グリッドを縦に長くするとユーザーを混乱させる恐れがありますので避けてください。

Panorama コントロールを使用して、ホーム パネルをアプリの各機能エリアに移動するためのメニューやハブとして使用する場合でも、ホーム パネルをアプリ起動時の初期画面にする必要はありません。ホーム パネル以外のパネルを初期画面にする一番の理由は、強いインパクトを与えるためです。たとえば映画やコンサートのスケジュールを教えてくれるアプリをデザインする際に、ホーム パネルにはアプリのサブエリアに移動するリストを表示したいとします。しかしこのようなリストはあまりインパクトがありません。代わりに、最新話題作の映画の画像を貼り付けたパネルを初期画面にしてはどうでしょう。このようにすると、よりユーザーをひきつけることができます。

eBay アプリでも同様に、最初に表示されるのはホーム パネルではありません。代わりに、最新のお勧め商品が初期画面として表示されます。ここから右にフリックするとアプリケーション ハブのホーム パネルに移動し、そこから [注目の品]、[売る]、[買う]、[メッセージ] のイメージをタップして、各アプリのサブエリアに移動することができます。また、上部には検索ボックスが用意されています。目的のものをすばやく見つけるには、画面上部に置かれたこのような検索ボックスが役立ちます。

UX_AppNavModels_05

eBay アプリのアプリケーション ハブ UI

Microsoft が提供する Panorama コントロールを使わないという選択肢もあります。パノラマを使用すると、最上位に複数のパネルを提供することができます。しかし複数のパネルが必要ない場合もあります。以下の例では、1 つのページにシンプルなリストが 1 つ置かれています。これが、アプリを開いたときに表示されるページです。このアプリでは、テキスト形式のタイトルと説明の左にアイコンがあり、そこからサブエリアに移動することができます。

UX_AppNavModels_06

Easy Diary アプリのアプリケーション ハブ UI

または、グラフィックを使ってサブエリアへのアクセスをアーティスティックに表現して、楽しいインタラクションをユーザーに提供したいとお考えかも知れません。これはブランド イメージ戦略としても有効です。このような方法はエンターテインメント系のアプリに適しています。以下はビジュアルに趣向を凝らしたホーム ページの例です。

UX_AppNavModels_07

Mycomic アプリ

既に述べたように、アプリには多くの独立した機能エリアがあるため、それらの機能を個別のアプリに分割した方がよいとお考えかも知れません。しかし、個別のアプリに分けず、1 つのアプリにまとめておくこともできます。アプリが開いたときに表示されるメイン画面は、アプリを実際に構成している各サブアプリケーションにアクセスするための開始地点として機能します。このメイン アプリケーション ハブ ページが、アプリのアイコンをクリックして起動したときに表示される画面です。

それぞれの機能を実行するエリアごとに個別の Windows Phone アプリケーションを作成することはお勧めしません。個別のアプリケーションにしてしまうと、ユーザーは別の機能にアクセスするたびに 1 つのアプリを閉じて別のアプリを開かなければなりません。多数のアプリケーションを終了したり起動しなおしたりするのは面倒です。それよりも、1 つのアプリケーションを起動すればそこからアプリ内のさまざまな機能エリアにアクセスできるようにすることをお勧めします。アプリのデザイナーの目的は、ユーザーをアプリのセントラル ハブにひきつけ、その画面上で、アプリケーションが提供するすべての機能がわかるようにすることです。

アプリの機能をどのように分割し、ユーザーにどのようなレベルのナビゲーションを提供するかは、難しい問題です。ホーム パネルで Panorama コントロールを使用する場合は、ユーザーがリストから項目をタップしたときにどの UI が表示されるかを決定する必要があります。項目を選択するとパノラマ アプリケーション ハブから離れ、単一ページや Pivot コントロールで構成される新しい UI コントロールに移動します。[ミュージック+ビデオ] ハブ アプリのホーム ページを例にとって説明しましょう。

UX_AppNavModels_08

[ミュージック+ビデオ] のアプリケーション ハブ

[ミュージック+ビデオ] ハブ アプリの場合、[ラジオ] は、ラジオの選局ができる単一の UI ページで構成されています。このサブエリアにはリストも Panorama コントロールも Pivot コントロールもなく、ここから先に進むことはできません。しかし、ホーム ページから [ミュージック] を選択した場合は、所有している曲に関するさまざまなビューが表示されます。次の図に、[ミュージック] から移動できる UI ツリーの一部を示します。

UX_AppNavModels_09

[ミュージック+ビデオ] アプリのナビゲーション ツリー

[ミュージック] エリアにいるときは、水平方向にスクロールできる Pivot コントロールが表示されます。[ミュージック] の次に移動できるページは常に [アーティスト] ピボット ページです。ここから左右に移動して別のピボット ページに移動できます。各ピボット ページでは、さまざまな選択肢の中からユーザーが選んだ方法で曲を表示します。

ユーザーがアプリ内で特定のエリアに移動したときには、その時点で必要となる UI が表示されなければなりません。いずれのアプリのサブエリアからでも、ユーザーが希望の操作を実行できるようにしておく必要があります。この 2 番目のレベルで、さらに別のエリアに移動するためのリストを表示することはお勧めしません。メイン ページの Panorama コントロールと第 2 レベルの詳細だけという構成にしておくことをお勧めします。ユーザーはこの第 2 レベルからいったんホーム ページに戻り、そこからアプリの別のエリアに移動します。このときに使用するのは、ハードウェアの [戻る] ボタンです。

Panorama コントロールでは、すべてのパネルにまたがるイメージを表示することができます。常に同じイメージを使うこともできますし、テーマを定期的に変更するようプログラムしておくこともできます。アプリの使用に応じて、ユーザーの興味に即したイメージを表示することもできます。UI コンテンツを見にくくしないように、あまりごちゃごちゃとしたイメージは避けてください。

UX_AppNavModels_10

バックグラウンド画像

移動先のサブエリアのリストを表示するパネルが複数必要になることがあります。移動先のエリアが 2 つに分かれている場合などです。その場合、ホーム パネルとして動作するパネルを 2 つ使います。

アプリを起動したときに、セントラル アプリケーション ハブに直接移動できないケースもあります。ユーザーがアプリにアクセスする前に、ログオン画面やパスワードによるアンロックの画面を表示したい場合などです。また、アプリに入る前にブランド ページを表示したい場合もあります。

UX_AppNavModels_11

Easy Diary アプリのログイン ページ UI

表示:
© 2014 Microsoft