#194
心理学・認知バイアス
#194でゅれーしょん
デュレーション (持続時間)
別名・表記:Durationアニメーション時間
UIXHERO Definition
「アニメーションの長さ」。動き始めてから終わるまでの時間（ミリ秒）。
概要
適切なデュレーションは、画面サイズや移動距離によって異なる。 小さな動き（ボタンのホバーなど）は短く、大きな動き（画面全体の切り替えなど）は少し長くするのが基本。 Googleのマテリアルデザインなどのガイドラインでは、具体的な推奨値（例：大きな遷移は300ms前後）が示されている。
UXでの活用
- 反応速度の演出: 即座に反応が必要なインタラクション（タップ時のフィードバックなど）には、限りなく短いデュレーション（100ms以下）を設定し、キビキビとした操作感を作る。
- 認知の補助: 複雑な変形アニメーションの場合、ユーザーが変化を追えるように、あえて少しゆっくり（400ms〜）見せることもある。
💡 使いどころ
アニメーションを設定する時。操作に対するフィードバックの速度を調整する時。
⚠️ 注意点・誤用
長すぎると「遅い」「待たされている」と感じさせ、短すぎると「何が起きたか分からない」「唐突」と感じさせる。人間の認知速度に合わせた調整が必要。
具体例
- マイクロインタラクション（ボタンなど）：100ms〜200ms
- 大きな画面遷移：300ms〜500ms
出典・参考文献:
- Google. (2014). Material Design Guidelines: Motion. Google Design.
- Nielsen, J. (1993). Usability Engineering. Morgan Kaufmann.
- Card, S. K., Moran, T. P., & Newell, A. (1983). The Psychology of Human-Computer Interaction. Lawrence Erlbaum Associates.
関連する解説記事
関連する記事詳細が見つかりませんでした。