الموقع التفاعلي المتحرك: الأمثلة والتقنية والقبول

الموقع المتحرك قد يبيّن كيف يعمل منتج، أو يؤكد إدخالًا. لكنه قد يصعّب الوصول إلى العرض أيضًا. لذلك فالحاسم: أي مهمة تتولاها الحركة؟

وقبل التصميم يستحق سؤال بسيط: ماذا يجب أن يصبح أوضح بعد المؤثر؟ فإن كان الجواب «تبدو الصفحة أحدث» فقط، فالمبرر المتين ما زال ناقصًا.

الموقع المتحرك يحتاج مهمة مسماة لكل حركة: شرح تغير حالة، أو تأكيد إدخال، أو عرض منتج. وفي القبول يهم: هل تتحقق هذه المهمة أيضًا بلوحة المفاتيح، وعلى الهاتف، ومع تقليل الحركة؟

متى يساعد الموقع المتحرك المحتوى؟

الحركة تساعد حين تشرح علاقة، أو تحفظ التوجيه، أو تؤكد إجراءً بوضوح.

ويمكن التمييز جيدًا بين ثلاث مهام. فالحركة قد توجه النظر، أو تشرح علاقة، أو ترد على إجراء. وهذه المهام تحتاج وسائل مختلفة.

المهمة	الاستخدام الممكن	سؤال الفحص
التوجيه	انتقال بين عروض مترابطة	هل تبقى العلاقة ظاهرة؟
الشرح	عرض بناء منتج	هل تُفهم أكثر بعدها؟
الرد	تأكيد بعد اختيار	هل الحالة الجديدة واضحة؟

والخلفية الزخرفية قد تساهم في الجو. لكن لا ينبغي أن تغطي العناوين، ولا أن تنافس عناصر التحكم المهمة. فنموذج التواصل يحتاج أولًا حقولًا مفهومة وردودًا واضحة.

الحركة عند التمرير تحتاج أساسًا مقروءًا

المحتوى الذي يظهر أثناء التمرير قد يقسم الأقسام. والمشكلة حين ينتظر كل فقرة ظهورها. فمن يبحث عن معلومة محددة يجب أن يصل إليها دون تأخير مسرحي.

والتمرير العادي يجب أن يبقى موثوقًا أيضًا. فمؤثر مقنع على شاشة كبيرة قد يصعّب التوجيه على هاتف صغير. لذلك تحتاج نسخة الجوال قرارًا خاصًا بالنطاق والسرعة.

والأساس الجيد يعمل كصفحة هادئة بالفعل: العناوين، ومعلومات المنتج، وطرق التواصل موجودة. والحركة تكمل هذا البناء، لا تجعله متاحًا أولًا.

مثال حقيقي: Pucca Diana

لـPucca Diana طوّرت Alkeme Design العلامة والموقع وحساب إنستغرام معًا. وفي مقدمة الموقع يرسم رمز P نفسه ويمتلئ بالوردي. وهذا تطبيق محدد للعلامة داخل نظامها.

وتصف بيانات المشروع على الهاتف تمريرًا عموديًا طبيعيًا بدل الفيلم الأفقي. والمثال يبيّن قرار تصميم مهمًا: المؤثر لا يلزم أن يظهر متطابقًا على كل جهاز. فمهمة كل عرض تحدد كم من الحركة يناسب.

ولا تُستنتج من ذلك زيادة عامة في الطلبات. فالمثال يثبت التصميم وتكييفه للجوال، لا أثر بيع معزولًا للحركة.

يجب أن تكون الحركة الأقل ممكنة

بعض الناس يجدون الحركات الواسعة مرهقة. وإعداد النظام «تقليل الحركة» يمكن مراعاته عبر prefers-reduced-motion. فتُحذف المؤثرات الزخرفية، أو تُستبدل بتغيرات حالة أهدأ.

ويشرح W3C في معيار WCAG 2.3.3 (الحركة الناتجة عن التفاعل) لماذا يجب أن تكون الحركة غير الضرورية قابلة للإيقاف. وهو معيار بالمستوى AAA. وهذا الإجراء المنفرد لا يغني عن فحص كامل لإمكانية الوصول.

