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