2023年08月30日 08時00分ウェブアプリ

ユーザーが直感的に理解できる「待ち時間」の適切なUIの選択方法まとめ

ウェブサービスの開発において、「待ち時間をどうするか」は大きな問題です。もちろん、待ち時間を減らせるのであれば減らしたいものですが、仕組みの都合上どうしても待ち時間が発生してしまう場合があります。そうした場合にユーザー体験を向上させるデザインのパターンについて、デザインを専門に行う企業の「Pencil & Paper」がブログでまとめています。

UX Design Patterns for Loading
https://pencilandpaper.io/articles/ux-pattern-analysis-loading-feedback/

ブログによると、ロードのパターンは「パッシブロード」と「アクティブロード」の2パターンに分けられるとのこと。

◆パッシブロード
パッシブロードは、システムが最初にデータ量の多いページをロードするとき、ファイルを開くとき、または検索結果を表示するときなど、ユーザーのアクションによらずシステムがロードを行うことを指しています。ロードする内容がコンポーネント単位で分離している場合、1つずつ順番にロードすることでユーザーの体感する待ち時間を減らすことが可能です。

一方、グループとして存在する方が適切なコンポーネントについてはまとめて同時にロードする方が合理的です。

また、コンポーネントの数が多い場合は遅延読み込みを行い、最初にロードする量を減らすべきです。追加のコンポーネントをロードするトリガーとして代表的なのはスクロールです。ユーザーがページをスクロールするのに合わせて追加のコンポーネントをロードすればOK。

「Load More」などのボタンを表示するのもアリ。ユーザーのアクションが必要になりますが、意図せずデータをロードしてしまうことがなくなります。

コンテンツの数が多い場合、追加でロードしているとページのパフォーマンスが低下してしまいます。そうした場合にはページに分ける方法が多数のサイトで採用されています。

ページのロード以外にも、同期などで待ち時間が発生する場合があります。こうした場合にどんなUIで通知するかについては「頻度」を考えることが大切とのこと。例えば、Googleドキュメントのように頻繁に同期する場合はフィードバックを最小限に抑えて邪魔にならないようにするべきです。

ページの内容を最新にするために更新が必要であることを通知する時など、頻度が低いものについてはバナーを出したり下図のようにトーストポップアップを表示するのが効果的です。

◆アクティブロード
新しく入力したデータを公開するとき、大きなファイルをエクスポートするとき、または自動化されたタスクを実行するときなど、ユーザーのクリックに応じてロードを行うことをアクティブロードと呼びます。アクティブロードにおける基本原則は下記の通りとのこと。

・リクエストを受け取ったら常に即座にフィードバックを返す
・2秒を超える待機の場合は、ループアニメーションを使用する
・10秒を超える待機の場合は、完了パーセントインジケーターを使用する
・動的でコンテキストに応じたメッセージを使用し、静的な読み込みメッセージを使用しない

読み込み時間ごとの一般的な事例についても掲載されています。

・0.1秒未満
0.1秒未満で読み込むことに成功した場合はそのタスクは「瞬間的なタスク」とみなしてOKで、特にUIで表示する必要はありません。ただし、タスクの規模や重大さによってはわざと遅延を行うフェイクローダーの導入が有効とのこと。例えばGmailなどのメールアプリでは、送信ボタンを押してから約5秒の遅延を挟んでからメールを送信するようになっており、ユーザーが操作を取り消す猶予が与えられています。

・0.1秒～1秒
オンラインウェブアプリにおいて1秒未満の遅延は、一般的にユーザーが想定している程度の遅延であり、特に「間」を埋めるためのアニメーションは必要ありません。こうした短時間の遅延にアニメーションを挟むことで、画面がちらついてかえってユーザーが混乱してしまう可能性があります。

・1秒以上
遅延が1秒以上になるとユーザーが遅延の存在に気付き始めます。小規模なコンポーネントにおいてはスピナーの使用が有効とのこと。

ページ全体を読み込む際には、巨大なスピナーを配置するのではなく、枠組みだけを先にレンダリングするのが効果的です。

ただ枠組みを配置するだけでなく、シマーエフェクトやパルスエフェクトでアニメーションすることでユーザーの注意を待ち時間からそらすことができ、体感の待ち時間を減少させることができます。

アニメーションを使う代わりにThumbHashなどを使って軽量の画像を表示しておく選択肢も存在します。

・2秒～10秒程度
この範囲の遅延においては、進行状況インジケーターを導入するのが適切です。開発側でロード時間を正確に見積もることは難しいですが、「この処理には数分かかる可能性があります」というように一般的な目安を表示することでユーザーに適切な期待を持たせることができます。

プログレスバーはページ単位でもコンポーネント単位でも優れたインジケーターです。途中でポーズを挟んだり速度を変えることでより「動いている」感を出すことができます。

また、ステップ単位に分割して表示することでもユーザーに目安を伝えることができます。

・10秒以上
大規模なタスクにおいては、作業の進行状況を表示するほか、他のことをしている間にタスクが進行することを明示することが大切です。時間の見積もりが難しい場合、完了率を表示するだけでOK。どれくらいで完了するのかについてユーザーが認知できる状況にすることが大切です。ただし、99％で止めて帳尻を合わせる行為は絶対NG。タスクの長さを完了率で表せない場合、別のアプローチをする必要があります。