سهولة الوصول

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

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

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

التأكد من سهولة الوصول إلى المحتوى

حرّكنا في بعض الأمثلة المحتوى لإظهاره على الشاشة. إن كان المحتوى مخفيًا في البداية، فمن الضروري التنبّه إلى أنَّه لن يكون مخفيًا بالنسبة لبعض المستخدمين. أي يجب التأكد من وصول قارئات الشاشة إلى المحتوى المخفي بالنسبة لكفيفي البصر على سبيل المثال لا الحصر. تدعم المتصفحات القديمة الحركات المصممة عبر CSS بدرجات متفاوتة، وقد لا تعمل JavaScript دائمًا (أي لا تكون مفعَّلة على جميع المتصفحات). يمكننا استخدام أدوات مثل Modernizr لتجاوز مثل هذه المشكلات.

نستخدم الحركات لإضفاء معانِي معيّنة على تصميماتنا. عند تصميم الحركات، ضع في حساباتك أنّ بعض الأشخاص لن يتمكنوا من رؤيتها. فربما يستخدمون قارئ الشاشة (screen reader)، أو أنَّ إعدادات متصفحاتهم تمنع عمل الحركات بالشكل المطلوب. تأكد من توفر المعلومات المهمة حتى في حال لم تعمل الحركة.

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

إتاحة التحكم

توصي منظمة W3C بأن يكون لأي محتوى يومض (blinking)، أو يُمرَّر، أو يُحدَّث تلقائيًا لمدة تزيد عن 5 ثوانٍ وسيلة لإيقاف الحركة مؤقتًا، أو إزالتها. يُعد استخدام الخاصية animation-play-stat إحدى طرق إيقاف الحركة عند الحاجة، كما هو موضح هنا عند التمرير.

إتاحة مدخلات بديلة

يستخدم نسبة كبيرة من زوار موقعك الهواتف التي لا تحوي مؤشر (فأرة)، ولا توجد بها حالة حومان (hover state)، لذا من المهم أخذ هذا في الحسبان عند التصميم. أحد الخيارات التي أستخدمها غالبًا هو رصد النقرة (tap) وإضافة الصنف "active" إلى العنصر المنقور. بعد ذلك أُضيف الانتقالات أو الحركات إلى الحالات '‎:hover' و '‎.active'.

الارتباك

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

لا تزعجني

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

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

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

التقيؤ عملية معقدة، وهناك جزء من أدمغتنا متخصص في التعامل معه. يقع هذا الجزء من الدماغ بالقرب من الجزء الذي يتعامل مع التوازن، ولهذا نشعر بالغثيان.

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

يُعد موقع Vestibular.org نقطة انطلاق ممتازة للتعمق أكثر في هذا الموضوع.

تسهيل الوصول للجميع

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

تمرين

إذا كانت وظيفتك تتضمن تصميم أو بناء واجهات لاستخدامها من قِبل الناس، فخصص بعض الوقت لقراءة NNGroup’s Animation for Attention and Comprehension. فكر في الكيفية التي قد يستخدم بها الناس موقعك، وما المشاكل التي قد يواجهونها إذا لم يتمكنوا من رؤية الحركات.