$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Haptic Feedbackでクセになるユーザー体験を提供しよう!
Search
Issei Ueda
August 24, 2024
0
3.1k
Haptic Feedbackでクセになるユーザー体験を提供しよう!
Issei Ueda
August 24, 2024
Tweet
Share
More Decks by Issei Ueda
See All by Issei Ueda
Haptic Feedbackの本質を掴んで プロダクトに導入しよう!
cocona15531
0
71
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.3k
RailsConf 2023
tenderlove
30
1.3k
Documentation Writing (for coders)
carmenintech
76
5.2k
[SF Ruby Conf 2025] Rails X
palkan
0
480
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Java REST API Framework Comparison - PWX 2021
mraible
34
9k
The Cost Of JavaScript in 2023
addyosmani
55
9.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Transcript
Haptic Feedbackでクセになる ユーザー体験を提供しよう! イッセー
Haptic Feedbackとは どんな技術 • ユーザーのタッチやジェスチャーに応じて、 デバイスが物理的な振動をする技術 • デバイスがブルッと振動する 使用する事で •
ユーザー体験が向上する ◦ 視覚や聴覚だけでなく、触覚でも体験できる • 個性が出せる ◦ Haptic Feedbackを活用しているアプリは まだ少ないため、差別化できる • アクセシビリティが向上する ◦ 視覚に頼らず、成功や失敗のフィードバックを 提供できる 2
「クセになる」とは 背景として、昨今リリースされたアプリでは多くのアクション にHaptic Feedbackが使われており、新鮮味があって心地 良いと感じる。 ↓ つまり、 Haptic Feedbackを取り入れることにより アプリの使用感が向上するため、クセになると感じる。
今回は、Appleのベストプラクティスを踏まえながら、 「クセになる」使い方を紹介します。 ChatGPT 3 Arc Search
Appleが説くベストプラクティス • フィードバックはドキュメント化されている用途に従って使用する。 • 視覚、聴覚に合わせたフィードバックを提供する。 • 個々のイベントに対して短いフィードバックを使用する。 Apple Human Interface
Guidelinesより抜粋 Playing haptics | Apple Developer Documentation 4
ユーザーによるアクション • ボタン押下時 • フォームの送信時 • 設定の変更時 ボタン押下時には即座に軽い振動で確認を伝えら れる。 フォーム送信、設定変更時に振動することで、
ユーザーに操作が成功・失敗したことを伝えられ る。 ユースケース 5
通知とアラート • メッセージの受信時 • システム警告などの通知時 短い振動を使用して、ユーザーに注意を引きつけ る。 ユースケース 6
インタラクティブ要素 • スクロールホイールやスライダーを操作時 • メニューの選択やオプション切り替え時 抵抗感やクリック感をフィードバックで再現し、 UIの操作感を強化できる。 ユースケース 7
使ってみよう 〜UIFeedbackGenerator〜 ユーザーにフィードバックを提供するための機能を 提供するクラス。 • UIImpactFeedbackGenerator ◦ 視覚的な体験を補完する • UISelectionFeedbackGenerator
◦ UI 要素の値が変更される時に行う • UINotificationFeedbackGenerator ◦ 成功・失敗・警告といった結果を伝える • UICanvasFeedbackGenerator ◦ Apple Pencil Proを使用する際に役立つ 8 以下のように数行で実装できます
使ってみよう 〜Core Haptics〜 Core Hapticsはカスタマイズしたフィードバックを 追加できるフレームワーク。 使用ケース • UIFeedbackGenerator意外のフィードバック を使用したい時
• アニメーションに合わせてフィードバックを加 えたい時 • フィードバックを合成させたい時 9
まとめ • Haptic Feedbackを適切に使う事でユーザー体験が向上し、結果的にクセになるア プリを開発できる。 • まずは、数行で実装できるUIFeedbackGeneratorを試してみよう。 • 既存のフィードバックで物足りない場合は、Core Hapticを使用して自分好みの
Haptic Feedbackを実装しよう。 10