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

多くの機能を備えたアプリを設計しているとします。機能について考えた結果、明確な領域にそれらの機能を整理できと判断しました。それらの領域は、最終的には、ユーザーがアクセスできるアプリの別個の部分になります。ユーザーがこれらの UI 領域を移動するための簡単な方法を設計する必要があります。このようなアプリには、ユーザーがアプリの各サブ領域に移動する際に使うセントラル アプリケーション ハブが必要です。

たとえば、サッカー チームを管理するためのアプリを設計するとします。このアプリには、いくつかの機能領域 (試合と練習のスケジュールを作成する領域、チーム名簿情報の領域、ストアと選手の統計の領域、さらに過去の試合のビデオ映像に使う領域) が必要です。これらの各 UI 領域に移動する手段をユーザーに提供します。これは、アプリの起動時に表示されるホーム ページを持つセントラル アプリケーション ハブを実装して実現できます。

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

ユーザーは、セントラル UI ハブからアプリケーションの任意の領域に移動できます。サブ領域に移動したら、その時点で必要な UI を表示します。たとえば、サッカー チーム アプリでは、ユーザーはセントラル アプリケーション ハブ ページから、特定の試合の選手の統計情報を確認できるページに移動できます。ユーザーがアプリの特定のサブ領域で作業を終えて、別のサブ領域に移動する場合、まずセントラル アプリケーション ハブに戻ります。ユーザーは、[Scores and Stats] から Calendaring に直接移動することはできません。まずセントラル アプリケーション ハブに戻る必要があります。

注  アプリのさまざまな領域に移動するためのホーム ページを持つセントラル アプリケーション ハブを使うことは、ユーザーがアプリを効率的に操作できる優れた設計です。

アプリケーション ハブをユーザーに視覚的に表示する方法はいくつかあります。ハブ コントロールを使うことをお勧めします。このトピックではこの設計について説明した後、検討できるバリエーションについても示します。

ハブ コントロールをアプリケーション ハブとして使う

Microsoft では、セントラル アプリケーション ハブとして使うことができる、ハブ コントロールという UI コントロールを用意しています。このコントロールを使うと、ユーザーはアプリですべての機能領域に移動することができます。ハブ コントロールは、コントロール全体の背後に背景として表示されるハブ背景画像、アプリの起動時に表示されるホーム セクション、アプリの最上位に UI をセグメント化する追加セクション、という構造になっています。

Music ハブ

ハブ コントロールは、画面の境界を超えて横方向へ拡大する、幅の広い仮想キャンバスをユーザーに表示します。ユーザーは、クリックすることでキャンバスを横方向にセクションごとに移動できます。アプリを起動すると、ハブの最初のセクションが表示されます。ここからは、希望するナビゲーションの動作に応じて使用方法にバリエーションがあります。各バリエーションについて説明します。

ホーム セクション

一番左にあるこの最初のセクションは、アプリのサブ領域に移動するための出発点であるホームとして使うことができます。このセクションには、ユーザーが選ぶことができる領域のメニューが表示されます。前の図に示した Music ハブでは、[ラジオ] を指でタップすると、実際には Music ハブ内のサブアプリケーションであるラジオ ページに移動します。ハブ UI は完全に置き換えられ、ユーザーには [ラジオ] の UI が表示されます。ユーザーが [ポッドキャスト] 領域に移動する場合、ハードウェアの戻るボタンを使ってハブのホーム セクションに戻り、メニュー リストで [ポッドキャスト] エントリをタップします。サブ領域の一覧がディスプレイより長い場合は、ホーム画面でスクロール ビューを使うことができます。

Music ハブのラジオ ページ

ホーム セクションにある移動先の一覧には、完全に新しいアプリに移動できるエントリが含まれていることがあります。たとえば、Music ハブのホーム セクションには、ストアに移動するエントリがあります。これをタップすると、それ自体がハブ コントロールであるストアの音楽サブ領域に移動します。

右側のセクション

ホーム パネルの右側のセクションには、ユーザーが簡単にアクセスできるようにする UI が含まれています。使い方は自由です。サブ領域にさまざまな方法でアクセスできるようにして、ユーザーを混乱させないでください。代わりに、右側でこれらのセクションを使って、サブ領域に含まれている内容に関するある種の概要情報を含めます。たとえば、Music ハブの場合、最近アクセスしたメディアを示す 2 つの追加のセクションがあります。

