iPhone アプリでの Haptic Feedback による効果的なマイクロインタラクション

iPhone には Haptic Feedback という振動によるフィードバックの仕組みがあり、それを自分の開発しているアプリに組み込むことが可能です。しかし、いざ組み込もうと思うと、使いどころがなかなか悩ましいといったことがあると思います。

この悩みを解決できるように、Haptic Feedback の考え方や実際の事例をもとに、どういう時に Haptic Feedback を用いると効果的かということを iOSDC Japan 2018 で発表しました。

発表で用いたスライドは下記ですが、メインの事例紹介がすべて動画だったのでこの記事内ですべて紹介します。

Haptic Feedback とは

今回取り上げるのは、iPhone 6s 以降の端末に搭載の Taptic Engine を用いた触覚フィードバックについての話です。

例えば App Store でアプリをインストールする際に Touch ID で認証完了した時に「ククッ」というような振動が発生します。これが Haptic Feedback です。

Haptic Feedback はとても強力なフィードバックです。
これまではフィードバックのほとんどを視覚による効果でしか実現できませんでした。視覚によるフィードバックだけでは、スマートフォンの限られたスクリーン内ではどうしても限界がうまれます(すべてのインタラクションに対して目立つ視覚効果をつけると、うっとおしい上に本当に重要なものを強調することができなくなってしまいます)。

しかも、Haptic Feedback は導入が2つの観点で簡単です。

ひとつは UI 的な観点で、Haptic Feedback は視覚的な UI の上にのせるようなもののため、既存の UI と干渉しません。そのため整合性の調整などの必要なしに、 Haptic Feedback を追加することが可能です。

ふたつめは実装的な観点で、これはドキュメントを見るとわかるのですが、数行書くだけで簡単に追加できます(唯一気にしないといけないことは、メインスレッドで処理を呼び出さないといけないことくらいです)。

しかし、いくら導入が簡単といえど、実際に導入しようとなるとなかなか悩ましいです。なぜでしょうか?それは乱用できないからです。

Haptic Feedback を乱用すると、(視覚的なフィードバックと同様に)本当に重要なフィードバックを際立たせることができなくなっていまいます。全部重要ということは全部重要でないということと同じです。

乱用しないためには、正しい使い方を学ぶ必要があります。
まずは Apple の Human Interface Guidelines でガイドラインや基本的な考え方を知るところからスタートです。
それだけだと実際に応用するのは難しいはずなので、次に具体的な事例から学ぶのが良いと思います。ただ、事例を単に眺めていても全く同じような UI にしか応用ができないので、具体的な事例を一段抽象化して捉えることが大事です。具体例をいくつかのパターンに分類することで、明確な基準を持って色々な箇所に応用することができるようになります。

Haptic Feedback 基礎知識

まず、Human Interface Guidelines に書かれている内容について簡単に説明します。

Haptic Feedback の種類

Haptic Feedback には大きく3つの種類が用意されていて、用途によってどれかを選ぶことになります。

Notification

Notification は、処理の成功・失敗などを表す時に用いるフィードバックです。Notification の中にも Success, Warning, Failure といった3種類にわかれています。

Impact

Impact は先述の Notification や後述の Selection が適さない場合に使う、と覚えおけば良いです。強さが3段階から選ぶことができますが、一番弱い Light でも十分な強さのフィードバックなので、ほとんどの場合は Light、重要なフィードバックは Medium、Heavy はほとんど使わない、といった使い分けで良いかと思います。

Selection

Selection は発生時間が短いフィードバックなので、連続した Haptic Feedback を発生させるような場合に用います(例えば UIPickerView などでアクティブな値が変化した時など)。

Haptic Feedback の原則

Human Interface Guidelines にはいくつかの重要な原則が書かれています。
詳細は割愛しますが、特に重要な3点だけ解説します。

ユーザのアクションに対するレスポンスとして使う

ユーザが何もしていないのにいきなり Haptic Feedback が発生すると、なぜそのフィードバックが発生したのかわからなくて混乱します。必ずユーザが何かしたあとのフィードバックとして Haptic Feedback を使うのが良いです。

視覚効果と合わせる

先述の理由とほぼ同じなのですが、視覚的なフィードバックなしに Haptic Feedback だけを発生させると、これもなぜそのフィードバックが発生したかがわからなくなります。そのため、Haptic Feedback は視覚効果と合わせて用いると効果的です。

視覚的なフィードバックが隠れいている時に使う

スマートフォンはタッチスクリーンなので、何か操作をする時に必ず指で隠れる部分が存在します。指で隠れた部分は視覚的なフィードバックを行うことが難しいため、そのような箇所で Haptic Feedback を使うと使いやすい UI になるはずです。

Haptic Feedback 定番パターン&応用例

iOS 標準アプリの事例から定番のパターンを4つ取り上げ、それらを我々が開発している Holiday iOS アプリに応用した事例も合わせて紹介します。

①成功・失敗時

一番導入する際に迷わないパターンは、処理の成功や失敗の時に Haptic Feedback を発生させるパターンです。
このパターンでは Haptic Feedback の種類として、Notification の Success, Warning, Failure のいずれかを使うのが適切です。

冒頭でも紹介した App Store での Touch ID 認証完了時はこのパターンに当てはまります。

また、AirDrop でデータを送信完了した際も成功の Haptic Feedback が発生します。これはかなり有効な事例で、AirDrop の送信完了時の視覚的なフィードバックは強くない(連続した送信があり得るので意図的にそうしているのだと思います)ので、Haptic Feedback も用いることで成功した安心感をバランスよくユーザに伝えることを実現しています。

