Windows のタッチ操作
Windows 8.1 には、システム全体で使われるタッチ操作の簡単なセットが用意されています。このタッチ言語を一貫して適用することで、ユーザーに、自分が使い慣れたアプリと似ていると感じさせることができます。アプリの使い方をわかりやすくすることで、ユーザーの信頼感が増します。タッチ言語の実装について詳しくは、「ジェスチャ、操作、対話的操作」をご覧ください。
.jpg "タッチを使ってタブレットを操作するユーザー")
この記事の内容:
- タッチの設計原則
- タッチ言語
- タッチ ターゲット
- 位置と持ち方
- 関連トピック
タッチの設計原則
即座にフィードバックを返す
画面がタッチされたときにすばやく視覚的フィードバックを返すようにすると、ユーザーが安心して操作できます。操作に対して、色やサイズの変更、移動で応答する必要があります。操作できない要素は、画面がタッチされたときだけタッチ画像を表示するようにします。
コンテンツが指の動きに付いていくようにする
キャンバスやスライダーなど、ユーザーが移動またはドラッグできる要素は、画面上の指の動きに付いていく必要があります。移動できないボタンなどの要素は、指を離したときに既定の状態に戻る必要があります。
逆方向の操作ができるようにする
本棚から取り出した本は、元の場所に戻すことができます。それと同じように、タッチ操作は元に戻すことができることが必要です。ユーザーが指を離したときに何が起こるかを、視覚的フィードバックで示します。これによって、タッチ操作で安心してアプリを使用できるようになります。
複数の指を使うことができるようにする
ユーザーは意識せずに複数の指を使ってタッチしていることがよくあります。そのため、画面をタッチする指の数が変わったときにタッチ操作を大きく変化させないようにしてください。 現実世界と同じように、1 本の指でスライドするときも、3 本の指でスライドするときも、結果が変わらないようにしてください。
タッチ言語
長押しによる情報の表示
このタッチ操作では、詳細情報や説明を伝える視覚効果 (ヒントやショートカット メニューなど) が表示されます。操作をコミットする必要はありません。ユーザーが指でスライドを開始したときに、このような表示によってパンが妨げられないようにしてください。
重要 水平方向と垂直方向のパンが有効である場合は、長押しを選択に使うことができます。
タップによるプライマリ 操作
要素をタップするとプライマリ操作 (アプリの起動、コマンドの実行など) が呼び出されます。
スライドによる パン
スライドは主にパン操作に使われますが、移動 (パンの方向が 1 方向に制限されている場合)、描画、筆記などの操作に使うこともできます。 また、スライドは、スクラブ操作 (ラジオ ボタンなどの関連したオブジェクトを指でスライドする操作) によって、小さな密集した複数の要素をターゲットとするときにも使うことができます。
スワイプによる選択、コマンド、 移動
パン方向に対して 垂直方向に指を少しスライドさせると (パンの方向が 1 方向に制限されている場合)、一覧またはグリッドの中の オブジェクトが選択されます。オブジェクトが選択されると、関連するコマンドを含むアプリ バーが 表示されます。
ピンチとストレッチによる ズーム
ピンチ ジェスチャとストレッチ ジェスチャは 一般的にサイズ変更に使われますが、セマンティック ズームによってコンテンツ内の最初、最後、または 任意の場所に移動することもできます。セマンティック ズームは、アイテムのグループを表示し、 それにすばやく戻ることができるズーム アウト ビューを 提供します。
指を違う方向に動かすことによる回転
2 本以上の指を別々の方向になぞると、オブジェクトが回転します。画面全体を回転させるには、デバイスを回転させます。
端からのスワイプによるアプリ コマンドの 表示
画面の上端または下端からスワイプすると、 アプリ コマンドが表示されます。アプリ バーを 使ってアプリ コマンドを 表示します。
端からのスワイプによる システム コマンドの表示
画面の右端から スワイプすると、システム コマンドが含まれた チャームが表示されます。
左端からスワイプすると、現在実行中のアプリが順に表示されます。
画面の上端から下端へスライドすると、現在のアプリを閉じます。
画面の上端から少し下げて、左端または右端へスライドすると、 現在のアプリをスライドした側に配置します。
注 ユーザーは、スライドによるパン、ピンチによるズーム、指を違う方向に動かすことでの回転などの直接的な操作を、多数のタッチ ポイントで同時に行えます。
タッチ ターゲット
サイズと効率: ターゲットのサイズは誤操作の発生率に影響する
.jpg "ターゲットが大きくなるとタッチの誤操作が少なくなるようすを示すグラフ")
タッチ ターゲットには、完ぺきなサイズというものはありません。状況が異なれば、有効なサイズも異なります。削除、閉じるなど、大きな変化が起こる操作や、よく使う操作には、大きなタッチ ターゲットを使う必要があります。大きな変化が起きない、あまり使われない操作には、小さなターゲットを使うことができます。
ターゲットのサイズの ガイドライン
.jpg "お勧めの最小サイズ 7x7") |
7x7 mm: お勧めの最小サイズ タッチ ミスを 1 回または 2 回のジェスチャで修正できる場合、または 5 秒以内で 修正できる場合は、7 x 7 mm はお勧めの最小サイズです。ターゲット間の余白は、ターゲット サイズと同じくらい重要です。 |
.jpg "正確さが必要な場合のお勧めサイズ 9x9") |
正確さが重視される場合 閉じる、削除など、大きな変化が起こる操作には タッチ ミスが許されません。タッチ ミスの修正に 2 回以上のジェスチャが必要な場合、 5 秒よりかかる場合、またはコンテキストの大幅な変更が 必要な場合は、9 x 9 mm のターゲットを使います。 |
.jpg "お勧めの最小サイズ 5x5") |
入りきらない場合 どうしても範囲内に入りきらない場合は、 タッチ ミスを 1 回のジェスチャで 修正できるなら、5x5 mm のターゲット を使ってもよいでしょう。この場合、 ターゲット間に 2 mm の余白を 入れることが、非常に重要になります。 |
アクセシビリティ
アプリでサポートされる対話式操作と UI を計画する際は、ユーザーによってできる操作、できない操作、好ましい操作が大きく異なることを心に留めておいてください。初めからアクセシビリティに対応した設計原則に従っておくことで、アプリの対象ユーザーの間口が広がります。アクセシビリティの計画について詳しくは、「アクセシビリティのガイドライン」をご覧ください。
指のサイズ
"指が太い" と自分を責める人が よくいます。しかし、 赤ちゃんの指でさえ、タッチ ター ゲットより大きいことがよくあります。
左の図によると、成人の平均的な指の太さは約 11 mm で、赤ちゃんは 8 mm です。バスケットボールの選手は 19 mm を超える場合もあります。
.jpg "指の太さで考えられるばらつきを示す図")
位置と持ち方
タッチの設計は、画面上のオブジェクトの設計よりも重要です。また、デバイスの握り方 (持ち方) も考慮する必要があります。
一般的に、ユーザーによって、タブレットを使う際のお気に入りの持ち方がいくつかあります。
現在の作業と、その表示方法によって、持ち方が変わってきます。それだけでなく、周囲の状況や使い勝手によっても、その持ち方がどのくらいの時間続くのか、どの程度の頻度で変わるのかが変わってきます。
さまざまな持ち方に対応できるようにアプリを最適化してください。ただし、ある操作をするときは自然に特定の持ち方になる場合は、その持ち方に対して最適化します。
操作領域
スレートは 両端を持つことが多いため、操作する要素は下の隅と、 左右の端に置くのがお勧めです。
.png "操作領域")
読み取り 領域
画面の上半分のコンテンツは、手で覆われたり無視されたり しやすい下半分のコンテンツよりも読みやすくなります。
.png "読み取り領域")
よく使われる 持ち方
| 持ち方 | 持ち方と操作 | 設計時の考慮事項 |
|---|---|---|
.jpg "片手で持ち、もう一方の手で操作する") |
片手で持ち、もう一方の手で簡単な操作から中程度の操作まで行う |
|
.jpg "両手で持ち、親指で操作する") |
両手で持ち、親指で簡単な操作から中程度の操作まで行う |
|
.jpg "両手による操作") |
デバイスをテーブルや膝の上に置き、両手で簡単な操作から中程度の操作まで行う |
|
.jpg "手で持たず、受動的に操作する") |
操作するしないに関係なく、デバイスをテーブルや台の上に置く |
|