حركة الواجهة: اجعل الانتقال يوضح التغيّر بدل تشتيت الانتباه

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

حدد الحالة السابقة والحالة التالية

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

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

اجعل الحركة تخدم علاقة محددة

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

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

راع من يتأثر بالحركة

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

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

صمّم نسخة أقل حركة تحافظ على المعنى

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

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

تفضيل النظام يحتاج إلى استجابة من الواجهة

تشرح MDN أن ميزة الويب `prefers-reduced-motion` تتيح معرفة ما إذا عبّر المستخدم عبر إعداد جهازه عن رغبته في تقليل الحركة غير الأساسية. ويمكن للواجهة أن تستجيب بإزالة حركة أو تقليلها أو استبدالها. مجرد معرفة وجود الميزة لا يغير التصميم تلقائيًا؛ يجب أن ترتبط بها المعالجة التي ينفذها الفريق للحالات المعنية.

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

راجع ما يحدث أثناء الانتقال

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

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

سلّم السلوك المطلوب مع الحالتين

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

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

عن الكاتب

فريق جادالحق

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

تنبيه: المحتوى المالي في الموقع للتثقيف العام فقط، وليس نصيحة استثمارية أو مالية شخصية؛ استشر مختصًا مرخّصًا قبل أي قرار يخص أموالك.