ボタンをタップした時、スワイプした時、アプリのコアな体験をした時・・・
Haptic Feedbackがうまく設計されているアプリは、触っていて心地よい感覚になります。
この記事では、今のプロダクトを少しでも良くするために、
- 押した時だけではない、Haptic Feedbackの使い所
- Haptic Feedbackの"鮮明さ"を微調整しよう
- MacOSでもHaptic Feedbackを使おう
- これは良い！と感じさせられたHaptic Feedbackの事例
について考察していきます。
触覚👋は、視覚👀、聴覚🦻よりもパーソナルな感覚
不思議なことに触覚刺激は、自身の内側で生まれたパーソナルな感覚と捉えられているようです。
これを心理学的に触覚は近感覚、視覚や聴覚は遠感覚と呼んでいます。
引用
Haptic Feedbackとはボタンをタップした時などに端末が振動する仕組みです。
"触る"という体験は、"見る"、"聴く"よりもパーソナルな感覚として気持ちに作用します。
心地よい設計ができればプロダクトの印象が良くなる一方、多用しすぎると「うるさいアプリだなぁ」といった感覚になってしまいます。
それではHaptic Feedbackはどのように導入していけば良いのでしょうか。
押した時だけではない、Haptic Feedbackの使い所
よく導入されているケースとして、ボタンを押した時のHaptic Feedbackがあります。
今回は、それ以外に長押しや、スワイプなどのケースを見ていきましょう。
閾値を超えた時
スワイプしている時に閾値を超える瞬間があります。
例えば引っ張って画面を更新するPull to refreshは、これ以上引っ張ると更新されるという閾値が存在します。
閾値を超えた時にUI上の変化も起こりますが、Haptic Feedbackで伝えてあげた方が親切ですし、画面をしっかりみていなくても、なんとなく使える体験を提供できます。
他には連絡先アプリにあるような画面右側の「A-Z」のボタンです。
タップ時はもちろん、スワイプしながら文字と文字の間を移動したときにHaptic Feedbackがあります。
ボタン自体が手に隠れているため、ボタンを押している位置が分かりずく、Haptic Feedbackがあるのと無いのでは体験が違います。
スニダンのアプリでも取り入れています。
ぜひダウンロードして体験してみてください
成功・警告・エラー
交通決済で成功した時、または失敗した時にもブブッとフィードバックがあります。
AppleのHuman Interface Guidelines(HIG)には成功、警告、エラーのフィードバックが定義されています。
HIGではHaptic Feedbackを再現できませんが、音で体感できます。
もちろん、交通決済以外にも時間のかかる重要なタスクの完了後にフィードバックすることで、ユーザーの注意を戻すことができます。
Flutterで再現させようとすると、標準の HapticFeedbackでは提供されていませんが、haptic_feedbackというパッケージを使えば簡単に実現できそうです。
await Haptics.vibrate(HapticsType.success);
await Haptics.vibrate(HapticsType.warning);
await Haptics.vibrate(HapticsType.error);
コアな体験
プロダクトのコアな体験をした時にHaptic Feedbackを発生させるのも良いなと思います。
例えばスニダンでは商品をカート追加時に発生させています。
逆に全てのボタンを押した時にHaptic Feedbackが発生すると、少しうるさい印象になってしまうような気がします。
一慣性を持とう
Haptic Feedbackは導入自体は楽ですが、デザイナーから具体的な指定があるケースは少なく、エンジニアがよしなに決めるケースも多いのではないでしょうか。
そうすると
- 画面Aでは発生するけど画面Bでは発生しない
- あちこちでHaptic Feedbackの強弱が異なる
などの一貫性が失われていきます。
そうするとユーザーは、バグじゃないのか? ちゃんと押せているのか?などと困惑してしまいます。
なので、どんなケースでどんな種類のHaptic Feedbackを提供するか、チームで話してみても良いかもしれません。
次にHaptic Feedbackの種類を考察していきましょう。
強さを変えよう
まず初めにHapticsの種類でよく扱うのが"強さ"です。
Flutter標準でも簡単に扱えますね。
HapticFeedback.heavyImpact();
HapticFeedback.mediumImpact();
HapticFeedback.lightImpact();
強さだけじゃない…鮮明さを扱う！
Flutterを使っていたら強さの違いはご存知かと思います。
しかし、Haptic Feedbackには強さだけではなく鮮明さの調整もできます。
例えばiPhoneの、ホーム画面のライトボタンは鮮明さが"鋭く"、画面下部をPull upした際の閾値を超えた時のHaptic Feedbackは鮮明さが鈍いのです(App Switcher)。
この鮮明さはHIGでも音で体験できますが、実際に触った方がわかりやすいと思います。
では、鮮明さをどういったケースで使い分けると良いのでしょうか?
HIGにはこんなことが書かれています。
鮮明さの値を使用すると、柔らさ、丸み、有機的といった感覚や、堅さ、正確さ、機械的といった感覚を伝えることができます。
具体的なケースが明記されているわけではなく、イメージの世界の話です。
プロダクトによってもユーザーに与えたい印象は変わってくるので、いろんな鮮明さを試してみるのが良いと思います。
個人的にはタップする系は鮮明さを高くし(0.8~0.9)、スワイプなどのジェスチャによって発生するHapticsは鮮明さを低く(0.2~0.3)したりしています。
実例は後半に記述しています。
鮮明さを実装するには?
SwiftではCore Haptic Feedbackを使って鮮明さを調整できます。
0.0 ~ 1.0の間で指定します。
残念ながらFlutterデフォルトのHapticFeedbackでは、これまた提供されていませんがhaptic_feedbackではrigidとsoftというメソッドで鮮明さの異なるHaptic Feedbackが提供されています。
とはいえ、私の個人開発で、もう少し細かく鮮明さを調整したいケースがあるので、packageを自作してSwiftのCore Hapticsを読んでいます。
公開しているpackageではないので参考程度に見てもらえると嬉しいです。
macOSでHaptic Feedbackさせて意味あるの?
ここまではモバイルについて深掘りしてきましたが、次はデスクトップアプリについても見ていきます。
基本的にデスクトップはトラックパッドやマウスを使っています。
物理デバイス自体に押した感覚があるためHaptic Feedbackは必要ありません。
しかし、トラックパッドのみHaptic Feedbackを提供するケースがあります。
それが、並び替えです。
Arcというブラウザではタブを並び替える際に閾値を超えたタイミングでHaptic Feedbackがあります。
これは良い！と感じさせられたHapticsの例
最後に普段色々なアプリを触っていて、これは良い！と思った事例を紹介します。
是非インストールして触ってみてください！
Arc searchのPull to refresh
Arc searchというブラウザアプリではPull to refreshの時に閾値だけではなく、引っ張る距離によってちょっとずつHaptic Feedbackの強度が強くなっていきます。
そして閾値を超えたタイミングで、スパーーンと強めのHaptic Feedbackがあります。
Arc searchのスワイプバック
同じくArc searchではスワイプバック時に"これ以上スワイプすると画面を戻る"閾値でHaptic Feedbackがあります。
アニメーションも伴っていてより引っ張っている感が増しています。
*(画面の端、エッジスワイプではHaptic Feedbackはありません。)
ポケポケのカード開封
最近流行りのポケモンカードゲームアプリ、ポケポケでパックを開封する際のHaptic Feedbackも心地よさを感じます。
Swipe articles
宣伝みたいになって恐縮ですが、個人開発アプリで、某マッチングアプリのように記事をスワイプでGood, Badするアプリを開発しています。
このアプリもスワイプでGoodした時と、ボタンでGoodした時の鋭さを変えています。
現在TestFlightで体験版を配信しているのでぜひ触ってみてください。
最後に
普段アプリを実装していて「ここをタップした時にHaptic Feedbackを強さ0.8、鮮明さ0.2でお願いします！」と細かく指定されるケースは少ないと思います。
逆にエンジニアがプラットフォームごとにどんなHaptic Feedbackを実装可能かを提案できると、より良いユーザー体験を実現できるのではないでしょうか。
もし良かったら、この記事にいいねしてもらえると次も書こうって励みになります！
また、X(Twitter)やZennでエンジニアリングやデザインの発信をしているので良かったらフォローおしてください！✌️
もっとHapticsを深めたい人へ(参考記事)
最後まで読んでいただきありがとうございます
最後まで読んでいただきありがとうございます！
「より良いユーザー体験を求めて〜」シリーズを他にも書いてあるので良かったら読んでみてください！
株式会社SODAの開発組織がお届けするZenn Publicationです。 是非Entrance Bookもご覧ください！ → recruit.soda-inc.jp/engineer
Discussion