読書感想：マイクロインタラクション

例

身近な物を自分で撮ってみました。こういった物が取り上げられて、議論されています。

出展元のブログがある

本書で扱われている「マイクロインタラクション」は、以下の様なサイトでいろんな人が投稿した物から例がピックアップされています。これらのサイトを眺めているだけでも、かなり勉強になります。

Little Big Details - Your daily dose of design inspiration

DesignAday

Six UX

概要

この本を読みました。

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

以下ではマイクロインタラクションのフレームワークについて紹介しますが、そんなことより本を手にとって、たくさん出てくる事例を見るだけでも価値があると思います。おすすめ。

マイクロインタラクションとは

ザ、これ、と一言で言い切れる物ではなかったので、キーワードを引用してみます。

ある作業をひとつだけこなす最小単位のインタラクション これがひとつのアプリとなっている場合もあれば 大規模なシステムの一部になっている場合もある

優れたマイクロインタラクションはユーザーのニーズをきちんと踏まえる形で、目的の作業を効果的に、ユーモアを込めて、優雅にこなすことが出来ます

イームズの言葉の引用

「細部は単なる細部にとどまりません。細部こそが製品を作りあげるのです」

マイクロインタラクションを磨き上げることで、 記憶に残る瞬間 を生み出せる

iPodのスクロールホイールの様な洗練されたトリガー(中略)などが好例で(中略)企業のブランド価値を確立したり(中略)たとえばFacebookの「いいね！」ボタンはもはや無くてはならない存在です

メインのフィーチャーを支える個々の小さな操作が、ユーザーにとってはその製品の印象を細かく作りあげている、と著者は主張しています。

マイクロインタラクションの構成要素

著者はマイクロインタラクションを図に示す4つの要素に分解することで、その効果を明らかにし、われわれも設計できるようにガイドしてくれます。

1.トリガー

インタラクションを開始する画面上のコントロール(ボタンなど)、もしくは特定の条件。同じトリガーはいつも同じアクションを実行する。見た目にみあった振る舞いをする。

• 手動トリガー
  ユーザーが自らインタラクションを始めることをうながすトリガー。コンテキスト(周囲の状況、文脈)からトリガーであると認識できるものである必要がある。トリガーは一般的には、ユーザが「こういう物だ」と分かる物が良いですね。

• 手動トリガーの一部として、不可視トリガー
  意図的に見えなくするのもテクニックのひとつ。iOS7のSpotlight検索はひとつの例。要素を隠すことでそのインタラクションが発生する以前の画面や操作対象の見かけがスッキリし、重要性を基準にした階層化を可能にする。ただし、不可視トリガーは見つけられる様にし、学習可能であることが大事。

• システムトリガー
  エラー通知から始まる設定変更の操作、メール到着通知など。

2.ルール

どんなときに、何を対象にして、どんな手順で、何の情報を扱って、どのようなアルゴリズムで処理が行われ、どのようにフィードバックされるか、というマイクロインタラクションの一連の現象のこと。その中でUXを良くする特筆すべきルールを抜粋してみます

• 制約を加える
  たとえばフォーム。クレジットカードの種類を選んだのちにカードの番号を入れさせるようなフォームがよくあるが、実際はカード番号でカードの種類は決まる。ユーザに選ばせる必要は無い。誕生日を入れるフォームで未来は選べる様にする必要は無い。

• 賢いデフォルトを設定する
  ユーザがインタラクションを開始した後、次に取りそうな行動を目立つ様に表示したり、フォームに記入してしまったりする。Googleのインスタント検索は、文字を入れるそばから検索結果が表示され、記入内容を変えるごとに検索結果も変化するようになっています。これを超えるには、ユーザーが検索しそうなワードを予測して、プッシュでお知らせする、しかありません。

• コントロールとユーザー入力
  フォームなどユーザー入力が行われるコントロール対象の多くは、「そこに入れて欲しいもの」のルールが多くの場合はある。それを賢く理解して、ユーザーの入力を助けることが出来る。アドレスを@まで入れるとドメイン部を補完してくれる。色のコードを入れる時に#をつけていてもいなくても色の値として拾ってくれる、本文中に「添付」と記載されているのに添付ファイルの無いメールを送ろうとしたら、警告してくれる、など。

