トランジションをアニメーション化するための最適な期間
微妙な遷移効果をアニメーション化するための最適な期間はありますか？ 150〜250ミリ秒は、ほとんどの効果にとって、通常私にはほぼ適切だと思われます。これがほとんどのユーザーに適していることを確認したり、より正確な期間を提供したりするための調査はありますか？トランジションの種類によって大きく異なりますか？
" Model Human Processor "システムを使用して、アニメーションの長さを決定できます。*
人間が何かを視覚的に認識するのに平均して230ミリ秒かかります。最小/最大は70〜700ミリ秒です。つまり、一部の人は他の人よりも動きを知覚するのが速いということです。一部の人が100ミリ秒で知覚できるものは、他の人が600ミリ秒で気付くまでに時間がかかります。 （ほとんどの人間の特性と同様に、知覚時間の分布はほぼ正規曲線に従います。）
他の回答は、長いアニメーションと短いアニメーションのどちらを選択するかについての良いアドバイスを提供しますが、これらは実際には、長すぎたり短すぎたりする人間の限界を定義する数値です。アニメーションが多くのインタラクション（コンテキストメニューなど）で繰り返される場合、ほとんどのユーザーにとって、遅くて認識しやすいアニメーション（600ms）はかなり退屈に感じるでしょう。 250ミリ秒程度のマイクロアニメーション（ナビゲーションバーやコンテキストメニューなど）は、ほとんどの人に気付かれますが、それを待っているように感じられないほど十分に気付かれます。
[*]これは、人間とコンピュータの相互作用の正式な方法であり、人間の認知処理、感覚的知覚、動きの典型的な時間など、システムとのさまざまな相互作用を完了する時間を推定するために使用されます。
アドバイスは次のとおりです。しかし、ここに何が最もうまくいくかを理解するのに役立つ数値があります：
グーグルは、彼らの検索結果ページが100から400ミリ秒遅くなる実験を実行しました。応答時間が遅いと、ユーザーあたりの検索数に影響がありました。数週間後でも、速度が遅いページのユーザーはそれほど検索していませんでした。 https://research.googleblog.com/2009/06/speed- Matters.html
2016年の別の調査によると、モバイルサイトへのアクセスの53％は、読み込みに3秒以上かかると見捨てられます： https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
したがって、100msから1sのウィンドウは、ユーザーの習慣に基づいて以前の調査が示唆しているよりも定量的に狭いです。
視覚刺激に反応するのに平均215msかかります： https://www.humanbenchmark.com/tests/reactiontime
何かが目から離れているほど、その持続時間を長くする必要があります。
- それは注目を集め、
- 目を動かしてそれを観察した後も、アニメーションは動き続けています。 （ ヒューマンプロセッサモデル に従って70-700ms）
Animation at Work今年後半に発表されるときに楽しんでいただければ幸いです。あなたは良い期間を理解します！
2年前からの以前の回答
私は最近、UIEに関するセミナーでこれを取り上げました。
遷移には100msから1秒のウィンドウがあります。 100msで、アニメーションは瞬間的に表示されるほど速く発生し、目的を達成できません。 （Jacob Nielsenによって一般化された研究から。）
ゲームとUIデザインで何度も表示されるスイートスポットは250〜300ミリ秒です。バウンスまたは伸縮性のあるトランジションの場合、400〜500ミリ秒に設定すると、モーションが読みやすくなります。
お役に立てれば。
Googleのマテリアルデザインガイドラインによると：
モバイルデバイスの大きなアニメーションは、300〜400ミリ秒です。小さいアニメーションは、150〜200ミリ秒まで短くなることがあります。これらよりも長いまたは短いアニメーションは、反応が遅い、または追跡するのが難しいと感じる場合があります。
これはマテリアル固有のものではないと思いますが、汎用のUIアニメーションの良いガイドラインです。 Googleもこれらの数値を徹底的に調査したと思います。
私の（個人的な、大部分はソースなしの）ビューは、「必要なものを伝えながら、可能な限り高速」です。ほとんどの場合、デフォルトの200msから始めてTweakにします。
経験から言うと、トランジションの種類によって異なることです。アニメーションが短いと、要素が小さい場合や変位が小さい場合に機能します。大きな要素を長い間アニメートするには、より長い遷移時間が必要になります。
UIの一貫性を保つのに役立つのは、実際には同様のタイミングではなく、同様のvelocitiesを維持することです。
「トランジションの種類によって大きく異なりますか？」
はい。
ここで重要なのは、移行がインターフェースのユーザビリティに与える影響だと思います。
トランジションによってユーザーが共通のタスクを続行できるようになるまで待機する場合、短いトランジションでも非常にイライラすることがあります。たとえば、コマンドのオプションの表示を遅らせる200ミリ秒のトランジションは、キーボードショートカットを使用して多くのコマンドを順番に実行する方法を知っているパワーユーザーに無反応な感覚をもたらす可能性があります。
一方、非常に長いトランジションであっても、時間に影響されないものでは問題ない場合があります。隅に表示されるまで3秒かかるアラートは、ユーザーエクスペリエンスに悪影響を与えません。
正しいアプローチは、おそらくインターフェイスをテストし（実際の使用を念頭に置いて、特に、頻繁に繰り返される可能性のあるすべてのものを）、影響を評価することです。
更新：
もう1つの重要な考慮事項は、アニメーションによってユーザーがアクションを実行できなくなることのないようにすることです。インターフェースを見る前に彼らが始めることができる何かがある場合は、インターフェースが実際に現れる前にそれがまだ機能することを確認してください。
どちらもよく使用する2つの対照的なWindows 8の機能は、違いを示しています。
Windowsキーを押してアプリケーション名の先頭を入力するは、Windows 8でプログラムを開始する最も簡単な方法です。これは2つの比較的速いアニメーションステップを備えていますが、待たなくても正しく機能しますインターフェイスが表示されます。画面に何かが表示される前に、Winを押してからwと入力してEnterキーを押しても、Microsoft Wordは正しく開きます。アニメーションによってワークフローが中断されることはありません。
Windowsへのログインロック画面でキーを押してパスワードボックスを表示し、パスワードを入力する必要がある場合。ただし、パスワードボックスが表示されるアニメーションがあり、表示される前に入力したものは何もボックスに入力されません。これは、次の理由により、さらに面倒です。
- 入力したパスワードが表示されないため、すべてのパスワードが入力されたのではないことに気づきません。
- 間違ったパスワードを入力した後、数秒の遅延セキュリティ機能があります。
アニメーションは非常に短いですが、一般的なタスクのワークフローを中断し、苛立たしい結果をもたらすため、結果としてユーザーエクスペリエンスが低下します。
私は（個人的な好みから）言うでしょう-ユーザーが何が起こったのか区別できないように、速すぎずにできるだけ速くします。
たとえば、ナビゲーションバーがボタンのクリックで左側からスライドインする場合は、メニューのスライドインの感覚を失うことなく、可能な限り高速にして、突然表示されたように見せます。