マイクロインタラクション ―UI/UXデザインの神が宿る細部

感想

端的に言えばマイクロインタラクションとは「トリガー・ルール・フィードバック・ループとモード」なのだけれども、それぞれの説明とたくさんの実例が挙げられているお陰で特に難しいものではなく身近で且つ重要なものと認識できた。かなり各論寄り。 各章の頭に入る実例がどれも興味深い話で、その後の話にも入りやすく、読み物としても普通に面白かった。スロットマシンと惑星探査車スピリットの話が特に好き。スピリットの話はでかすぎるが、スロットマシンのマイクロインタラクションが重要な話は非常に納得できる。

以下、自分用要約まとめ。

マイクロインタラクションのデザイン

オーケストラの演奏中にiPhoneの音が鳴ってしまったが、所持者は「消音モード」でも音が出るということを知らず。こういうことをほんの小さな「マイクロインタラクション」で解決できないか？

機能ではないが侮れない存在

マイクロインタラクションが最適な用途

  • 単一タスクの処理
  • 機器同士の接続
  • 株価や気温など単一データの取得
  • チャンネルの切り替えなど現在進行中のプロセス制御
  • 特定の設定の変更
  • ステータスメッセージ・小さなコンテンツの表示
  • 特定の昨日のオンオフ切り替え

大規模なマイクロインタラクション

  • 主な機能の仕上がりがどれほどよくても全体のデザインの質が最初の要素の質を越えることはない
  • 逆に飛び抜けて便利であるがために質が問われないマイクロインタラクションもある（ex:医療器機

例

  • Twitterのパスワード入力フォーム。１文字入力するたびに適切かどうかのメッセージが出る
  • Facebookでデフォルト外の言語のコメントには「翻訳を見る」

マイクロインタラクションの歴史

  • コピー&ペーストの発明
  • メタファーによる直接的な操作が可能に

マイクロインタラクションの構造

  • トリガー
  • ルール
  • フィードバック
  • ループとモード

トリガー

  • 手動トリガー
  • 画面に表示されるボタンやスライダーなど実際に手動でマイクロインタラクションを開始させる能力を持つもの
  • iPhoneの消音スイッチ
  • システムトリガー
  • システムが起動するもの
  • メールの到着、時刻、株価etc

ルール

  • 何をどうすると一連の動作が発動するのか

フィードバック

  • 視覚的なもの・聴覚的なもの・触覚的なもの
  • その動作に合ったフィードバックを選ぶこと

ループとモード

  • しばらくしたら終了するのか、中断している間はどうするか、条件が変わったらどうするか
  • 過去に購入したことのある商品を表示すると「購入する」から「もうひとつ購入する」に変更されるetc

手法

個々を磨く

  • 比類のない記憶に残る瞬間を生み出せる可能性も
  • 初代iPodのスクロールホイール
  • Facebookのいいね！ボタン

ひとつのマイクロインタラクション＝製品

  • あらゆる無駄を削ぎ落とし本質・真髄だけを残す
  • Instagram
  • evernote

多数をまとめ上げる

  • ひとつの機能や製品全体をマイクロインタラクションの集合
  • マイクロインタラクションに目を奪われていて全体像を見失う恐れも

トリガー

ニューヨークの地下鉄運賃支払い方式の変更例。トークンからメトロカードへ。メトロカードの自販をデザインし全域に設置は困難な作業であった。タッチスクリーンに無縁の人もいる中で、新しい機械を何百万人の利用者が使えるようにするには？

解決策

  • タッチスクリーン全体を大きなトリガーにしてしまう
  • 画面のどこに触れても販売機は反応

手動トリガー

  • ユーザー自ら起動させるトリガー
  • ターゲットとなるユーザーがコンテキストからトリガーであると認識できるものをトリガーとする
  • 「いつ　どこで」というユーザーの要求にトリガーを一致させること
  • トリガーにより常に同じことが始まるようにする
  • 見えないトリガー「不可視トリガー」はデザイン上の難問に成り得る

データを前面に

  • 処理を開始するボタンに処理が終わるまでの時間を表示することなど
  • アイコンにダウンロード中のファイル数と進捗状況を表示など

手動トリガーの構成要素

  • コントロールそのもの
  • コントロールの状態
  • 文字あるいはアイコン化されたラベル

