より良いUIのためのマイクロインタラクション入門
この記事はGoodpatch Advent Calendar 2018 14日目の記事です。また、2018/10/08に開催された技術書典5にGoodpatchの有志で出展したブックパッチの内容を省略・改変した内容となっています。
今回はマイクロインタラクションはよく知らない方やマイクロインタラクションは知っているけど実際にコードを書いたことが無い方向けにマイクロインタラクションの基本的な知識と実装方法についてご紹介します。
マイクロインタラクションの理解
マイクロインタラクションとはどういう意味なのでしょうか。Dan Saffer氏の著書「マイクロインタラクション ー UI/UXデザインの神が宿る細部」によると、マイクロインタラクションについて以下のように書かれています。
マイクロインタラクションとは、単一のシナリオに基づいてひとつの作業だけをこなす最小単位のインタラクションのことです。
マイクロインタラクションは端的に言えば「とても小さなやり取り」とも言えます。アニメーションはマイクロインタラクションをデザインするための手法としてよく使われます。優れたマイクロインタラクションはユーザーとシステムのやり取りを円滑にし、プロダクトへの愛着度を高めます。これはアプリケーションやデジタル製品がコモディティ化している領域において競合と差別化できる重要なポイントになります。
先に書いたとおり、マイクロインタラクションは最小単位のインタラクションのことです。たとえばライトを付ける・消すといった動作はマイクロインタラクションの例としてよく挙げられます。 デスクのスタンドライトには大抵ライトのON/OFFを制御する物理装置が付いています。 たとえ、ON/OFFを制御するボタンが１つしか無かったとしてもライトが目の前に存在するのでユーザーは明確にライトの状態を把握することができます。
しかし、これが遠隔操作だったらどうでしょうか？ ライトは物理的に離れたところにあり、ユーザーはアプリケーションなどを通して操作しなければいけないとき、ボタン１つでユーザーはライトを正しく制御できるでしょうか？
このような細かな作業において、いかにユーザーに分かりやすく、効果的に目的を達成できるようにするかを考えるのがマイクロインタラクションの主旨になります。
マイクロインタラクションの効用
ユーザーは普段マイクロインタラクションをあまり意識していないかもしれませんが、何気ないところでその恩恵を受けています。 ここではマイクロインタラクションにおいて、いくつかの事例をもとにどのような効用があるのかをご紹介します。
アニメーション
アニメーションを使うことで時間経過とともに動きや変化の過程を伝えることができます。 Mac OS Xのウインドウを最小化するときにはウインドウがDockに吸い込まれるようなアニメーションが施されています。 このアニメーションによってウインドウの移動先が視覚的に分かるようになっています。
リアルタイムバリデーション
MailChimpのSignup画面ではパスワードの入力条件を列挙しており、ユーザーが文字を打ち込む毎に入力内容をチェックしています。 入力されたパスワードがすべての条件を満たしたら、サブミットボタンが押せるようになります。 リアルタイムに入力内容をチェックすることでサブミットボタンを押す前にユーザーは条件を満たしているのかを知ることができます。
アクションの取り消し
Gmailではメール送信完了後に表示されるトーストに送信取り消しのリンクを表示しています。 もし、ユーザーが誤ってメールを送信したとしても、送信取り消しのリンクを押すことでミスを防ぐことができます。 このようにアクションを取り消し可能にすることでユーザーの精神的負荷を下げることができます。
印象的なフィードバック
TwitterのLikeボタンを押すとハートマークの色が変わり、ユーザーに対してシステムが反応したことを知らせるとともに弾けるようなアニメーションによってポジティブな印象を与えています。 また、iPhoneでタップするとハードウェアを軽く振動させることで触覚的なフィードバックも与えています。
不可視トリガー
Facebookメッセンジャーでは、「いいね」ボタンを長押しすることで通常の「いいね」より大きな「いいね」を送ることができます。 このような暗黙的な機能はユーザーに遊び心を感じさせたり、上級者向けのショートカットとして便利機能を提供することができます。
マイクロインタラクションの実装
今回はアニメーションを簡単に実装するためのライブラリとして、Airbnbから提供されている「Lottie」を使い、TwitterのLikeを押したときと同じようなハートが弾けるアニメーションを作ってみたいと思います。
LottieはiOS、Android、Webなどマルチプラットフォームに対応しており、Webの場合はCDNやNPMからライブラリを読み込みます。 また、JavaScriptフレームワーク（React, Vue, Angular）向けのPluginも用意されています。 Lottie Webの詳細については、公式ページを参照してください。
アニメーション素材はAfterEffectsでも作成できますが、LottieFilesというオンラインコミュニティからサンプルを入手可能です。ここではこちらのサンプルを利用したいと思います。
アニメーション素材を入手したら、実装に入っていきましょう。 Lottieを動作させるためにはAffterEffectsのPluginである”bodymovin”というライブラリが必要になります。bodymovinはCDN経由で利用可能ですが、URLはこちらのページを参照してください。また、下記のソースコードはこちらのページでご確認いただけます。
まずは index.htmlから作成します。
<div id="lottie"></div>
<!-- bodymovinのURLは本家のサイトを参考に適宜変更してください -->
<script src="https://cdnjs.cloudflare.com/~/bodymovin_light.js"></script>
<script src="./index.js"></script>
index.jsを作成し、先ほど用意したアニメーション素材をJavaScriptで読み込んでみます。
class LikeButton {
constructor () {
this.initializeAnimation()
}
initializeAnimation () {
const animationParameter = {
container: document.getElementById('lottie'),
path: './lottie/animation-w100-h100.json',
render: 'svg/canvas/html',
loop: false,
autoplay: false
}
this.animation = bodymovin.loadAnimation(animationParameter)
}
}
(() => {
new LikeButton()
})()
最後にWindowをクリックしたらアニメーションが流れるようにして完成です。
class LikeButton {
constructor () {
...
this.bindClickEvent()
}
initializeAnimation () {
this.isLiked = false
...
}
bindClickEvent () {
window.addEventListener('click', () => {
this.isLiked = !this.isLiked
if (this.isLiked) {
this.like()
} else {
this.notLike()
}
})
}
like () {
this.animation.play()
this.animation.addEventListener('complete', () => {
this.animation.pause()
})
}
notLike () {
this.animation.stop()
}
}
終わりに
いかがでしたでしょうか。マイクロインタラクションにこだわると時間もかかりますが、細部にほんの少し工夫を加えるだけでプロダクトのクオリティがグンと上がります。
「細部」が体現するのは、作り手のユーザーに対する思いやり、おもてなしの心です。
マイクロインタラクションについてさらに詳しく知りたい方は、ぜひDan Saffer氏の著書「マイクロインタラクション ー UI/UXデザインの神が宿る細部」を読んでみてください。
