Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Haptic Feedbackでクセになるユーザー体験を提供しよう!
Search
Issei Ueda
August 24, 2024
0
3.2k
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
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1k
GitHub's CSS Performance
jonrohan
1032
470k
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
BBQ
matthewcrist
89
9.9k
Practical Orchestrator
shlominoach
190
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Rails Girls Zürich Keynote
gr2m
95
14k
YesSQL, Process and Tooling at Scale
rocio
174
15k
We Have a Design System, Now What?
morganepeng
54
7.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
The Cost Of JavaScript in 2023
addyosmani
55
9.3k
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