Music ハブの [履歴] セクションは、サブ領域まで移動する必要がなく、最近視聴したものにすばやくアクセスできるため便利です。[音楽] のサブ領域に移動して特定の曲を聴いた場合、その曲が [履歴] セクションに表示されてすばやくアクセスできるようになります。したがって、この場合、サブ領域でアクセスしたコンテンツにセクションからすばやくアクセスできます。

Facebook アプリは、ハブ コントロールを使ってユーザーが機能を簡単に移動できるようにしているアプリの別の例です。このアプリにも、ユーザーが移動できる領域の一覧が表示される、同じホーム セクションがあります。たとえば、friends エントリをタップすると、友人の一覧を管理する UI に移動します。

最上位のハブ コントロールでは、最上位に表示すると最も役に立つとデザイナーが考えたビューにすばやくアクセスできるようにするため、基本的には右側のセクションが使われます。ハブの most recent セクションは、実際にはサブ領域の UI です。ホーム セクションから移動するには、news feed をタップすると、そのサブ領域に移動します (このサブ領域は実際にはピボット コントロールです)。news feed サブ領域のピボット コントロールには、most recent、photos、links、videos の各項目があります。デザイナーは news feed まで移動した後 most recent に移動することをユーザーに求める代わりに、上部のハブ コントロールのセクションとして表示することにしました。同様のことは、上部のハブ コントロールにある photos セクションと events セクションにも適用されています。

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

画像グリッドを使う

ホーム セクションから移動するための領域の一覧を表示する代わりに、選択可能な画像のグリッドを表示することができます。行うことは同じです。外見が少し異なるだけです。画像を使うと、その選択による移動先を判断しやすい視覚的なアイコンを表示できます。各画像の上にはテキストを重ねて、そのアプリ領域とアクティビティに関する詳しい情報を示すことができます。

3 x 3 のグリッドがある場合、必要に応じて最大 9 枚の画像を配置できます。この画像グリッドをホストするホーム セクションで、ユーザーは任意の画像をクリックして、アプリに用意されたさまざまな機能領域に移動できます。

このホーム セクションは、実際には複数の表示可能なセクション幅にまたがる領域です。たとえば、必要であれば、画像のホーム ページを右側に拡大して、より多くのスペースを占有させることができます。Kelley Blue Book アプリは、次の図に示すようにグリッドが右に伸びています。画像の残りの部分を表示するには、フリックして横方向にパンします。この場合のハブ コントロールのホーム セクションは、幅が 2 倍です。

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

縦方向にスクロールする画像のグリッドを作らないでください。ユーザーにとってかなりわかりにくくなります。

ホーム セクションから開始しない

ハブ コントロールを使って、アプリの機能領域に移動するメニューやハブのように機能するホーム セクションを設置した場合でも、このセクションをアプリの起動時の最初のランディング ポイントとする必要はありません。他のセクションを最初に表示する理由は、効果を高めることだけです。たとえば、映画と上映時間が表示されるアプリがあり、ホーム セクションにはアプリの特定のサブ領域の一覧が表示されるとします。あまり関心のない内容をユーザーに表示する代わりに、最新の大人気映画のグラフィックが表示するセクションを配置できます。このようにして、より目を引く内容をユーザーに表示できます。

eBay アプリを開いても、最初にホーム セクションが表示されるわけではありません。この設計では、代わりに現在注目の取引を含むセクションが最初に表示されます。右にフリックした場合、クリックするとアプリのサブ領域 (Watching、Selling、Buying、Messages) に移動する画像が表示されるアプリケーション ハブ ホーム セクションに移動します。上部に検索テキスト ボックスが使われている点にも注目してください。これは、すばやく検索を行うことができるように上部に配置すると役に立つ UI 要素です。

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

縦方向にスクロールする画像のグリッドを作らないでください。ユーザーにとってかなりわかりにくくなります。

UI 機能領域のカスタマイズされたメニュー

Microsoft によって用意されたハブ コントロールを使う以外の方法もあります。ハブを使うと、最上位に複数のセクションを表示できます。ただし、これらのセクションが必要でない場合もあります。次の図に示すように、代わりに簡単な一覧を 1 つのページに表示することができます。これは、アプリが開いたときにユーザーに表示されるページです。このアプリでは、移動先の各サブ領域のテキスト タイトルと説明の左側でアイコンが使われています。

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

