アニメーションに使用を避けないで！機能的アニメーションの取り入れ方

より優れたUXへとたどり着くには、ウェブサイトデザイン、カスタマーサービス、製品の質などなど様々な要因が関係してきますが、機能的アニメ―ションもその一つです。

 

 

しかしながら、多くのデザイナーが、コストや設置位置、そしてウェブサイトのパフォーマンスなどに関する懸念からアニメーションの使用を避けているように思えます。アニメーションの可能性を理解することは非常に重要です。

 

 

 

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

機能的アニメーションを用いる最も優れた一つの方法は、マイクロインタラクションです。

 

 

例えばツイッターで、「いいね」をすると、小さいハートのアイコンが素早くはじけます。見ていて楽しく、またユーザーに「いいね」が正しく完了したことを知らせる興味深い方法です。

 

 

 

どのようにアニメーションを取り入れる？

機能的アニメーションをマイクロインタラクションに取り入れる方法はたくさんあります。

例えば、ユーザーが何か情報を送る箇所があれば、小さいアニメーションを使って、その情報が正しく送られたことをユーザーに示します。ユーザーが何を行っているのか、正しいアクションを行ったのかなどをフィードバックする手段としても用いることができます。

 

 

 

機能的アニメーションの優れた使い方

例えば、ナビゲーションボタンにマウスを合わせると、ボタンのサイズや色が変わるといった効果を用いているウェブサイトがあります。

これらのシンプルなアニメーションは、視覚的に興味を引きつけるだけでなくユーザーに彼らがどのようなアクションを起こそうとしているのかを知らせる効果もあります。

 

 

ただし、アニメーションは短くしましょう。短く、目立つアニメーションはよりユーザーの注意を引きます。ロード時間も考慮する必要があります。

また、アニメーションを取り入れすぎると、ウェブサイト全体が装飾されすぎて、ごちゃごちゃして見えてしまう可能性があります。アニメーションは装飾のためではなく、機能的な面から取り入れることをお勧めします。

 

 

 

最後に

究極的にはアニメーションの追加はユーザビリティ次第です。

もしアニメーションを追加しようと考えている場合は、それがUXを強化するかどうかを考えてください。もし強化するのであれば、ウェブサイトを変更する価値があるでしょう。

 

 

 

 

※本稿は 「The Role Functional Animation Plays in Enhancing User Experience」を翻訳・再編集したものです。