情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

Windows Phone のインタラクションとユーザビリティ

2013/12/05

対象: Windows Phone 8 | Windows Phone OS 7.1

以下のトピックでは、レイアウトがアプリのユーザビリティに与える影響について説明します。検索や設定など、その他の UI 要素についても、アプリのユーザビリティという文脈の中で取り上げます。

コントロールおよびインタラクションの処理を続ける前に

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

アプリからユーザーに提示されるタッチ ターゲットは、適切なサイズでなければなりません。ユーザーは、自分のタップがコントロールに作用して、アプリを動かしたというフィードバックを受け取る必要があります。そのために Windows Phone には、タッチ ターゲットおよびテキストの使用に関していくつかの要件があります。

サイズの要件

タッチの設計とは、サイズ、スペース、見た目の間の複雑なバランスを取ることです。このバランスを達成することで、"ターゲット把握の困難さを示す指標" を低下させることができます。つまり、コントロールが押しやすくなります。

大規模なユーザー テストの結果から、Microsoft のすべてのタッチ プラットフォームで、一辺 9 mm の正方形が理想的なタッチ ターゲットのサイズであることがわかっています。

UX_Interactions_IdealHitTarget

タッチ UI アセットでは 9 mm 四方以上が理想的なタッチ ターゲット

ヒット ターゲットの高さを低くすることが許される場合の最小ターゲット サイズは 7 mm です。この場合は、ビジュアル アセットの幅を広くすることが推奨されます。たとえば、リスト項目やメニュー項目は幅を広くします。

UX_Interactions_MinHitTarget

7 mm が最小ターゲット サイズ

9 mm の要件について

推奨されるタッチ ターゲット サイズは、9 mm 四方以上です。タスクで使われることが多いコントロールには、このサイズを使ってください。

スペースの制約が厳しい場合は最小タッチ ターゲット サイズである 7 mm を使用しますが、幅が広いことが前提です。

9 mm という数字は、数百時間に及ぶユーザー テストから決定されたものであり、独立したタスクと連続的なタスクの両方で最小平均エラー率 (総タップ数に対する間違ったタップ数の比率) を示した値です。9 mm を最小タッチ ターゲット サイズにすることで、エラー率をわずか 1.6% に抑えることができます。

最小タッチ ターゲット サイズは 7 mm です。これは、頻繁に使用されることがないコントロール、または十分に幅の広い (15 mm 以上) コントロールに対して、設計上の高さ制限がきわめて厳しいときに限って使用します。

外見上の最小サイズ

タッチ可能アイテムの外見上の最小サイズは、4.2 mm 以上にする必要があります。これよりわずかでも小さいと、ユーザーはそのアイテムをタッチ対象から完全に除外します。このサイズを使用するのは、小さなビジュアル アセットが必要なときに限定してください。ターゲットは、10 ~ 15 mm 以上にすることができます。

ヒントヒント:

通常、外見上のサイズはタッチ ターゲット サイズと同じかそれ以上にします。押すときに見やすくなるように、コントロールの間はスペースを空けます。

外見上のサイズがターゲット サイズと同じ場合は、コントロールを押すときに見やすくなるように、コントロールの間にパディングを追加します。ユーザーが快適に操作できる方法を探してください。

ミスタップの結果を評価する

コントロールのターゲット サイズを決定するときは、必ずタスクのコンテキストを把握し、エラー率を評価します。エラーが重大な結果につながるコントロールは、ターゲットを大きくする必要があります。動きのあるコントロールも、ターゲットを大きくする必要があります。

たとえば、システムの電話ダイヤラーはターゲットがとても大きくなっていますが、これはミスタップの結果が間違い電話という重大な結果につながるからです。エラーがもう少し許容されやすい操作の場合は、ターゲットを小さくしてもかまいません。

次の図に、タッチ ターゲットの各部分を示します。

UX_Interactions_TouchTargetDiagram

タッチ ターゲットの図

