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
13k
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
340
Non-Designer's Design
tdksk
3
530
Tablet View of COOKPAD Website
tdksk
0
220
Other Decks in Design
See All in Design
How to go from research data to insights?
mastervicedesign
0
230
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.2k
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
250
Personal Story Sequence - Vendetta(WIP)
elrns88
0
420
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
340
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
130
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
390
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
440
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
290
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
110
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
150
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5.2k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
530
Building Applications with DynamoDB
mza
93
6.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Six Lessons from altMBA
skipperchong
27
3.6k
RailsConf 2023
tenderlove
29
1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Unsuck your backbone
ammeep
669
57k
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