1. Prototyping
for micro interaction
マイクロインタラクションのためのプロトタイピング
2015.11.28

2. Shunsuke Kawai

3. What is Prototyping?
前回のおさらい

4. http://www.slideshare.net/dlichaw/mobile-prototyping-25431091
Incremental iterative refinement
Getting the design right
Prototyping
Branching Exploration
Getting the right design
Design

5. prototyping is ...
Communication & collaboration
ドキュメントは誤解されることがあるが、体験は共有できる。
Gauge feasibility while reducing waste( 実現性を判断する )
失敗することで新しい気づきを得られる。良い悪しを見極め実現可能性を判断する
Sell your idea
プロトタイプによって長ったらしい言葉ではなく、体験を共有することでビジョン
を伝えられる。

7. What is interraction Design?

8. コミュニケーションのデザイン
ふたつ以上の存在が互いに影響を及ぼしあう対象の対話をデザインする
人対人、紙対人、機械対人、機械対機械

9. intraction
UX UX
UI UI
この仕事お願い

10. interraction Problem
1. どのように関わるか（インプット）
2. どのように感じるのか（フィードバック）
3. どのように認知するか（理解）

11. A Framework for Interaction Design
by Bill Verplank
実現したいインタラクションのアイデア アイデアを抽象的に表現 メンタルモデル 表示される情報
間違いが起こったときの状況 利用シーン 発生するであろう様々な操作 操作するためのアクション
https://hci.rwth-aachen.de/tiki-download_wiki_attachment.php詳細はこちら

12. 1. 外界にある知識と頭の中にある知識の両者を利用する
2. 作業の構造を単純化する
3. 対象を目に見えるようにして、実行のへだたりと評価のへだたりに橋をかける
4. 対応づけを正しくする
5. 自然の制約や人工的な制約などの制約の力を活用する
6. エラーに備えたデザインをする
7. 以上のすべてがうまくいかないときには標準化をする
Good interraction
ユーザー中心デザインの７つの原則を参考にして

13. intraction
UX UX
UI UI
お疲れさま。
仕事の依頼の相談
いいですか？
いいよ

14. How is interraction Prototyping?
目的や状況によっても異なるが、例えば

15. Story Boarding
http://www.storyboardthat.com/ストーリーボード作成ツール

16. Actiong out / オズの魔法使い
https://vimeo.com/3111338

17. CJM and UX map

18. Low Visuals + High Functionality Prototyping
（ビジュアル 低＋機能性 高）
https://www.youtube.com/watch?v=GrV2SZuRPv0

19. What is micro interraction?

20. 最小単位のインタラクション
大きな視点で考えることは「喜びを生む細部」が欠落しがちになる。
「一見取るに足りない瞬間」を「喜びの瞬間」に変える。
小さくて美しくて気の利いた製品は私たちに喜びを与えてくれる。

21. UX UX
UI UI
お疲れ様∼♪
話しかける「間」・表情・
視線・声量や音高など
micro intraction

22. Good micro interraction
「当たり前の瞬間」を「喜びの瞬間」に変える
エンゲージメントを高める
ユーザビリティの向上 / 生産性の向上・学習をサポートする
小さなエラーを事前に防ぐ

23. Structure micro interraction
優れたマイクロインタラクションは４つのパートがスムーズに展開
トリガー ルール
フィードバックループ & モード

24. マイクロインタラクションを開始させるトリガー
マイクロインタラクションの動作を定義するルール。どんなときに、何を対象に、どんなトリガー
でインタラクションが始まり、どのようにフィードバックされるか、
トリガー
手動トリガー システムトリガー
充電が 20% 以下になると省電力モードに
切り替えるか、問われる。
ON にすることで、接続したこと
のある Wifi に自動接続する。
ルール
OK キャンセル
充電が 20% を切りました。
省電力モードにします。

25. そのルールをユーザーに明示するフィードバック。ユーザーの理解を助ける視覚的、聴覚的、触
覚的な要素がフィードバック
マイクロインタラクションのメタルール ( ルールを制御するルール )
ループとは、定められた間だけ繰り返すサイクル。モードとはルールが二股以上になったもの。
On の状態にある限り無限に Wifi 接続をループする 充電が完了するとモードが終了する
フィードバック
ループ & モード

26. How is
maicro interraction Prototyping?

27. 認知的 ウォークスルー
•ゴールの形成
•意図の形成
•行為の詳細化
•行為の実行
•外界の状況の知覚
•外界の状況の解釈
•結果の評価
拡張 HCI モデル
http://ci.nii.ac.jp/naid/110006223847/
「行為の７段階理論」
質問１：ユーザーは目の前のインターフェイスで何をするかわかるか？
質問２：ユーザーは目の前のインターフェイスを見て、その操作方法を正しくイメージできるか？
質問３：ユーザは目的と正しい操作方法を“関連づけ”られるだろうか？
質問４：システムの“フィードバック”から、ユーザは操作が順調に進んでいることが分かるだろ
うか？

28. Micro CJM
拡大

29. Micro CJM とは？
※試行錯誤中
カスタマージャーニーの一部を
ミクロな視点で深堀りし、
瞬間をデザインするフレームワーク

30. ※試行錯誤中
Verplank's sketch-lecture
http://www.billverplank.com/Lecture/
インタラクションシート
( インタラクションスケッチ )

31. High Visuals + High Functionality Prototyping
（ビジュアル 高＋機能性 高）

32. 今回のテーマ ( やっと )
を Pixate を使ってプロトタイピングする
High Visuals + High Functionality Prototyping

33. Tips
http://littlebigdetails.com/

34. 前半は終了
ありがとうございました。