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
Keisuke Tada
August 31, 2018
Design
4
14k
Haptic Feedback による効果的なマイクロインタラクション
iOSDC Japan 2018
2018/08/31 18:00〜 Track D
詳しく説明した記事 →
https://note.mu/tdksk/n/nb4498e59dcad
Keisuke Tada
August 31, 2018
Tweet
Share
More Decks by Keisuke Tada
See All by Keisuke Tada
少人数スタートアップでどうやって素早くユーザに価値を届けるか
tdksk
0
370
Non-Designer's Design
tdksk
3
540
Tablet View of COOKPAD Website
tdksk
0
230
Other Decks in Design
See All in Design
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
770
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
280
Yumika Yamada Portfolio
yumii
0
2.2k
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
230
Memory Man v3 (WIP)
storybychad
PRO
0
2.8k
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
180
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
720
佐藤千晶|ポートフォリオ
chimi_chia
0
270
kintone_aroma
kintone
0
600
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
170
【最新】マズロー安達の弟子実績(1期-6期の37人分)
maslow_akkun
0
3.4k
Liquid GlassとApp Intents
touyou
0
480
Featured
See All Featured
Docker and Python
trallard
46
3.6k
A designer walks into a library…
pauljervisheath
210
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
660
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
4 Signs Your Business is Dying
shpigford
186
22k
Done Done
chrislema
186
16k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Transcript
Haptic Feedback による 効果的なマイクロインタラクション Keisuke Tada
多田 圭佑 ホリデー株式会社 デザイナー w )PMJEBZͱ͍͏αʔϏεͷϓϩμΫτશൠΛ୲ w ͠Β͘J04։ൃ͕ϝΠϯ
None
Haptic Feedback 触覚
None
話すこと w )BQUJD'FFECBDLಋೖ؆୯ͰޮՌൈ܈ w ͕ɺ͍Ͳ͜Ζ͕Θ͔Βͳ͍ͱಋೖͰ͖ͳ͍ w ɹޮՌతͳ͍Ͳ͜ΖΛ͝հ͠·͢ʂ C
Haptic Feedback とは
None
というのは半分冗談ですが…
一見地味だが非常に有効 w ݶΒΕͨ໘ੵͷεΫϦʔϯͰͷ ࢹ֮ϑΟʔυόοΫ͚ͩͰͲ͏ͯ͠ݶք͕͋Δ w ৮֮ݱ࣮ੈքͰৗతʹཔΓʹ͍ͯ͠Δײ֮ w ࢹ֮ʴ৮֮ͰΘΓ͍͢ϑΟʔυόοΫΛ࣮ݱͰ͖Δ
導入が簡単 w 6*తʹ؆୯ w ৮֮ΛՃ͢Δ͚ͩ w طଘͷࢹ֮తͳ6*ͱׯব͠ͳ͍ w ࣮͕؆୯ w
ߦॻ͚ͩ͘
ただし
⚠ 乱用しないこと (Human Interface Guideline より意訳)
乱用しないために w )*(͔ΒֶͿ w ΨΠυϥΠϯߟ͑ํΛΔ w ࣄྫ͔ΒֶͿ w ࣄྫ͔ΒҰஈநԽͯ͠ଊ͑Δ͜ͱͰԠ༻Ͱ͖Δ
Haptic Feedback 基礎知識
Notification Impact Selection
Notification Impact Selection Success Warning Failure https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/feedback/
Notification Impact Selection Light Medium Heavy https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/feedback/
Notification Selection Impact Selection https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/feedback/
Haptic Feedback の原則 (1/2) w ཚ༻͠ͳ͍ w ϢʔβͷΞΫγϣϯʹର͢ΔϨεϙϯεͱͯ͠͏ w ϑΟʔυόοΫͷछྨΛউखʹ࠶ఆٛ͠ͳ͍
w ࢹ֮ޮՌͱ߹ΘͤΔ (Human Interface Guideline より)
Haptic Feedback の原則 (2/2) w )BQUJD'FFECBDL͚ͩʹཔΒͳ͍ w ࢹ֮తͳϑΟʔυόοΫ͕ӅΕ͍ͯΔ࣌ʹ͏ w ࣄલʹ5BQUJD&OHJOFΛ४උ͢Δ
w Իͱಉظ͢Δ (Human Interface Guideline より)
Haptic Feedback 定番パターン &応用例
成功・失敗時 ①
None
None
None
応用
応用
入力が受け付けられた時 ②
None
応用
①と②の使い分け w ॏ͍ΞΫγϣϯˠ①ޭɾࣦഊ࣌ʹϑΟʔυόοΫ w ॏཁ͕ߴ͍߹ɺࣦഊ͍͢͠߹ɺFUD w ͍ܰΞΫγϣϯˠ②ೖྗड࣌ʹϑΟʔυόοΫ w ස͕ߴ͍߹ɺॲཧ͕ܰ͘ݟ͑Δ߹ɺͳͲ
連続的な値の変化時 ③
None
None
応用
トリガーの閾値を超えた時 ④
None
None
None
応用
応用
まとめ ①ޭɾࣦഊ࣌ ②ೖྗ͕ड͚͚ΒΕͨ࣌ ③࿈ଓతͳͷมԽ࣌ ④τϦΨʔͷᮢΛ͑ͨ࣌
まとめ w )BQUJD'FFECBDLޮՌൈ܈ w ಋೖͱͯ؆୯ w ͍Ͳ͜ΖʢΘ͔Εʣ؆୯ w ɹऔΓೖΕ͍ͯͳ͍ਓࠓ͙͢औΓೖΕͯΈ·͠ΐ͏ʂ C
おまけ Haptic Feedback 実装
基本はこれだけ
遅延を防ぐ w 5BQUJD&OHJOFΛࣄલʹ४උ͠ͳ͍ͱɺ)BQUJD'FFECBDL ͕ΕΔՄೳੑ͕͋Δ w ४උ͢ΔͨΊͷϝιουΛదͳλΠϛϯάͰݺͿ w ૣ͗ͯ͗ͯͩ͢͢ΊʢඵؒͰΞΠυϧঢ়ଶʹͳΔʣ w ʢͨͩɺܦݧଇͰؾʹͳΔΑ͏ͳԆ͕ൃੜ͢Δ͜ͱ΄΅
ͳ͍ʣ
... ... ...
None