$30 off During Our Annual Pro Sale. View Details »

Haptic Feedback による効果的なマイクロインタラクション

Keisuke Tada
August 31, 2018
Design
4
8k

Haptic Feedback による効果的なマイクロインタラクション

iOSDC Japan 2018
2018/08/31 18:00〜 Track D

詳しく説明した記事 → https://note.mu/tdksk/n/nb4498e59dcad

Keisuke Tada

August 31, 2018
Tweet

More Decks by Keisuke Tada

See All by Keisuke Tada
少人数スタートアップでどうやって素早くユーザに価値を届けるか
tdksk
0
210
Non-Designer's Design
tdksk
3
500
Tablet View of COOKPAD Website
tdksk
0
140

Other Decks in Design

See All in Design
Lean UX でまわす、まわるプロダクト開発
mariosakata
1
520
FIT2022_levii
levii
0
210
UXA2022 Day 1; Ted Drake - Inclusive design for cognitive disabilities, neurodiversity, and chronic illness
uxaustralia
PRO
0
180
マルチブランドの実装としてのペパボのデザインシステム「Inhouse」
shikakun
1
490
「Social Food‐Drive」福祉的な食料支援のしくみづくり中間レポート
koshiba_noriaki
1
120
メタバース プレゼン講座1. マインドセット編
yusuke_akita
0
110
Designship2022 デザインエンジニアが語る、隣接領域を学ぶということ
unotovive
2
840
Odyssey Design
rkendrick25
0
110
Best Practices For Designing Apps For India - Devfest Bangalore 2022
soham
0
250
Tu fais du Web et tu ne connais pas les Layout Shifts ?! Nan mais...
goetter
2
160
「プロダクトとユーザーをつなぐ」BtoB SaaSデザインの面白さ
sizucca
2
1.2k
モデルとダイアグラムの活用の本質
akiramotomura
0
320

Featured

See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
107
5.8k
Product Roadmaps are Hard
iamctodd
35
7.5k
Scaling GitHub
holman
453
140k
Docker and Python
trallard
28
1.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Practical Orchestrator
shlominoach
178
8.9k
Producing Creativity
orderedlist
PRO
335
37k
Code Review Best Practice
trishagee
48
11k
Raft: Consensus for Rubyists
vanstee
128
5.6k
Optimizing for Happiness
mojombo
364
64k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k

