マイクロインタラクションまとめ

はじめに

マイクロインタラクション――UI/UXデザインの神が宿る細部を読んでマイクロインタラクションはどういったものなのかをまとめた記事です。
とてもよい本だったので、購入することをおすすめします。

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

まず、インタラクションとは、相互作用と訳され、ユーザーが特定の操作を行なったとき、システムがその操作に応じた反応を返すことという意味で使われます。そして、マイクロインタラクションとはその名の通り、製品の最小単位のインタラクションです。

近年、マイクロインタラクションが話題になっている理由は、細部への配慮次第で、その製品とユーザーの関係がよりスムーズで楽しいものになりえるからです。米国のデザイナーであり、建築家であったチャールズ・イームズは「細部は単なる細部にととまりません。細部こそが製品を作り上げるのです。」とおっしゃられているほどです。細部にこだわることでユーザー体験の向上にも繋がると考えられています。

マイクロインタラクションはトリガー、ルール、フィードバック、ルールとモードの４つのパートで構成されています。この４つのパートはマイクロインタラクションをデザインしたり、分析したりする際の手段ともなります。

トリガー

トリガーとは、マイクロインタラクションを開始するものすべてを指します。例えば、ログインボタンが当てはまります。

トリガーは大きく分けて、手動トリガーとシステムトリガーがあります。手動トリガーとは、ユーザーが起動するトリガーのことで、上記で述べたログインボタンも手動トリガーに分類されます。システムトリガーとは、システムが起動するトリガーのことで、例えば、システムがエラーを検知すると、ダイアログボックス等でユーザーに働きかけたりすることが当てはまります。

同じトリガーはいつも同じアクションを実行しなければなりません。これを怠れば、ユーザーはいつもと同じことをしているのにも関わらず、別のアクションが実行され、苛立ちを覚えます。さらに、トリガーは外見通りの振る舞いをしなければなりません。例えば、トリガーがボタンの場合、振る舞いもボタンにふさわしいものにしなければなりません。

システムトリガーには、いつどんな頻度で起動されるかを定義したルールが必要です。ルールについては下記で説明します。

ルール

ルールとは、マイクロインタラクションの使い方を決めることを指します。ですから、ルールはマイクロインタラクションの要となります。そのマイクロインタラクションがどう動くのかを専門家でなくてもわかるように定義します。

ルールを決める前に、そのマイクロインタラクションの目的をできるだけ単純明快な言葉で定義する必要があります。例えば、ログインの目的はユーザーにパスワードを入力させることではなく、システムに入らせることです。

ルールはユーザーの行動を制約することになりますが、ルールをルールと感じさせないことが大切です。目指すべきは、マイクロインタラクションのやりとりを通じてユーザーをそれとなく導かせることです。そのためには、ユーザーの行動から複雑さを取り除くことが重要になります。例えば、選択肢を減らし賢いデフォルト(場所を選択させるのではなく、位置情報から現在地をデフォルトに設定しておくなど)を用意することです。
また、ルールを利用してヒューマンエラーが起こらないようにすることも大事です。

フィードバック

フィードバックとは、マイクロインタラクションのルールをユーザーに理解してもらうことです。トリガーが起動されたら、「何が行われたか」、「その結果として何が起きたのか」の２点を知らせる必要があります。ユーザーがログインボタンを押したのなら、「ボタンを押したこと」と「ログインボタンが押された結果として、システムにログインできたこと」を示す何かが起きなければなりません。例えば、ログインボタンを押した際に、ローディングのアニメーションを表示したり、ログインした際に、ローディングのアニメーションからチェックするようなアニメーションに変更させたりします。

ユーザーによる動作に対しては、上記の例のような視覚的なフィードバックを表示するようにします。強調や注意喚起が必要な場合は、サウンドや、振動によるフィードバックを加えることも大切です。例えば、メールを受信した際の通知音などがあります。

ループとモード

ループとは、定められた間だけ繰り返すサイクルのことを指します。このサイクルの種類によって、回数制御ループ(forループ)、条件制御ループ(whileループ)、コレクション制御ループ、無限ループの４種類の形式に分けられます。

回数制御ループは、あらかじめ設定された回数だけ繰り返して終了します。例えば、ネットワークに接続されているかどうかを５回調べた後に、エラーメッセージを表示する場合です。
条件制御ループは、何らかの条件が成立している間、繰り返します。例えば、毎分新着のメールが来ていないかどうかチェックする場合です。
コレクション制御ループは、回数制御ループと似ていますが、ある集合の中のすべての要素について実行してから終了します。例えば、未読のメールの件数を数え表示する場合です。
無限ループは、エラーが発生するか、強制的に停止させるかしない限り終了しないループです。通常は避けるべきものですが、例えば、ライトをつけるなどは基本的に無限ループを開始します。スイッチをオフにするか、電球が切れるまでライトは消えず、同じ状態を保ちます。

ループにはロングループがあり、ロングループとはマイクロインタラクションが実行される際に１回目より２回目、２回目より３回目とより良いものにするために使われます。データを利用することによりそれを実現していきます。例えば、検索欄に最近使用した言葉が表示されるなどです。

次に、モードとはルールが二股以上になったもので、マイクロインタラクションを実装する際には極力避けるべきことです。しかし、時には必要になることもあります。例えば、新しくボタンを実装すると、画面が散らかって見えてしまう場合です。そういった場合は、ボタンをクリックした際と、ボタンを長押しした際で実行されるアクションを変えるようにするといった措置が取られることがあります。これをバネ仕掛けのモードと言います。
また、１回完結のモードもあり、例えば、文字をダブルタップすると選択機能が有効になり、全選択やコピーなどが可能となります。そして、そのコマンドをひとつ選択するとそのモードが終了されます。

モードはできればそのモード専用の画面を用意することが好ましいです。短時間で処理が終わる操作には、上記で説明した、バネ仕掛けのモードか１回完結のモードの使用を検討します。

読んでみて

マイクロインタラクションのトリガー、ルール、フィードバック、ルールとモードの４つのパートに対して事例を元に説明されていて分かりやすかったです。事例に基づいていない本は、私の主観にはなりますが、筆者の自己満足になり、本当にユーザー体験が向上するのかと疑問に思ってしまいます。
UXを向上させるためには、１つのマイクロインタラクションに対して、ここまで思考して実装するのだということが分かりました。「細部は単なる細部にととまりません。細部こそが製品を作り上げるのです。」という言葉通り、今後１つの機能を実装する際はこれを意識して細部にこだわっていきたいです。
改めて、購入することおすすめします。