スピードの錯覚

何年もの間、私の同僚と私は、開発者がサイトを高速にすればするほど良いと確信しました。 記事はそれについてではありません。 生産性のためにサイトを最適化する（そしてこれが）企業がどれだけ稼いでいるかについての統計は表示しません。 リラックスして、チョコレートを飲みましょう。一緒に時間を旅します。

現在および知覚時間

適切なパフォーマンス測定は非常に困難です。 例として、ページの読み込み時間の測定を試みます。 次のメトリックのいずれかを選択します。

• 最初の表示までの時間-最初のペイントまでの時間（自動的に）
• 最初の有用な表示までの時間-最初の有用なペイントまでの時間（手動）
• 最初のビューポートまでの時間-最初のビューポートまでの時間（半自動）
• 対話する時間-対話する時間
• ページ読み込み

何を選択しますか：絶対パフォーマンス（ページ負荷）または知覚パフォーマンス（TTFP、TTUP、TTFV、TTI）を測定しますか？ 私は人々がどのように動きを知覚するかについて研究し、なぜ高いfpsが低いものよりも優れているのかを説明しようとしました-そしてすぐに、私が白黒で知覚するために使用したものの多くが本当にそうではないことが明らかになりました。 運動の知覚は非常に複雑なトピックであり、主に主観的です。 あなたが見ると思うものの多くは、あなたは本当に...見えません。それは脳で生成されるからです。



結局のところ、時間と速度の知覚は、運動の知覚と同じくらい歪んでいます。 私の記事「運動の幻想」の紹介のように、デニス・ミシュノフがスマッシング・マグのために書いた素晴らしいシリーズの記事を強くお勧めします。



知覚されたパフォーマンスは非常に重要であるため、Appleでさえ、開発者の推奨事項でそのことについて書いています。

「知覚されるパフォーマンスは、多くの場合、実際のパフォーマンスと同じくらい効果的です」（ 基本的なパフォーマンスのヒント ）

知覚された現実-脳が過去、現在、未来を構築する方法

知覚時間の測定方法は、ストップウォッチとは根本的に異なります。 時間は人々にとって非常に抽象的な概念です。 私たちは彼女とうまくやっていない。 地獄、私たちは現在形で生きることさえできません！

プレゼント

「私たちはすべて過去に生きています。現在の現実の出来事から意識が80ミリ秒遅れています。 ある出来事が今起こっていると思うとき、それは実際にすでに起こっています」と、神経科学者のデイビッド・イーグルマンは言います。 はい、脳には時間のバッファーがあります！



私たちの体内のプロセスを同期するための時間バッファーが存在します。 基本的に、これらはかなりの時間がかかる化学プロセスです。 ボールを蹴ると、タッチを感じ、ボールに触れた足が見えます。 しかし、実際には、これら2つの感情は非常に同期していません。 目は脳に物理的にずっと近く、はるかに高速に信号を受信します。 このため、脳は継続的にイベントを待機し、80ミリ秒の時間をバッファリングします。 このバッファがなければ、私たちの世界はいらいらして同期しなくなります。



残念ながら、80ミリ秒のタイムバッファーは、現実の認識でさまざまな悪冗談を演じます。 Scientific American Magazineから：

クラッパーが30メートルより近い限り、同時に拍手音が聞こえます。 しかし、距離が離れると、光の速度と音の速度の差は80ミリ秒を超え、脳は画像と音を同期できなくなります。 最も奇妙なことは、移行が突然であるということです。文字通り、一歩後退すると、スラマーは同期しなくなります。 同様に、テレビ番組や映画のサウンドトラックは80ミリ秒以内にビデオシーケンスと同期されますが、遅延はありませんが、遅延が少し長くなると、それらは途方もなく迷惑になります。 80ミリ秒よりも早く終了するイベントは、気付かれずに行きます。 野球の打者は、投手がそれを投げたことに気付く前に、ボールをバットで振ります。

実際の例として、取引所での取引を考えてみましょう。 ミリ秒以内に毎日何千もの決定が行われるビジネス。 私たちは現在を感じることができないので、私たちは単に決定を下す時間がないので、ここでアルゴリズムが働き始めます。 コンピューターは常に賢いわけではありませんが、明らかに高速です。 それが、高周波トレーダーが5ミリ秒を節約するために大西洋横断ケーブルに3億ドルを支払う理由です。

