حركة واحدة لكل وظيفة
استخدم كشفًا هادئًا عند دخول القسم، أو ميلًا بسيطًا يوضح أن البطاقة قابلة للتفاعل، لا الاثنين مع عشر مؤثرات أخرى. الحركة يجب أن تجيب: ماذا تغير؟ أين أضغط؟ ما العنصر الجديد؟ إذا لم تكن لها إجابة، فهي تكلفة في الأداء والانتباه.
النص ثابت حتى عندما تتحرك الخلفية
القارئ يحتاج مرساة. يمكن لخلفية 3D أن تتحرك ببطء، لكن العنوان والفقرة يجب أن يبقيا واضحين وبتباين ثابت. تجنب مرور الضوء خلف الحروف أو تغيير حجم السطر أثناء القراءة. ضع طبقة هادئة بين الصورة والنص.
احترام تفضيلات المستخدم
خاصية prefers-reduced-motion ليست تفصيلًا للمطورين؛ هي وسيلة لمن يعاني من الدوار أو التشتت. عند تفعيلها يجب إيقاف الدوران والانتقالات الكبيرة، لا إبطاؤها فقط. ويمكن إضافة وضع راحة بصري يدوي يحفظ اختيار الزائر.
الأداء جزء من الجمال
كرة ثلاثية الأبعاد ثقيلة قد تجعل الشاشة الأولى فارغة على هاتف متوسط. استخدم CSS أو صورة بديلة عندما لا تحتاج إلى تفاعل حقيقي، وحمّل الفيديو بعد الضغط. اضغط الصور وحدد أبعادها لتقليل تحرك الصفحة. الجمال الذي يصل متأخرًا ليس تجربة فاخرة.
اختبر بالمهمة لا بالإعجاب
لا تسأل فقط «هل الصفحة جميلة؟». اطلب من شخص العثور على موعد فعالية أو سياسة الخصوصية أو زر التواصل. إذا تاه بسبب المؤثرات، التصميم فشل. المؤشر الأفضل هو أن يصل إلى المعلومة بسرعة ثم يلاحظ الجمال، لا العكس.
خلاصة عملية
- وظيفة واضحة لكل حركة
- نص ثابت وتباين قوي
- دعم prefers-reduced-motion
- صور مضغوطة وفيديو بعد الطلب
- اختبار التنقل بمهمات حقيقية
ما الذي نفعله بعد القراءة؟
أجرِ اختبارًا أخيرًا والهاتف على وضع توفير الطاقة واتصال بطيء. إذا اختفى المحتوى لأن المشهد الثلاثي الأبعاد لم يكتمل، فالبنية خاطئة. المحتوى الأساسي يجب أن يعمل حتى عند فشل المؤثر. التحسين التدريجي يعني أن القارئ يحصل أولًا على النص والتنقل، ثم تضاف الحركة لمن يستطيع جهازه ومتصفحه عرضها.
مصادر للقراءة الموسعة
المصادر التالية تساعد على التحقق أو التوسع. المقال نفسه مكتوب بصياغة Vemetto ولا ينسخ نص المصدر.