WD Online

課題解決のためのUI実装講座 Web Designing 2015年12月号

状況に合わせたプログレスバーで待ち時間を「見える化」する(1/2) シーンごとに適切なUIを考えてみよう

プログレスバーやそれを用いたローディング画面は、「待ち時間を可視化する」ことができるUIだ。「先が見える」ことでユーザーのストレスが軽減し、ゴールまで到達せずに途中離脱してしまうのを避けることができる。そこで、プログレスバーやローディング画面の見せ方を紹介するとともに、実装方法を解説する。

サンプルファイルダウンロードのご案内
このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。

「ユーザーを待たせないこと」は、サイトを設計・制作する上で非常に重要だ。待ち時間が長くなればなるほど、ユーザーはストレスを感じてしまう。待ち時間を減らすために、ファイルの軽量化を図ったり、リバースプロキシ※1をはじめ、CDN※2を使ったキャッシング、また、コストに見合うようサーバスペックを上げたりするといった対策は常に行うべきである。しかし、それ以上に最近のWebサイトは、1ページごと、1ファイルごとのデータ容量が膨大になっている。

その背景には、Apple製品のRetinaディスプレイをはじめとした高精細画面が広く普及し、高解像度画像が必要になったことに加え、動画、オーディオ、Canvas、WebGLといったリッチコンテンツの技術的な進歩などがある。また、インフラ面では、LTEが一般的となりモバイルネットワークの速度が向上したことによって、提供できる情報量も増えたため、必然的にデータ容量も増えている。 

このような背景から、現在のサイト制作ではデータ容量を軽くすることに加えて、「“体感”の待ち時間を短くする」ことが重要になる。待ち時間の間、画面上に何か注目を集めるものを表示して、その時間をストレスと感じさせないようにするわけだ。それを実現するUIが、プログレスバーやローディング画面である。

f0db4f87d5e71209b94fc7332ff58e3a.jpg
オープニングのローディング画面のポイント
最近はリッチな表現が可能になったため、オープニングのローディング画面に力をいれているサイトが目立つ。ただ、リッチコンテンツであればあるほど、読み込みの時間はかかる。このストレスを解消するために必要なことは二つ。一つは、進捗状況を表示して、いつ終わるのかという不安を解消させる。もう一つは、“遊び”を入れる。つまり、待ち時間のストレスを楽しみで打ち消そうというわけだ
a8de4b78875f1178e22a90fff90cd09c.jpg
コロナ・エキストラ / コロナビール
数値で進捗状況を表示しながら、アイコンをアニメーションさせることで、期待感を損なわない作りになっている
6f7820dfe6c5bd5c2663209251ec0a78.jpg
PRIME HOLDINGS
画面下部のプログレスバーで進捗状況を表示しながら、画面中央で“人の繋がり”を表す自社ロゴのアニメーションを見せることで、100%になったときに何か起こりそうという期待感を持たせている

シーンごとに適切なプログレスバーやローディング画面を使う

プログレスバーやローディング画面の表現は、シーンによって変わってくる。必要な箇所に最適な「かたち」で設置しないと、本来の目的である「“体感”の待ち時間の短縮」を達成できなくなってしまう。プログレスバーやローディング画面が使用されるシーンを、いくつかの種類に分けて考えてみよう。

データアップロード

ファイルのアップロード画面などでは、左から右へ伸びていく水平方向のバーで進捗状況を表す「プログレスバー」がよく使用される(01)。処理の進捗状況を感覚で把握できるところが特徴だ。

1216ffb168d9d160a483ad667aca8757.jpg
01 データアップロードの例
filestorage オンラインストレージのfilestorageでは、アップロード状況を数値(%)とプログレスバーで表現している。数値があることで、プログレスバー単体よりも状況を把握しやすくなっている

サイトのオープニング

サイトにアクセスした際に表示されるオープニング、いわゆるローディング画面では進捗状況を数値(%)で表したり、プログレスバーを画面全体で表現したりする(02)。単に進捗状況を見せるだけでなく、次のアクションに期待感を持たせることが大事だ。

dba7c1b120490db241213a8bb61d2a1d.jpg
02 オープニングのローディング画面の例
The Wine Dive フロリダにあるレストランのサイト。店名にもあるワインをモチーフとしたローディング画面となっている。画面中央には「NOW POURING WINE(ワインを注いでいます)」というコピーがあり、一筋の赤ワインのようなプログレスバーが左右に伸びていく

非同期処理

非同期処理(たとえば、“続きを読む”など、ページ内にコンテンツを追加していくシーン)では、進捗状況を表示するというよりは、「少し待ってほしい」という意味合いが大きい。そのため、プログレスバーではなく、「スピニング待機アイコン」と呼ばれる円が回転しているアニメーションのものや、流れるようなアニメーションのアイコンを使うことが多い(03)。

567fa0262b852a95b03e570c68ac3646.jpg
03 非同期処理の例
BuzzGang テレビCMやPVなどのプロモーション映像を厳選して紹介しているメディア。トップページの記事インデックスでは画像を多用しており、読み込み待ちを示す手段としてスピニング待機アイコンを使用している