過去と未来

現在の知覚だけでなく、問題もあります。 これは驚くべきことですが、研究では、私たちの未来の概念全体が、記憶を抽出し、過去を視覚化する能力に依存していることが示されています。 長期記憶から記憶を引き出すことができない人々 は未来を想像できません 。



そして私たちの記憶は非常に主観的で不安定です。 メタ認知を研究しているヘンリーレーディンガーは次のように述べています。

メモリからメモリを抽出すると、同時にメモリが上書きされるため、次回このメモリを抽出すると、元のバージョンではなく、最後に書き換えられたバージョンが取得されます。 したがって、物語を語るたびに、記憶の真正性を心から確信しながら、物語をますます装飾していきます。

ですから、もちろん、大切な思い出については決して考えずに、常に新鮮なままにしておく方が良いでしょう。 短期記憶はどうですか？ いくつかの奇妙な点もあります。 私たちが過去の時制を知覚する方法は、直観にやや反しています。

1. 何も起こらなかったイベントは短いものとして記憶されます。
2. 面白くて魅力的だったが、短いイベントは、長い間記憶されています。

これを理解するには、「メモリストア」を圧縮ストレージとして想像してください。 道路で見たナンバープレートのすべての記憶は非常に冗長で役に立たないため、脳は長く単調な旅行などの長期にわたるイベントを圧縮します。 副作用として、経過時間は実際よりも短いと後で認識します。

相対的な知覚の絶対的な目標

そのため、均一なタイミングを維持するという悪い仕事をしています。 同時に、私たちは常にRAILから来たもののような客観的な数で動作しようとします。 これは、Chrome開発者によって導入されたパフォーマンスモデルです（後にPRPLに置き換えられました ）。

• アニメーションターゲット60fps
• 起動時間1秒
• 応答時間100ミリ秒

長い間、最適なパフォーマンスは客観的な数値で測定できると考えていました。 しかし、ページがロードされると予想されるときに実際に何が起こるか見てみましょう：

• 100-200 ms- 即座に
• 1秒未満-すぐに（遅延は顕著ですが、許容範囲内です）
• <5秒-ユーザーストリームの一部
• <12秒-アテンションスパン

これらの指標のいくつかは非常に信頼性がありますが、これは最後のアテンションスパンには適用されないことがわかります。人々の平均のつかの間のアテンションスパン （集中アテンションははるかに長く続くことができます）は2000年の12秒から2015年の8.25秒に低下しました！ どうもありがとう、MTV。

主なものはコンテキストです

今日まで、私たちはくだらない組み込みの時計を持っていることを確立しました。 しかし、私たちの認識と期待も、現在の状況と状況によって大きく異なります。



あるプロセスの終了を待っているとしましょう。ここでの簡単な例は、サイトの読み込みです。 前に学んだように、理想的なロード時間は約1秒です。 しかし、以前のすべてと同様に、キャッチもあります！ コンテキストはあなたが考える以上に重要です：

• バス停にいますか？
• 実行中ですか？
• レストランで？
• 自宅でソファで？
• ビーチで？

私はあなたのことは知りませんが、バス停ではページが10秒以上読み込まれるのを待ちません。 しかし、家にいてゲーム機の電源を入れた場合、ゲームがロードされるまで1分間待つことができてうれしいです。 なんで？ 私はすでにソファに座っているので、私はすでに2-3時間遊ぶことを決めたので、1分間待つことのROIは記事のウェブページに匹敵する以上であり、私は20秒の閲覧のために10秒待つ。







では、時間をかけて別の例を作成してみましょう。今回は5秒です。 2つの状況を比較します。

「テレビでチャンネルを切り替えるには5秒かかります」

一般的に遅い！

「この男は5秒でブリトーを作りました。」

しかし、速すぎます！ 彼は5秒でブリトーを作ることができませんでした。 このことは事前に準備ができていました！

速すぎる？

ちょっと待って パフォーマンスについて話し、何かが速すぎると主張しているのでしょうか？



ブリトーの例に加えて、あなたが誰かに難しい質問をしていると想像してください。彼はほとんど即座に答えます。 あなたは彼があなたが言いたいことを真剣に聞いたことを疑うでしょう。 時々高速はサービスの価値を下げます ：

