2016/01/31に行われてたUI FukuokaのMeetup0回目の時の資料です。初回ということもあり、主にインタラクションについてざっくりと説明しています

1. マイクロインタラクションと
UXについて
KENTARO TSUTSUMI, SEREAL
@UI FUKUOKA meetup
31, January, 2016

2. 自己紹介
KENTARO TSUTSUMI, SEREAL
UI Designer (&iOS Developper)
堤健太郎。
愛媛県出身、佐賀育ち。ドイツに1年半。
大学では工業デザインを学ぶ。
独学でグラフィック、UIを勉強。デザイナー歴3年。
DJ歴10年。
音楽とカルチャーとデザインの話が好きです。

3. 本日の流れ
マイクロインタラクションとは？
考え方
実際の参考例
参考・出展
1.
2.
3.
4.

4. マイクロインタラションとは？
1

5. インタラクションとは？
マイクロインタラクションとは？
人間とモノ、相互間のアクションとリアクションのペア。
場合によっては連続的なコミュニケーション。
INTER-ACTION

6. 概要
OS
アプリケーション
機能
マイクロインタラクションの領域細かい動作
マイクロインタラクションとは？

7. どこで効果を発揮するか？
タスク量、作用する範囲の点においても
“機能”(マクロインタラクション)とは別物
• 単一タスクの処理
• 機器同士の接続
• テレビのチャンネル切り替えなど、現在進行中のプロセスの制御
• 特定の設定の変更
• ステータスメッセージなど、小さなコンテンツの表示や生成
所作、演出
マイクロインタラクションとは？

8. アプローチの仕方
2

9. 構成要素
トリガー ルール フィードバック ループとモード
アプローチの仕方

10. MVC構成要素
Controller
Model
View
トリガー
ルール
フィードバック
アプローチの仕方

11. トリガー
可視トリガー
不可視トリガー
手動トリガー
システムトリガー(自動トリガー)
{
※不可視トリガーは学習可能でなければならず、
極めて重要な機能を割り当ててはならない
アプローチの仕方
ボタン/スイッチ/スライダーなど、マイクロインタラクションを開
始するためのきっかけとなるもの

12. ルール
アプローチの仕方
マイクロインタラクションが起動された時に、どのように動作する
のかという取り決め
例) 別名で保存のルール [Mac OS 10.7(Lion)で変更されるまで]
1. ファイルに変更を加える
2. ファイルに別名を付けて保存する。
3. その後の変更は新しく作られたファイルに加えられる。以前のファ
イルは最後に保存された時の状態で残る

13. ルールの考慮点
• マイクロインタラクションが起動された時に、どう応えるか？
• ユーザーが進行中のマイクロインタラクションをどう制御できる
か？
• 操作の順番とタイミング
• どこから取得するどのデータが利用されるのか？
• 使われるデータのアルゴリズムとパラメータ
• いつどのようなフィードバックが返されるのか？
• マイクロインタラクションの条件分岐とループ
• マイクロインタラクションが終わると何が起こるか？...など
アプローチの仕方

14. フィードバックの種類
何かが起きた
ユーザーが何かを実行した
処理が始まった
処理が終了した
処理が続行中
ユーザーにそれは出来ないと伝える
アプローチの仕方
○

15. フィードバックの原則
• フィードバックでユーザーに負担をかけない
• 的はずれなフィードバックであってはならない
• 最小のフィードバックで最大限のメッセージ
• 既にあるものを使ってメッセージを伝える
アプローチの仕方

16. ループとモード
アプローチの仕方
マイクロインタラクションの条件分岐や発動サイクル。

17. まとめ
アプローチの仕方
• マイクロインタラクションはプロダクトの世界観
• 不可視トリガーを利用する際は慎重に
• ルールはシンプルに
• フィードバックは必ずしも視覚的である必要はない

18. 実際の参考例
3

19. 実際の参考例
おむすび
現在どういう状態で
どうすれば問題が解決できるのかを優しく提示する
0件というネガティブな状態を簡単に解決できるよ
うに、親しみの持てるアイコンを使って演出
実際の参考例
ユーザーが何かを実行した
https://itunes.apple.com/jp/app/omusubi/id1057119265?l=ja&ls=1&mt=8

20. 実際の参考例
Evernote
ユーザーの行動を予測して、タスクに集中させる
カレンダーに予定が入っていると、その予定内に
作成された新しいノートのタイトルにイベント名
が自動で入力される
実際の参考例
ユーザーが何かを実行した
http://littlebigdetails.com/post/135048273517/evernote-when-you-have-an-event-in-your-calendar

21. 実際の参考例
Mailchimp
チンパンジーの腕を利用してユーザーに「何が出来ないのか」が示される
改行のない幅広(600px以上)のメールメッセージを送ろうとすると、伸びた腕が
もげてしまう
実際の参考例
○ ユーザーにそれは出来ないと伝える
http://littlebigdetails.com/post/4983862770/mailchimp-as-you-stretch-the-browser-window-the

22. 参考・出展
http://littlebigdetails.com/page
http://www.amazon.co.jp/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD
%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3-
%E2%80%95UI-UX%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E7%A5%9E
%E3%81%8C%E5%AE%BF%E3%82%8B%E7%B4%B0%E9%83%A8-Dan-Saffer/dp/4873116597
little big details
マイクロインタラクション ―UI/UXデザインの神が宿る細部