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
3k
Haptic Feedbackでクセになるユーザー体験を提供しよう!
Issei Ueda
August 24, 2024
Tweet
Share
More Decks by Issei Ueda
See All by Issei Ueda
Haptic Feedbackの本質を掴んで プロダクトに導入しよう!
cocona15531
0
69
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
14k
KATA
mclloyd
32
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Power of CSS Pseudo Elements
geoffreycrofte
78
6k
Become a Pro
speakerdeck
PRO
29
5.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Thoughts on Productivity
jonyablonski
70
4.8k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
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