الحركة في موقعك: متعة أم تأخير؟

الحركة يجب أن تشرح، لا أن تزيّن.

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

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

أربع حركات تستحق مكانها.

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

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

أبقِها سريعة.

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

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

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

احترم إعداد «تقليل الحركة».

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

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

العربية تغيّر الاتجاه.

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

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

قِس إن كانت قد أفادت.

الحركة قرار تصميمي، فتعامل معها كذلك: انظر إلى مدى تمرير الناس، وكم مرة يتفاعلون مع العنصر المتحرك، وما إذا تغيّرت الاستفسارات بعد إضافته. أبقِ الحركات التي تكسب الانتباه، واحذف تلك التي لا تكلّف سوى وقت التحميل.

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