縁の下のUIデザイン―少しの工夫で大きな改善!

第4回 待ち時間のデザイン

この記事を読むのに必要な時間:およそ 2 分

アプリやWebサービスなどを使っていると,⁠あれ,ちゃんと動いているのかな?」⁠ずいぶん時間がかかるなー」といったように待たされていると感じるときがしばしばあります。その原因は,重い処理をしている場合,サービス側で予測ができない負荷がかかっている場合,ユーザーの通信環境が良くない場合などさまざまです。

待ち時間なく快適にサクサク利用してもらうことが理想ではありますが,待ち時間が発生した場合にユーザーのストレスを軽減し,その場で次のアクションまでちゃんと安心して待ってもらうようUIを配慮することを忘れてはいけません。

たとえば,エレベーターの待ち時間の長さを解決するために,エレベータの前に鏡を置くことでクレームが減ったという『問題解決のアート』注1の話は有名です。実際待ち時間自体が短くなったわけではありませんが,鏡に映る自分の身だしなみを整えたりできることで,待ち時間であるとユーザーが感じる時間が短くなったという話です。

また,筆者が最近プレイしていたNintendo Switchの「ゼルダの伝説 ブレスオブザワイルド」では,シーンとシーンの間の待ち時間に現在のプレイ状況と関連のある短いTipsが表示されます。これもまた,待ち時間に適した長さで価値のある体験をユーザーに与え,待ち時間を短く感じさせているのです。

このように,ユーザーの待ち時間をできるだけ快適にするためにはさまざまな工夫が考えられます。その第一歩として,まずは今待ち時間であることをちゃんと伝えることが最低限必要です。そこで,代表的な表現を紹介します。

注1)
Russell Lincoln Acko著/川瀬武志,辻新六訳『問題解決のアート』建帛社,1983年

待ち時間を表す代表的な2つの表現

待ち時間であることをユーザーに視覚的に伝えるUI表現には,大きく次の2つに分かれます。

  • [a]終わり時間を明確に示していないタイプ
  • [b]終わり時間を明確に示したタイプ

形は「円型」または「棒型」で表されることがほとんどです。中でも,[a]のときに利用するスピナー,[b]のときに利用するプログレスバーという,代表的なこの2つを紹介します注2)⁠

注2)
ここで紹介する「スピナー」⁠プログレスバー」は言い回しのひとつです。同じ目的を表すUIでも,⁠スピナー」Material design guidelinesでは「Circularindeterminate」と表現されています。各プラットフォームのガイドラインなども参考にしてください。

スピナー

図1のスピナー[a]は,動作が完了するまでグルグル回り続ける円型のインジケータです。待ち時間の予測ができない場合や待ち時間が短い場合に用いられることが多い表現です。

図1 スピナー[a]プログレスバー[b]

図1 スピナー[a]プログレスバー[b]

一般的には,ユーザーが待ち時間がわからない状態で待てる時間は最大4秒だと言われています。もし4秒を超えてしまうことがあらかじめわかる場合は,時間がかかることをユーザーに伝える,またはスピナーではなく次に紹介するプログレスバーの利用をお勧めします。

プログレスバー

図1のプログレスバー[b]は始まりから終わりまでの時間経過を表示するインジケータです。データのダウンロードやアップロードなど時間がかかる処理の経過を視覚的に伝えるときに多く使われ,スマートフォン版のGoogle Chromeの画面の読み込み時などにも使われています図2)⁠

図2 Google Chrome(iPhoneアプリ)

図2 Google Chrome(iPhoneアプリ)

図3 AirDropを使った
ファイル共有画面
(iPhoneアプリ)

図3 AirDropを使ったファイル共有画面(iPhoneアプリ)

棒状に表現されることが多くありますが,iPhoneでAirDropを使ってファイル共有する場合のように円形で表現することもあります図3)⁠

著者プロフィール

池田拓司(いけだたくじ)

デザイナー。多摩美術大学を卒業後,ニフティ株式会社,株式会社はてなを経て,2012年にクックパッド株式会社に入社。2013年デザイン部長,2014年ユーザーファースト推進部長・執行役。Sassを使ったUIフレームワークの構築,Webアプリケーションなどサービス全体の設計,ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。2017年4月に独立し,Design & Life inc.を設立。インターネットサービスをはじめとするさまざまなデザイン業,およびサービス開発などに取り組んでいる。

Design & Life inc.:http://designandlife.co.jp/

コメント

コメントの記入