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
1.2k
Haptic Feedbackでクセになるユーザー体験を提供しよう!
Issei Ueda
August 24, 2024
Tweet
Share
More Decks by Issei Ueda
See All by Issei Ueda
Haptic Feedbackの本質を掴んで プロダクトに導入しよう!
cocona15531
0
39
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Design by the Numbers
sachag
277
19k
RailsConf 2023
tenderlove
28
810
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Facilitating Awesome Meetings
lara
49
5.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Gamification - CAS2011
davidbonilla
79
5k
The Mythical Team-Month
searls
218
43k
Optimising Largest Contentful Paint
csswizardry
30
2.8k
How STYLIGHT went responsive
nonsquared
93
5.1k
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