ويبقى التكافؤ في المحتوى مهمًا. فالعرض المخفف لا يجوز أن يخفي بيانات المنتج. وتأكيد الإدخال الناجح يجب أن يبقى ظاهرًا، حتى لو حُذفت حركته.

ما الذي يُوضَّح في العرض؟

صِف المؤثرات المقصودة منفردة: مقدمة الشعار، وعرض المنتج، والانتقالات، والردود. ومنها نسخة الجوال، والعرض مع تقليل الحركة. هكذا يُناقش النطاق بشكل موثوق.

وتحسب Alkeme Design تصميم الحركة بسعر ثابت حسب النطاق، ولا تذكر علاوة حركة مقطوعة. وصفحة تصميم الحركة تصف المكونات الممكنة.

ويدخل في القبول مواقف استخدام حقيقية: الانتقال مباشرة إلى خدمة، واستخدام نموذج، وفتح الصفحة على الهاتف. وافحص أيضًا هل تُصل المعلومات بسرعة مع اتصال بطيء. فالبداية المبهرة وحدها لا تجيب عن هذه الأسئلة.

ما أنواع الحركة في المواقع؟

حركات المواقع تُميَّز حسب مهمتها وما يطلقها. فالمقدمة التي تبدأ تلقائيًا حالة غير الرد بعد نقرة. وهذا التمييز يؤثر في التصميم، والتقنية، وإمكانية تقليل الحركة.

النوع	ما يطلقه	المهمة المعقولة
المقدمة	فتح الصفحة	تقديم العلامة باختصار
تغير الحالة	نقرة أو إدخال	ربط الاختيار بالنتيجة
مؤثر التمرير	الحركة خلال الصفحة	شرح محتوى مترابط
حركة المنتج	بدء مقصود أو اختيار	عرض البناء والوظيفة
حركة الخلفية	تلقائية أو مستمرة	إكمال الجو

ابدأ بالمهمة الناقصة فعلًا. فإن كان الإدخال مؤكدًا بوضوح، فلا يحتاج عرضًا لافتًا إضافيًا. وإن كان بناء منتج صعب الفهم، فقد يكون تسلسل شارح مقصود معقولًا.

أي حركة تناسب أي مهمة؟

مؤشر التحميل يؤكد طلبًا جاريًا. والانتقال بين نسخ المنتج يبيّن ما تغير. أما مقدمة العلامة فتضع العرض في المقدمة. وهذه الحالات تحتاج قرارات منفصلة عن ما يطلقها، والمدة، والتكرار، والإيقاف.

وفي مشروع Pucca Diana يرسم رمز P نفسه في المقدمة. ويصف توثيق المشروع أيضًا اثني عشر فصلًا على الحاسوب، وتمريرًا عموديًا على الهاتف. والمثال يثبت تكييف الآلية للجهاز؛ ولا تثبت به نسبة طلبات أعلى.

موقع متحرك بـCSS أم JavaScript أم فيديو؟

التقنية المناسبة تتبع النتيجة المطلوبة وطريقة التركيب. فلتغيرات الحالة البسيطة قد يكفي CSS. والمسارات الأعقد قد تحتاج JavaScript. والتسلسل المصمم الجاهز قد يُستخدم أحيانًا كفيديو.

والمهم كيف يتصرف الحل في العمل اليومي. هل يمكن إيقاف الحركة أو تقليلها؟ هل يبقى الاستخدام ممكنًا عند خطأ تقني؟ هل يُعرض الملف بشكل معقول على الهاتف؟ فاختيار الأداة لا يجيب عن هذه الأسئلة بعد.

وملفات الحركة الموجودة يجب أن تناسب البيئة المقصودة أيضًا. فبعض العروض تحتاج برامج تشغيل إضافية في المتصفح، وبعضها يُشغَّل كفيديو جاهز. فناقش الاعتمادات والتحديثات مع من سيتابع الموقع لاحقًا.

والتنفيذ البسيط مناسب إن أدى المهمة. والبناء التقني الإضافي يحتاج مبررًا محددًا، لا أن يُدخل لأن مكتبة مؤثرات معينة متاحة.

CSS أم JavaScript أم فيديو؟

للتصميم نقترح هذا التوزيع:

