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
15k
4
Share
Haptic Feedback による効果的なマイクロインタラクション
iOSDC Japan 2018
2018/08/31 18:00〜 Track D
詳しく説明した記事 →
https://note.mu/tdksk/n/nb4498e59dcad
Keisuke Tada
August 31, 2018
More Decks by Keisuke Tada
See All by Keisuke Tada
少人数スタートアップでどうやって素早くユーザに価値を届けるか
tdksk
0
390
Non-Designer's Design
tdksk
3
550
Tablet View of COOKPAD Website
tdksk
0
240
Other Decks in Design
See All in Design
「バイブコーディングって何?」から始まった、 AIとの一年間と、その先のこと
seto
0
180
root COMPANY DECK / We are hiring!
root_recruit
2
27k
【優秀賞+特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
shoko_seven11
0
120
From the Visible Crossroads: Turning Outputs into Outcomes
takaikanako
2
1.3k
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
2.2k
kintone Style Book
kintone
6
12k
図じゃなく言語で描く - Common Ground for Design AI Operations.
kazukiikeda
2
740
Franks Myth
gfht1
2
450
情報を翻訳する-伝わる可視化3原則とオープンデータ活用-
hjmkth
1
190
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
koyaman
1
1.7k
絵や写真から学ぶ、要素がもたらす副作用
kspace
0
240
Ralph Penel Portfolio
ralphpenel
0
370
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Between Models and Reality
mayunak
2
250
Navigating Team Friction
lara
192
16k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
120
WCS-LA-2024
lcolladotor
0
500
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
230
Discover your Explorer Soul
emna__ayadi
2
1.1k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
780
My Coaching Mixtape
mlcsv
0
91
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
94
sira's awesome portfolio website redesign presentation
elsirapls
0
200
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