コントロール

  • 視覚的なシグにファイアを破壊しないこと
  • ボタンならボタンらしく
  • 手動トリガーを見つけられるようにする
  • 使用頻度が高ければ高い程見つけやすく
  • 偽のシグニファイアが生成されないようにする
  • 不可視トリガー
  • 要素を隠すことにより機能を削除しなくても
  • 見えるものとの断層化が可能に
  • 見えなくすることが目的ではない

コントロールの状況

  • デフォルト
  • ホバー
  • クリック可能を表示
  • ロールオーバー
  • トリガーがあることを表示
  • 起動中
  • アクティブ
  • 処理進行中
  • トグル

ラベル

  • トリガー全体では表せない情報を提供する時に限ってラベルを付与する
  • 短い言葉でしっかりした説明になっていて明快な言葉遣い
  • 首尾一貫
  • 呼び名の統一

システムトリガー

  • 実はユーザーが起動するものよりもシステムトリガーの方が起動回数は多い
  • エラー
  • 位置情報
  • データの到着
  • 内部データ
  • 他人

システムトリガーにはルールが必要

  • 起動する頻度
  • 何が既知であるか
  • 示す必要はあるか
  • エラーが起きるとどうなるか

ルール

Appleで別名で保存がなくなった問題。単純でわかりやすかったマイクロインタラクションが複数でわかりにくいマイクロインタラクションに置き換えられフィードバックもない。

ルールのデザイン

  • 最も重要な要素は目的
  • なぜそれを行っているか　最終的な状態

ルールで決定する必要のあるもの

  • 起動されたときどう応えるか
  • 何が起こるの？
  • ユーザーが進行中のマイクロインタラクションをどう制御できるか
  • 音量
  • 中止
  • 操作の順番とタイミング
  • どこから取得するとどのようなデータが使われるのか
  • アルゴリズムとパラメーター
  • どのようなフィードバックが返されるか
  • どのモードにあるか
  • 繰り返されるのか？頻度は？
  • 終わると何が起こるか

ルールを作る

  • フローチャートなどを用いて整理

動詞と名詞

  • 最小限のオブジェクトに対して幅広い操作を可能にできる

画面と状態

  • 待ち状態（デフォルト
  • アクティブになった状態
  • 更新された状態

制約

  • エラーを未然に防ぐ

ゼロからはじめない

  • ユーザーの何を知っているか？
  • 既に知っていることを利用して改善する

複雑さを軽減する

  • 中心となる複雑さはどこ？
  • 提示する選択肢の選び方やデフォルト値の決め方も大切
  • ユーザーによる制御は最小限に

選択肢の制限と賢いデフォルト

  • ユーザーが次にとりそうな行動を目立つように表示する
  • ルールを最小限にとどめるには選択肢を絞るのがいちばん
  • 賢いデフォルトがあるのみ
  • もっとも目立つデフォルトは大半の人がほとんどの場合に取る行動に一致しているべき

コントロールとユーザー入力

  • 繰り返し行われるマイクロインタラクションの場合、できるだけ単純に認識できるコントロールを用いる
  • 入力バーにコピペした場合に必要な部分だけを抜き出してくれるなど
  • ドロップダウンメニューのリストを作るときは順番もよく考える
  • USAがUだけどアルファベット順で本当に良いか？

エラーの防止

  • ポカよけ
  • ヒューマンエラーが起こりえないようにする
  • 間違えようとしても間違えられない
  • ライトニングケーブル（どちら向きでもOk
  • Gmailの添付という文字が入ってるけど添付されていない警告
  • システム自体が適切な反応を返さない場合のみエラーを表示

マイクロコピー

  • ラベル、指示などごく短いテキスト　言葉は簡潔に
  • ラベルで充分なら粗さを指示する言葉は決して使わない

アルゴリズム

  • 処理順序
  • どのようなステップがあるのか？
  • 特定の状況に左右されることはあるのか？
  • 分岐
  • もし〜なら
  • 繰り返し
  • 変数

フィードバック

スロットマシンにはまる訳とは？出来る限り長時間遊んでもらえるようにデザインされているのがスロットマシン。レバーを引くだけの退屈な作業を視覚効果とサウンドの組み合わせで魅力的な時間に変えることができる。