المهمة	النهج التقني	القبول
حالة الزر	انتقال CSS	الحالة مفهومة دون حركة
مسار منتج بعدة خطوات	JavaScript بحالات صريحة	فحص الرجوع والتكرار والإلغاء
تصوير منتج دوار	فيديو مع صورة ثابتة	المحتوى متاح دون تشغيل
عرض مجسم	WebGL فقط عند حاجة مبررة	توفير عرض بديل

وهذه قرارات تخطيط، لا مزايا حجم أو سرعة مضمونة. ومشروع Posh Stink يوثق موقعًا مبنيًا من الجزيئات تتفرق وتجتمع مع تغير الفصول؛ ولا تتبع منه توصية بعرض مجسم لنموذج تواصل.

طوّر صفحة مفهومة دون مؤثرات أولًا

النسخة الأساسية الهادئة تبيّن هل يعمل المحتوى والترتيب بالفعل. فابنِ العناوين والصور وطرق التواصل أولًا دون ظهور متأخر. هكذا يظهر هل تشرح الصفحة العرض فعلًا.

وبعد ذلك فقط يُفحص أين تحسّن الحركة علاقة. ربما يكفي تغير حالة صغير في اختيار منتج. وربما ينقص تسلسل صور شارح. ويجب أن تكمل النتيجة المحتوى، لا أن تغطي بنية ناقصة بالمؤثرات.

وهذا الترتيب يسهّل النسخة المخففة أيضًا. فحين تكون المعلومات كاملة في العرض الأساسي، لا يلزم مع الحركة الأقل اختراع عرض مضموني جديد.

الاستخدام على الجوال يحتاج قرارات خاصة

على الهاتف يجب أن تعمل المهمة نفسها بمساحة أصغر واستخدام آخر. فالمؤثر الذي يتبع مؤشر الفأرة لا يُستخدم هناك كما هو. والمسارات الأفقية العريضة قد تحتاج عرضًا آخر. وفي النسخة العربية، اتجاه الحركة الأفقية نفسه يُفحص حسب وظيفته.

افحص أي المكونات يجب أن تبقى، وأيها يمكن حذفه. فتبديل منتج شارح قد يبقى معقولًا، بينما يُحذف تتبع زخرفي للمؤشر. فالمحتوى لا ينبغي أن يتبع الجهاز، أما العرض فيجوز أن يختلف.

وفي مشروع Pucca Diana وُصفت آلية الجوال صراحة بشكل مختلف: الفيلم الأفقي يصبح تمريرًا عموديًا طبيعيًا. وهذه التفصيلة الموثقة تبيّن تكييفًا تصميميًا. ولا تعطي قولًا عامًا عن مدة بقاء الناس في مواقع الجوال.

افحص وقت التحميل والاستخدام معًا

جودة الموقع المتحرك تظهر في وصول المحتوى مبكرًا، وبقاء الاستخدام موثوقًا أثناء المؤثرات. فالملف الصغير وحده لا يثبت عرضًا سلسًا. والتسلسل المتقن في المقابل ليس لازمًا تلقائيًا في كل صفحة.

واختبر على هاتف حقيقي، وباتصال أبطأ. هل يمكن استخدام التنقل قبل تحميل كل الوسائط الزخرفية؟ هل تبقى الأزرار في أماكن متوقعة؟ هل يبقى النص مخفيًا فقط لأن برنامج الحركة لم يُنفذ بعد؟

وعند المشاكل يكون السؤال الأول عن النطاق اللازم. فإزالة مؤثر غير لازم قد تكون أعقل من عمل تقني إضافي على حركة بلا مهمة واضحة. ولا يستحق التحسين اللاحق إلا مع الحركات المبررة.

قِس عرض الجوال والأداء

في مشروع Pucca يبقى المحتوى على الهاتف، بينما يُحذف العرض الأفقي. وهذا نمط محدد لتنفيذ خاص بالجوال. وللمقارنة يلزم الرابط نفسه، والمحتوى نفسه، وظروف القياس نفسها، مع المؤثر ودونه.