このように、いずれのシーンでも、何か処理を行う間の進捗状況を可視化するために用いられているが、その体裁はシーンによって異なっている。シーンに合わせて適切な表現を選択することが、ユーザーに与えるストレスの軽減に繋がるだろう。

※1 特定のサーバのリクエストを管理するプロキシサーバ。
※2 コンテンツデリバリネットワーク。大容量のコンテンツを効率よく配信することができるネットワーク技術。

 

372d404c6060de90a61d395a06795cb1.jpg
野辺地美可子
ITベンチャー企業にてWebデザイン・フロントエンド・ディレクション業務に従事したのち、2013年より株式会社LIGに参画。コンセプト・ブランド設計から入り込んだデザイン業務を担当している。

 

321a45d2be749c3e3fa1912b5c3b603e.jpg
中村大騎
独立系SIerを経て、Webデザイン会社にてバックエンドエンジニアとして従事。その後、フロントエンドエンジニアとして株式会社LIGに参画。最近は、IoTの勉強会登壇など、Webにとらわれない表現を求めている。 http://liginc.co.jp/

掲載号

Web Designing 2015年12月号

Web Designing 2015年12月号

2015年11月18日発売 本誌:1,559円(税込) / PDF版:1,222円(税込)

動画マーケティング時代の成功法則/SSLを理解する

サンプルデータはこちらから

■ 特集:動画マーケティング時代の成功法則
 ネット動画で変わる集客・販促・ブランディング

■ 集中企画:SSL導入実践ガイド
 Webディレクター/マーケターは、もう知らないでは済まされない!

■ WD SELECTION
 WDが選ぶ注目のデジタルコンテンツ
西尾維新公式サイト/G・U・M PLAY/株式会社モリサワ コーポレートサイト/Wonderwall/開かずのウェブサイト/ロレアル パリ EMOTIONAL ROUGE/くつろぎ族-金麦〈琥珀のくつろぎ〉-/UNIMEDIA/TryMore Inc./Andrew Harzog/「G展」スペシャルサイト「MEETinG」/NIGHT WAVE

■ ビジネス・EC
 □ ECサイト業界研究
 動画コマース:近くて遠い、EC向け動画の作成・活用法

 □ 月刊店舗設計
 ネコリパブリック:熱い思いやストーリーを伝えることで顧客の共感を呼ぶ

 □ モバイルビジネス最前線
 Anyca:個人間カーシェアリングで新しいクルマの持ち方・乗り方が生まれる?

 □ 知的財産権にまつわるエトセトラ
 著作権の保護期間「戦時加算」って知っていますか?

 □ Bay Area Startup News
 自分のクルマを使わないときにシェアするサービス「Getaround」

■ マーケティング・プロモーション

 □ サイト改善基礎講座
 閲覧開始ページの直帰率改善に取り組む

 □ ハギハラ総研
 PCに匹敵するスマートフォンからの動画視聴

 □ デジタルプロモーションの舞台裏
 広告を望まない商品ブランドが展開したコミュニケーション

 □ 行動デザイン塾
 人が動きたくなる「手段が目的化した行動」

 □ 課題解決のためのUI実装講座
 待ち時間のストレスを軽減するプログレスバー

 □ 解析ツールの読み方・活かし方
 アクセス解析とユーザーヒアリングの両輪でPDCAを回す

■ クリエイティブ・コラム

 □ ナビゲーターが選ぶ注目のデジタルコンテンツ
 [バズ施策]モテ女子の秘密♡:五五七二三二〇 眞鍋海里
 [デジタルプロモーション]美味しいを環境でつくる:THE EXTREME LATTE 試飲会 築地 Roy 良
 [Webサービス]複雑性と汎用性の狭間:Formlets 仲暁子
 [IoT]自動車産業に切り込む:DriveOn 神谷憲司

 □ モノを生むカイシャ
 RIDE MEDIA&DESIGN:サスティナブルな会社の在り方

 □ 清水幹太の「Question the World」
 Rafaël Rozendaal:ネット超大好き人間から学ぶ、自由との付き合い方

 □ ツクルヒト
 榊原澄人:「フレーム」を超えて動き出す世界

 □ 最果タヒの「詩句ハック」
 第18回 いまなん詩゛?

 □ デザインにできることMonologue
 Vol.143 デジタル回帰

 □ エキソニモのドーン・オブ・ザ・ボット
 ロボットがロボットを作る時代がもうすぐ? 人間の呪縛から逃れたロボットの家族観

■ インフォメーション
 □ Topics
 ヨコかな?(AI EMOJI©)/2015年度グッドデザイン賞

 □ Movement&News
 謎に包まれた天才写真家ヴィヴィアン・マイヤーとは何者か/オンライン動画コンテスト「BOVA」、作品募集を開始/湖畔にある美術館で巨匠・浅葉克己の個展/驚きと発見と感動をもたらす建築家フランク・ゲーリーの2つの個展 ほか
 東京モーターショー2015/経済産業省「Innovative Technologies」/総務省、IoT向けに「020」番号を割り当て/minne、積極的な拡大戦略を発表/YouTube向けショッピング広告施策を発表/「縦書きWebデザインアワード」作品募集開始

編集部からのおすすめ記事

この記事を見た人はこんな記事も見ています