3.フィードバック

この項は少し説明しづらいです。マイクロインタラクションは基本的に「ルールを持って状態を示す表現(フィードバック)のプロセス」なので、すべてがフィードバックとも言えるからです。でも一応まとめておきます。

マイクロインタラクションのルールの理解をユーザーにうながし、気持ちよく使いこなしてもらうことがフィードバックの目的。

フィードバックの4つの原則

• ユーザーに負担をかけない
  現状を知らせることの出来る最小限のフィードバックとする。知るべきかどうかを吟味し、頻度・タイミング・目立ち方をコントロールすることが大事。

• 的外れなものであってはならない
  ユーザーが「こうしたから、こうなった」「こうなったのは、こうしたから」というメンタルモデルを容易に構築できる必要があります。当然、フィードバックは一貫性のある物でなければなりません。

• 見落とされがちなものを使ってメッセージを伝える
  新しい要素を「発明」する前に、既存の要素(もしくはその拡張)で効果的にフィードバックできないか考える。

• 人間的なフィードバックにする
  人は「顔」に反応するので気を引ける。またポジティブなのかネガティブなのかと言う意を暗に含めることができる。インタラクションに個性を持たせることも出来る。

4.ループとモード

モードとは、インタラクションのルールが二股以上になった状態。異なるインタラクションのルールをユーザに強いる様なことは極力避けるべき。

頻繁には使わない操作があるときに、モードを分けることで主目的でよく使う操作が煩雑になることを防ぐのが、モードの主目的。画面をスッキリさせること。たとえば設定モード。やるなら、モードが変わっていることがはっきりと分かるようにする。

モードの作り方

• バネ仕掛け(疑似)モード
  操作をやめると直ぐにモードが戻るような操作。Shiftキーを押しながらの操作など。Shiftキーを話した時点でそのモードは終わる。ユーザ自身が物理的な操作を行っているので、普段と違うモードであることが自明で、別の画面に切り変えたりする必要が無く、まだ直ぐ戻るのが利点。

• 一回完結のモード
  モードに入った後、なにかひとつ操作を行うとモードが終了するもの。音声入力モードに入ったら、一言入れたら切れる。誤動作防止。

ループは省略

他

あとは、実践編など。

感想

この本は良いティップス集で、何となく良いなぁ、と思っていたマイクロインタラクションたちを拾い集めて、トリガー・ルール・フィードバック・ループとモードのフレームワークに乗せて「どう良いのか」を説明してくれます。フレームワークを用意してくれているので、自分でも活かせると思います。たとえば

• もっと大事な機能を邪魔しないよう画面上にボタンは置けないけれど、気がついてもらえると割と大きな便益を得られる機能に、どんなトリガーをつけるか。
• 放っておくとユーザーに不安を与えてしまったり、誤解を招く様な「状態」を、ユーザーに良い感じに教えてあげられないか？
• ユーザーの良くやりそうなこと、起こりそうなことを先回りして仮にやってあげて、操作を減らし、おもてなし感を作り出せないか

そんなことをちょっと考えて、小気味の良いマイクロインタラクションをちょいちょい入れていけたらなーと思います。

問題は、多くのプロジェクトで「ここまで手が回らない」ことなのですが(^_^;)、冒頭に挙げたイームズの言葉「細部こそが製品を作りあげる」を思い出して、積極的に取り組んでいかなきゃなー、とか、ほげほげ思うところでございます。

そういえば、@100kw 先生が WEB+DB PRESS Vol.81 の連載「視点により異なるUXのとらえ方」で「現象のレイヤで設計されるミクロなUX」とおっしゃっている物のひとつが、まさにマイクロインタラクションなのではないか、と思いました。ソフトウェア開発者としては、マイクロインタラクションからUXを見つめると、参加しやすいのではないかと思います。

WEB+DB PRESS Vol.81