相互作用
Note
この設計ガイドは Windows 7 用に作成されており、新しいバージョンの Windows では更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には 現在の設計ガイダンスは反映されていません。
対話とは、タッチ、キーボード、マウスなど、ユーザーがアプリと対話するさまざまな方法です。 これらのガイドラインを使用して、タッチ用に最適化されているが、入力デバイス間で一貫して動作する直感的で独特なエクスペリエンスを作成します。
タッチファーストエクスペリエンスのための設計
まず、タッチがユーザーの主な入力方法になるという想定でアプリを設計します。 プラットフォーム コントロールを使用する場合、タッチパッド、マウス、ペン/スタイラスのサポートでは、追加のプログラミングは必要ありません。Windows では無料で提供されるためです。
ただし、タッチ用に最適化された UI が従来の UI よりも常に優れているとは限らないことに留意してください。 どちらも、テクノロジとアプリケーションに固有の長所と短所を提供します。 タッチ優先 UI への移行では、タッチ (タッチパッドを含む)、ペン/スタイラス、マウス、キーボード入力の主な違いを理解することが重要です。 Windows 8のタッチでは単にその機能をエミュレートする以上のことが行われるので、使い慣れた入力デバイスのプロパティと動作を当然のことと考えないでください。
すぐに見つかると、タッチ入力には UI 設計に別のアプローチが必要です。
タッチ操作の要件の比較
次の表に、タッチ最適化 Windows ストア アプリを設計するときに考慮する必要がある入力デバイスの違いをいくつか示します。
| 要素 | タッチ操作 | マウス、キーボード、ペン/スタイラス操作 | Touchpad |
|---|---|---|---|
| [精度] |
指先が接触する領域は単一の XY 座標よりも広いので、意図していないコマンドがアクティブ化される可能性が高くなります。 |
マウスとペン/スタイラスを使うと正確な XY 座標を指定できます。 |
マウスと同じです。 |
| 接触する領域の形は移動を通じて変化します。 |
マウスの移動とペン/スタイラスのストロークによって正確な XY 座標を指定できます。 キーボード フォーカスは明示的です。 |
マウスと同じです。 |
|
| ターゲット設定に役立つマウス カーソルはありません。 |
マウス カーソル、ペン/スタイラス カーソル、キーボード フォーカスはすべてターゲット設定に役立ちます。 |
マウスと同じです。 |
|
| 人体構造 |
1 本または複数の指で直線移動を行うのは困難なので、指先の動きは正確さに欠けます。 これは、手関節が曲がることや動きに関係する関節の数が原因です。 |
マウスまたはペン/スタイラスを制御する手の物理的な移動距離は、画面上のカーソルの移動距離よりも短いので、マウスまたはペン/スタイラスで直線移動を行う方が簡単です。 |
マウスと同じです。 |
| ディスプレイ デバイスのタッチ画面には、指の位置とユーザーのデバイスの持ち方が原因で届きにくくなる領域もあります。 |
マウスとペン/スタイラスは画面のどの部分にも届き、キーボードではタブ オーダーによってどのコントロールにもアクセスできます。 |
指の位置と持ち方が問題になることがあります。 |
|
| オブジェクトは、1 本以上の指先またはユーザーの手で隠れる場合があります。 これをオクルージョンと呼びます。 |
間接的な入力デバイスでは、オクルージョンは発生しません。 |
マウスと同じです。 |
|
| オブジェクトの状態 |
タッチでは、ディスプレイ デバイスのタッチ画面がタッチされているか (オン) タッチされていないか (オフ) の 2 状態モデルが使われます。 追加の視覚的なフィードバックをトリガーできるホバー状態はありません。 |
マウス、ペン/スタイラス、キーボードはすべて、離した状態 (オフ)、押した状態 (オン)、ホバー状態 (フォーカス) の 3 状態モデルを公開します。 ホバーすると、UI 要素に関連付けられたヒントを調べて参考にすることができます。 ホバーまたはフォーカスを合わせたときの効果によって操作可能なオブジェクトがわかり、ターゲット設定にも役立ちます。 |
マウスと同じです。 |
| 豊富な操作 |
タッチ画面において複数の入力ポイント (指先) で操作できるマルチタッチをサポートします。 |
単一の入力ポイントをサポートします。 |
タッチと同じです。 |
| タップ、ドラッグ、スライド、ピンチ、回転などのジェスチャによるオブジェクトの直接操作をサポートします。 |
マウス、ペン/スタイラス、キーボードは間接的な入力デバイスなので、直接操作はサポートされません。 |
マウスと同じです。 |
注:
間接的な入力には、25 年以上の改良を経ているという利点があります。 ホバーすると表示されるヒントなどの機能は、タッチパッド、マウス、ペン/スタイラス、キーボード入力での UI の操作を解決するために特別に設計されています。 このような UI 機能は、他のデバイスのユーザー エクスペリエンスを損なうことなく、タッチ入力で充実したエクスペリエンスを提供するために再設計されました。
ここでは、一般的なユーザー操作ガイドラインをいくつか提供し、これらのトピックのデバイス固有のガイドラインについて説明します。
フィードバック用のビジュアル
アプリとの対話中の適切な視覚的フィードバックは、ユーザーがアプリと Windows ビジュアルの両方のフィードバックによって対話がどのように解釈されるかを認識、学習、適応するのに役立ちます。これにより、相互作用の成功を示し、システムの状態を中継し、コントロールの感覚を向上させ、エラーを減らし、ユーザーがシステムと入力デバイスを理解し、対話を促すことができます。
位置に基づく正確性が求められる操作をタッチ入力で行う場合は、視覚的なフィードバックが重要です。 タッチ入力が検出された場所に必ずフィードバックを表示して、アプリとそのコントロールで定義されたカスタム ターゲット設定規則をユーザーが把握できるようにします。
精度を最適化する
タッチ入力には、指の接触領域全体が含まれます。 この接触ジオメトリは、最も可能性の高いターゲット オブジェクトを決定するために使用されます。 コントロールのサイズを変更して、簡単かつ安全にターゲットにできるオブジェクトとコントロールで快適な UI を確保します。
コントロールのサイズ、スペース、配置を行って、ユーザー操作自体によって UI が隠される指と手のオクルージョンを排除します。
可能な限り、連絡先領域の上にメニュー、ポップアップ、ヒントを配置します。
信頼度を高める制約
UI 制約を使用して、ずさんな操作を回避または最小化します。
- スナップ ポイントを使用すると、目的の場所で簡単に停止できます。 スナップ位置は、アプリのコンテンツの論理的な停止を指定します。 認知的には、スナップ ポイントはユーザーのページング メカニズムとして機能し、過剰なスライド、スワイプ、または回転による疲労を最小限に抑えます。 これにより、不正確なユーザー入力を処理し、コンテンツまたはキー情報の特定のサブセットが確実に表示されるようにすることができます。
- モーション軸 (垂直または水平) を強調する方向の "レール"。
時間の経過した相互作用を回避する
対話式操作を時間で区別しないでください。 実行にかかる時間に関係なく、同じ対話式操作を行うと同じ結果が得られるようにします。 時間ベースのアクティブ化では、ユーザーは遅延を強いられるので、直接操作のイマーシブの特性が損なわれ、システムの応答性が低く感じられるようになります。
通常、時間制限のある操作では、時間、距離、速度などの見えないしきい値に基づいて実行するコマンドが決定されます。 時間指定の相互作用では、システムがアクションを実行し、ユーザーが結果を得るために任意の不可視のしきい値に達する必要があるまで、視覚的なフィードバックはありません。 対話式操作中に視覚的なフィードバックがすばやく返されるので、ユーザーはより集中して、すべてを制御しているという安心感を持って操作できます。
オブジェクトに直接影響して実際の対話式操作を模倣する操作は、より直観的で見つけやすく覚えやすい対話式操作です。 わかりにくい抽象的な対話式操作には依存しません。
メモ： これに対する例外は、特定の時間指定された相互作用を使用して学習と探索を支援する場合です (長押しなど)。 適切な説明と視覚的な手掛かりを使用すると、高度な対話の使用に大きな影響を与えます。
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示