ページローディングの時間とユーザーの感じ方

Contact Price

UI・UXエクスペリエンスロード時間とユーザーの関係性

User Experience - 2018.9.30 - Three Philosophers

ユーザーエクスペリエンスにおいてロード時間の短縮は不可欠です。ロード時間がユーザーに与える影響、またその解決策、UIUXデザイナーとして担当すべきことを簡潔にまとめてみました。

3秒以上のローディングでユーザーの半数を失う

ローディング時間とその影響  1秒間の遅れで ページビューが11パーセント低下、カスタマー満足が16パーセント低下、コンバージョンが7パーセント低下。2秒間以内の読み込みを47パーセント以上のユーザーが期待。3秒間の遅れで 40パーセントのユーザーがページを破棄

約半数のユーザーが2秒以下でのページ読み込みを期待し、3秒以上のローディングで40パーセントのユーザーがページを破棄するというデータがあります。しかしながらわずか1秒の遅れでも、ページビューが11パーセント低下、カスタマー満足が16パーセント低下、コンバージョンが7パーセント低下したという報告もあり、UIUXデザイナーとしては様々な解決案を提示する必要があります。

UXデザインとローディング時間

優れたUXデザインは快適な体験をもたらしますが、短い時間が勝負のウェブサイトでは、トランジションエフェクトやローディングアニメーションを用いてユーザーのストレスを軽減させます。

ローディングアニメーション

3秒で顧客を失う厳しい世界ですから、内部のシステム面のみならず、視覚的なユーザー体験も考慮します。有名なLazyLoadなど、時間を短く感じさせる方策を講じていきましょう。

また心理的な効果も考慮に入れると負荷の軽減につながります。下図は面白い調査結果なのですが、ユーザーはアンテナ型のアニメーションに対しては「アプリケーション」そのものの出来を疑うのに対し、円形アニメーションの場合は「端末自体のシステム」や「通信状況」に何らかの原因があると考える傾向が強いそうです

アンテナ型、円形オブジェクトとユーザー認識

サイコロジーに関しても、ひとつの砦として、知識を深める必要があるでしょう。UIUXデザインは実に面白い世界ですね。

コードの改善とファイル管理(最適化作業)

コーディングや画像などのファイル管理の面もローディング時間に大きな影響を及ぼします。数ある最適化対象項目のうちのいくつかをピックアップしてみましょう。

項目 管理対象者
画像最適化 デザイナー、UIUXデザイナー
CSSとJavascriptの縮小化 フロントエンドエンジニア、UIUXデザイナー
プラグインやウェブフォントなどの見直し フロントエンドエンジニア、デザイナー、UIUXデザイナー

svgファイルでは書き出し時の詳細設定を理解したり、スムーズツールを用いるとパスを簡略化できファイルサイズは減少します。pngファイルも圧縮ソフトを用いると3分の1くらいのサイズになります。作画やアイコン作成そのものは通常のデザイナーさんと分業化しても構いませんが、最適化に関する作業やディレクションはUIUXデザイナーの担当領域と言えるでしょう。cssやjavascriptの最適化はフロントエンドエンジニアの担当領域ですが、sassでの運用などUIUXデザイナーも覚えておくべきことは多いです。このほか、サーバー関連や圧縮に関する知識も表面的な部分だけでも良いので学んでおきましょう。

まとめ

かなり多角的な改善が必要になるのがローディング技術です。UIUXデザイナーとしてすべてを管理するのは無理ですので、まずはインターフェースの設計をし、実現可能な遊び心みたいなものを、UX改善のパートとして提案していけると良いと思います。コンバージョンレートの測定なども担当範囲ではありません。戦略部門の方々と連携し改善にむけたより良い提案をしていきましょう。