• 「何かが速く動作する場合、それは簡単なはずです。」
• 「何かが簡単であれば、安いはずです。」

待機時間が長くなると、特にテキストコンテンツからOMGセンセーションを作成する場合に、ある程度の期待感が生まれ、重要な劇的な要素になります。 それでは、状況が急速に悪化し始めるのはいつですか？ 以下に例を示します。

コインスター

明らかに、コインスター自動コイン計数機は、人々が信じているよりもはるかに速くこれを行うことができます。 したがって、懐疑論を避けるために、信頼性のための「計算」の人為的な遅延がそこに追加されました（ ソース ）。

鍵屋

悲しいことに、 錠前屋は彼らのスキルを向上させるために罰金を科されます 。 城の設置により多くの時間を費やす、より良い給料の見習い。 消費者は、このようなサービスを、より多くのお金がかかるより多くの作業として認識する。

ブロガー

Karim Mayyanによるredditの解説から：

2004年に、Adaptive PathのJeff Winとstopdesign.com（現在Twitter）のDouglas BowmanがBloggerの再設計について議論する「Redesigning Blogger」ワークショップに参加しました。 彼らの観察の中で、ユーザーはインストールプロセスの最後の段階で「ブログを作成」をクリックしたときに、ブログが作成された速さに混乱していました。 「それだけですか？ 何か間違っていますか？」彼らはそのような質問をしました。 したがって、プロセスに中間ステップが追加されました-「ブログの作成...」ページ。何もしませんが、小さな回転gifのみを表示し、数秒待ってから新しいユーザーを「ブログ、作成されました！」ページにリダイレクトします。 ユーザーは、長いプロセスに非常に満足しています。

圧縮します

こうした知識をすべて備えているため、ストリーミングドライブがなくても、知覚された期待に影響を与えるだけなので、時間を管理できます。 最初に、アクティブ待機とパッシブ待機のフェーズを理解する必要があります。

アクティブおよびパッシブ待機

待つことは、積極的に参加して待つような感覚です。 これはアクティブフェーズと呼ばれ、他のすべてはパッシブフェーズと呼ばれます。 パッシブフェーズでは、ユーザーの知覚の時間が大幅に延長されます。 知覚を改善する1つの方法は、受動段階を短くし、能動段階を長くすることです。 これは、次の方法で行われます。

• プロアクティブスタート -ユーザーがこれを理解する前に作業を開始します。
• 時期尚早の完了 -準備が整う前にユーザーに物事を見せます。

Denisはこれらの2つの手法を彼の記事で詳しく解析しているので、後で読んでください。 しかし、もう少し先に進み、ツールキットにさらに3つのテクニックを追加します。

• オプティミスティックUI-完了として不完全なアクションを表示します。
• 予測 -結果が発生する前に予測します。
• 目の錯覚 -アニメーションでさえ時間の知覚を変えるのに十分な場合があります。

理論から実践へ

予想的な開始

iOSは、アプリケーションの読み込み中にズームインするとアニメーションを表示します。これは、アクションがアプリケーションの表示準備が整う前にプロアクティブに開始されるため、実際よりもダウンロードが速い印象を与えます。 また、 予測ダウンロードもあります 。Safariブラウザーは、クリックすると（「トップヒット」）クリックできるリンクを使用してページをプリロードし、トップストーリーカルーセルもGoogle検索に移動します。 また、ボーナスポイントを獲得したい場合は、Webサイトにマルチステージプリロードプロセスを実装できます。ユーザーが何か他のことに忙しいときに次のステップをほぼ常に予測できるように編成されています。 例としては、承認フォーム、オンラインストアでの支払い、またはService Workerのインストールがあります。

早期終了

実際に発生する前にプロセスの完了を表示する方法の良い例は、ビデオの 遅延ロードとバッファリングです 。 コンテンツを表示する前にUIスケルトンを表示すると、一度にすべてをダウンロードする場合に比べて、知覚される時間が短縮されます。 プログレッシブ画像の読み込みもこの現象の恩恵を受けます。 オンライン動画をクリックすると、動画全体が完全にダウンロードされるまで再生が開始され、ダウンロードが速くなるように見えます。

楽観的なUI

Instagramは常に働くふりをしています。 一時的にオフラインになっていても、「いいね」ボタンを押すと常に「機能」します。 Instagramは、遅かれ早かれあなたがとる行動が起こると楽観的に約束しています。



