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

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

D10c346cbd9d9f10b37fee2fee007ee1?s=47 Keisuke Tada
August 31, 2018
Design
4
7.3k

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

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

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

D10c346cbd9d9f10b37fee2fee007ee1?s=128

Keisuke Tada

August 31, 2018
Tweet

More Decks by Keisuke Tada

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

Other Decks in Design

See All in Design
Episode 5 Onyx Monster Mysteries Song sequence
5bce9e09e585aed42d646c47c7da38e0?s=48 ivettetwin
0
290
A Designer’s Guide to Documenting Accessibility & User Interactions
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
0
7.3k
Meep
2dd96d0fb363cbdc029639bf0e8452a9?s=48 vincentwu
PRO
1
240
デザイン編 Hatena Engineer Seminar #19
7ee8ca88aa7f99cafd91a79f9734668c?s=48 takuwolog
2
600
Introduce Celebration Grid
1e17e8598d4862040029ee6adfccd9b9?s=48 nakahara
0
180
採用担当デザイナーがみるポートフォリオのポイント
79f0cb7dbd41a861cfd94dc13ce879e8?s=48 yonekura907
0
480
2021年度進級制作展プレゼンスライド
2979d12b0c105e012d9c317af56d6869?s=48 nagi_1073
0
190
やさしいBacklogの使い方
Ff18a27b908029695ca70b144d42e3ba?s=48 wattlaa
2
400
20220120modelinglt_miure
Dcd6ae6de2452585b6d18137a4e1cd97?s=48 miure
1
240
Owl House Story Test
Bdd9e989b8078ae14ea9abd4d4d81a83?s=48 blakedg95
1
320
デザインとフロントエンドの最先端！ 最新ツールを駆使したデザインから実装、そしてプロトタイプまでのシームレスな流れ【第9回】
37228dc025342eeadeb18bf1c2976a7a?s=48 fixel_admin
1
480
group-pdf-export.pdf
5282a03ca032a1f9e0df70c8ef2ea39c?s=48 ujki
1
880

Featured

See All Featured
Designing on Purpose - Digital PM Summit 2013
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.6k
Ruby is Unlike a Banana
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
9.2k
Fantastic passwords and where to find them - at NoRuKo
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
25
1.4k
KATA
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
7
8.6k
The Invisible Side of Design
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
289
48k
The Illustrated Children's Guide to Kubernetes
0438ae60cde4c7add6f9da48f28c15cc?s=48 chrisshort
14
34k
Fight the Zombie Pattern Library - RWD Summit 2016
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
226
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
212
20k
Bootstrapping a Software Product
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
294
110k
Writing Fast Ruby
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
57k
What's in a price? How to price your products and services
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
229
9.3k
Support Driven Design
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
86
8.4k

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