Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Haptic Feedback による効果的なマイクロインタラクション
Keisuke Tada
August 31, 2018
Design
4
7.3k
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
190
Non-Designer's Design
tdksk
3
480
Tablet View of COOKPAD Website
tdksk
0
140
Other Decks in Design
See All in Design
Episode 5 Onyx Monster Mysteries Song sequence
ivettetwin
0
290
A Designer’s Guide to Documenting Accessibility & User Interactions
stephaniewalter
0
7.3k
Meep
vincentwu
PRO
1
240
デザイン編 Hatena Engineer Seminar #19
takuwolog
2
600
Introduce Celebration Grid
nakahara
0
180
採用担当デザイナーがみるポートフォリオのポイント
yonekura907
0
480
2021年度進級制作展プレゼンスライド
nagi_1073
0
190
やさしいBacklogの使い方
wattlaa
2
400
20220120modelinglt_miure
miure
1
240
Owl House Story Test
blakedg95
1
320
デザインとフロントエンドの最先端! 最新ツールを駆使したデザインから実装、そしてプロトタイプまでのシームレスな流れ【第9回】
fixel_admin
1
480
group-pdf-export.pdf
ujki
1
880
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
Ruby is Unlike a Banana
tanoku
91
9.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
25
1.4k
KATA
mclloyd
7
8.6k
The Invisible Side of Design
smashingmag
289
48k
The Illustrated Children's Guide to Kubernetes
chrisshort
14
34k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
Bootstrapping a Software Product
garrettdimon
294
110k
Writing Fast Ruby
sferik
612
57k
What's in a price? How to price your products and services
michaelherold
229
9.3k
Support Driven Design
roundedbygravity
86
8.4k
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