الحركات والتفاعلات الدقيقة في القائمة: جمالٌ أم إزعاج؟

صاحب مقهى من 18 طاولة في غلطة بإسطنبول يسأل: "إذا أضفت حركات إلى القائمة، هل يبقى الزبائن أطول؟" الإجابة في المللي ثانية. أبحاث UX Movement 2023 واضحة: 200-300 مللي ثانية تبدو سلسة، وأكثر من 500 ثقيلة. بعد إدخال fade-in عند التمرير، ارتفع وقت البقاء 19% وانخفض الانصراف 12%.

المدد المثالية ومنحنيات الإيز

المدة مرتبطة بالإدراك البشري. أقل من 100 مللي ثانية غير ملحوظ؛ 200-300 طبيعي؛ 500+ ثقيل. cubic-bezier(0.4, 0, 0.2, 1) معيار Material ينتج حركة طبيعية.

تأخير 60 مللي ثانية بين البطاقات يخلق إحساس فخامة، لكنه يصبح مفرطاً بعد 8 بطاقات. على الجوال 200 مللي ثانية مثالية.

ما يعمل وما لا يعمل

يعمل: تبويب فئة بخط سفلي منزلق (250 مللي ثانية)، زر إضافة بـ scale 1.05x وأيقونة صح، نبض القلب عند الإضافة للمفضلة، fade-in عند التمرير.

• Hover scale 1.02x — إحساس ملموس
• قفز شارة السلة — يلفت الانتباه
• Skeleton loader — يهيئ توقع المحتوى

المبالغة وإمكانية الوصول

المبالغة بالحركات مشكلة وصول. ادعم prefers-reduced-motion — متطلب WCAG 2.1.

Parallax والفيديو التلقائي والأيقونات الدائرة بلا توقف إزعاج. مقهى غلطة أوقف شارة نابضة بعد ثانيتين — ارتفع CTR 23%.

FAQ

ما المدة المثالية؟ 200-300 مللي للتفاعلات الدقيقة، 400 كحد أقصى للانتقالات.

أي حركات تضر بالأداء؟ width/height عبر JS تسبب reflow؛ transform و opacity مسرّعة بـ GPU.

هل أوقفها لكبار السن؟ فقط عبر prefers-reduced-motion، لا تلقائياً.

هل وجدت هذا مفيداً؟ شاركه.