ويحدد مرجع Web Vitals من Google قيمًا جيدة: LCP حتى 2.5 ثانية، وINP حتى 200 ملي ثانية، وCLS حتى 0.1، مقيمة عند الشريحة المئوية الخامسة والسبعين من تحميلات الصفحة. وهذه الحدود ليست قيمًا مقيسة للمشروع المذكور. والاختبار المعملي وبيانات المستخدمين الفعلية يُذكران منفصلين في تقرير القبول.

فرّق بين تقليل الحركة والمحتوى الذي يعمل تلقائيًا

النسخة المخففة يجب أن تزيل الحركات الزائدة، وتحفظ المعلومة. ومن ذلك الإزاحة الواسعة أو المؤثرات المجسمة. فتغير الحالة الهادئ قد ينقل الرد نفسه دون فرض الحركة نفسها.

وللمحتوى الذي يعمل تلقائيًا يُفحص أيضًا: هل يلزم إمكان الإيقاف المؤقت، أو الإيقاف، أو الإخفاء؟ ويعالج W3C هذا السؤال منفصلًا في معيار «Pause, Stop, Hide». فإعداد prefers-reduced-motion وحده لا يجيب عن كل سؤال عن الوسائط التي تبدأ تلقائيًا.

ومُر على المؤثرات واحدًا واحدًا، وحدد بديله الهادئ. فالإيقاف العام لكل الحركات قد يزيل أيضًا ردودًا مهمة. لذلك يدخل العرض المخفف كحالة مستقلة في التصميم والفحص.

إمكانية الوصول: افحص قاعدتين منفصلتين

معيار WCAG 2.2 رقم 2.2.2 يخص منها الحركة التي تبدأ تلقائيًا وتستمر أكثر من خمس ثوانٍ وتظهر مع محتوى آخر؛ واستثناءات المعيار تُقرأ معه. والمعيار 2.3.3 يعالج الحركة الناتجة عن التفاعل القابلة للإيقاف، وهو بالمستوى AAA.

وللموجز نقترح آلية إيقاف ظاهرة حيث يلزم، ونسخة هادئة لإعداد تقليل الحركة في نظام التشغيل. وفحص معايير منفردة ليس بعد إثبات مطابقة كاملًا.

متى يكفي قالب بمؤثرات بسيطة؟

قالب بمؤثرات قليلة موجودة قد يكفي، إن ناسب بناؤه ووظائفه المهمة. فافحص سلوكه الفعلي، لا صفحة العرض التوضيحية فقط. وضع نصوصك وصورك، واختبر العرض المخفف والنسخة العربية.

ولحضور معلوماتي صغير قد لا تلزم مسارات حركة خاصة. فالخطوط الجيدة، والصور المناسبة، وطرق التواصل الواضحة قد تكون العمل الأهم. ويجوز أن يبقى المؤثر البسيط إضافة.

والتصميم الخاص يصبح أعقل حين تشرح الحركة وظيفة منتج محددة، أو تكون جزءًا من عرض علامة مستقل. وحتى عندها لا يلزم أن تحصل كل صفحة فرعية على الجهد نفسه. فاحصر النطاق في المواضع التي لها مهمة مبررة.

خطط لتكاليف التنفيذ كاملة

التكاليف تتبع عدد المسارات وتعقيدها، ونسخ الأجهزة، والتركيب التقني. فالمقطع المصدَّر الجاهز نطاق غير عرض تفاعلي بعدة حالات. والاختبارات والنسخ المخففة تحتاج تخطيطًا أيضًا.

وقائمة أسعار Alkeme Design تذكر للموقع المصمم خصيصًا سعرًا يبدأ من 9,000 ر.س (8,800 درهم). وهذا الرقم ليس سعرًا مقطوعًا لأي حركات كانت. وتصميم الحركة يُحسب حسب النطاق؛ والسعر الثابت بعد المكالمة الأولى يجب أن يسمّي المسارات المقصودة منفردة.

وإن كانت الميزانية محدودة، فابدأ بالاستخدام الشارح أو الوظيفي الأهم. ويمكن إضافة حركات زخرفية أخرى لاحقًا. هكذا يبقى التكليف الأول محدودًا، وموجهًا إلى مهمة فعلية.

اتفق على التكاليف ونطاق التسليم