失敗時の例としては、ロック画面を Touch ID で解除しようとして失敗した時が挙げられます。このように、待ち時間がある程度かかり、失敗後にもう一度ユーザに何か行動してもらわないといけない場合に特に有効です。

Holiday では、ユーザの投稿の成功時やログインでの失敗時など、重要な処理の成功・失敗時に Haptic Feedback を用いています。既に汎用的な成功・失敗時のメッセージ表示 UI があったので、その表示時に合わせて Haptic Feedback を発生させています。

②入力が受け付けられた時

成功・失敗時ではなく、ユーザの入力が受け付けられた瞬間にフィードバックを行うパターンも存在します。ユーザがどこかをタップして画面の一部が変化するような時に、Haptic Feedback を合わせて用いると効果的です。
この時に用いる Haptic Feedback の種類としては、Impact が適切です(強さに迷った場合は Light がおすすめ)。

例えば UISwitch では、ユーザがタップした瞬間に視覚的な変化と同時に Haptic Feedback が行われています。

Holiday では、「いいね!」などのアクションに対して、アニメーションや Haptic Feedback を発生させるようにしています。
ポイントとしては、「いいね!」ボタンが押されるとサーバにリクエストを送って DB を更新するため、成功・失敗のタイミングはユーザがアクションした少し後になるというところです。この場合では、成功・失敗のタイミングでのフィードバックではなく、ユーザがアクションした時にフィードバックを行うようにしています。

重要なのは、①の成功・失敗時のフィードバックと、②の入力受付時のフィードバックの使い分けです。
Haptic Feedback に限らず視覚的なフィードバックも含めて、どのタイミングでフィードバックするかは少し悩むところではあります。基本的には重いアクションか、軽いアクションかで判断すると良いです。重いアクションとはその処理の重要度が高い場合(ユーザの投稿など)や失敗しやすい場合(ログインやロック解除など)で、軽いアクションとは頻度が高い場合(いいね!など)や処理が軽く見える場合(UISwitch の切り替え)などが該当するようなイメージです。
既に視覚的なフィードバックが適切に用いられている場合、その視覚的なフィードバックのタイミングに合わせて Haptic Feedback を発生させようとすると、自然とそのような使い分けになるかと思います。

③連続的な値の変化

具体例を見るとわかりやすいと思うのですが、UISlider や UIPickerView で指をスライドさせて値を変化させる時にも Haptic Feedback が発生しています。
このような場合のために、Haptic Feedback の Selection という種類が用意されています。

この Haptic Feedback を用いる時は、指で要素が隠れている時がほとんどだと思います。そのような細かい操作でも、Haptic Feedback によって正確な操作が可能となります。

Holiday の場合、インタラクティブ指定範囲を操作できるグラフを提供している箇所があるため、そこで Haptic Feedback を利用しています。バーの部分とスライダーの部分はどちらもスライド可能で、値が切り替わった時に視覚的なフィードバックと合わせてフィードバックを行っています。

④トリガーの閾値を超えた時

スワイプや長押しなどのジェスチャーで何かしらのアクションを発生させる時、そのアクションが発生する閾値で Haptic Feedback を行うと、ユーザはトリガーとなる条件を満たしているかを理解し安心することができます。

UIRefreshControl では、スクロールビューを一定箇所まで下に引っ張ると、指を離した時にアクションを発生させることができます。ユーザはどこまで引っ張るとそのアクションが発生するか理解しにくいため、閾値を超えた時に Haptic Feedback によるフィードバックを行うことは有効です。

また、標準のメールアプリでは、リストを左右にスワイプすることでアーカイブ処理などを行うことができます。ゆっくりとスワイプするとわかるのですが、指を離した時にアーカイブが有効となる箇所までスワイプすると、アーカイブを表す青い背景が全面にひかれ、そのタイミングで Haptic Feedback も発生します(アーカイブ処理が行われるタイミングで発生しないことに注意)。

iOS のホーム画面では、アプリアイコンを長押しすることで編集モード(並び替えや削除ができるモード)に入ります。ここでも編集モードに切り替わる時に Haptic Feedback を行うことで、長押しジェスチャーが正しく認識されたことをユーザに伝えることができます。

Holiday では、モーダル画面を下スクロールで閉じる機能を提供しています。スクロールに合わせて画面全体を動かす方法ではなく、特定の位置までスクロールすることによって閉じるボタンのアクションを発火させるという挙動にしています。そこで、スクロール量に応じた閉じるボタンへの視覚効果とあわせて、トリガーとなる閾値での Haptic Feedback も行っています。

また、アイテムを長押しで並び替えることができる機能を提供している画面があり、そこでも並び替えが有効になるタイミングに合わせて視覚効果と Haptic Feedback を同時に発生させています。

以上4つの定番パターンを紹介しました。もちろんこれがすべてのパターンではありませんが、まずはこれらのどれかに当てはまるような箇所に Haptic Feedback を適用してみるのが良いかと思います。

最後に

iPhone アプリに Haptic Feedback を組み込むことはとても簡単で効果抜群です。高性能な Taptic Engine と使いやすい API によって、使いどころさえおさえれば、誰でも簡単に一段上のマイクロインタラクションを実現できます。

アプリはサービスとユーザを繋ぐインタフェースなので、サービスの価値を正しく伝えるために細部のインタラクションにもこだわっていきたいですね。

おまけ:Haptic Feedback の実装


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

22

Keisuke Tada

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
3つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。