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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Keisuke Tada Keisuke Tada
August 31, 2018
Design
4
15k

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
380
Non-Designer's Design
Avatar for Keisuke Tada tdksk
3
550
Tablet View of COOKPAD Website
Avatar for Keisuke Tada tdksk
0
240

Other Decks in Design

See All in Design
コンテンツ作成者の体験を設計する
Avatar for Chiaki Okamoto chiilog
0
120
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
2
670
Diverse Design Team Deck
Avatar for Diverse diverse
0
910
爆速開発でAIプロダクトが40万インプレッションになった話
Avatar for つぶら tsubura
0
200
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
740
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
1
280
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
320
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
400
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
1
1.3k
UI/UX & Web Design Portfolio 2025｜Madoka Kumagai
Avatar for Madoka madoka_portfolio
2
180
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
320
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
230

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.6M
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
11k

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