Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Haptic Feedbackでクセになるユーザー体験を提供しよう!
Search
Issei Ueda
August 24, 2024
0
2.9k
Haptic Feedbackでクセになるユーザー体験を提供しよう!
Issei Ueda
August 24, 2024
Tweet
Share
More Decks by Issei Ueda
See All by Issei Ueda
Haptic Feedbackの本質を掴んで プロダクトに導入しよう!
cocona15531
0
62
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
KATA
mclloyd
30
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Facilitating Awesome Meetings
lara
54
6.5k
Building an army of robots
kneath
306
45k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Scaling GitHub
holman
460
140k
Code Review Best Practice
trishagee
69
19k
Balancing Empowerment & Direction
lara
1
460
Music & Morning Musume
bryan
46
6.7k
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