待たせない!0.2秒のカルーセル速度

画像が横方向に、ビュンビュン切り替わっていくカルーセルUI。

Amazonのトップページ(2018年1月現在)の切り替わりスピードが速い!?と思い、気になって測定しました。

切り替わりに要する時間は0.2秒

原始的な手法ですが・・・Amazonのトップページを録画し、動画編集ソフトでカルーセルの切り替わり速度を測りました。

0.2秒!

参考までに有名そうなカルーセルライブラリのコード、slickを確認したところ、デモでは0.3秒で設定されていました。

たった0.1秒ですが、1.5倍違いますし、Amazonのカルーセル画像は大きいので、体感速度は恐ろしく速く感じます。

ユーザーを待たせない

これだけ速いのは、カルーセル切り替えの間、ユーザーを待たせないようにする配慮から来たものだと思います。

「読み込みが0.1秒早くなると、売上が1%増加する」というAmazonの発表があったように、待つ要素を極限まで削っているのかもしれません。

0.2秒のスライドは、アニメーションデザインとして見ると体感速度が速すぎ、美しいかどうか分かりませんが、UIデザインとして見ると美しく感じます。

ただし、カルーセルは成果を上げられない事例を良く耳にするので、まずは導入すべきか検討したほうが良さそうです。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)