様々な意味をもつWebサイトのスピード

UXの測定要素」で最初にスピードを挙げたのは、Webの体験において近年重要なポジションになってきているからです。ブロードバンドだからこそスピードを要求されますし、モバイルだと欲求はさらに高まるでしょう。プログラムがより早く動作するように記述の工夫や構成の検討したり、CSS や HTML といったマークアップからでもパフォーマンスを上げることが出来ます。こうした技術的なアプローチだけではなく、情報の整理の仕方や心理的な部分からスピードを表現することが可能です。

例えば、トップページのように様々な導線も含まれた情報量の多いページがあるとします。技術的な工夫を施し、表示速度が早いページにしたとしても、情報が入り組んでいて利用者が見つけ難い構成であれば「時間がかかる=遅い」と感じるでしょう。「2つ以上の製品を比較したい」「製品の特徴を把握したい」という利用者に明確な目的がある場合はどうでしょうか。一見、きれいに情報が整理されているページだったとしても目的を達成するために複数のページを横断しなければならないのであれば「時間がかかる=遅い」になってしまいます。

単体ページの情報整理だけでなく、ゴールまでの導線という複数ページの流れでもスピードは表現出来ます。製品をカートに入れてから決済までの流れ。トップページから目的に行き着くまでもステップ。導線までの道筋をいかに負荷を減らして作り上げるかが課題になります。OpenID を利用して会員登録への敷居を低くしたり、システムを再検討してステップを少なくしてくれるカートを導入するといった技術的な解決方法もありますが、デザインからも利用者の負荷を低くすることは可能です。カートだけでなくアンケートでもよく導入されていますが、スタートからゴールまであとどれくらいかかるのか、次のページには何があるのかといった表記がされていると、たとえ時間がかかるプロセスでも心理的な負荷を減らすことが出来ます。

アマゾンのショッピングカートプロセス

ジョン・マエダ氏の著書「シンプリシティの法則」にも書かれていますが、先を示すことで早く見せる(シンプルに見せる)ことが可能です。Flash サイトによくあるプログレスバー(ローディングバー)が良い例です。「Loading」と表記されているだけでいつ終わるのか分からないサイトと、今どれくらいローディングされているか分かるとでは大きな違いです。たとえ同じファイルサイズのサイトでもプログレスバーがあるサイトのほうが早く感じるでしょう。利用者に先がどくらい残されているのか、何があるのか、そしてどれくらいかかるのかを示すことで負荷を減らし、早く感じてもらえます。

プグレスバーの比較

このように、スピードは技術、IA、そしてUIデザインの側面から改善することが出来ます。

  • サーバーのスペックのアップグレード
  • Webブラウザ(クライアント側)のアップグレード
  • マークアップの最適化
  • 画像の最適化
  • プログラミングの最適化
  • 情報を整理して理解までの時間を改善
  • タスク(目的)を達成するまでの時間を改善するための情報構成
  • スタートからゴールまでの導線の検討
  • ゴールまでの敷居を下げる技術の導入
  • ステップやかかる時間を表記

数字と戦いながらスピードの改善を行うのはもちろんですが、すべてそれで解決するわけではありません。人に早く感じてもらうのは数値だけではなく感覚的なところも影響します。サイト制作は常に予算や時間と相談しなければならない部分がありますし、技術的な制約ももちろんあります。上記のリストの中からひとつふたつ実行するだけでもスピードに貢献することが出来ます。技術的な側面からスピードに貢献出来ないデザイナーは、心理的なところに注目していかに早く感じてもらうかを模索してみると良いでしょう。

Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。