見出し画像

mikan でハプティック・フィードバックのルールを決めた話

はじめまして、株式会社TrashX で代表とデザイナーをしている 13an です。現在私は株式会社mikan の iOS アプリのデザインをお手伝いしており、今回はハプティック・フィードバックのルールを決めた話を書きたいと思います。

自社アプリにハプティック・フィードバックをどのようなルールで適用すればいいか考えている方に参考になる内容を書ければと思っています。読んだ後はぜひ X (Twitter) でご意見・ご感想をシェアしていただければ嬉しいです!では、早速まずは今回のプロジェクトの背景からです!


背景

mikan ではこれまでもハプティック・フィードバックを実装されていました。ただ明確にルールが決まっていたわけではなく、エンジニアが Human Interface Guidelines に則って「ここは medium をつけておくか?」「エラーだから error かな」という風に良しなに実装してくださっている状況でした。そのため iOS と Android では同じ箇所で別のハプティック・フィードバックが適用されており、このままではユーザーに一貫したフィードバックを提供できないので、mikan 内で一貫したルールを決めようとなったのが今回のプロジェクトが始まったきっかけです。

今回取り組んだこと

はじめに mikan iOS / Android アプリにおいて、なぜ、どんな時に、どんなハプティック・フィードバックを使うのかのルールを決めました。具体的な進め方と考えたことをまとめていきます。

1. Human Interface Guidelines と Material Design を解釈

各プラットフォームに合わせたアプリを作るのはとても大事です。そのためまずはそれぞれのプラットフォームがどのような実装を推奨しているかをまとめていきました。

Human Interface Guidelines の要約
Material Design の要約

基本的にはみなさんご存知の通り、一貫したルールで視覚・聴覚情報と合うようにデザインすべき。用意されたものを使うと他のアプリとも一貫したものになりユーザーが理解しやすい。乱用したり混乱させないようにね、という内容です。特に注意点としては、デバイス側の設定でオフにすることもできるので、ハプティック・フィードバックがなくても成り立つようにすべきという点ですかね。詳しくはそれぞれドキュメントをご覧ください。

2. mikan における目的・役割を決める

各プラットフォームのルールを確認した上で、mikan でハプティック・フィードバックを使う目的と役割を決めます。この目的がなければルールを決められないからです。mikan では、「mikan アプリ内で一貫したハプティクスを利用して意図した体験を作ること」を目的に、「(1)操作や結果を印象付ける役割」と「(2)操作や結果の理解を助ける役割」という役割でハプティック・フィードバックを使うことを決めました。

社内ドキュメントのスクショ

少し説明すると、役割(1)の "印象付ける役割" は重要だと考えています。私はハプティック・フィードバックの有無で記憶への残りやすさに差が生まれると考えています。そのため印象づけたい操作や結果にのみハプティック・フィードバックをつける方針にしました。例えば mikan では問題に正解した時にはハプティック・フィードバックをつけ、不正解の時にはつけません。これによりユーザーは正解して嬉しかったことを強く記憶し、不正解時の悲しい気持ちは比較的すぐに忘れることができるようになると考えています。

3. サンプラーを触りながら、具体的に指定するハプティック・フィードバックを決める

目的と役割まで決まったので、実際にどのハプティック・フィードバックを指定するのかを決めていきます。最初は各プラットフォームで用意されたものを指定するだけの予定でしたが、iOS は私が、Android は gumio さんにサンプラーを作っていただき触ってみたところ、iOS の UIImpactFeedbackGenerator() の medium と light では強さが mikan らしくないと感じたため、impactOccurred(intensity: ) で 0.7 と 0.5 を指定することにしました。デフォルトで用意されたものでも十分だと思いますが、アプリの印象にあった強さを探った結果、とても mikan らしい感触になったと感じています!

gumio (@gumioji) さんがサクッと作ってくれたサンプラー。 photo by @cure-tmk

4. ドキュメントで周知、実装

最後にここまで決めた内容をプロダクトチームに共有して終了です!

社内ドキュメントより

結果

ルールを設定したことでこれからは一貫したハプティック・フィードバックの体験を提供することができるようになりましたし、チームでも自信をもってハプティック・フィードバックを使っていくことができるようになりました!成功です!!!!!
ちなみにこれまでハプティックフィードバックなしとありで継続率を比較したところ、ありの方が継続率が高いという結果が得られたことがあります。新しいルールが反映されたバージョンはまだリリースされていませんが、リリース後また結果をお伝えできればと思います!

今後

今回は取り組めなかったのですが、将来的には mikan らしい Haptic Identity を作っていきたい考えています。例えば amo や Duolingo、Not Boring Software製のアプリを触ってみるとわかると思いますが、それぞれの "らしさ" を感じるハプティック・フィードバックになっています。視覚だけでなく触覚でもらしさを表現できると記憶にも強く残りますし、ユーザーに伝えたいブランドがより伝わりやすくなります。今回は、同時並行でブランド策定のプロジェクトが走っており、そちらがまだ完了まで時間がかかりそうだったので一旦 mikan らしさは抜きで進めました。またいつか mikan らしいハプティック・フィードバックを作る機会を楽しみにしています!

デザイナー採用中!!!

最後まで読んでくださりありがとうございます🙇‍♂️ mikanではプロダクトの改善を一緒に進めていける仲間を採用中です! 自分の会社もやりつつですが、mikanには最高のメンバーがいます。例えばブログ内のサンプラーアプリの写真。頼んだら送られてきた写真が上手い写真すぎてもはやフリー素材。ありがとうございました!!!こういう超協力的なメンバーが mikan にはたくさんいます!!! もし少しでも興味を持ってくださった方は是非お気軽にお話ししましょう☕️


mikanデザインチームのことがわかる記事一覧🍊