このタイル図では、次の点に注目します。

  • ビジュアル スペース: コントロールとボタンとのスペースが広がるほど、タッチしたときの快適さが向上します。

  • ビジュアル アセット: ユーザーに表示されるアイコン/コントロール/テキストの実際のサイズです。共通のコントロール スタイル ガイドで赤い線で示されます。

  • タッチ ターゲット: この図では、ビジュアル アセットの周囲の緑のボーダーです。タッチ ターゲットは、ビジュアル アセットのサイズと同じかそれよりも大きくできますが、小さくすることはできません。共通のコントロール スタイル ガイドで緑の線で示されます。

  • デッド スペース: タッチ可能な 2 つのアイテムの間のスペースでは何のアクションも起こりません。

タイルの外観の修正については、「Windows Phone のタイル デザイン ガイドライン」を参照してください。

小さなターゲットを使用する場合

スペースとタスク上の制約によって適切なタッチ ターゲットを使用できない場合は、タッチ ターゲットの以下の属性を変更することで操作感を向上できないか検討してみてください。

  • 形状

  • 場所

  • 使用頻度

  • タスクのコンテキスト

  • 見た目のデザイン (パディング/スペース)

  • エラーの結果

UX_Interactions_SmallAssets_01

ターゲット サイズをビジュアル アセットよりも大きくします。 ビジュアル アセットのサイズがターゲットよりも小さくなる場合、アセットのサイズを 4.5 mm よりも小さくしないでください。

UX_Interactions_SmallAssets_02

隣り合うビジュアル アセットの間にスペースを設定します。 その場合は、ターゲットをヒットしやすくするために、隣接するアセットの間にスペース (2 mm 以上) を空けてヒット ターゲットのサイズを調整します。

UX_Interactions_SmallAssets_03

アセットの周囲に外見上のパディングを作成します。 小さなターゲットのヒットのしづらさは、外見上のパディングを設定して安全領域を作成することによって軽減することができます。これにより、ターゲットをヒットするときの感覚上の難しさが軽減します。

UI 要素の適切なサイズを決定する際は、要素、およびそれに対応するタスクの重要性を考慮します。メールのチェックのように日常的なタスクは、ユーザーが特に強い注意を払う必要はありません。特別なタスクは、それよりも強い注意が必要です。

小さなコントロール間のスペース

小さな UI 要素がある場合は、スペースを使ってターゲット サイズを調整できます。スペースは、距離の近い小さなコントロールを調整するために使用します。距離の近い小さなコントロールには、スペースを使用してください。

重要: 重要:

実際のコントロールのサイズに関係なく、9 mm の最小タッチ ターゲット サイズを確保できるだけのスペースを使用してください。

たとえば、4 mm のチェック ボックス コントロールがあるとします。タッチ ターゲットは、7 ~ 9 mm のサイズにするために 3 ~ 5 mm 大きくします。さらにエラーを減らすには、チェック ボックス コントロールと隣接する 9 mm のターゲット (262 dpi のデバイスでは約 90 ピクセル) のスペースを空けます。デバイス上でイメージのサイズをノギスで測ってください。ピクセル数ではなくサイズが重要です。

例外

オンスクリーン キーボードやハイパーリンク コントロールなど一部のコントロールは、タッチの精度を向上させるためのアルゴリズムを使用しています。

キーボードやハイパーリンク一覧のような例外では、ターゲットをヒットしやすくするために、ヒット ターゲットのサイズ調整アルゴリズムやズームなどの訂正メカニズムを使用する必要があります。ほとんどの場合、ターゲットの高さの方が幅よりも重要ですが、例外もあります (たとえば、ソフト キーボード上のキーは、幅がターゲットの把握に影響する可能性があります)。縦か横の少なくともどちらかが理想的なターゲット サイズになるようにしてください。

UX_Interactions_SoftKeyboard

ソフト キーボード

