事例から学ぶ、UIに意味を付加するアニメーション | アドビUX道場 #UXDojo

エクスペリエンスデザインの基礎知識

アニメーションは装飾に過ぎないとか、UIを賑やかにするためあっても悪くはない程度のものとみなされることがよくあります。しかし、それは過小評価です。ユーザー体験を高める目的のために使われれたとき、UIのアニメーションは単なる飾り以上のものになりえます。

優れたUIアニメーションは目的とスタイル、すなわち、ユーザーのための理由を伴った配置と、視覚的に優れた表現を持ちます。この記事ではそうしたアニメーションの3つの代表的な使い方を確認します。それだけがすべての用法というわけではありませんが、それらはユーザー体験に大きなインパクトを与える主要な3つの適用方法です。

1. アニメーションで注意を向ける

まずは、注意を向けるためのアニメーションです。デザインの道具の中でも、アニメーションは最も雄弁です。何かが動けば、特にそれが大きな動きであれば、目に入らないようにするのは困難です。動きの持つ効果はバナー広告などでしばしば利用されます。サイト訪問者が広告に目を留めることはまれでも、アニメーション付きのバナーにすれば、注意を引く可能性は高まります。このように、あまり重要でないものとアニメーションの注目を掴む力を組み合わせると、いらいらさせられる広告バナーができあがります。

保存を呼びかける

しかし、ユーザーにとって大事なものとアニメーションを組み合わせて使用したなら、価値あるコンビが生まれます。例えば、目の前のタスクの変化を見落とさないよう、注意を引きつけるモーションの力を使えばユーザーの助けになれます。

CodePenの保存ボタンのアニメーションはそのよい例です。CodePenは、コードのサンプルをブラウザ内で記述して公開できるオンラインのツールです。ブラウザ内で作業するために、保存し忘れた作業内容は、簡単に失われてしまいます。そのため、ファイルを編集していてまだ何も保存されていない場合、CodePenは保存ボタンが振動するアニメーションにより、状況を知らせようとします。

CodePenの確認アニメーション出典：CodePen

アニメーションはUIの中で注意を掴むのに十分な大きさです。別の箇所で使われていたなら、邪魔に感じられていたかもしれないほどです。しかし、この場では、ユーザーにとって重要な「作業を失わない」という事柄と関連付けられて、視覚的スペースに対して十分大きなモーションで、目につくようにデザインされています。

メッセージ着信を通知する

Stripeのダッシュボード内では、同じような目的でアニメーションが使用されています。ユーザーにメッセージが到着すると、メッセージの数を表す数字の横で、ベルが鳴るアニメーションが再生されます。

Stripeの注意を引くためのアニメーション出典：Stripe

これは、他のアプリでもメッセージの通知に使われているパターンですが、中でもStripeのものは上手にまとめられています。ベルが鳴るアニメーションは、数回だけ繰り返されて、停止します。何かがあることを伝えるのには十分で、その一方、手元の作業の邪魔をし続けるほどではありません。これは、通知という目的によく適ったものです。新しいメッセージはおそらく重要なものかもしれませんが（このダッシュボードでは、おそらく購入か支払いの通知）、ユーザーにとってはその瞬間にダッシュボード内の最も重要な作業ではないかもしれません。

2. アニメーションでフィードバックを伝える

インターフェース内に適切なフィードバックをデザインするのは困難な作業です。特に、複雑なタスクを含む画面デザインであればなおさらです。アニメーションは、簡単なフローであれ複雑なフローであれ、フィードバックを伝える大変効果的な手段になります。

エラーを表す振動

エラーを伝える手段にアニメーションを加えるのは、とても有効な場合があります。Stripeのチェックアウトで使われているエラーのアニメーションはその一例です。振動するアニメーションは、数年前のOSXのログインエラー時の振動に似ており、誰かが頭を振っている動作を表しています。こうした物理的な動作との関連性は、何か問題が起きたことを伝えるのに役立ちます。

Stripeの振動するアニメーション出典：Stripe

ドキュメントの整理

アニメーションは、複雑なフローを行うユーザーへのガイドや確認のフィードバックにも利用できます。その良い例を、Google Docsのファイルの整理で見ることができます。ドキュメントを整理するとき、複数のアニメーションが手順を導き、意図したとおりに操作が進んでいることを伝えます。

ドキュメントとのインタラクション出典：Google Docs

まず、移動したい複数のドキュメントを選択すると、カーソルの下に移動して重なり、いくつ選択したかを忘れないように数字が表示されます。重なったドキュメントをフォルダ上に移動すると、背景色が変化するアニメーションが、ドラッグできる場所を示します。そして、フォルダにドロップすると、重なったドキュメントが奥からひとつずつフォルダ内に移動するアニメーションが表示されます。

このように、ドラッグ&ドロップのインタラクションの過程で、実に沢山のアニメーションが使われています。それらのアニメーションが常にユーザーの動作と共にあることが、アニメーションが有効であるポイントです。次の操作を始める前に、アニメーションの完了を待たされることはありません。作業プロセス全体を通じて、必要なフィードバックが必要なときに与えられるため、すべてが意図したとおりに進んでいることに確信が持てます。

3. アニメーションで関連性を伝える

今日では、様々な大きさの画面にインターフェースが表示されるため、UIの一部が画面から隠れている状況は珍しくありません。特に小さな画面の限られたスペースでは、目の前のタスクや注目されている情報にあわせて、UI要素を画面に表示したり隠したりすることがよくあります。インターフェースをデザインする側としては、表示されていないUI要素があっても、すべてのUIがどこにあるのかを把握していることでしょう。その頭の中のマップをユーザーに示すと、使いやすさの向上に役立ちます。その際、どの場所と何が関連しているか認知する負荷を下げるために、アニメーションが利用できます。

スライドインする要素

この例のひとつに、Cotton Bureauサイトのナビゲーションやカート機能があります。どちらの機能も好みのTシャツを見ているときは画面内に見当たりません。しかし、メニューアイコンをクリックすると、左側からナビゲーションがスライドインします。また、カートにシャツを追加すると、カートが右側からスライドインします。

Cotton Bureauのサイトで使われているスライダー出典：Cotton Bureau

要素がスライドして、視界に登場したり消えたりすること自体はよく使われているパターンですが、ここではアニメーションが果たす役割に注目しましょう。わずかな時間にユーザーに多くの情報を伝える、大きな役割をこなしています。

ナビゲーションメニューが左側から登場し、閉じると左側へ消えていくという事実は、それが必要になるとどこから来て、表示されていないときはどこにあるのかを暗示します。画面の右側にスライドして現れたり消えたりするカートの詳細パネルについても同様のことが言えます。

デザイナーは瞬間的に登場させることもできたでしょう。しかし、トランジションを使ってどこから来たかを示すことで、なぜ新しい要素がどこからともなく現れたのか？という迷いが原因の認知負荷を排除します。ユーザーはあれこれ考える必要なく、ナビゲーションが画面のすぐ左横に隠れていて、必要なときに呼び出せば表示されるという、インターフェースの脳内マップを持つようになります。アニメーションは1秒もかからないごく短いものですが、重要な情報を伝え、認知負荷を軽減しています。

バケツの中のピクセル

関連性を示すアニメーションのもうひとつの例は、Google Fontsのカラーピッカーに使われています。新しい背景色を選ぶためにバケツのアイコンをクリックすると、4色のオプションが拡大され、選んだ色がバケツの外に反映されます。

Google Fontsのカラーピッカーのアニメーション出典：Google Fonts

アニメーションの動きが示すのは、スウォッチが実際にバケツから出現する様子で、バケツのアイコン内にスウォッチがあるというメタファーを作り出しています。もちろんアイコンはピクセルの集合であり、その中に何かを入れることはできません。しかし、このアニメーションは、メタファーとしての現実世界のペンキが入ったバケツを想起させるには十分です。

複雑さを持たせず意味を持たせる

最後のまとめとして、これまでに紹介したアニメーションのほとんどが特別複雑でないことを指摘するのは良いタイミングでしょう。多くの例が、1つか2つの属性だけをアニメーションさせています。インターフェースについて意味のある情報を伝えるために、視覚的に複雑である必要はありません。目的を持ったUIアニメーションは、力を持ちつつ簡素であることを両立できます。

この記事で取り上げた、アニメーションの3つの目的（注意を引く、関連性を示す、フィードバックを伝える）が有効な場所を探してみることをおすすめします。そして、もう一段UXを磨くためのレイヤーを追加してみましょう。

この記事はAnimation for UX: How Animation Adds Meaning to UI（著者:Val Head）の抄訳です