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

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

Keisuke Tada
August 31, 2018

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

Other Decks in Design

Transcript

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

    View Slide

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

    View Slide

  3. View Slide

  4. Haptic Feedback
    触覚

    View Slide

  5. View Slide

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

    View Slide

  7. Haptic Feedback
    とは

    View Slide

  8. View Slide

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

    View Slide

  10. 一見地味だが非常に有効
    w ݶΒΕͨ໘ੵͷεΫϦʔϯͰͷ

    ࢹ֮ϑΟʔυόοΫ͚ͩͰ͸Ͳ͏ͯ͠΋ݶք͕͋Δ
    w ৮֮͸ݱ࣮ੈքͰ೔ৗతʹཔΓʹ͍ͯ͠Δײ֮
    w ࢹ֮ʴ৮֮Ͱ఻ΘΓ΍͍͢ϑΟʔυόοΫΛ࣮ݱͰ͖Δ

    View Slide

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

    View Slide

  12. ただし

    View Slide

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

    View Slide

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

    View Slide

  15. Haptic Feedback
    基礎知識

    View Slide

  16. Notification Impact Selection

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. 成功・失敗時

    View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. 応用

    View Slide

  28. 応用

    View Slide

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

    View Slide

  30. View Slide

  31. 応用

    View Slide

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

    View Slide

  33. 連続的な値の変化時

    View Slide

  34. View Slide

  35. View Slide

  36. 応用

    View Slide

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

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. 応用

    View Slide

  42. 応用

    View Slide

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

    View Slide

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

    View Slide

  45. おまけ
    Haptic Feedback
    実装

    View Slide

  46. 基本はこれだけ

    View Slide

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

    View Slide

  48. ...
    ...
    ...

    View Slide

  49. View Slide