どの条件も満たせない場合は、小さなヒット ターゲットの周囲に隣接するヒット ターゲットが多くならないようにしてください。

UX_Interactions_AdjacentHitTargets

隣接するヒット ターゲットが多すぎる場合

文字要素のサイズと配置は、画面レイアウトを構成する上できわめて重要です。Windows Phone の visual スタイルにはクロム要素がないことが基本であり、これは、Windows Phone ではテキストおよび文字の重要性が他の Microsoft プラットフォームよりも大きいことを意味します。Windows Phone の最小フォント サイズは 15 ポイントです。

ヒントヒント:

フォントのラベルおよびプロンプトが読みやすく、適切な間隔になるようにしてください。Windows Phone の最小フォント サイズは 15 ポイントです。

通常は、コンテンツのレイアウトを作り上げるために、中心的な要素に対してボーダーやフレームなどの追加的な要素が使用されます。複数のフォント サイズ、カラー、またはスタイルを使用することにより、画面上で必要とされる階層構造を作り、最も重要なタスクとその次に重要なタスクをユーザーが簡単に識別できるようにします。

カスタム コントロールの作成

ページで使用するカスタム コントロールを独自に作成する前に、「Windows Phone のコントロールのデザイン ガイドライン」セクションを参照して、アプリのコンテンツと合致するかどうかを考慮してください。

カスタム コントロールは、機能、タスク、または操作を実行しやすく、または理解しやすくするためにのみ作成します。

カスタム コントロールを操作する際のパラダイムとして、システム標準のコントロールを使用することを考慮してください。たとえば、ボタン、チェック ボックスなどのコントロールとして動作するグラフィック要素の使用を検討します。コンテンツの表示中に使用されるコントロールは、あまり目立たないようにします。全画面表示の間は、コントロールはフェードアウトする必要があります。

Windows Phone プラットフォーム全体で動作が同じになるように、ボタンを配置する際は一般的な構造に従うことが重要です。これにより、ユーザーが操作しやすい一貫性のある簡潔な構造が実現します。

また、ハードウェアおよびソフトウェアによって自由に使えるものが何かを理解しておくことも重要です。第一に、すべての Windows Phone には、戻る、スタート、検索という 3 つのハードウェア ボタンがあります。これらのボタンがシステム全体でどのように使われているかを理解することで、UI 内およびアプリの流れの中で発生する問題を軽減できます。

[ホーム] ボタンとバック スタック

ユーザー インターフェイスに [ホーム] ボタンを配置することは、Windows Phone のナビゲーション モデルから逸脱します。プラットフォーム上で革新的なことを行うのは必ずしも悪いことではありませんが、プラットフォームの予期される相互作用モデルを変更すると、ユーザーが混乱するおそれがあります。

[ホーム] ボタンをアプリに実装することには、もう 1 つ、アプリにとってずっと深刻な意味を持つ問題があります。それは、[ホーム] ボタンとハードウェアの [戻る] ボタンの両方を使って移動していると、ユーザーが無限 (またはほぼ無限) ループに入ってしまう可能性のある状況が気付かないうちに作り出されてしまうというものです。このループは、ユーザーがあるアプリで [戻る] ボタンを使って、お客様のアプリに戻ろうとすると、事態がさらに悪化して別のアプリに移動してしまう可能性があります。これらの問題の影響をアプリが受けないようにしてください。

UX_Interactions_BasicBack

基本的な [戻る] ボタン

すべてのアプリは対話のフローが異なり、複雑さも違います。しかし、開発するアプリのアーキテクチャは、できるだけ浅くし、リストとピボットを活用することによってユーザーが少ないステップで最初の画面に戻れるように、また、そこから 1 つ前に起動していたアプリに戻れるようにしてください。自信がない場合は、プラットフォームに実装済みの一般的な要素およびナビゲーション構造をまねてみます。それにより、ユーザーを混乱させるおそれが低下します。

[戻る] および [閉じる] ボタン

