皆さんは、マイクロインタラクションという言葉を聞いたことはありますか?

おそらく多くの方が、その意味を明確に答えられないのではないでしょうか。

マイクロインタラクションは、「アニメーションの実装」が1人歩きしてしまい、誤った方向にデザインしてしまうことがあります。マイクロインタラクションを正しく理解すれば快適なユーザー体験を作り出すことができますが、場合によってはユーザー体験を台無しにしてしまうことすらあるのです。

そこで今回は、もう一度理解したいマイクロインタラクションの基本の「き」をご紹介します。

マイクロインタラクションの仕組みから注意点まで、改めて確認していきましょう。

参考:
マイクロインタラクションとは?UXに取り入れる際の5つのポイント|ferret
説明なしでもわかるUIを実現するために!マイクロインタラクションの基本を理解しよう|ferret
  

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


▲ スワイプ時のマイクロインタラクション|dribbble

マイクロインタラクション(microinteraction)とは、Webの世界ではユーザーの何らかの処理を受けて反応する微細な反応のことです。

デザインの現場では、UIアニメーションと同じだと解されることもありますが、ユーザーのアクションに対して反応するという点ではアニメーションとイコールだとは言えません。しかし、よく誤解されているのは事実です。

また実をいうと、マイクロインタラクションは、アナログ・デジタルにかかわらず私たちの日常生活の様々なところで見ることができます

例えば、エレベーターでボタンを押したら光ったり、お風呂のお湯を沸かすボタンを押したら「ピッ」と音が出たりするのも、全ては広義のマイクロインタラクションです。

これがもし、エレベーターのボタンを押しても光らなかったり、お湯のボタンを押しても何にも反応しなかったらどうでしょうか。マイクロインタラクションは、ユーザーの行為に対して反応していることを示す、重要なデザイン工学的アプローチだと言えます。
  

マイクロインタラクションを4つに細分化

Microinteractions.comを主催するダン・サッファー氏によれば、マイクロインタラクションは4つのパートにわかれています。

1. トリガー

トリガー(trigger)は動きのメカニズムを作動させるアクションです。

あなたが朝、コーヒーのポットのスイッチを押すという行為が、トリガーの一例です。それと同じように、Webサイトでボタンをクリックしたり、フォームに入力するという行為はすべてトリガーとなります。

正確に言えば、トリガーは2種類あり、上記のトリガーは「マニュアルトリガー」(manual trigger)と言われています。もう1つのトリガーは「オートマチックトリガー」(automatic trigger)と呼ばれており、特定の条件を満たす時に後続のアクションが行われる際のトリガーです。

例えば、ブログサービスでコメントがされた時にプッシュ通知が来る時、コメント行為自体がオートマチックトリガーになります。
  

2. ルール

ルール(rule)はシステムを機能させるための手順のことをいいます。

例えば、コーヒーのポットのスイッチが入っていない時にスイッチを押すとお湯を沸かし始めますが、光っているボタンをもう1度押すとお湯を沸かすのを中断します。同じボタンを押しても、条件が変わることで次の結果が変わることがあります

Webサイトの場合を考えてみましょう。動画の再生ボタンは動画が再生していない時に押すと再生し、再生中に押すと一時停止します。ここにも、コーヒーポットと同じように手続きのルールが存在しているのです。
  

3. フィードバック

フィードバック(feedback)は、私たちが起こしたトリガーが成功したかどうかを知らせることです。

コーヒーポットのボタンが押された時に「ピッ」と音がなって、動作がうまくいったことを知らせてくれます。
  

4. ループとモード

ループ(loop)モード(mode)はマイクロインタラクションの長さや機能にかかわるところで、ループは文字どおり「反復」のことを指します。

例えば、目覚ましをかける際に設定されるスヌーズの機能は一種のループだと言えます。この時、目覚まし時計の音は止められるまでにだんだんと大きくなります。

つまり、ループを行うことでフィードバックを大きくしています。Facebookメッセンジャーで「いいね!ボタン」を長押しすると、より大きな「いいね!」を送ることができるのも1種のループだと言えます。

モードは機能性にかかわる部分です。機内モードにしたらモバイル端末の通信を制限するのは、モードが変わったからです。また、自転車のギアを変えると漕ぎやすくなったり漕ぎにくくなったりしますが、これもモードが変わったからだと言うことができます。
  

Web上でのマイクロインタラクションの役割

マイクロインタラクションは様々な役割を演じますが、概して次の4つに集約されます。
  

