モバイル ブロードバンド アプリと他の Windows コンポーネントとの統合

Windows 10 のユーザー インターフェイス (UI) サーフェスを使用して、モバイル ブロードバンド アプリの全体的なエクスペリエンスを向上させることができます。

レイアウト、ナビゲーション、コマンド、アニメーション、タッチ操作、スナップとスケーリング、コントラクトと機能、タイルと通知、UI コントロール、クラウドへのアプリ ローミング、原理に関する追加のユーザー エクスペリエンス設計ガイドラインについては、「UWP アプリの UX ガイドラインの索引」を参照してください。

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

アプリの設定

アプリの設定を使用して、アプリの構成に適した設定を組み込むことができます。 その例を次に示します。

  • サインインとサインアウト

  • ユーザープロファイルの表示と編集

  • 請求先住所の変更

  • 支払オプションの表示と編集

  • マーケティング設定の表示と設定

エラーのユーザー エクスペリエンス

全般

モバイル ブロードバンド アプリでは、適切に処理しなければならないエラー ケースが多数発生する可能性があります。 一般的な例をいくつか次に示します。

  • Device is missing or unplugged (デバイスが見つかりません。またはデバイスが取り外されています) SIM やドングルなどのデバイスが見つからないか、取り外されている場合に表示されます。

  • Locked device (デバイスがロックされています) 接続されているデバイスがユーザーにロックされていると表示されます。

  • Internet connectivity lost (インターネット接続が失われました) ネットワーク接続が検出されない場合に表示されます。

  • Multiple devices are plugged in (複数のデバイスが接続されています) アダプターが組み込まれており、外部ドングルが接続されている場合に表示されます。 このような場合は、通知バーにエラーを表示することをお勧めします。

  • Form field validation errors (フォーム フィールド検証エラーです) ユーザーがフォームに誤った情報を入力すると表示されます。 エラーが関連付けられているフィールドをユーザーが認識できるように、検証エラーはインラインで表示する必要があります。

エラーの表示方法の詳細については、Laying out your UI のレイアウト」を参照してください。 次の例では、通知バーをページの上部に表示しています。

Screenshot of a notification bar displaying errors.

データ使用量に関わるエラー

次のエラー ケースは、次の方法で概要ページに表示されます。

  • ユーザーのプランの有効期限が近い場合: 画面上部にあるバーを使用して、ユーザーのプランの有効期限が近付いていることを知らせます。

  • データ使用量の上限を超えた場合 データ バーが満杯になっており、問題について説明し、ユーザーが実行しなければならない手順を知らせるインライン メッセージも必要です。 または、データ容量を超過した旨の使用状況メッセージをページの上部にある通知バーに表示することもできます。

  • プランの有効期限が切れた場合: 概要ボックスの上部にあるバーを使用して、問題と、ユーザーが実行できるアクションについて説明します。 この場合、データ使用量、支払サイクル、ローミング情報は表示されません。

  • 国際ローミング: 概要セクションの下部にローミングを示します。

アプリ ビュー

アプリはアダプティブであり、次のような複数のレイアウトに適合できる必要があります。

  • 別のアプリを使用して左右に並べて表示

  • 塗りつぶし

  • キーボードの起動

    タッチ キーボードが起動したら、フォーム フィールドなどの要素が適切にスクロールすることを確認してください。

次の例は、別のアプリを使用してページを左右に並べて表示する方法を示しています。

Screenshot of a mobile broadband app's landing page displayed side by side with another app.

Screenshot of a mobile broadband app's services page displayed side by side with another app.

ハイ コントラスト モードやスクリーン リーダーの準備など、アプリ ビューからアプリにアクセスできることを確認します。 アプリをアクセスしやすくする方法の詳細については、「JavaScript を使用している UWP アプリにおけるアクセシビリティ」を参照してください。

起動ポイント

モバイル ブロードバンド アプリは、[すべてのアプリ] ビュー、Windows 接続マネージャー、またはトースト通知を通じてユーザーが入手できるようになります。

Diagram showing various entry points to launch a mobile broadband app.

Windows 接続マネージャーからの起動

Screenshot of starting a mobile broadband app using Windows Connection Manager.

Windows 接続マネージャーを使用することで、モバイル ブロードバンド アプリに接続できます。 アプリは、アカウントとデータ使用量の情報があるランディング ページに開かれる必要があります。 接続すると、Windows 接続マネージャーに現在のアカウントとデータ使用量が表示されます。

