Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Prototyping
for micro interaction
マイクロインタラクションのためのプロトタイピング
2015.11.28
Shunsuke Kawai
What is Prototyping?
前回のおさらい
http://www.slideshare.net/dlichaw/mobile-prototyping-25431091
Incremental iterative refinement
Getting the design right
Pr...
prototyping is ...
Communication & collaboration
ドキュメントは誤解されることがあるが、体験は共有できる。
Gauge feasibility while reducing waste( 実現性を...
What is interraction Design?
コミュニケーションのデザイン
ふたつ以上の存在が互いに影響を及ぼしあう対象の対話をデザインする
人対人、紙対人、機械対人、機械対機械
intraction
UX UX
UI UI
この仕事お願い
interraction Problem
1. どのように関わるか(インプット)
2. どのように感じるのか(フィードバック)
3. どのように認知するか(理解)
A Framework for Interaction Design
by Bill Verplank
実現したいインタラクションのアイデア アイデアを抽象的に表現 メンタルモデル 表示される情報
間違いが起こったときの状況 利用シーン 発生す...
1. 外界にある知識と頭の中にある知識の両者を利用する
2. 作業の構造を単純化する
3. 対象を目に見えるようにして、実行のへだたりと評価のへだたりに橋をかける
4. 対応づけを正しくする
5. 自然の制約や人工的な制約などの制約の力を活用す...
intraction
UX UX
UI UI
お疲れさま。
仕事の依頼の相談
いいですか?
いいよ
How is interraction Prototyping?
目的や状況によっても異なるが、例えば
Story Boarding
http://www.storyboardthat.com/ストーリーボード作成ツール
Actiong out / オズの魔法使い
https://vimeo.com/3111338
CJM and UX map
Low Visuals + High Functionality Prototyping
(ビジュアル 低+機能性 高)
https://www.youtube.com/watch?v=GrV2SZuRPv0
What is micro interraction?
最小単位のインタラクション
大きな視点で考えることは「喜びを生む細部」が欠落しがちになる。
「一見取るに足りない瞬間」を「喜びの瞬間」に変える。
小さくて美しくて気の利いた製品は私たちに喜びを与えてくれる。
UX UX
UI UI
お疲れ様∼♪
話しかける「間」・表情・
視線・声量や音高など
micro intraction
Good micro interraction
「当たり前の瞬間」を「喜びの瞬間」に変える
エンゲージメントを高める
ユーザビリティの向上 / 生産性の向上・学習をサポートする
小さなエラーを事前に防ぐ
Structure micro interraction
優れたマイクロインタラクションは4つのパートがスムーズに展開
トリガー ルール
フィードバックループ & モード
マイクロインタラクションを開始させるトリガー
マイクロインタラクションの動作を定義するルール。どんなときに、何を対象に、どんなトリガー
でインタラクションが始まり、どのようにフィードバックされるか、
トリガー
手動トリガー システムトリガー
充...
そのルールをユーザーに明示するフィードバック。ユーザーの理解を助ける視覚的、聴覚的、触
覚的な要素がフィードバック
マイクロインタラクションのメタルール ( ルールを制御するルール )
ループとは、定められた間だけ繰り返すサイクル。モードとはル...
How is
maicro interraction Prototyping?
認知的 ウォークスルー
•ゴールの形成
•意図の形成
•行為の詳細化
•行為の実行
•外界の状況の知覚
•外界の状況の解釈
•結果の評価
拡張 HCI モデル
http://ci.nii.ac.jp/naid/110006223847/
「行為...
Micro CJM
拡大
Micro CJM とは?
※試行錯誤中
カスタマージャーニーの一部を
ミクロな視点で深堀りし、
瞬間をデザインするフレームワーク
※試行錯誤中
Verplank's sketch-lecture
http://www.billverplank.com/Lecture/
インタラクションシート
( インタラクションスケッチ )
High Visuals + High Functionality Prototyping
(ビジュアル 高+機能性 高)
今回のテーマ ( やっと )
を Pixate を使ってプロトタイピングする
High Visuals + High Functionality Prototyping
Tips
http://littlebigdetails.com/
前半は終了
ありがとうございました。
Prototyping for micro interactionマイクロインタラクションのためのプロトタイピング
Upcoming SlideShare
Loading in …5
×

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

2,824 views

Published on

なぜインタラクションデザインが必要なのか。そして、どのようにしてプロトタイピングするのか勉強会を実施しました。

前半は、インタラクションデザインの目的とその価値について
後半は、"Pixate"を活用したインタラクションプロトタイピングの実践についてスライドをそれぞれ公開します。

Published in: Design
  • Be the first to comment

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

  1. 1. Prototyping for micro interaction マイクロインタラクションのためのプロトタイピング 2015.11.28
  2. 2. Shunsuke Kawai
  3. 3. What is Prototyping? 前回のおさらい
  4. 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. 5. prototyping is ... Communication & collaboration ドキュメントは誤解されることがあるが、体験は共有できる。 Gauge feasibility while reducing waste( 実現性を判断する ) 失敗することで新しい気づきを得られる。良い悪しを見極め実現可能性を判断する Sell your idea プロトタイプによって長ったらしい言葉ではなく、体験を共有することでビジョン を伝えられる。
  6. 6. What is interraction Design?
  7. 7. コミュニケーションのデザイン ふたつ以上の存在が互いに影響を及ぼしあう対象の対話をデザインする 人対人、紙対人、機械対人、機械対機械
  8. 8. intraction UX UX UI UI この仕事お願い
  9. 9. interraction Problem 1. どのように関わるか(インプット) 2. どのように感じるのか(フィードバック) 3. どのように認知するか(理解)
  10. 10. A Framework for Interaction Design by Bill Verplank 実現したいインタラクションのアイデア アイデアを抽象的に表現 メンタルモデル 表示される情報 間違いが起こったときの状況 利用シーン 発生するであろう様々な操作 操作するためのアクション https://hci.rwth-aachen.de/tiki-download_wiki_attachment.php詳細はこちら
  11. 11. 1. 外界にある知識と頭の中にある知識の両者を利用する 2. 作業の構造を単純化する 3. 対象を目に見えるようにして、実行のへだたりと評価のへだたりに橋をかける 4. 対応づけを正しくする 5. 自然の制約や人工的な制約などの制約の力を活用する 6. エラーに備えたデザインをする 7. 以上のすべてがうまくいかないときには標準化をする Good interraction ユーザー中心デザインの7つの原則を参考にして
  12. 12. intraction UX UX UI UI お疲れさま。 仕事の依頼の相談 いいですか? いいよ
  13. 13. How is interraction Prototyping? 目的や状況によっても異なるが、例えば
  14. 14. Story Boarding http://www.storyboardthat.com/ストーリーボード作成ツール
  15. 15. Actiong out / オズの魔法使い https://vimeo.com/3111338
  16. 16. CJM and UX map
  17. 17. Low Visuals + High Functionality Prototyping (ビジュアル 低+機能性 高) https://www.youtube.com/watch?v=GrV2SZuRPv0
  18. 18. What is micro interraction?
  19. 19. 最小単位のインタラクション 大きな視点で考えることは「喜びを生む細部」が欠落しがちになる。 「一見取るに足りない瞬間」を「喜びの瞬間」に変える。 小さくて美しくて気の利いた製品は私たちに喜びを与えてくれる。
  20. 20. UX UX UI UI お疲れ様∼♪ 話しかける「間」・表情・ 視線・声量や音高など micro intraction
  21. 21. Good micro interraction 「当たり前の瞬間」を「喜びの瞬間」に変える エンゲージメントを高める ユーザビリティの向上 / 生産性の向上・学習をサポートする 小さなエラーを事前に防ぐ
  22. 22. Structure micro interraction 優れたマイクロインタラクションは4つのパートがスムーズに展開 トリガー ルール フィードバックループ & モード
  23. 23. マイクロインタラクションを開始させるトリガー マイクロインタラクションの動作を定義するルール。どんなときに、何を対象に、どんなトリガー でインタラクションが始まり、どのようにフィードバックされるか、 トリガー 手動トリガー システムトリガー 充電が 20% 以下になると省電力モードに 切り替えるか、問われる。 ON にすることで、接続したこと のある Wifi に自動接続する。 ルール OK キャンセル 充電が 20% を切りました。 省電力モードにします。
  24. 24. そのルールをユーザーに明示するフィードバック。ユーザーの理解を助ける視覚的、聴覚的、触 覚的な要素がフィードバック マイクロインタラクションのメタルール ( ルールを制御するルール ) ループとは、定められた間だけ繰り返すサイクル。モードとはルールが二股以上になったもの。 On の状態にある限り無限に Wifi 接続をループする 充電が完了するとモードが終了する フィードバック ループ & モード
  25. 25. How is maicro interraction Prototyping?
  26. 26. 認知的 ウォークスルー •ゴールの形成 •意図の形成 •行為の詳細化 •行為の実行 •外界の状況の知覚 •外界の状況の解釈 •結果の評価 拡張 HCI モデル http://ci.nii.ac.jp/naid/110006223847/ 「行為の7段階理論」 質問1:ユーザーは目の前のインターフェイスで何をするかわかるか? 質問2:ユーザーは目の前のインターフェイスを見て、その操作方法を正しくイメージできるか? 質問3:ユーザは目的と正しい操作方法を“関連づけ”られるだろうか? 質問4:システムの“フィードバック”から、ユーザは操作が順調に進んでいることが分かるだろ うか?
  27. 27. Micro CJM 拡大
  28. 28. Micro CJM とは? ※試行錯誤中 カスタマージャーニーの一部を ミクロな視点で深堀りし、 瞬間をデザインするフレームワーク
  29. 29. ※試行錯誤中 Verplank's sketch-lecture http://www.billverplank.com/Lecture/ インタラクションシート ( インタラクションスケッチ )
  30. 30. High Visuals + High Functionality Prototyping (ビジュアル 高+機能性 高)
  31. 31. 今回のテーマ ( やっと ) を Pixate を使ってプロトタイピングする High Visuals + High Functionality Prototyping
  32. 32. Tips http://littlebigdetails.com/
  33. 33. 前半は終了 ありがとうございました。

×