ux-friction

UX の摩擦

ユーザーを妨げたり、混乱させたり、苛立たせたりするアニメーションを診断します。

問題の指標

• ユーザーがアニメーションの終了を待つ
• 何が起きたのか分からず混乱する
• アニメーション中にクリック／タップを繰り返す
• ユーザーがタスクをスキップしたり、中断したりする
• 「あれはどこへ行った？」と思う瞬間がある

原則ごとの診断

タイミング

問題：状況に対してアニメーションが遅すぎます 修正：ユーザーの意図に合わせて時間を調整します。マイクロインタラクションは100～200ms、トランジションは200～400msにします。入力を妨げないでください。

予測

問題：予告なくアクションが発生します 修正：大きな変化の前に、控えめな予告の合図を加えます。ボタンを押したときは、結果が表示される前にフィードバックを示します。

フォロースルー

問題：アニメーションが唐突に終わります 修正：要素が自然に落ち着くようにします。急停止すると壊れているように感じられます。少し行き過ぎてから落ち着く動きを加えます。

ステージング

問題：重要な変化が注目されていない場所で発生します 修正：変化が起きる場所に注意を向けます。コンテンツが移動する場合は、動きで視線を誘導します。

魅力

問題：アニメーションに一貫性がありません 修正：すべてのアニメーションに明確な目的を持たせます。「なぜこれが弾むのか？」とユーザーが疑問に思うなら、削除します。

すぐにできる修正

1. アニメーションをスキップ可能にする - クリック／タップで完了するか、スキップできるようにします
2. 時間を30%短縮する - ほとんどのアニメーションは遅すぎます
3. 進行状況インジケーターを追加する - 400msを超えるものに追加します
4. ユーザーの注目領域でアニメーションさせる - 周辺視野にあるものを動かさないでください
5. 装飾的なアニメーションを削除する - 役に立たないなら、害になります

トラブルシューティングチェックリスト

• アニメーション中にユーザーは操作できますか？
• トランジションの時間は400ms未満ですか？
• アニメーションは状態の変化を伝えていますか？
• 長いアニメーションはスキップ可能ですか？
• 動きは適切に注意を誘導していますか？
• ユーザーの入力に対するフィードバックがありますか？
• アニメーションを削除すると理解に支障がありますか？
• せっかちなユーザーでテストしていますか（素早くクリックする）

パターン

// Allow interaction during animation
element.style.pointerEvents = 'auto';

// Make animation skippable
element.addEventListener('click', () => {
  element.getAnimations().forEach(a => a.finish());
});