ルールの理解を助けるフィードバック

  • 「何が行われたか」「その結果として何が起きたか」を知らせる
  • マイクロインタラクションが実際にどう機能するかではなく、どのような感じで処理されるのか、があればよい
  • フィードバックでユーザーに負担をかけない

フィードバックを提供しなければならない場面

  • 手動トリガーの直後、あるいはルールを手動で調整している最中やそのあと
  • ボタンが押されたら
  • システムトリガーによって、マイクロインタラクションの状態に著しい変化がもたらされた場合
  • 新着メールが届いたら
  • ユーザーがもう少しでルールを破りそうな場合は例外なく
  • 間違った値を入力した
  • システムがコマンドを実行できない場合
  • オフラインなど
  • 重要な処理なら必ず進捗状態を表示する

フィードバックを出してもよい画面

  • 処理の開始時もしくは終了時
  • 特別なモードに入る、or 別のモードに

フィードバックの対象は人間

  • かなりの人が字が読めないことを忘れない
  • ユーザーが意図されていない行動をとった場合でも「罰則」を与えてはならない
  • 運転中に食洗機を開けても熱湯を浴びるなどはあってはいけない
  • フィードバックは的外れなものであってはいけない
  • 場面にあったものを

省略の美

  • 最小のフィードバックで最大限のメッセージを伝える
  • 見落とされがちなものを使ってメッセージを伝える
  • スクロールバー、カーソル、プログレスバー、ツールチップ、ホバーなどをうまく利用する

個性を表現する手段としてのフィードバック

  • マイクロインタラクションにちょっとした魅力や軽いユーモアを吹き込む
  • 待っている間に表示されるメッセージ「待ってる間にチョコでもたべたら？」
  • 入力が長くなると「本気？」
  • フィードバックが人間を対象にしたものだから
  • ユーザーがイライラする瞬間こそが、個性を発揮するのにもってこいなタイミング

フィードバックの方法

視覚

  • 大半は視覚的
  • 重複は避ける
  • ボタンがあるのにツールチップもある

アニメーション

  • 最良のアニメーションとはユーザーに何かを伝えるもの
  • アニメーションの特性
  • 高速
  • 滑らか
  • 自然
  • シンプル
  • 目的がある
  • アニメーションを使う理由
  • コンテキストを保つ
  • いま起きたことを説明する
  • オブジェクト感の関係を示す
  • 焦点を鮮明にする
  • パフォーマンスが上がったように感じさせる
  • バーチャルスペースという錯覚を生み出す
  • 「もっと使って」と働きかける

メッセージ

  • 正確
  • エラー時のフィードバックならその文章に内容だけでなく修正方法も入れるべき
  • 「あなた」など人称代名詞は避けた方が無難
  • 避難めいていて不快感を招く

サウンド

  • 一般的に「強調」「警告」に使われる
  • 視覚的フィードバックと組み合わせて使うことが多くその方が単独で使うより効果的

イヤコン

  • 特徴のある短い音
  • 言葉よりも早く
  • 最良のイヤコンは１秒未満で一瞬
  • １音を１回だけが理想

音声

  • 簡潔で明確なメッセージ

ハプティクス

  • 触覚を通じて情報を伝達する技術
  • 振動
  • 複雑なメッセージをハプティクスで簡単に伝えることはできない
  • 音声が利用できない、音声が望ましくないときの「知らせ」

フィードバックのルール

  • コンテキストによる変化
  • 夜になると音量を上げる・下げる、など
  • 継続時間
  • 程度
  • 繰り返し

ループとモード

惑星探査車スピリットからの交信が途絶えてしまった。エラーにより再起動を繰り返す無限ループに陥り、電力を消費し続けてしまう。ループやモードは扱いが難しい自体を招く場合がある。

モード

  • モードとはルールが二股以上になったもの
  • マイクロインタラクションの場合はモードを設けるのは極力避けるべき
  • モードの数が少ない程ユーザーが混乱する危険が減る
  • 設けなければならない場合はモード専用の画面を用意すること
  • これから普段とは違った作業をするということを示す合図に

バネ仕掛けのモードと一回完結のモード

バネ仕掛けのモード

  • 疑似モード
  • 押したままにしたりなど物理的操作をしたときにだけアクティブになるもの
  • 操作をやめるとモードも終了する
  • キーボードのシフトキーやオルト、コマンドキー

