体感速度を作る——スケルトンと楽観的UIの使い分け

同じ2秒でも、長く感じる2秒と、ほとんど気づかない2秒がある。アプリの読み込みを待つあいだ、画面が真っ白なまま固まっているのと、これから現れる記事の輪郭が淡い灰色で先に並んでいるのとでは、体感がまるで違う。処理時間そのものを縮められないとき、設計者は「どう見せるか」で勝負することになる。ここでは、待ち時間の代表的な見せ方を比べてみたい。

スピナーという最小限の合図

くるくると回るスピナーは、最も手軽な手段だ。「処理中である」という事実だけを伝える。実装が容易で、どんな場面にも置ける。一方で、スピナーには弱点がある。回り続ける円は、進んでいるのか止まっているのかを区別しない。利用者は終わりの見えない回転を眺めるうち、実際の待ち時間より長く待たされたと感じやすい。デヴィッド・マイスターが「The Psychology of Waiting Lines」(1985)で論じたように、何も起きていない待ち時間や、いつ終わるか分からない待ち時間は、体感的に長くなる。スピナーはこの両方を抱えやすい。

スケルトンスクリーンが変えるもの

スケルトンスクリーンは、コンテンツが入る前に、その骨格だけを灰色の図形で先に描く手法である。見出しが入る位置に細い帯、画像が入る位置に四角。利用者の視線は、まだ中身のない枠を追いながら、これから現れるものの構造をあらかじめ把握する。Nielsen Norman Groupは、スケルトンスクリーンが「ページが速く読み込まれている」という印象を与えやすいと整理している。回転するスピナーが時間に注意を向けさせるのに対し、スケルトンは内容の到着に注意を向けさせる。注意の矛先を移すことが、体感を変えるのだ。

ただし、万能ではない。待ち時間がごく短い場合、スケルトンが一瞬ちらついて消えると、かえって画面が不安定に見える。骨格を見せる準備時間が、見せる利点を上回ってしまう。スケルトンが効くのは、ある程度の待ちが避けられない場面に限られる。

楽観的UIという賭け

三つ目は、考え方が大きく異なる。楽観的UI(optimistic UI)は、サーバーの応答を待たずに、操作が成功したものとして先に画面を更新する。SNSで「いいね」を押した瞬間、ハートが赤くなる。実際にはまだ通信が完了していないかもしれないが、利用者にとっては即座に反応が返ったように見える。これは0.1秒の壁を、処理の高速化ではなく見かけの先取りで越える方法だといえる。

もっとも、楽観には代償がある。通信が失敗したとき、いったん赤くしたハートを元に戻さなければならない。この巻き戻しが頻発したり、利用者に分かりにくい形で起きたりすると、信頼は一気に損なわれる。楽観的UIが向くのは、失敗の確率が低く、かつ失敗しても取り返しがつく操作だ。送金の確定のように、誤りが重大な結果を生む操作には適さない。

選択は文脈で決まる

三つの手法は優劣で並ぶものではない。短く、失敗を許せる操作なら楽観的UIが快適さを生む。中程度の待ちでコンテンツの構造が決まっているならスケルトンが効く。状態を伝える以上の演出が難しい、あるいは予測のつかない処理ならスピナーが無難だ。裏を返せば、見せ方を一律に決めてしまうことこそ避けるべきで、待ち時間の性質ごとに手を変える柔軟さが要る。

体感速度の設計は、利用者を欺く技術ではない。むしろ、避けられない待ち時間のあいだに、利用者が何に注意を向けるかを整える営みだ。時間そのものを消せないなら、その時間の過ごし方を変える。あえて待たせる選択にどんな合理性があるかは、非同期という設計の側から考えると見えてくる。