スクロール連動型テキストアニメーションは、ユーザーを遅らせる

昔から知られているユーザビリティの課題の1つに、読み込みの遅さにユーザーが苛立ち、そのサイトや組織に関するイメージに悪影響を及ぼす、というのがある。時間が貴重なときには、一刻も早く欲しい情報の入手がほんの少し遅れただけでも不満を感じるものだからだ。

応答時間が遅くなるのは、大きな画像や凝った作りのウィジェット（たとえば、バナーカルーセルなど)の読み込みや、複雑なデータ処理によるサーバーの遅延によることが多い。しかしながら、最近実施したユーザビリティ調査では、まったく違う理由によって参加者のスピードは落ちていた。ユーザーがそのページの該当エリアをスクロールダウンした後に「しか」、メインのテキストコンテンツのアニメーションが出てこないという視覚効果がその原因になっていたのである。ある参加者の言葉だ。「スクロールダウンしているときに、ページ全体が形作られていくようなやり方は好きではありません。…そのやり方だと、すべてのセクションを1つ1つ読み込まなければならないことが嫌ですね。かっこいいちょっとした動きを見ずに、ただそこにある情報だけを確認したいときだってありますから」。

この遅延の理由は最初に挙げたものとはまったく異なっていたわけだが、それによる影響は同じであった。つまり、ユーザーの不満と貧弱なユーザーエクスペリエンスがもたらされたのである。

アニメーションは審美性を加える

アニメーションは特定のインタフェース要素に注目を集めるために利用されることが多いが、そのブランドがモダンで革新的である、という印象を与えるために用いられることもよくある。さりげないアニメーションと画面切り替え効果は、見た目をおもしろくすることで、そのブランドに対するユーザーの知覚価値にプラスの影響を及ぼす。ただし、そのアニメーションが不快なものでも、自分がどこにいるかわからなくさせるようなものでもなく、適切な場所で控えめに利用されている場合に限るが。そうした場合、良質なアニメーションはインタフェースの魅力を向上させてくれるので、結果、美的ユーザビリティ効果を活かせるようにもなるのである。

最近はスクロール連動型のアニメーションが人気だ。しかし、このアニメーションも多くのトレンド同様、誤った使い方をされたり、過度に使われがちである。ユーザーを喜ばせるためのこうしたアニメーションも、使い方が不適切だと、逆に迷惑なものになる。ページがそのテキストを「読み込む」まで、ユーザーは待たなければならないからである。（こうしたアニメーションはテクノロジーについてのユーザーの知識の限界を示すものでもある。つまり、ユーザーは実際のシステムの遅延と視覚効果による遅延の違いを必ずしも区別していない（し、そうする必要もない））。

ここではっきりさせておきたいのは、スクロール連動型アニメーションのすべてが悪いわけではない、ということだ。我々の調査では、さりげないアニメーションは（上で挙げているシカゴ科学産業博物館のサイトの切り替え効果の例も含めて）、気づかれないまま（あるいは、何のコメントもされないまま）終わることも多い。良質なスクロール連動型アニメーションというのは、コンテンツから過度に注意をそらせて、インタフェース自体に注目を集めるようなものではないはずだ。適切なアニメーションのデザインとは、気づいてはもらえるが目立ちすぎない、というバランスを取る作業といえる。そうすれば、アニメーションが実行中のタスクの邪魔になる、あるいは、鬱陶しかったり、くどいものになるようなことはないからである。

スクロール連動型アニメーションの3つのガイドライン

1.   コンテキストをよく考えよう。

テキストにスクロール連動型アニメーションを使うつもりなら、サイトの全体的な目的とほとんどの訪問者にとっての最重要タスクをよく考慮しよう。たとえば、医療や健康関連、金融、B2Bサイトといった、高いリスクをともなうタスクをサポートするサイトは、目的重視型で、時間を無駄にする「かわいい」デザイン機能に苛立ちやすいオーディエンスをターゲットにしている。タスク重視型のユーザーはWebサイトに感動させられたいわけではない。彼らが求めているのは答えを得ることだからである。

その一方、エンターテイメント、芸術、ECなどの閲覧型の娯楽サイトでは、訪問者はスクロール連動型アニメーションを予想外の楽しいビジュアルと見なす可能性がある。たとえば、前述の博物館サイトを閲覧した参加者たちは、特定の情報を探していたわけではないのに、どんな種類の展示を博物館が提供していることになっているかを、ブラウジングして、単に見て回っていた。

どちらの場合でも、そのサイトでの典型的なカスタマージャーニー中に、ユーザーが何回そうしたアニメーションに遭遇することになるかを検討することが重要だ。ある長いページをスクロールダウン中に、1回、あるいは数回なら、切り替え効果を目にするのはうれしい驚きかもしれない。しかし、それが複数のページで何回も出てくれば　すぐにくどく感じられるようになり、ユーザーの忍耐力もなくなっていくだろう。このアニメーションは、ページのスクロールダウンという、「非間接的な」トリガーに依存していて、ユーザーが直接コントロールできるものではないので、使いすぎないように注意する必要がある。1つ1つのアニメーションによるユーザーのスピードダウンはごくわずかかもしれないが、そうしたアニメーションがたくさんあれば、それによる遅れも次第にはっきりとわかるようになるからだ。（1秒、余分にかかるようになるだけで、ユーザーはインタフェースの応答時間の遅延に気づいて、システムに翻弄されていると感じるようになる、ということを覚えておこう）。

2.   スクロール連動型アニメーションは二次的なコンテンツに利用しよう。

スクロール連動型アニメーションのリスクを緩和するためには、テキストの本文ではなく、二次的な補助コンテンツに利用するとよい。こうした利用の仕方なら、ユーザーはすべてのエリアのテキストの「読み込みが終わる」まで待たなくてもよくなるので、テキストを継続して読めるようになるし、その一方で、見た目の美しさによる総合的なメリットも維持されるからである。

ユーザーがすべてのエリアのテキストを人為的な読み込み時間なしに読めるようになれば、スピードが落ちることも、インタフェース自体に気を取られることもなく、重要な情報の消費というタスクを達成できるようになる。どんなWebサイトでも、テキストというのは情報を伝達する中心コンテンツであることが多い。したがって、テキストへのアクセスに障害になるものは取り除くことが非常に重要だ。

3.   スクロールで起動するアニメーションは一度しか出ないようにしよう。

スクロール連動型のエフェクトは、ユーザーが初めてページを下に移動したときにのみ、起動するべきである。また、（ユーザーが情報を確認するためにページを上下に移動するときの）その後の画面では、アニメーションをもう一度再生しなくても、すべてのコンテンツがすぐに読めるようになっていなければならない。

結論

アニメーションはブランド戦略を支援し、ユーザーの関心を引きつけるための優れたツールとなりうるが、控えめに利用する必要がある。デザイナーや開発者はコンテンツの大きなかたまりがフェードしたり、スライドしたりして切り替わるように見えるのが気に入っているのかもしれないが、こうしたエフェクトはユーザーエクスペリエンスを向上させる以上にユーザーの障害になる可能性が高いということは覚えておこう。