ループ

  • 直接的または間接的にルールでしめされるもの
  • 「30秒ごとにデータを取得する」「10日後にお知らせを送る」など

ループの形式

  • 回数制御ループ
  • あらかじめ設定された回数だけ繰り返す
  • 条件制御ループ
  • 何らかの条件が成立している間繰り返します
  • コレクション制御ループ
  • 未読のメール一件ごとに未読数を１増やす
  • 無限ループ
  • 開始するとエラーが発生するか強制的に止めるかしないと終了しないループ
  • 開ループ
  • 何かを実行して終わるループ
  • 閉ループ
  • 自己調整を行うループ

ロングループ

  • 時とともに価値を増して行くもの
  • 最近使われた検索語が紫で表示される（YouTube
  • カートの中身がもうすぐ売り切れになりそう！
  • 自分用にカスタマイズされている、新しくなっている、を感じてもらう
  • 欲しいものリストに入れた商品に関するお知らせを毎週送る
  • サインインしたままにする
  • 自分の人とは違う設定を覚えていてくれるとうれしい助かる

段階的な開示や省略

  • 長い期間を通じて段階的に機能やデータを開示していく
  • ユーザーが慣れてくるとラベルがなくなり控えめなボタンになる、など
  • マイクロインタラクションを徐々に簡素化していく

マイクロインタラクションの実践例

TaskRabbit　マッチングプラットフォーム仕事内容を依頼するために細かく仕事の内容を描き込まなくてはいけない。そこで「賢いデフォルト」「データを前面に」「タスクを複数の部分に分割する」という原則に沿って改良。ユーザーは仕事の中から該当するカテゴリを選ぶだけでよくなった。

モバイル機器用のアプリ

  • iPhone用のアラームアプリ
  • 時間が来たらアラームが鳴る

目的とルール

  • 鳴らしたい時刻を指定するためのルール
  • アラームを鳴らすためのルール
  • アラームを止めるためのルール

データを前面に出す

  • 既にアラームがセットされているか？されていたら何時か？
  • 前面に出すデータは既にセットされ今も秒読みで続いているアラームの件数だけにすべき

トリガー

  • iPhoneのアプリのトリガーは画面に置くアイコン
  • トリガーにはラベルが必要
  • アプリ名

コントロール

  • ボタンのタップ
  • 最も複雑なのは時間をセットすること、あとはボタンのみ

記憶に残る瞬間

  • 独創的で気の利いたものを作りたいのであればまさにこだわるべき部分
  • 「大多数の人がたいてい希望すると思われる行動に合わせて作る」

モード

  • 初期リリース段階ではスキップしてもよい

ループ

  • アラームが鳴り始めてから10分間誰も止めなかったら自分で止まる、というタイマーを組込み「電池が切れる」を防ぐ

プロトタイプとドキュメント

  • 目的のプラットフォームでプロトタイプを作成
  • 動画を作成
  • フレーム単位dの絵コンテの作成

複数のマイクロインタラクションの調整

  • 目指すべきは迅速さと安易さ

マイクロインタラクションの協調

  • マイクロインタラクションのトリガーを数珠つなぎにすることも可能
  • 「つなぎ目」はユーザーの目や耳には触れないように
  • 全体が調和のとれた形でひとつにしっかりまとまっているという印象を与える

冴えないマイクロインタラクションを改善する方法

  • 「記憶に残る瞬間」にする必要はあるか？
  • ゼロから始めようとしているのか？
  • 一番重要なものはなにか？それは前面に出せるか？
  • カスタムコントロールが適しているか？
  • ヒューマンエラーを予防できるか？
  • 見落とされがちなものを活用しているか？
  • 上級ユーザー向けに不可視トリガーを作れないか？
  • テキストやアイコンは自然か？
  • アニメーションを加えればもっと表情や動きが出せるだろうか？
  • 他に加えるべきフィードバックの手段はないか？
  • ユーザーが二回目に接した時何が起こるか？100回目には？

小さな視野で考えよう

  • 大規模なシステムを人間味あふれるものにすることができるマイクロインタラクション
  • 作り手のユーザーに対する気配り、心遣い、思いやり、おもてなしの心