Screenshot of Windows Connection Manager displaying account and data usage information.

キャプティブ ポータル購入フローでの接続マネージャーからの自動起動

ユーザーが、Web トラフィックがリダイレクトされるキャプティブ ポータル ネットワークに接続している場合、Windows は、アプリがインストールされていればそのアプリを自動的に起動するオプションを提供します。 アプリは、インターネット アクセスの購入方法に関する情報を提示する [プラン] ページに開かれる必要があります。

[すべてのアプリ] ビューのタイルからのアプリの起動

アプリは、複数の同時アカウントを持っているユーザー (外部 USB モバイル ブロードバンド アダプターを 2 つ使用しているユーザーなど) をサポートする必要があります。 アプリをタイルから起動した場合、アプリは、ユーザーが使用したいアカウントを選択できるようにする必要があります。

アプリが一時停止され、既に実行中の場合は、最後に使用されたページを表示する必要があります。 アプリがまだ実行されていない場合や一時停止情報を利用できない場合は、アプリがランディング ページを開く必要があります。

タイル通知とトースト通知

[スタート] メニューのタイルは、アプリを表示する基本的な手段です。 ユーザーは、これらのタイルを使用してアプリを起動し、通知から、新しい、関連性のある、カスタマイズされたコンテンツを表示できます。 こうすることで [スタート] に活気が満ちて、ユーザーは、新着情報を一目で確認できるようになります。 また、アプリは、ユーザーが別のアプリ、[スタート] 画面、デスクトップを表示しているかどうかに関係なく、トースト通知を通じてタイム クリティカルなイベントをユーザーに伝えることもできます。 トーストを設計して配信する手法は、タイルの方法と非常に似ているため、楽に習得できます。

Screenshot of a mobile broadband app's tile on the Windows Start screen.

トースト通知にテキストや画像を含めることはできますが、ボタンなどの第 2 アクションには対応していません。 トーストは、タスク バーの通知領域から出る Windows のバルーン通知のようなものだと思ってください。 バルーン通知と同じように、トーストは、画面の右下隅に表示されます。 ユーザーがトーストをタップまたはクリックすると、通知と関係があるビューで関連するアプリが起動されます。 これは、特定のアプリが別のアプリのユーザーに割り込める唯一のメカニズムです。 トーストのアクティブ化、非表示、無視は、ユーザーが操作できます。 ユーザーは、アプリのすべてのトーストを無効にできます。

Screenshot of a toast notification for a mobile broadband app.

トースト通知は、ユーザーにとって関心の高い情報でのみ利用されるすべきであり、通常は、何らかの形でユーザーによるオプトインを必要とします。 電子メールの受信アラート、IM チャット リクエスト、ニュース速報に適しています。 ただし、トースト通知の使用を検討する際は、トースト通知には一時的という性質があることから、ユーザーがトースト通知を確認できない場合があることを認識しておくことが非常に重要です。 データ使用量の超過やローミング アラートについてトースト通知を使用する場合は、エンド ユーザーがトースト通知を見逃した場合に備えて、タイルとアプリのビューにもその情報を表示することを検討してください。

スプラッシュ画面

スプラッシュ画面でブランド化を促進することができます。 スプラッシュ画面の詳細については、「スプラッシュ画面の追加」を参照してください。

Screenshot of a mobile broadband app's splash screen promoting branding.

簡単な概要

通信事業者からの通知の適切な設計:

  • トースト通知とタイル通知の両方を使用して、サブスクライバーのアカウントとサービス プランに関連する重要なメッセージと関心の高いメッセージをユーザーに伝えます。

  • トースト、タイルの背景色、ロゴは、貴ブランドのガイドラインに基づいてカスタマイズしてください。

  • サブスクライバーのアカウントとサービス プランに関連している SMS 形式または USSD 形式の通信事業者からの重要な通知やアラートは、ランディング ページに直接挿入してください。

通信事業者からの通知の不適切な設計:

  • リアルタイムの情報ではない場合 (プロモーション広告など)、トースト通知は表示しないでください。

  • エンド ユーザーが通信事業者からの重要な通知を見逃す可能性があるため、ユーザー間のチャット メッセージ、プロモーション、広告に、通信事業者からの通知やアラートを混在させないでください。

その他のリソース

モバイル ブロードバンド アプリのユーザー エクスペリエンスの設計