لدى Alkeme Design الموقع الأساسي يبدأ من 9,000 ر.س (8,800 درهم)، وموقع الشركة يبدأ من 24,000 ر.س (23,500 درهم)، والموقع التفاعلي يبدأ من 45,000 ر.س (44,050 درهم). ويُعرض تصميم الحركة حسب النطاق المتفق عليه. لذلك توصف الحركة في العرض بالمشاهد، وجهد التركيب، والملفات المصدَّرة.

وللتسليم نقترح قائمة: ما يطلقها، والمدة، والتحكم في التشغيل، والصورة الثابتة، والسلوك مع تقليل الحركة. وحجم الملف والترميز يأتيان من التصدير المسلّم؛ ودون هذا الملف لا نذكر رقمًا بالكيلوبايت. وريل ESA بخمس عشرة ثانية موثق، لكنه ليس إثباتًا لمدة مقدمة Pucca.

قائمة فحص لقبول موقع متحرك

القبول الصالح يشمل الاستخدام العادي، والحركة المخففة، والاستثناءات التقنية. فافحص على الأقل هذه المواقف:

• افتح خدمة معينة مباشرة، دون انتظار المقدمة.
• تنقّل في الصفحة بلوحة المفاتيح وعلى الهاتف.
• أرسل نموذجًا، وافهم رده.
• فعّل إعداد النظام لحركة أقل.
• اقرأ المحتوى مع اتصال بطيء، وصل إلى طرق التواصل.
• ارجع إلى الخلف، أو افتح صفحة فرعية مباشرة.
• أوقف الوسائط التي تعمل تلقائيًا إن لزم.
• كرر ذلك على النسخة العربية والإنجليزية.

وسجّل المشاكل بالجهاز والصفحة والإجراء المحدد. «الحركة تبدو مضطربة» بداية. أما الوصف القابل للتكرار فيبيّن أي موضع يجب تغييره، وكيف يُفحص التصحيح.

القبول بمسار محدد

الاختبار المقترح يبدأ في صفحة خدمة: قراءة المحتوى، واستخدام التنقل، وبدء طلب، والعودة. ثم يُكرر المسار نفسه مع حركة مخففة. ويسجّل بروتوكول الأخطاء الرابط، والجهاز، والإعداد، والسلوك الملاحظ. وهذه خطة فحص، لا اختبار مستخدمين نُفذ.

والقالب هو الفصل الموثق بين آلية الحاسوب والهاتف في Pucca. ولمشروع تصميم موقع جديد يُقرَّر بعد ذلك فقط أي حركة تحسّن المعلومة فعلًا.

أي الحركات تحذف أولًا؟

أولًا تُحذف المؤثرات التي لا مهمة واضحة لها، أو التي تعيق الاستخدام بوضوح. ومنها قد تكون المقدمات المتكررة عند تغيير الصفحة، أو النصوص التي تظهر متأخرة، أو الخلفيات المتحركة باستمرار بجانب محتوى طويل. والتقييم يتبع المسار المحدد.

وافحص كل حركة بسؤال: هل تبقى المعلومة مفهومة بالقدر نفسه دونها؟ إن كان نعم، فقد تكفي نسخة أهدأ. وإن كان لا، فيجب أن تشرح الحركة عن قصد، وأن يكون لها بديل مكافئ أيضًا. وهذا الاختيار يحدد النطاق، ويسهّل فحص المؤثرات الباقية.

ولا يلزم إعادة بناء موقع قائم لذلك. فتقليل المؤثرات المشكلة بدقة قد يكون غالبًا خطوة أولى معقولة. وبعدها يُقيَّم هل يلزم عمل تصميمي أو تقني آخر.

ابدأ بمهمة واضحة

للتخطيط تكفي أولًا قائمة بأهم الصفحات والإجراءات. علّم أين ينقص شرح، أو يكون الرد غير واضح. هناك تُفحص فائدة الحركة بشكل محدد.

وإن كانت المشكلة الحقيقية عرضًا غير مفهوم، فالمحتوى يحتاج العمل أولًا. وبعدها يُقرَّر أي حركة تحسّن الصفحة فعلًا. وللشعار المتحرك خاصة، راجع مقال الشعار المتحرك.