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

Prototyping

Branching Exploration

Getting the right design

Design

prototyping is ...

Communication & collaborationドキュメントは誤解されることがあるが、体験は共有できる。

Gauge feasibility while reducing waste( 実現性を判断する )失敗することで新しい気づきを得られる。良い悪しを見極め実現可能性を判断する

Sell your ideaプロトタイプによって長ったらしい言葉ではなく、体験を共有することでビジョンを伝えられる。

What is interraction Design?

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

人対人、紙対人、機械対人、機械対機械

intraction UX UX

UI UI

この仕事お願い

interraction Problem

1.どのように関わるか （インプット）

2.どのように感じるのか（フィードバック）

3.どのように認知するか（理解）

A Framework for Interaction Design

by Bill Verplank

実現したいインタラクションのアイデア アイデアを抽象的に表現 メンタルモデル 表示される情報

間違いが起こったときの状況 利用シーン 発生するであろう様々な操作 操作するためのアクション

https://hci.rwth-aachen.de/tiki-download_wiki_attachment.php詳細はこちら

1. 外界にある知識と頭の中にある知識の両者を利用する

2. 作業の構造を単純化する

3. 対象を目に見えるようにして、実行のへだたりと評価のへだたりに橋をかける

4. 対応づけを正しくする

5. 自然の制約や人工的な制約などの制約の力を活用する

6. エラーに備えたデザインをする

7. 以上のすべてがうまくいかないときには標準化をする

Good interraction ユーザー中心デザインの７つの原則を参考にして

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 優れたマイクロインタラクションは４つのパートがスムーズに展開

トリガー ルール

フィードバックループ&モード

マイクロインタラクションを開始させるトリガー

マイクロインタラクションの動作を定義するルール。どんなときに、何を対象に、どんなトリガー

でインタラクションが始まり、どのようにフィードバックされるか、

トリガー

手動トリガー システムトリガー

充電が20%以下になると省電力モードに

切り替えるか、問われる。ONにすることで、接続したこと

のあるWifi に自動接続する。

ルール

OK キャンセル

充電が 20% を切りました。

省電力モードにします。

そのルールをユーザーに明示するフィードバック。ユーザーの理解を助ける視覚的、聴覚的、触

覚的な要素がフィードバック

マイクロインタラクションのメタルール (ルールを制御するルール )

ループとは、定められた間だけ繰り返すサイクル。モードとはルールが二股以上になったもの。

Onの状態にある限り無限にWifi 接続をループする 充電が完了するとモードが終了する

フィードバック

ループ&モード

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/

前半は終了

ありがとうございました。