移動可能なサブ領域が芸術的な独自の方法で表示されたグラフィック背景を使って、独特な操作エクスペリエンスを表示することを決定できます。これは、自身のブランドを確立するために行うことができます。一部の種類のエンターテインメント アプリには、さらに当てはまります。魅力的な外見のホーム ページの例を次に示します。

MyComic アプリ

同様のアプリを 1 つにまとめる

既に説明したように、アプリに明確な機能領域が多く存在しているため、それらの機能をそれ自体は別個のアプリに分割することを検討したかもしれません。そうする必要はありません。1 つのアプリのままにすることができます。アプリを開いたときに表示されるメイン画面は、1 つのアプリを構成する実際のサブ アプリケーションにアクセスするためのスタート地点として機能します。このメイン アプリケーション ハブ セクションは、ユーザーがアプリ アイコンをクリックしてアプリを起動すると表示されるページです。

独自の機能領域ごとに別個のアプリを作らないことをお勧めします。これで問題となるのは、ユーザーがアプリを終了してから別のアプリを起動する必要があるという点です。ユーザーが操作するアプリが 9 つあるとします。代わりに、ユーザーが作業を開始するための 1 つのアプリを作り、その 1 つのスタート地点からアプリの各領域にアクセスできるようにすることをお勧めします。アプリの設計者は、ユーザーがセントラル ハブに移動し、用意されているすべての機能が 1 つの中央の画面に表示されるようにしてください。

ナビゲーションのレベル

下すのが難しい決定は、アプリの機能をどのように分割し、どのナビゲーション レベルでユーザーが移動できるようにするかということです。ホーム セクションがあるハブ コントロールを使う場合は、ユーザーが一覧から選択肢をタップしたときに表示される UI を決定する必要があります。選択後、ハブ コントロールから、1 つのページ (または、場合によってはピボット コントロール) などの新しい UI コントロールに移動します。次に示すように、Music ハブのホーム セクションを使ってこれを示します。

Music のアプリケーション ハブ

Music ハブの場合、[ラジオ] を選ぶと、聴いているラジオ局を変更できる 1 つの UI ページが表示されます。このサブ領域では、さらに移動するためのリスト コントロール、ハブ コントロール、ピボット コントロールが使われていません。ただし、ホーム セクションから [音楽] を選ぶと、所有している曲の別のビューが表示されます。次の図は、[音楽] の選択した場合に移動する UI ツリーの一部を示しています。

Music ハブにおける音楽のナビゲーション ツリー

[音楽] 領域が表示されている場合、横方向にスクロールできるピボット コントロールが表示されます。[音楽] の下で最初に表示されるピボット ページは常に [アーティスト] ピボット項目です。そこから、さまざまなピボット項目を使って左右に移動できます。各ピボット項目を使うと、選択可能な曲をさまざまな方法で表示できます。

ユーザーがアプリ内の目的の領域に移動したら、その時点で必要な UI を表示します。アプリの特定のサブ領域から、ユーザーは実際の目的のタスクを行うことができます。この第 2 レベルでは、移動先領域の別の一覧を表示することは推奨されません。メイン ページのハブ コントロールと第 2 レベルの詳細のみ保持するのが最適です。この第 2 レベルからは、ユーザーはホーム セクションに戻ってからアプリの別の領域に移動します。戻るには、ハードウェアの戻るボタンを使います。

背景画像を使う

ハブ コントロールを使うと、すべてのセクションの背後に画像を表示できます。常に同じ画像を使うことも、プログラムにより画像をときどき変えてテーマを変更することもできます。アプリを使っているユーザーの興味に関連する画像を表示できます。あまり雑然としておらず、UI コンテンツと干渉することがない画像を使ってください。

背景画像

複数のホームのパネル

移動先のサブ領域の一覧を含むセクションが複数必要な場合があります。ナビゲーション領域の 2 つの異なる一覧に分割する必要が生じることがあります。この場合、どちらもホーム セクションとして機能する 2 つのセクションが存在することになります。

メイン起動画面

アプリの起動時、セントラル アプリ ハブに直接移動できないことがあります。1 つの理由は、アプリへのアクセスをユーザーに許可する前に、ログオンまたはパスワードによる何らかの種類のロック解除をユーザーに表示する必要がある場合です。アプリに入る前に、ブランド起動画面をユーザーに表示することもできます。

easy diary アプリのログイン ページ UI

関連トピック

ハブ

ピボット