楽観的なUI開発者への1つのヒント：捕まっていない場合にうそをつくのは良いことです。 約束を守らないと、少し楽観的な嘘が問題になることがあります。 何らかの理由でトンネルに入った後にデバイスの使用を停止し、後で別のデバイスからこれらのいいねがどれもパスしていないことに気付いた場合、だまされたと感じるでしょう。

予測

予測は一種の先制的なスタートであると言う人もいるかもしれませんが、ここではアクティブ/パッシブモードについてではなく、既にアクティブフェーズにあるハードウェア制限などの障害を取り除くことについて話します。 すばらしい例は、 ガラス時間と呼ばれるメトリックです。これは、指がタッチスクリーンに触れてから画面から視覚的なフィードバックを受け取るまでの遅延を表します。 最も最適なソリューションであっても、ほとんどのコンシューマー画面でのリフレッシュレートは60 Hzであるため、遅延は少なくとも16〜32 msです。



Microsoft（Surfaceタブレットで始まる）とApple（ iOS 9.1およびApple Pencilで始まる）の両方がクリックの予測に多大な投資をしている理由は、まさにその名前が示すとおりです：指の将来の位置を予測する能力です。



もちろん、予測の使用は、肯定的な結果の可能性が高い状況に限定されますが、うまくいくと魔法のように見えます。 Surfaceで予測の存在を証明するには、指でパン（画像全体の水平方向のシフト-約）を試し、突然停止します。 小さなリバウンド/修正が表示されるはずです。

目の錯覚

時々、錯視が必要なものです。 アニメーションの世界では、速度の正しい変化（緩和）がアニメーションの知覚方法に劇的に影響する可能性があります。

• イーズアウト （スローダウン）が機能するのは、現実の世界のようにブレーキが完全に自然であるように見え、視覚的な「重み」がアニメーションの前半に移されるためです。 実際、速度の変化は、アクティブ/パッシブフェーズを操作するよりも説得力があり、効果的な場合があります。 慣性スクロール （従来のスクロールとは異なり）は、パッシブフェーズを大幅に拡張しますが、速度の自然な変化がこれを補正します。
• Ease in （acceleration）が機能するのは、研究が示しているように、長時間のアクションの最後の瞬間の感情と認識が、それを覚える方法を決定するためです。 ですから、コンサートに行って、ほとんどの部分がまあまあだったのに、最後の曲がすごかったのなら、コンサートの良い思い出になるでしょう。 したがって、 長いプロセスのアニメーション化されたプログレスバーの場合、プロセスが実際よりも速くなったとユーザーに思わせるために、最後に近づくにつれてどのように加速するかを見るのは奇妙です。

プロセスの進行状況インジケータを注意深く見ると、すべてがさらに興味深いものになります 。 クリス・ハリソンは 、リップルが加速するインジケーターは、リップルが遅くなるインジケーターよりも知覚負荷時間を短縮することを発見しました。また、-驚いたことに-インジケーターの波が左から右ではなく右から左に行く場合、ダウンロードが速くなるようです。



これは、すべての製品に不正なインジケータを追加する必要があるという意味ではありません。 「プロセスの最良の指標は、その不在です」 とルークは言います。 数秒もかからないタスクの場合は、移行効果を選択することをお勧めします。

知覚速度はまだ完全に解決されていない問題分野です

時間の知覚は信じられないほど広くて複雑な主題であり、私はこの主題にいつもよりも深く潜るために最善を尽くしました。 しかし、いくつかの問題は単純な解決策とはほど遠いものです。 新しいページのレンダリングを開始した後 、現在のWebページのみをダウンロードするWebブラウザーの場合を考えてみましょう。 一方では、次のページの読み込みは実際よりも高速に見えます。 しかし、リンクをクリックしてもすぐに反応が得られないと、応答性が低下します。 ただし、そのままにしておくと、メリットとデメリットが入れ替わります。 それで、完璧なソリューションは何ですか？ 誰も知らない。



したがって、私はあなたに挑戦します。時間の認識をさらに「ハッキング」し、すべてを高速に見せるための独自の研究と実践的な例を提供します。 また、ユーザーについて考えるときは注意してください。



サイトの速さは誰も気にしません。 主なものは、それがどれほど速いかです。