1. アクションが行われた後にフィードバックを提供する

日常生活でも、様々な機械がボタンを押すと音がなったり光ったりして反応を返しますが、Webサイトアプリでも同じです。

1.gif

Twitterはシンプルかつ効果的な方法で、誰かをフォローした時のフィードバックを返しています。
  

2. 一回的なインタラクションを認める

2.gif

Twitterでは、ツイートをお気に入りに入れる時にも小さなアニメーションでフィードバックを提供してくれます。
  

3. 設定が可能

3.gif

YouTubeでは自動再生のオン・オフを、トグルボタンをクリックすることで切り替えることができます。この時に、オンの時にはブルーに、オフの時には白になるのもフィードバックの一種だと言えます。
  

4. ユーザーのミスを防ぐ

マイクロインタラクションによって、ユーザーのミスを防ぐこともできます。

例えば、せっかく書いていたブログ記事が消えないように、ウィンドウを閉じる瞬間に小さな警告で「ブログ記事を削除しますか?」と確認をしてくれることがあります。
  

マイクロインタラクションを活かすために気を付けたい3つのこと

1. デザインありきにしない

Webデザインの進歩とともに複雑で技術的にもさまざまな挙動を実装することが可能になったので、デザイナーであれば自分のデザインスキルを思う存分に発揮したいと思うのは当然です。

しかし、いくら見かけ上クールなアニメーションを表現していると言っても、本来のマイクロインタラクションの意図とかけ離れたデザイナーのエゴイスティックなアニメーションは、マイクロインタラクションとしては失敗だと言わざるを得ないでしょう。


▲ クールなデザインである反面、人によっては使いにくいと感じてしまうことも|dribbble

マイクロインタラクションを考える時には、アニメーションとセットになりがちです。もちろん、アニメーションを設計することには大きな価値があります。しかし、機能的な部分とそうではないところを区別し、削るべきムダな部分は思い切って排除するといった良心を持つことは大事です。
  

2. ユーザーの想定を大きく外れすぎない

コンセントに挿すだけで、水を入れてスイッチを入れれば、火を使わずに簡単にお湯を沸かすことにできるポット。今では多くの家庭に設置されています。

自分の家にあるブランドと違っても、友人の家にある同じようなものを見れば、同じようにお湯を沸かすことができるでしょう。


▲ サークルのUIは独特だが、ユーザーが慣れるまでに時間がかかってしまう|dribbble

しかし、Webサイトアプリの話となると、初めて訪問したWebサイトは、想定と大きくことなるようなびっくりするような反応をするものもあります。ボタンを押すと大きな画面で警告画面が登場したり、ハンバーガーメニューを押すと思いがけないところからメニューが出てきたりすることです。

これらは、デザイン的には優れていると評価されることもありますが、ユーザビリティの観点からはNGです。


▲ 誇張しすぎないアニメーションを取り入れているので、想定の範囲内に収まっているアニメーション例|dribbble

ユーザーをびっくりさせるような挙動はやめて、これを押せばこうなる、という想像がつくものにしましょう。
  

3. 機能性を阻害しないようにする

かつて検索エンジンの世界では、GoogleやYahoo!、Bingが群雄割拠していましたが、多くの人が最終的にわからないことを調べる時にGoogleを使うようになったのはなぜでしょうか。結局のところ、Googleの成功の決め手の大部分を占めているのは、速くて直感的なユーザー体験なのです。


Googleのマイクロインタラクションにおけるアニメーションの例|dribbble

Googleは、読み込み時間がコンバージョン率に影響することを知っています。過剰なアニメーションやインタラクションで詰め込み過ぎて、結果的に読み込み時間が遅くなってしまえば、全てが台無しになってしまいます。マイクロインタラクションを使うことで0.1秒でも読み込み時間が遅くなってしまうのであれば、そのインタラクションを実装するべきかどうかをもう一度考え直したほうがいいでしょう。

この点で言えば、たくさんのECサイトの中でもAmazonに軍杯が上がります。Amazonのサイトはスピードを犠牲にすることなく、必要十分なマイクロインタラクションを加えることで、快適なユーザー体験を提供しています。
  

まとめ

マイクロインタラクションはフィードバック時のアニメーションにばかり目が向けられがちですが、本来の機能性も考えて実装を行うことが重要です。

とりわけ、デザイナーにとってはクールでスタイリッシュな見かけにするのに絶好の部分ではありますが、本当に必要なことなのかを考えて実装するのがいいでしょう