アプリ UI 内には、[戻る] および [閉じる] ボタンを配置しないでください。Windows Phone では、すべてのデバイスに物理的な [戻る] ボタンが付いているので、アプリのナビゲーションをすっきりと単純にすることができます。

フローティング ボタン

フローティング ボタンを使用すると、Windows Phone アプリのナビゲーションに一貫性がなくなり、混乱します。ページにアクションを追加する最も優れた方法は、アプリケーション バーを使用することです。アプリケーション バーの詳細については、「Windows Phone の基本的なグラフィックス、ビジュアル インジケーター、および通知」を参照してください。

UX_Interactions_FloatingButtons

フローティング ボタン

すべてのアイコンをアプリケーション バーに配置できない場合は、それらを UI と整合性があるように配置するように注意してください。配置を可変的にするとコンテンツの参照を妨げる可能性があり、配置が一定しないことで、ユーザーから対話型の要素と認識されないおそれもあります。

Windows Phone の一般的なコントロールのライブラリを使用すると、一貫性を保って UI の中にアイコンとボタンを実装できます。プラットフォーム全体を通じて共通したインタラクションを達成するために、「Windows Phone のデザイン リソース」で推奨されているレイアウトに従ってください。

検索は、すべての Windows Phone のハードウェアおよびソフトウェアに組み込まれています。開発者は、ハードウェアの [検索] ボタンの動作を変更することはできません。デバイスで何を実行しているときでも、このボタンを押すと常に Bing 検索環境が起動され、ユーザーはコンテンツを検索することができます。

Outlook など、一部のシステム アプリでは、ハードウェアの [検索] ボタンによってアプリ内での検索が起動されます。

開発者は、このアプリ内検索と同じことはできませんが、SearchTask クラスを使用することにより、アプリ内で [検索] ボタンの動作をまねることが可能です。

Windows Phone OS では、アプリの設定はそのアプリ自体の中に実装されます。開発者は、システム内でアプリが設定を保存する場所、およびシステム アプリの設定にはアクセスできません。

ヒントヒント:

開発者は、システム設定オプションの詳細を学び、各種のユーザー設定が UI やアプリの動作に与える影響を考慮する必要があります。たとえば、Web サービスに接続するアプリの開発者は、ユーザーが電話を機内モードにしたときのアプリの動作について考慮しなければなりません。

ユーザー選択可能な設定が複数存在するアプリの場合、開発者はアプリ内に設定ページを作成し、そのレイアウトと動作についてはシステムおよびシステム アプリの設定を基準にする必要があります。

UX_Interactions_SystemSettings

システム設定ページを基準にアプリ設定ページを作成します。

アプリ設定に対する変更は、直ちに実装しなければなりません。つまり、[完了]、[OK] などの確認ダイアログは不要です。場合によっては、変更が直ちに行われても、進行中のイベントが完了するか新しいイベントが発生するまでユーザーにフィードバックが行われないことがあります。フィードバックの提供に関する詳細については、「Windows Phone のアニメーション、モーション、および出力」を参照してください。

アプリの設定を簡潔、明瞭に保つことを設計の目標にする必要があります。複雑で、複数のページに渡り、複数のレベルを持つアプリ設定は、ユーザーの不満を招いたり、まったく別のアプリに移動してしまったと誤解させたりするおそれがあります。

ユーザーが選択したアプリ設定を、確認ダイアログ ボックスなしで直ちに実装し、変更が行われたことを示すフィードバック方法を用意します。

重要: 重要:

3 ページ以上に渡るアプリ設定を作成することは避けてください。

