ターゲットの設定のガイドライン
このトピックでは、新しい Windows UI での接触形状を使ったタッチ補正について説明し、Windows ストア アプリでこのような新しいターゲット設定メカニズムを使うときに考慮する必要があるユーザー エクスペリエンスのガイドラインを示します。
この機能の実際の使い方については「アプリの機能の概要」シリーズの次のトピックをご覧ください: ユーザー操作: タッチ入力、その他
接触形状によるターゲット設定の概要
Windows 8 のタッチ補正では、タッチ デジタイザーで検出されるそれぞれの指が接触する領域全体を使います。デジタイザーから伝えられる、より広く複雑なこの入力データのセットを使うと、ユーザーが意図した (または意図した可能性が高い) ターゲットをより正確に特定できます。このようにタッチ操作の正確さと確実性を高めることで、ユーザー エクスペリエンスは大きく向上します。
次の推奨事項で、タッチ補正をアプリで最適化する方法を説明します。
サイズと表示スケール
画面サイズとピクセル密度が変わっても一貫性が維持されるように、ターゲット サイズはすべて物理単位 (ミリメートル) で表されます。物理単位は、次の式でピクセルに変換できます。
ピクセル数 = ピクセル密度 × サイズ
次の例ではこの式を使って、135 ppi (pixel per inch) のディスプレイと 1x の表示スケール プラトーでの 9 mm ターゲットのピクセル サイズを計算します。
ピクセル数 = 135 ppi × 9 mm
ピクセル数 = 135 ppi × (0.03937 インチ/mm × 9 mm)
ピクセル数 = 135 ppi × 0.35433 インチ
ピクセル数 = 48 ピクセル
この結果は、システムで定義されている各表示スケール プラトーに従って調整する必要があります。
しきい値
操作の結果を判断するために距離と時間のしきい値を使うことがあります。
たとえば、タッチ ダウンが検出されたとき、オブジェクトがタッチ ダウン ポイントから 2.7 mm 未満の範囲でドラッグされて、タッチ ダウンから 0.1 秒以内に指が上げられた場合は、タップが登録されます。この 2.7 mm のしきい値を超えて指を動かすと、オブジェクトはドラッグされ、選択または移動されます (詳しくは、「クロススライドのガイドライン」をご覧ください)。アプリによっては、0.1 秒より長く押し続けると自己説明操作が実行されることもあります (詳しくは、「視覚的なフィードバックのガイドライン」をご覧ください)。
ターゲット サイズ
アプリ内でのターゲットの適切なサイズや適切な位置についての絶対的なアドバイスはありません。オブジェクトのサイズとターゲット領域は、ユーザー エクスペリエンスのシナリオや操作のコンテキストなどのさまざまな要因に左右されます。
次の図は、ターゲット サイズが一般には外観上のターゲット、実際のターゲット サイズ、実際のターゲットと他の指定可能なターゲットの間の余白の組み合わせで決まることを示しています。
.png "外観上のターゲット、実際のターゲット、余白の推奨サイズを示す図。")
タッチ ターゲットのすべてのコンポーネントの最小サイズと推奨サイズを次の表に示します。
| ターゲット コンポーネント | 最小サイズ | 推奨サイズ |
|---|---|---|
| 余白 | 2 mm | 該当なし |
| 外観上のターゲット サイズ | 実際のサイズの 60% 未満 | 実際のサイズの 90 から 100% |
| 実際のターゲット サイズ | 9 x 9 mm (48 x 48 ピクセル @ 1x)
UX ガイドラインの推奨サイズ未満の要素については、一方の要素の中心からもう一方の要素の中心までの距離を 9 mm 以上にする必要があります。 |
該当なし |
| 全体的なターゲット サイズ | 11 x 11 mm (約 60 ピクセル: 3 個の 20 ピクセル グリッド @ 1x) | 13.5 x 13.5 mm (72 x 72 ピクセル @ 1x)
これは、実際のターゲットと余白を組み合わせたサイズをそれぞれの最小サイズより大きくする必要があることを意味します。 |
表に示したターゲット サイズの推奨サイズは、個々のシナリオの必要に応じて調整できます。この推奨サイズの設定では、次の点が考慮されています。
- タッチの頻度: 繰り返しタッチされたり、頻繁にタッチされたりするターゲットは、最小サイズより大きくするようにしてください。
- エラー防止: 誤ってタッチすると重大な結果をもたらすターゲットは、大きな余白を取り、コンテンツ領域の端から離して配置する必要があります。特に当てはまるのは頻繁にタッチされるターゲットです。
- コンテンツ領域での位置
- フォーム ファクターと画面サイズ
- 指の位置
- タッチの視覚エフェクト
- ハードウェアとタッチ デジタイザー
ターゲット設定支援
Windows では、ここで示した最小サイズや推奨する余白サイズを適用できない状況に対応するためのターゲット設定支援機能を提供しています。対象となるのは、Web ページ上のハイパーリンク、カレンダー コントロール、ドロップダウン リストとコンボ ボックス、テキスト選択などです。
このようにターゲット設定プラットフォームを強化し、ユーザー インターフェイスの動作を視覚的なフィードバック (不明瞭解消 UI) と連携させることで、ユーザーがより正確に、また安心して操作できるようになります。 詳しくは、「視覚的なフィードバックのガイドライン」をご覧ください。
タッチ可能な要素を推奨の最小ターゲット サイズより小さくする必要がある場合は、次のテクニックを使ってターゲット設定で発生する問題を最小化できます。
テザー
テザーとは、入力接点がオブジェクトに直接触れていなくても、ユーザーがそのオブジェクトにつながっているか操作していることをユーザーに示すために使われる視覚的な合図 (接点からオブジェクトの境界の四角形までを結ぶコネクタ) です。テザーは次の場合に使われます。
- タッチによる接触がオブジェクトまでの近接しきい値の範囲内で最初に検出され、そのオブジェクトがそのタッチのターゲットとして最も可能性が高いと特定された場合。
- タッチによる接触がオブジェクトから離れたが、その接触が近接しきい値内にとどまっている場合。
この機能は、JavaScript を使った Windows ストア アプリの開発者には公開されていません。
スクラブ
スクラブとは、ターゲットのフィールド内をタッチし、そのまま指を持ち上げずに目的のターゲットまでスライドさせてそのターゲットを選ぶことを意味します。 この操作は "指を離すことによるアクティブ化" とも呼ばれます。この場合、アクティブ化されるオブジェクトは、指が画面から離れたときに最後にタッチされたオブジェクトです。
スクラブ操作を設計するときは、次のガイドラインに従ってください。
- スクラブは、不明瞭解消 UI と併用します。詳しくは、「視覚的なフィードバックのガイドライン」をご覧ください。
- スクラブ対象のタッチ ターゲットの推奨最小サイズは、20 ピクセル (3.75 mm @ 1x サイズ) です。
- スクラブは、Web ページなどのパン対応サーフェイスで実行されたときに優先されます。
- スクラブ対象ターゲットは互いに近づける必要があります。
- ユーザーがドラッグによってスクラブ対象ターゲットから指を離すと、操作は取り消されます。
- ターゲットによって実行される操作が破棄的でなければ (カレンダーでの日付の切り替えなど)、スクラブ対象ターゲットに対してテザーが指定されます。
- テザーは、水平、垂直のいずれかの方向で指定されます。
関連トピック
概念
チュートリアル (JavaScript を使った Windows ストア アプリ)
チュートリアル (C#/VB/C++ と XAML を使った Windows ストア アプリ)
チュートリアル (C++ と DirectX を使った Windows ストア アプリ)
サンプル (DOM)
HTML のスクロール、パン、ズームのサンプルに関するページ
入力: インスタンス化できるジェスチャのサンプルに関するページ
サンプル (Windows ストア アプリ API)
入力: 操作とジェスチャ (JavaScript) のサンプルに関するページ
入力: Windows 8 のジェスチャのサンプルに関するページ
入力: XAML ユーザー入力イベントのサンプルに関するページ
XAML のスクロール、パン、ズームのサンプルに関するページ
サンプル (DirectX)
入力: 操作とジェスチャ (C++) のサンプルに関するページ
辞書/リファレンス