Haptic Feedbackの本質を掴んで プロダクトに導入しよう！

Transcript

1. 株式会社ZOZO
 ブランドソリューション開発本部 FAANS部 フロントエンドブロック
 上田 壱成 Copyright © ZOZO, Inc. 1 Haptic Feedbackの本質を掴んで プロダクトに導入しよう！ ポスターセッションを踏まえて
2. © ZOZO, Inc. 株式会社ZOZO ブランドソリューション開発本部 FAANS部 フロントエンドブロッ ク 上田 壱成 2024年4月に株式会社ZOZOに新卒入社し、ショップス タッフ向けの販売サポートツール「FAANS」のiOSアプ リ開発に従事 趣味は筋トレ、ステッカー集め、ガジェット全般 2
3. © ZOZO, Inc. 3 目次 1. ポスターセッションのおさらい 2. セッションを終えて知ることができた現状 3. Haptic Feedbackの本質 4. 導入する際に心掛けたいこと 5. まとめ
4. © ZOZO, Inc. 4 目次 1. ポスターセッションのおさらい 2. セッションを終えて知ることができた現状 3. Haptic Feedbackの本質 4. 導入する際に心掛けたいこと 5. まとめ
5. Haptic Feedbackとは どんな技術 • ユーザーのタッチやジェスチャーに応じて、 デバイスが物理的な振動をする技術 • デバイスがブルッと振動する 使用することで • ユーザー体験が向上する ◦ 視覚や聴覚だけでなく、触覚でも体験できる • 個性が出せる ◦ Haptic Feedbackを活用しているアプリは まだ多くないため、差別化できる • アクセシビリティが向上する ◦ 視覚に頼らず、成功や失敗のフィードバックを 提供できる 5 © ZOZO, Inc.
6. 「クセになる」とは 背景として、昨今リリースされたアプリでは多くのアクション にHaptic Feedbackが使われており、新鮮味があって心地 良いと感じる。 ↓ つまり、 Haptic Feedbackを取り入れることにより アプリの使用感が向上するため、クセになると感じる。 今回は、Appleのベストプラクティスを踏まえながら、 「クセになる」使い方を紹介します。 ChatGPT 6 Arc Search © ZOZO, Inc.
7. Appleが説くベストプラクティス • フィードバックはドキュメント化されている用途に従って使用する。 • 視覚、聴覚に合わせたフィードバックを提供する。 • 個々のイベントに対して短いフィードバックを使用する。 Apple Human Interface Guidelinesより抜粋 Playing haptics | Apple Developer Documentation 7 © ZOZO, Inc.
8. ユーザーによるアクション • ボタン押下時 • フォームの送信時 • 設定の変更時 ボタン押下時には即座に軽い振動で確認を伝えら れる。 フォーム送信、設定変更時に振動することで、 ユーザーに操作が成功・失敗したことを伝えられ る。 ユースケース 8 © ZOZO, Inc.
9. 通知とアラート • メッセージの受信時 • システム警告などの通知時 短い振動を使用して、ユーザーの注意を引きつけ る。 ユースケース 9 © ZOZO, Inc.
10. インタラクティブ要素 • スクロールホイールやスライダーの操作時 • メニューの選択やオプション切り替え時 抵抗感やクリック感をフィードバックで再現し、 UIの操作感を強化できる。 ユースケース 10 © ZOZO, Inc.
11. 使ってみよう 〜UIFeedbackGenerator〜 ユーザーにフィードバックを提供するための機能を 提供するクラス。 • UIImpactFeedbackGenerator ◦ 視覚的な体験を補完する • UISelectionFeedbackGenerator ◦ UI 要素の値が変更される時に行う • UINotificationFeedbackGenerator ◦ 成功・失敗・警告といった結果を伝える • UICanvasFeedbackGenerator ◦ Apple Pencil Proを使用する際に役立つ 11 以下のように数行で実装できます © ZOZO, Inc.
12. 使ってみよう 〜Core Haptics〜 Core Hapticsはカスタマイズしたフィードバックを追 加できるフレームワーク。 使用ケース • UIFeedbackGenerator以外のフィードバック を使用したい時 • アニメーションに合わせてフィードバックを加 えたい時 • 長めのフィードバックを使用したい時 12 © ZOZO, Inc.
13. まとめ • Haptic Feedbackを適切に使うことでユーザー体験が向上し、結果的にクセになる アプリを開発できる。 • まずは、数行で実装できるUIFeedbackGeneratorを試してみよう。 • 既存のフィードバックで物足りない場合は、Core Hapticを使用して自分好みの Haptic Feedbackを実装しよう。 13 © ZOZO, Inc.
14. © ZOZO, Inc. 14 目次 1. ポスターセッションのおさらい 2. セッションを終えて知ることができた現状 3. Haptic Feedbackの本質 4. 導入する際に心掛けたいこと 5. まとめ
15. © ZOZO, Inc. 15 セッションを終えて知ることができた現状 • アニメーションに合わせて使用している • 成功されたときに使われるケースが多い • エンタメ要素とは相性が良い • ハプティックが気持ち良い • 新技術を取り入れる中で使っている
16. © ZOZO, Inc. 16 セッションを終えて知ることができた現状 一方で... • なかなか使い所が難しい • 使ってみると満足感は高いけど、プロジェクトとしての優先度は低い • ユーザーテストを行うと半々くらい ◦ 振動が強かったり多かったりしてユーザーは鬱陶しさを感じていた 実際にプロダクトにHaptic Feedbackを導入しているかどうか聞くと、 割合はちょうど半々だった
17. © ZOZO, Inc. 17 目次 1. ポスターセッションのおさらい 2. セッションを終えて知ることができた現状 3. Haptic Feedbackの本質 4. 導入する際に心掛けたいこと 5. まとめ
18. © ZOZO, Inc. 18 振動することでユーザーに印象付けできる
19. © ZOZO, Inc. 19 振動することでユーザーに印象付けできる 触覚は人が特に感じるもの • 脳に記憶されやすい • 良いアクションに対するフィードバックや、望ましくないアクションに対す るフィードバックはそれぞれ結びつき、印象に残りやすくなる ◦ 結果として、良いアクションを促せる
20. © ZOZO, Inc. 20 振動することでユーザーに印象付けできる デバイスで情報を表示するには限界がある • 目に見える情報だけでは完全に理解でき ない場合もあるので、その情報をフィー ドバックで補完できる • アクションが成功したかどうかが、指で 画面が隠れて確認できない場合に、 Haptic Feedbackが役立つ
21. © ZOZO, Inc. 21 目次 1. ポスターセッションのおさらい 2. セッションを終えて知ることができた現状 3. Haptic Feedbackの本質 4. 導入する際に心掛けたいこと 5. まとめ
22. © ZOZO, Inc. 22 導入する際に心掛けたいこと ▪ Haptic Feedbackの意義・目的を明文化する ▪ 実機で体験しながらフィードバックを決める ▪ ユーザーテストをする
23. © ZOZO, Inc. 23 Haptic Feedbackの意義・目的を明文化する 導入するプロダクトとHaptic Feedbackの 位置付けを確認する • Human Interface Guidelinesを確認 • プロダクトで促したいアクションを明確に し、それに対するフィードバックを定義する • フィードバックを導入することで、ユーザー が理解しやすいアクションについても検討す る ◦ 身近だとInstagramのストーリー投稿完了時 Instagram
24. © ZOZO, Inc. 24 実機で体験しながらフィードバックを決める デザイナーとも確認することで、プロダクト とHaptic Feedbackの一体感が深まる • プロダクトに適切なフィードバックを見 つける • ちなみにセッション中は実機で体験して もらいながら行いました ◦ 「この振動ならプロダクトに導入で きそう」 ◦ 「この振動は弱めだな...」
25. © ZOZO, Inc. 25 ユーザーテストをする アプリに適切なHaptic Feedbackを見つける • ユーザーが鬱陶しいと思わない頻度・強さを調査する • 改善が必要そうであれば、フィードバックの強さ・頻度を落とす
26. © ZOZO, Inc. 26 目次 1. ポスターセッションのおさらい 2. セッションを終えて知ることができた現状 3. Haptic Feedbackの本質 4. 導入する際に心掛けたいこと 5. まとめ
27. © ZOZO, Inc. 27 まとめ • Haptic Feedbackを活用することで、ユーザーに対してアクションの印象を 強く残し、行動を促すことが期待できる • Human Interface Guidelineを参考にしながら、導入するプロダクトと Haptic Feedbackをどのように効果的に結びつけるか検討する • 実際にデバイスを触れて試すことで、効果的なフィードバックを見つけるこ とができる