Transcript

  1. Haptic Feedback による 効果的なマイクロインタラクション Keisuke Tada

  2. 多田 圭佑 ホリデー株式会社 デザイナー w )PMJEBZͱ͍͏αʔϏεͷϓϩμΫτશൠΛ୲౰ w ͠͹Β͘J04։ൃ͕ϝΠϯ

  3. None

  4. Haptic Feedback 触覚

  5. None

  6. 話すこと w )BQUJD'FFECBDL͸ಋೖ΋؆୯ͰޮՌൈ܈ w ͕ɺ࢖͍Ͳ͜Ζ͕Θ͔Βͳ͍ͱಋೖͰ͖ͳ͍ w ɹޮՌతͳ࢖͍Ͳ͜ΖΛ͝঺հ͠·͢ʂ C

  7. Haptic Feedback とは

  8. None

  9. というのは半分冗談ですが…

  10. 一見地味だが非常に有効 w ݶΒΕͨ໘ੵͷεΫϦʔϯͰͷ
 ࢹ֮ϑΟʔυόοΫ͚ͩͰ͸Ͳ͏ͯ͠΋ݶք͕͋Δ w ৮֮͸ݱ࣮ੈքͰ೔ৗతʹཔΓʹ͍ͯ͠Δײ֮ w ࢹ֮ʴ৮֮Ͱ఻ΘΓ΍͍͢ϑΟʔυόοΫΛ࣮ݱͰ͖Δ

  11. 導入が簡単 w 6*తʹ؆୯ w ৮֮Λ௥Ճ͢Δ͚ͩ w طଘͷࢹ֮తͳ6*ͱׯব͠ͳ͍ w ࣮૷͕؆୯ w

    ਺ߦॻ͚ͩ͘

  12. ただし

  13. ⚠ 乱用しないこと （Human Interface Guideline より意訳）

  14. 乱用しないために w )*(͔ΒֶͿ w ΨΠυϥΠϯ΍ߟ͑ํΛ஌Δ w ࣄྫ͔ΒֶͿ w ࣄྫ͔ΒҰஈந৅Խͯ͠ଊ͑Δ͜ͱͰԠ༻Ͱ͖Δ

  15. Haptic Feedback 基礎知識

  16. Notification Impact Selection

  17. Notification Impact Selection Success Warning Failure https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/feedback/

  18. Notification Impact Selection Light Medium Heavy https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/feedback/

  19. Notification Selection Impact Selection https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/feedback/

  20. Haptic Feedback の原則 (1/2) w ཚ༻͠ͳ͍ w ϢʔβͷΞΫγϣϯʹର͢ΔϨεϙϯεͱͯ͠࢖͏ w ϑΟʔυόοΫͷछྨΛউखʹ࠶ఆٛ͠ͳ͍

    w ࢹ֮ޮՌͱ߹ΘͤΔ (Human Interface Guideline より)

  21. Haptic Feedback の原則 (2/2) w )BQUJD'FFECBDL͚ͩʹཔΒͳ͍ w ࢹ֮తͳϑΟʔυόοΫ͕ӅΕ͍ͯΔ࣌ʹ࢖͏ w ࣄલʹ5BQUJD&OHJOFΛ४උ͢Δ

    w Իͱಉظ͢Δ (Human Interface Guideline より)

  22. Haptic Feedback 定番パターン ＆応用例

  23. 成功・失敗時 ①

  24. None
  25. None
  26. None

  27. 応用

  28. 応用

  29. 入力が受け付けられた時 ②

  30. None

  31. 応用

  32. ①と②の使い分け w ॏ͍ΞΫγϣϯˠ①੒ޭɾࣦഊ࣌ʹϑΟʔυόοΫ w ॏཁ౓͕ߴ͍৔߹ɺࣦഊ͠΍͍͢৔߹ɺFUD w ͍ܰΞΫγϣϯˠ②ೖྗड෇࣌ʹϑΟʔυόοΫ w ස౓͕ߴ͍৔߹ɺॲཧ͕ܰ͘ݟ͑Δ৔߹ɺͳͲ

  33. 連続的な値の変化時 ③

  34. None
  35. None

  36. 応用

  37. トリガーの閾値を超えた時 ④

  38. None
  39. None
  40. None

  41. 応用

  42. 応用

  43. まとめ ①੒ޭɾࣦഊ࣌ ②ೖྗ͕ड͚෇͚ΒΕͨ࣌ ③࿈ଓతͳ஋ͷมԽ࣌ ④τϦΨʔͷᮢ஋Λ௒͑ͨ࣌

  44. まとめ w )BQUJD'FFECBDL͸ޮՌൈ܈ w ಋೖ͸ͱͯ΋؆୯ w ࢖͍Ͳ͜Ζ΋ʢΘ͔Ε͹ʣ؆୯ w ɹऔΓೖΕ͍ͯͳ͍ਓ͸ࠓ͙͢औΓೖΕͯΈ·͠ΐ͏ʂ C

  45. おまけ Haptic Feedback 実装

  46. 基本はこれだけ

  47. 遅延を防ぐ w 5BQUJD&OHJOFΛࣄલʹ४උ͠ͳ͍ͱɺ)BQUJD'FFECBDL ͕஗ΕΔՄೳੑ͕͋Δ w ४උ͢ΔͨΊͷϝιουΛద੾ͳλΠϛϯάͰݺͿ w ૣ͗ͯ͢஗͗ͯ͢΋ͩΊʢ਺ඵؒͰΞΠυϧঢ়ଶʹͳΔʣ w ʢͨͩɺܦݧଇͰ͸ؾʹͳΔΑ͏ͳ஗Ԇ͕ൃੜ͢Δ͜ͱ͸΄΅

    ͳ͍ʣ

  48. ... ... ...

  49. None