Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for Keisuke Tada Keisuke Tada
August 31, 2018
Design
4
14k

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

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

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

Keisuke Tada

August 31, 2018
Tweet

More Decks by Keisuke Tada

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

Other Decks in Design

See All in Design
Fem tips om ux-text • WSA-dagen 29 jan 2025
Avatar for Jonas Söderström jonas_blind_hen
PRO
0
170
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
Avatar for r.aoki u_ri_ta
2
190
Crisp Code inc. ブランドガイドライン
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
170
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
Avatar for 山口哲弘 t2yamaguchi429
0
250
セブンデックス カルチャーブック
Avatar for セブンデックス sevendex
1
12k
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
Avatar for Yuki Fujisaki tnj
0
370
私とデザインの10年
Avatar for なつ iflection
0
110
オリジナルのデザイン地図を作ってみた！〜OpenMapTilesとMaputnikを活用した地図スタイル〜
Avatar for Hajime Kato hjmkth
1
490
AIで加速するアクセシビリティのこれから
Avatar for Rikiya Ihara / magi magi1125
3
350
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
Avatar for Takehiro KAWASE tkhr_kws
3
330
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
Avatar for kkaru kkaru
0
290
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
Avatar for sugiyama sugiyama_sukedachi
0
110

Featured

See All Featured
BBQ
Avatar for Matthew Crist matthewcrist
88
9.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.7k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
70k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
52
7.6k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
298
21k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.6k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
268
20k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
38
1.8k

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