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

Other Decks in Design

See All in Design
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
860
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
590
佐藤千晶｜ポートフォリオ
Avatar for 佐藤千晶 chimi_chia
0
270
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
720
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
460
Findyのプロデチームの 歩みとこれから
Avatar for Satty satty9556
0
330
portfolio.pdf
Avatar for Fumitaka Ono onof003
0
220
8_8_リサーチカンファレンスプレイベント.pdf
Avatar for Muture muture
PRO
2
540
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
900
地理院地図をもっと楽しく！れきちず新機能のご紹介
Avatar for Hajime Kato hjmkth
1
210
【MIXI MEETUP！ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ！生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
Avatar for MIXI DESIGN mixi_design
PRO
0
170
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
1
290

Featured

See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
10
920
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Docker and Python
Avatar for Tania Allard trallard
46
3.6k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
2.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
730
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k

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