タップ操作に明確な視覚・触覚フィードバックを組み合わせる方法
モバイルアプリのボタンでは、タップに対して即座に視覚的な反応を返し、アクションの完了時に結果を表示するようにします。短い触覚フィードバック（ハプティクス）は、同じイベントを強調し、そのアクションの重要度に見合う場合にのみ追加します。この順序を守ることで、特に応答に時間がかかる場合でも、「アプリがタップを認識した」ことと「タスクが成功した」ことをユーザーが明確に区別できるようになります。以下の手順は単一のボタンやコントロールに適用されます。プラットフォームによって仕様が異なるため、利用可能な場合はOSの標準インタラクションパターンを使用してください。
まず、フィードバックで何を伝えるべきかを決める
タップによって発生するイベントには、コントロールの押下、設定の変更、リクエストの開始、リクエストの成功や失敗など、さまざまなものがあります。アニメーションや振動を選択する前に、各シグナルがどのイベントを表しているのかを決定してください。押下シグナルは入力を確認し、ラベルの変更や選択状態はローカルな状態変更を確認し、プログレスインジケータは処理中であることを伝え、成功メッセージは完了を確認します。
これらの意味を混同しないようにしてください。タッチ時にボタンが一瞬暗くなったとしても、それはネットワークリクエストが完了したことの証明にはなりません。送信に時間がかかる可能性がある場合は、アプリが結果を把握するまで明確な進行状況（プログレス）状態を維持してください。Appleは、アクションが瞬時に完了しない場合はボタン内にアクティビティインジケータを表示し、何が起きているかを明確にするためにラベルを変更することを推奨しています。Appleのボタンに関するガイダンス
シンプルな状態シーケンスを構築する
フィードバックは、ボタンがタップされるたびに再生される単一のエフェクトではなく、コントロールの実際の状態に紐づくシーケンスとして扱います。有用な基本パターンは以下のとおりです。
- 準備完了（Ready）： 目的が明確に伝わるラベルや見慣れた記号でアクションを表示します。
- 押下中（Pressed）： 控えめな塗りつぶし、拡大・縮小、ハイライトの変化など、押下されたことが即座にわかる視覚的状態を提供します。
- 処理中（Working）： 完了までに遅延が生じる場合は進行状況を表示し、そのアクションに適している場合は誤った重複送信を防止します。
- 完了または失敗（Complete or failed）： 実際の結果でインターフェースを更新します。トグルの場合は新しい選択状態を表示し、送信の場合は簡潔な成功またはエラーステータスを提供します。
Appleは、カスタムボタンには常に押下状態（プレス状態）を設けるべきだとしています。これがないと反応がないように感じられる可能性があるためです。また、同社の広範なフィードバックに関するガイダンスでは、情報の重要度に合わせて伝え方を調整し、ステータスは説明対象の項目の近くに表示することを推奨しています。Appleのボタンに関するガイダンス および フィードバックに関するガイダンス
直感的にわかりやすい視覚シグナルを選択する
指がコントロール上にある間は、押下状態を視覚的にわかるようにします。コントロールが認識可能であり、ラベルの視認性が保たれている限り、わずかな色や不透明度の変化、短い拡大・縮小、ハイライトなどが有効です。結果を伝える唯一の手段として色だけを使用することは避けてください。何が起きたのかを説明するために、状態の変更、テキスト、アイコン、その他の視覚的な差別化要素と組み合わせてください。
トグルの場合、タップ後も選択状態が維持される必要があります。一時的なリップル効果だけでは、設定がオンになっているかどうかは伝わりません。「保存」のような1回限りのアクションの場合、ボタンはまず押下状態を表示し、その後にアプリが保存完了状態やステータスを表示できます。タスクが失敗した場合は、関連するコントロールの近くで失敗の理由を説明し、次に行えるアクションを明確にしてください。具体的な見せ方はアプリやプラットフォームによって異なりますが、シグナルはアプリが確認できる状態を反映したものである必要があります。
触覚フィードバックが有用な情報を加えるかを判断する
ハプティクスは、ボタンの押下や確定した状態変更といった個別のイベントを強調できます。これらはオプションです。デバイスが消音モードになっていたり、ハプティクスが無効化されていたり、ユーザーがその効果を感じ取れなかったりしても、視覚的な反応だけで理解できる必要があります。Androidのガイダンスでは、ハプティクスは控えめに使用し、同様のインタラクションでは一貫性を保ち、視覚や音声のエクスペリエンスと調和させることを推奨しています。また、不快に震えるようなタッチ効果にするくらいなら、ハプティクスを一切使用しない方が良いともアドバイスしています。Androidのハプティクス設計原則
現実的な選択肢として、プラットフォームが適切な標準エフェクトを提供している場合に、意味のある確定アクションに対して軽快で短いシグナルを使用することが挙げられます。重要度の低いあらゆるタップや、繰り返されるスクロール、対応する視覚的変化を伴わないイベントに対して振動させることは避けてください。重要なイベントである場合は、視覚的なステータスで確実に意味を伝えるようにし、成功と失敗を区別する手段として振動だけに頼らないでください。
シグナルをそれが表す瞬間に一致させる
押下の反応はタッチした瞬間に、成功の反応は成功が判明した後に発生させるべきです。即座に完了するアクションの場合、これらの瞬間はほぼ同時になることがあります。リモートでの保存や送信の場合、それらの間には目に見える待ち時間が生じる可能性があります。タッチダウン時に成功のハプティクスを再生してしまうと、アプリが確認する前に完了を主張することになってしまいます。
Androidにおいて推奨される View.performHapticFeedback によるアプローチは、アクション指向の定数を使用し、システムのタッチフィードバック設定を尊重し、VIBRATE 権限を必要としません。プラットフォームは、必要に応じてこれらの定数に対するフォールバック動作を提供します。より高度にカスタマイズされた振動エフェクトはサポートや設定の考慮事項が異なるため、通常のコントロールには標準のアクション指向のアプローチを優先してください。Androidの触覚フィードバック実装ガイド
プラットフォームの挙動と頻度を念頭に置く
すでに期待されるフィードバックが備わっている組み込みコントロールを活用します。Appleは、スイッチ、スライダー、ピッカーなどの標準コントロールが、対応するiPhoneモデルでシステムハプティクスを再生できると述べています。その上からさらにカスタムエフェクトを追加するとシグナルが重複してしまうため、別のシグナルを重ねる前にコントロールのネイティブの挙動を確認してください。Appleのハプティクス再生に関するガイダンス
頻度も重要です。たまに行うフォーム送信では明快に感じられるフィードバックパターンも、頻繁に使用されるボタンに付加されると煩わしくなることがあります。同等のアクション間では同じ意味合いを一貫して保ち、より強いまたは目立つシグナルは、より注意を向けるべきイベントのために残しておきます。特にAndroidでは、ハプティクスの強さをイベントの重要度と発生頻度の両方に関連付けることを推奨しています。Androidのハプティクス設計原則
リリース前にインタラクションを確認する
アプリがサポートするデバイスやOSで、一連のシーケンス全体をテストしてください。1回タップして押下状態が速やかに表示されることを確認し、遅延中は進行状況が表示され続け、結果が判明した後にのみ成功または失敗が表示されることを検証します。素早く2回目のタップを行い、インターフェースによって混乱を招く重複フィードバックや意図しない連続アクションが発生しないことを確認してください。
システムのタッチフィードバックをオフにした状態や、デバイスのハプティクス機能が利用できない、またはサポートされていない状態でも同様に確認を行ってください。そのような場合でも、視覚的な状態でアクションとその結果が伝わらなければなりません。頻繁に行うアクションとたまに行うアクションを比較し、煩わしく感じられるエフェクト、同期がずれているエフェクト、あるいは視覚的な変化と連動していないエフェクトは削除してください。Androidの標準ビューフィードバックでは、システム設定がデフォルトで尊重されますが、カスタムアプローチでは追加のサポートやフォールバックのチェックが必要になる場合があります。Androidの触覚フィードバックガイド
明確な組み合わせにはシンプルなロジックがあります。タップが認識されたことを示し、待ち時間があればそれを伝え、実際の結果が出た時点で完了を確認することです。視覚的なインターフェースだけで完結させつつ、適切な場面ではハプティクスを活用してその同じシグナルを補強しましょう。