Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Haptic Feedback による効果的なマイクロインタラクション
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Keisuke Tada
August 31, 2018
Design
15k
4
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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
400
Non-Designer's Design
tdksk
3
570
Tablet View of COOKPAD Website
tdksk
0
250
Other Decks in Design
See All in Design
2026-04-06 CMU School of Design "Vision-Driven Design"
ishii_mit
0
140
decksh object reference
ajstarks
2
1.8k
「おすすめ」はなぜ信用されないのか - 信頼を築くUI/UX設計
ryu1013
0
260
Accelerating performance improvement based on a software review evaluation matrix
kitanosirokuma
0
300
全員がアウトプットを出せる時代、 誰を採用する?
nishame
0
660
再設計される業務 - AIにより再設計される "デザインワークフロー" / AI Ops Lab #2 Redesigned orkflows
kgsi
0
910
Build for the Web, Build on the Web, Build With the Web
csswizardry
0
560
Edmonton River Slidedeck
edmontonriver
0
280
富山デザイン勉強会_デザイン思考.pdf
keita_yoshikawa
3
160
個人理念(自分の言葉)の言語化ワークショップ
kakukoki
1
210
速く作れるかではなく、速く学べるか ― 学習ループを回すパイロットの途中報告
nagata03
0
650
設計の進め方と 品質特性品質特性
harakeishi
0
1.3k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Skip the Path - Find Your Career Trail
mkilby
1
230
The SEO Collaboration Effect
kristinabergwall1
1
550
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.8k
Information Architects: The Missing Link in Design Systems
soysaucechin
1
1.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.4k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
500
A Modern Web Designer's Workflow
chriscoyier
699
190k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.5k
Bash Introduction
62gerente
615
220k
Six Lessons from altMBA
skipperchong
29
4.5k
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.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