また、以下に注意してください。

  • 複数画面を必要とする設定では、SIP キーボードが表示されているときにコンテキストが失われるのを避けるために、画面の半分が重なって表示されるようにします。

  • 元に戻せないタスクの場合は、ユーザーがキャンセルするためのオプションを必ず用意します。テキスト入力が例の 1 つです。

  • データを上書きまたは削除する動作、または元に戻せない動作には、[キャンセル] ボタンが必要です。

  • [確定] および [キャンセル] ボタンのある追加の画面を使用する場合は、これらのボタンをクリックすると、それに対応するアクションが実行され、メインの設定画面に戻ります。

  • ネットワークを通じてデータを取得するアプリには、データの使用を無効にするオプションを備えてください。

設定コントロール パネルの見出しの一貫性を維持するために、設定ページの見出しは次のようにしてください。

アプリケーション設定

<CPL 名/アプリケーション名>

Windows Phone における広告ユニットに求められる最低限の品質に関する基本的なガイドラインは、次のとおりです。このガイドラインをレビューする際は、広告も Windows Phone のデザインの原則に従う必要があることに留意してください。

表示する広告がない場合、AdControl は非表示になります。この場合に対処するために、Windows Phone アプリには空きスペースを利用するためのコードを含めてください。

推奨される広告ユニット サイズ

AdControl の既定かつ推奨されるサイズは、480 x 80 ピクセルです。これは、Windows Phone における広告の推奨サイズです。

広告ユニットを pubCenter のフォーマット サイズである 300 x 50 ピクセルで作成した場合でも、ユーザーの操作性向上のため、AdControl のサイズは 480 x 80 ピクセルに設定してください。広告ユニットのフォーマットが小さい場合は、pubCenter 内で設定された広告ユニット サイズを使用して、AdControl 内のスペースの中央に置かれます。たとえば、300 x 50 ピクセルの広告は、AdControl の中央に広告ユニットの中央が位置するように、300 x 50 ピクセルで表示されます。この設定を次の図に示します。

UX_Interactions_Ad_Centered

広告コントロールの中央に配置

ヒントヒント:

300 x 50 ピクセルという AdControl のサイズは、下位互換性を維持するために用意されています。将来的には廃止される可能性があります。後から広告ユニットを改訂する必要が生じるのを避けるために、新しい広告は 480 x 80 ピクセルの AdControl サイズで作成することを検討してください。

広告の配置

AdControl は、画面の一番上または一番下に配置します。推奨される位置は、現在のビューの一番上または一番下です。

UX_Interactions_Ad_FullSized

フルサイズの AdControl

スクロール ビューアー

スクロール ビューアー内に含まれる広告は、ユーザーがコンテンツをスクロールするのに合わせて、ページ内に表示されたり、表示されなくなったりします。ユーザーがスクロールしても広告が動かないようにするには、AdControl をスクロール ビューアーの外に配置します。スクロール ビューアーは、画面の一番上または一番下に配置します。

Panorama コントロールでの広告の使用

Panorama コントロール内に含まれる広告は、水平方向にスクロールして Panorama コントロールの次のページに移動すると、表示されなくなります。広告がすべてのページに保持されるようにするには、次の図の左側に示すように、AdControl を Panorama コントロールの外に置きます。複数のパノラマ ページにそれぞれ異なる広告を表示するには、次の図の右側のように、各パノラマ ページ内にそれぞれ独立した広告に対応する AdControl の新しいインスタンスを作成します。

UX_Interactions_Ad_Panorama

Panorama コントロール内の広告

Pivot コントロールでの広告の使用

Pivot コントロール内に含まれる広告は、水平方向にスクロールして Pivot コントロールの次のページに移動すると、表示されなくなります。広告がすべてのページに保持されるようにするには、次の図の左側に示すように、AdControl を Pivot コントロールの外に置きます。

別のピボット ページにそれぞれ異なる広告を表示するには、次の図の右側のように、各ピボット ページ内に AdControl の新しいインスタンスを作成します。

UX_Interactions_Ad_Pivot

Pivot コントロール内の広告

カラー

システムのテーマ カラーを使用します。テーマ カラーを変更する場合は、AdControl のボーダーとテキストが見やすい色を選択します。

表示: