【書き物】UIでアニメーションを使う意味について

少し前にアフォーダンスについての記事を書いたので、次はメンタルモデルとフィードバックについて書こうと準備していたのですが、気になる動画が流れてきたので今回はその記事に絡めてアニメーションの話を書こうと思います。

動画の紹介とアニメーション表現

まずは流れてきた2つの動画の説明から。

最初にLivescribe社のスマートペン「Livescribe 3」の紹介動画です。


Introducing the Livescribe 3 smartpen - YouTube

この動画の0:20から0:22あたりなんですが、最初見たとき思わず「うまいなぁ」とPCの前でつぶやいてしまいました。

スマートペンで紙のノートに文字や図形を書くとアプリケーションに取り込まれ、取り込まれた文字をスワイプするとスワイプした箇所が横回転し、テキストが表示されています。おそらくスワイプ前に既に文字認識が完了するよう実装されているのでしょうが、スワイプによるテキスト化は見た目一瞬で完了しているように見えます。この動きと速度がかみ合いすぎていて、気持ちよさそうで自分でも操作してみたくなります。

この「気持ちよさそうな操作」はiOS登場以降UXと絡めていたるところで語られていますが、具体的な実装例としてとても参考になりますね。

次の動画は、Microsoft社の開発したOS「Windows 8」に実装されている「ライブタイル」というインターフェースについてのデモ動画です。


Interactive live tiles on Windows Next by Microsoft ...

 こっちは1:08から1:10を見ていただきたいのですが、メールアイコンをタップするとアイコンの右側にメールの一覧が表示される、という動作のデモです。

私はこのライブタイルというUIが大好きで、操作部品のデザインに、内包する情報の状態をリアルタイムに反映させるという考え方はとてもモダンで、UIの新たな方向性を示してくれた偉大な発明だと思っています。

ただ、操作時のエフェクトアニメーションには少し不満がありまして、それが先ほどの動画の該当部分なんですが、メールアイコンをタップするという動作と、メール一覧が表示される動作の関連性がこの表現だと少々希薄に思えるんです。

メールアイコンをタップしたことによるメールアイコンそのものの動きはあるし、メール一覧が表示される動きもあります。このあたりは最近のUIらしいデザインなんですが、メール一覧がメールアイコンから生み出されたものである、という表現がここには含まれていません。

私はUIにはできる限り文脈を盛り込むべきだと考えています。文脈とはつまりUIにおける操作と結果のつながりであって、これを明確に表現することが、ユーザにとってわかりやすいUIをデザインするためにとても重要だと考えているからです。

そして、その文脈を表現する手段がアニメーションです。

アニメーションと空間認識

アニメーションが担う重要な役割は「操作と結果の関係の可視化」です。

多くのユーザインターフェースには、ユーザの操作を受け付け、その操作に対して何らかの結果を出すという機能が備わっています。この「操作」と「結果」は必ずユーザにセットで認識される必要があり、その関係がわかりやすいほど「使いやすい」と評価されやすくなります。

少し生物学の分野の話をします。

人は常に自分の周辺に存在する物体の大きさや形状、位置を認識し続けています。これを「空間認識」と言いますが、この空間認識によって人は周辺の状況の変化も把握しています。これは、「一つ前に認識した状況」と「今認識した状況」の差分からどんな変化が起きたかを推測しているもので、実際に変化している様を見たかどうかは関係なく把握することができます。

なんでここで空間認識の話をしているのかというと、空間認識によって変化を把握するには、事象が自然な流れで連続していることが重要なんですが、それがUIにアニメーションを実装する際に必ず考慮すべき重要な考え方の一つだからなんです。

空間認識による変化の把握の例としてキャッチボールをあげますが、キャッチボールでどうしてボールをキャッチできるかといえば、投げられたボールが途中でワープしたりしないからです。投げられたボールが自然な流れで連続した変化(=放物線運動)をするからこそ、落下地点を予測してキャッチすることができるわけですね。

UIにおいても同じで、操作に対する結果が突然画面上に表示されたり、ユーザが想定していない箇所に表示されたりすると、ユーザがその変化を認識できず、「何かが起きたけど何が起きたのかわからない」という状態に陥ります。これはユーザにとって大きなストレスです。

これまでのUIデザインでは、操作と結果の位置を近づけたり、色や形をそろえることで変化を認識しやすくする、というのが基本的な対処方法でした。最近はその役割をアニメーションに担わせることが増えています。


Android ListView Add Cell Animation - YouTube

操作と結果をつなげるアニメーションの例としてこの動画を貼っておきます。リストビューに項目を追加するという簡単なデモですが、追加ボタンを押すたびにリストの最上段に新しい項目が追加される様がアニメーションによって表現されています。

これ、追加ボタンがリストビューの上に設置されていることも重要で、項目を追加する操作と項目が追加される場所が近いというのも、操作と結果の関係を明確にしています。

こんな感じで、UIにおいて操作と結果の関係を視覚的に表現してあげることで、ユーザにわかりやすさを提供することができ、これが操作に対する安心感を生み出してくれます。