UIをリッチに見せる方法として近年アニメーションを使われる事が多く、ユーザーが操作した感覚を印象ずけたりUIの理解を深めるのに近年マイクロインタラクションが注目されています。
この記事ではマイクロインタラクションを導入するために抑えておくポイントを紹介します。
マイクロインタラクションを知るために
マイクロインタラクションの役割は「ユーザーのアクションに対するフィードバックや、現在のステータスを正しく伝える」ということです。
例えば保存ボタンを押して、それが正しく保存されたことや、ナビゲーションをクリック後、画面遷移中というのを表すことなど、ユーザーの操作に対してフィードバックを返すのをマイクロインタラクションと呼ばれます。
具体的にどんなものがあるかは、デザイナーの方たちが作っているギャラリーサイトで見るのとイメージしやすいです。
- https://dribbble.com/tags/micro_interaction
- https://www.pinterest.jp/robinjosie/micro-interaction/?lp=true
- https://uimovement.com/
- https://lottiefiles.com/
書籍ではこちらがわかりやすいです。
マイクロインタラクション ―UI/UXデザインの神が宿る細部
マイクロインタラクションはい作るの問題
マイクロインタラクションを取り入れる際には、「いつ」企画するかの問題が上がってきます。
今世の中にでているプロダクトを見ればわかりやすいですが、細かいところまでマイクロインタラクションが当たり前のように入ってるサイトは多くないです。
ですので誰かが「マイクロインタラクションを取り入れよう」と言わないことには始まりません。
主に下記の職種のいずれかで声が上がりやすいかなと思います。
- プロダクトマネージャー
- デザイナー
- エンジニア
どこで声が上がったとしても、基本的にエンジニアが実装にモチベーションを挙げられなければ導入が難しいので、そこの課題を超える必要はあります。
当たり前ですが、「やれ」と言われてできるなら、苦労はしませんので、「なぜやるか、なぜ必要か」をきちんとチーム内で価値を共有していかないとうまくいきません。
プロダクトマネージャーが声をあげる場合の役割
プロダクトマネージャーなどのデザインをする前に声を挙げれる場合は全体を通してマイクロインタラクションの動作を考えられます。
ですので、どういう方針でいくかをデザイナーに提案して考えてもらう状況を作るのが求められます。
デザイナーに渡す資料としては下記のようなものが挙げられます。
- インタラクションの目的やビジョンを明確に示す
- 参考資料を渡す
- 動画
- 参考サイト・アプリ
- ラフな絵コンテ
デザイナが声をあげる場合の役割
自分でつくったUIに対しどうやって動くかを、特にエンジニアに共有するのが求められます。
「適当に動かしてー」ではエンジニアも困ってしまうので、実際に動くものを渡してそれを実装してもらうのが良いかなと思います。
- 動きをイメージできるものを探して渡す
- モーションサンプルを作って渡す
エンジニアの役割
エンジニアは実装する事が求められます。
使ったものがデザイナー・プロダクトマネージャーの意図に沿うものか確認していき修正を繰り返します。
マイクロインタラクションの実装を実現するために大切な事
マイクロインタラクションは、誰でも簡単にできるものではないのでそれ相応のスキルが求められる。
ですのえ実装する人としては下記のような悩みがあることが多いです。
- 自分が実現できるかというスキルの不安
- スケジュールに余裕がない
- そもそもアニメーションはいらないのではという考え。
これらの事を理解してきちんとエンジニアが実現できる環境をつくるというのもマイクロインタラクションの実装を実現にるのには不可欠ですので、ただ依頼すればやってもらえるとか思うのは誤解ですので注意してください
マイクロインタラクションの必要性
マイクロインタラクションは何をもたらすかといえば、おもに下記の2つになってきます。
- 世界観の構築
- UIの理解
ゲームのような世界観重視のものでは、その世界に没入させる要素として使われます。
また、ニュースサイトやシステム画面などの情報提供型コンテンツのような場合は、UIの動作を直感的に理解させるのに役立ちます。
重要度からみたマイクロインタラクション
マイクロインタラクションと一言で言ってもすべてのUIに必要か？といわれたらそんな事はありません。
そもそもマイクロインタラクションが入っていることが普通というものもあれば、あると嬉しいみたいなものまで様々です。
いくつかマイクロインタラクションの重要度を整理したUIを紹介でします。
必要性が高いもの
- 読み込み時間のかかる時間のローディング
- カルーセルのスライド
必須ではないが実装すると印象の良いもの
- パララックス
- スクロール連動型演出
- いいねなど、ユーザー操作を伴うもの
印象は小さいが、使い勝手が良くなるもの
- モーダルの開閉
- アコーディオンの開閉
- スケルトンビュー（読み込み終わるまで何か表示するやつ）
- タップエフェクト
- buttonのホバー/アクティブ
やっても良いが効果が薄い
- タブの切り替えのアニメーション
- 画像読み込み後のフェード表示
手軽にマイクロインタラクションを導入したいとき
マイクロインタラクションを取り入れたい場合、micronというCSSフレームワークがあります。
micronは、JavaScriptライブラリと組み合わせて構成されてマイクロインタラクションを簡単に実装することができます。
割とかわいい感じのインタラクションのものが多いです。
16種類のアニメーションが用意されていますのでそれを選んで使うって感じです。
※もちろん自分のイメージに合うものがなければ作らないといけませんが。