アニメーションを伴うマイクロインタラクションを作っていくために

デザイナーの@riku-kunishiです。

今年に入って、AirbnbがLottieを公開したり、InVision Studioのバージョン1.0が公開されたりと「動き」までデザインすることが当たり前になりつつあります。特に私が携わっているプロダクトのターゲットは学生なので、なるべく操作に対して自然な反応をしてあげるようなプロダクトを作りたいと思っています。

ただし、動きを含む要素をNative Appに実装する場合、CodePenのような便利なものもなく、エンジニア / デザイナー間のコミュニケーションの難易度高いなと思っていたりします。私が携わっているプロダクトでは実現に必要な情報等をまとめる方法を考えたり、フローとして整理できないかと検討しているので、今回はその取り組みの経過を記載します。

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

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

単一のシナリオに基づいて一つの作業だけをこなす最小単位のインタラクション

と書かれています。

例えば、

ユーザーID入力用のテキストボックスに利用できない文字列を入力すると、エラーメッセージが表示される。
ユーザーIDが入力されていない状態では、ログインボタンがグレーアウトされる。
ユーザーIDを入力しようとすると、キーボードが表示される。

といった粒度のインタラクションがマイクロインタラクションということです。

プロダクト開発においてマイクロインタラクションに動きをつけるときの課題

アニメーションを伴わないマイクロインタラクションを実現するための材料は、状態に応じた静止画データとその状態になるための条件をまとめることで整います。しかし、アニメーションを伴うマイクロインタラクションの場合はそれだけでは十分でない場合があります。今までデザイナーとして働いてきて、アニメーションを伴うマイクロインタラクションをプロダクトに落とし込む際に遭遇した課題を記載します。

どういうデータ/情報を渡せば実装しやすいのかよくわからない。
デザインモックにかなり近いが少し違う部分の調整と確認が終わらない。
個別調整後、プロダクト全体を通して確認するとずれているものがあったりする。

この辺りの課題を解決するために、「どのようにアニメーションが実現されているのかを知ることで適切なコミュニケーションの方法がわかるのでは？」と考え、簡単な題材で実装してみました。

サンプル実装

ログイン画面におけるログインボタンを例にして実装してみます。テキストボックスに文字を入力するとボタンがアクティブになる。ボタンを押下すると反応する。という単純なものです。

現在携わっているプロダクトがiOSなのでswiftでの実装のみ記載します。ライブラリを利用するという手もありますが、OSが提供している機能がどういったものかを知るためにCABasicAnimationを使って実装してみました。

単純なものにも関わらず、アニメーションの部分のコードだけでも意外と多く、調整でこれを何度も調整するのは結構な手間だということはわかります。実際に書いてみることで、実装に必要な情報が下記であることもわかりました。

アニメーションする要素
アニメーションを開始する状態
アニメーションが終わる状態
アニメーションの時間
アニメーションのEasing
アニメーションが行われる契機
アニメーションが終わった後に状態を維持するかどうか
どの要素を同時に動かすか

エンジニアからのフィードバックとまとめ

同じプロジェクトのエンジニアと相談しながらこの取り組みを行なっているので、一旦この段階でフィードバックをもらいました。下記がフィードバック内容です。

エンジニアとしては、どのアニメーションを参考にすればいいのかわからない。
具体的には、アニメーションは静的なデザインからは読み取れないし、モックサービスのアニメーションも表現力がないため、参考にならない。その結果、〜のアプリっぽくと言われるけど、これは結構雑なふりに感じてしまう。
それを実際にコード書いて、こういうアニメーションにしてください。。みたいなのはかなり嬉しい。現時点で、必要なパラメータなども確認しているし、すぐできそう。
実際のプロダクトコードに書いてしまうと、コード整理のコストが出てくるので、自分のrepositoryに参考アニメーションを書いているみたいなのが個人的には嬉しい。

※アニメーションを書くことが好きなエンジニアと働いたこともあるので、プロジェクト外に取り組みを拡大する場合は、都度関連メンバーに意見を聞く必要があると考えています。

実装にあたりコミュニケーションをすべき内容が少し見えてきたので、引き続き同じプロジェクトのエンジニアからフィードバックもらいつつ、下記のようなことを考えていこうと思っています。