في مجال تجربة المستخدم، تعتَبَر المؤثرات الحركية في حالتها الطبيعية والمثالية أشبه بعناصر مساعَدة واتصال، ولعل أبرز جوانبها الإيجابية والسلبية على حد سواء يكمن في قدرتها على جذب انتباه المستخدم. لهذا الأمر أبعاد علمية واضحة؛ إذ إن الرؤية الجانبية لعين الإنسان هي المسؤولة عن إدراكه للحركة خارج مجال مركز البصر، وبرغم كونها ميزة فطرية تساعد في استشعار الخطر وحماية النفس إلا أنها تعني أننا معرضون جدًا لصرف الانتباه لأي نوع من الحركة، سواء كان مفيدًا أو غير ذي جدوى. تلك الحقيقة هي ما يجعل من العناصر المتحركة في تجربة المستخدم أمرًا حساسًا ويتطلب الكثير من الحكمة والخبرة لإنتاجها واستعمالها بأفضل طريقة ممكنة.
في هذا المقال، نتطرق إلى أهمية ودور المؤثرات الحركية في تجربة المستخدم، ونتعرف إلى أنواعها المختلفة والفرق بينها، بالإضافة إلى مجموعة من النصائح التي لا بد من الإحاطة بها لإنشاء تجربة استخدام ناجحة معززة بالعناصر المتحركة.
أهمية العناصر المتحركة في تحسين تجربة المستخدم
تنبع أهمية العناصر المتحركة في تجربة المستخدم انطلاقًا من دورها في الارتقاء بفاعلية وقابلية استخدام منتَج أو خدمة ما عبر إعطاء المستهلكين تغذية بصرية، مرشدة إياهم خلال الإجراءات المرتبطة، ومسلّطة الضوء على العناصر الجوهرية، وفي نفس الوقت، خالقة تجاربَ مثيرة للاهتمام. كنتيجة لذلك، يمكن اعتبارها أدواتٍ ينبغي على كل مصمم واجهة المستخدم امتلاكُها. إضافة إلى دورها في إمتاع وتسلية المستخدمين، فإن الفائدة النموذجية لتلك المؤثرات الحركية أو أي من أنواع العناصر المتحركة تتجلى أكثر الأمر بكونها ردود فعل دقيقة للتفاعلات بين المستخدم والمُنتَج أو الخدمة عمومًا.
بالإضافة إلى ذلك، تتيح المؤثرات الحركية للمصممين جانبًا واسعًا من الحرية الإبداعية، فاتحة المجال أمامهم لتطوير واجهات أكثر أناقة وقبولًا من الناحية البصرية مقارنة بالأساليب التقليدية. يمكن للرسوم المتحركة أيضًا تركيز الاهتمام على الجوانب الإيجابية للمنتجات الرقمية ما بإظهار طريقة عملها أو كيف بمقدورها تحسين حياة أو تجربة المستخدم.
أنواع العناصر المتحركة في تجربة المستخدم
إذن، ما معنى الرسوم أو المؤثرات الحركية لواجهة الاستخدام بالضبط؟ ببساطة، تتمحور فكرتها بالأساس على منح عناصر الواجهة أشكالًا خاصة – ومدروسة بالطبع – من الحركة. بذلك، تستَخدم استراتيجيات وأفكار العناصر المتحركة في تجربة المستخدم من قبل مصممي تجربة وواجهة المستخدم على حد سواء لتوجيه المستخدمين ضمن واجهة الاستخدام، وتنبيههم للتغيرات فيها، والتأثير على اختياراتهم، وإظهار العلاقة ما بين جميع العناصر.
فلنستعرض أولًا أنواع العناصر المتحركة في تجربة المستخدم.
التفاعلات الدقيقة (Microinteractions)
العناصر الحركية الدقيقة أو التفاعلات الدقيقة هي لحظات تفاعلية تعبر عن تفاصيل صغيرة في التصميم تقوم بمهمة معينة وتهدف إلى تحسين تجربة المستخدم وجعلها أكثر سلاسة. تضم التفاعلات الدقيقة أربعة عناصر هي:
- المحفز (The trigger).
- القاعدة (Rule).
- رد الفعل (Feedback).
- الأنشطة/الأنماط (Loops/Modes).
واجهات ما قبل التحميل، وبوتات المحادثة (ChatBots)، وملفات الصور الحركية المُستخدمة للاحتفال بحركة أو سلوك ما، وحتى العناصر المتحركة التي تظهر للمستخدم بطريقة الألعاب، كلها أمثلة عن التفاعلات الدقيقة.
الانتقالات (Transitions)
في كل مرة تتغير حركة عنصر ما في الواجهة، يتفاعل مؤثر حركي انتقالي معها بشكل واضح وسلاسة مفهومة للمستخدم. قد يلاحظ المستخدم بعض التعقيد أثناء التبدل الكلي للعنصر أو دخول عنصر صغير جديد إلى الواجهة، ولكن ذلك لن يؤثر على فهمه للخدمة أو طريقة التعامل معها، إنما سيكون مرتاحاً بمراقبة مؤثر الانتقال.
التحولات (Transformations)
هو أي تغيير يطرأ على اتجاه أو حجم أو شكل عنصر ما في واجهة المستخدم، بهدف تحريك العنصر إلى موضع جديد أو تعديل مظهره أو حتى تبديل الطريقة التي يراه المستخدم فيها. هنا، لا بد من الإشارة إلى أن رسوميات الأجهزة الرقمية أصبحت تعتمد اليوم على التأثيرات التحويلية لتحجيم أو تدوير أو إعادة ترتيب العناصر الرسومية في الشاشة.
حركات التمرير (Scroll animations)
حركات التمرير هي مؤثرات تضيف طابع الحيوية والتفاعلية إلى تجربة المستخدم، وتتمثل في استجابة الواجهة إلى محفز التمرير بحيث تنتقل الرسومات والنصوص إلى مواضعها المصممة في الشاشة. أو تظهر وتختفي تدريجيًا أو تتحول إلى شكل آخر. أو ما شابه ذلك من أنماط المؤثرات المشابهة.
مؤثرات التحميل (Loading animations): من أهم العناصر المتحركة في تجربة المستخدم
تُعتَبَر حركات التحميل من أبرز الإضافات في واجهة الاستخدام؛ إذ إنها تشعر المستخدم بالاطمئنان فورًا في الحالات التي تتطلب انتظار بعض الوقت حتى يجري تنفيذ مهمة ما في الواجهة. وذلك من خلال عرض رسم أو مشهد متحرك ومميز يبين أن طلب المستخدم قيد المعالجة بالفعل، وأن الموقع أو واجهة الاستخدام ليست جامدة أو لا تتقدم دون تفسير. تظهر حركات التحميل تلك عندما يضغط المستخدم على زر أو رابط ما، وتستمر حتى اكتمال عملية التحميل. من أشهر أمثلتها أشرطة التقدم وهي الأكثر شيوعًا للتعبير عن المدة التي ستستغرقها عملية ما.
مؤثرات الإعداد (Onboarding animations)
يُعتمَد عليها في الحالات التي تتطلب تعريف المستخدم بخدمة أو منتَج جديدَين، وغالبًا ما تظهر كمجموعة من المهام أو الإجراءات التي يتوجب عليه المرور بها. والغرض منها إنشاء انطباع الاستكشاف والمتعة لدى المستخدم لتقديم الأفضل للخدمة وتحسين التجربة.
مؤثرات التنقّل (Navigation animations)
موجودة غالبًا في تطبيقات الموبايل على هيئة حركات لنقل المستخدم بين أكثر من شاشة أو واجهة، ويتم إنشاءها بحيث تُظهر طريقة ارتباط العناصر التابعة لها ببعضها البعض عن طريق اعتماد تسلسل واضح ومتسق للانتقالات، ما يجعل المستخدم على معرفة تامة بموضعه في الواجهة وطريقة الانتقال منه والعودة إليه.
إرشادات لاستخدام العناصر المتحركة في تحسين تجربة المستخدم
دون شك، جميلة هي العناصر المتحركة، لكن لا ينبغي أن تستَخدَم فقط للاستعراض. من المهم جدًا وضع تجربة المستخدم ككل في الحسبان وكيف يمكن أن تساعد أو تضر التأثيرات الحركية في نجاحها، حالها كحال كل شيء يندرج ضمن تصميم واجهة وتجربة المستخدم.
إليك هنا مجموعة من الإرشادات الهامة لتوظيف العناصر الحركية في تصميم واجهة المستخدم:
أن يكون الهدف العناصر المتحركة في تجربة المستخدم واضح ومباشر
لا تنسَ أن التأثيرات الحركية في واجهة الاستخدام هي مجرد تقنيات مبتَكَرة ومرحة لتحفيز المستخدمين على الاستكشاف ومعرفة المزيد عن منتجاتك، وجذب انتباههم بطريقة تجعل منتجك يعلق في ذاكرتهم، لذا حاول مراعاة الوضوح في تصميمك.
التوقيت والمدة المناسبان
في عصرنا الرقمي، يسعى الناس دومًا لرؤية النتائج بأسرع ما يمكن، وقد انتهت تلك الأيام التي اعتادوا فيها انتظار الصفحات كي تتحمل ببطء وملل شديدَين. في عالم اليوم، يمكن لأبسط تأخير أن يُكلف الشركة عمليات تحويل غاية في القيمة والأهمية وخسائر في صفوف العملاء، ذلك أنه وببساطة، لم يعد الناس يتحملون أي دقيقة أو ثانية من الملل مع وجود منصات ووسائل التواصل الاجتماعي لتصفحها عندما ينزعجون من انتظار موقع أو تطبيق ما لينهي مهمة محددة. لذا حاول مراعاة الوقت في تصميم العناصر المتحركة.
البساطة والوضوح
يقتضي مبدأ “البساطة في التصميم” على المصممين الالتزام بالوضوح والبساطة قدر استطاعتهم دون التضحية بالقيمة الوظيفية أو قابلية الاستخدام (Usability) للموقع أو المنتَج. يعني ذلك ضرورة الاستغناء عن أية عناصر لا لزوم لها في التصاميم الحركية، والتركيز على تجهيز واجهة مستخدم بسيطة وأنيقة. إن وظيفة مصمم المؤثرات الحركية تتطلب منه العمل على مَشاهد وحركات تستقطب المُشاهد وتحافظ على انتباهه للمدة المطلوبة، لا أكثر ولا أقل، وهذا يعني أنه يجب تصميم كل عنصر باهتمام بحيث تُحل أي مشكلة تصميمية فيه.
اعتبارات الأداء
بالطبع، من أهم غايات العناصر المتحركة تحسين تجربة المستخدم دون تقويضها بأي شكل من الأشكال. لذا، لا بد أن تكون ذات صلة وثيقة بموضوع الخدمة المستخدمة فيها، وأن تكون عملية، وتُكسب واجهة الاستخدام ثراءً وعُمقًا أكبر. قد يكون من الصعب الوصول إلى التوازن الدقيق ما بين المُتعة البصرية والتشتيت وتحسين التجربة عمومًا في هذه الناحية، لكن بمزيد من الجهد، ستصل إلى هذه النتيجة.
السماح للمستخدم بالتحكم
من الأفكار المميزة خلال تصميم العناصر المتحركة في واجهة الاستخدام، بحيث يتشجع المستخدم على تقديم اهتمام أكبر في مكان يكون قادرًا فيه على التحكم – إلى درجة معينة – بتسيير وتوجيه بعض العناصر في الواجهة التي يتعامل معها، ما يُحسن بشكل عام من تفاعله ومتعته على حد سواء. الأمثلة على ذلك كثيرة، ومنها إمكانية تصغير مربعات الحوار في بوتات الدردشة، والقدرة على الإيقاف المؤقت للفيديوهات إن وُجدَت.
الاستمرارية والاتساق
إن الاستمرارية والاتساق من أكثر العوامل المؤثرة في مستوى ثقة المستخدم في واجهة الاستخدام واعتياده عليها، وتحسينها الدائم سيؤثر إيجابًا على المظهر والانطباع العام تجاه الخدمة. أضف إلى ذلك، إن الحرص على الترابط والاستمرارية يعني الاستغناء عن أي مواد غير ضرورية في عناصر التوجيه قد تجعل المستخدم حائرًا أو مشتتًا بعد اعتياده على نمط سابق من المؤثرات الحركية.
اعتبارات إمكانية الوصول
يتطلب الالتزام بتحقيق إمكانية الوصول (Accessibility) التعبير عن المؤثرات الحركية بصيغة نصية. معنى ذلك، ينبغي أن تتجسد جميع المحتويات الصوتية مثلًا والوظائف المتعلقة بها العناصر المتحركة بصيغة نصية. تلك من الإرشادات الرئيسية لسهولة الوصول لمحتوى الويب (WCAG)، ويعني أن المحتوى ككل يجب أن يكون قابلًا للإدراك، والتنفيذ، والفهم.
الاختبار والتكرار
يعني القيام باختبارات متكررة لقابلية استخدام التصميم في إطار مسودة أولية أو نموذج أولي (Prototype) للمُنتَج، ثم إجراء التعديلات اللازمة حسب نتائج تلك الاختبارات، ومن ثم إجراء جولة أخرى من الاختبارات إن لزم الأمر. تذكّر، قبل أن يطّلع المستخدم النهائي على العناصر المتحركة الممتعة التي اجتهدت في تصميمها، لا بد أن تعطيها حقها في الاختبار والتحسين بحذر ودقة.
الاستخدام المُقتصِد
الاستخدام المقتصد إحدى قواعد التصميمات المتحركة التي تتوافق تمامًا مع المبادئ الرئيسية لضمان تحسين الرسومات لتجربة المستخدم. وعليه، ينبغي اعتبار المؤثرات الحركية كعناصر تسلية فقط، غرضها جذب الانتباه. لذا، إن بالغت في إشباع منتجاتك الرقمية بالقطع المتحركة، فستساهم في ملل جمهورك ومغادرته موقعك أو تطبيقك في الحال. استخدم العناصر المتحركة باقتصاد، لا تبالغ في تصميمها في خدمتك.
الإلهاء الهادف
كما أشرنا سابقاً، مع غياب أي وسيلة تشتيت على الشاشة، سينتقل المستخدمون مباشرة لواجهة أخرى تشغل انتباههم، كوسائل التواصل الاجتماعي، لتجنب الشعور بالملل عند عدم وجود شيء يراقبون حركاته. لذا عندما تضع – عن قصد ـ- مؤثرًا حركيًا بغرض الإلهاء الصريح حتى تكتمل عملية ما في الخلفية، فأنت تقوم بإجراء وقائي فعال لإبقاء المستخدم في الواجهة وعدم خسارته ولو للحظات.
لقد أصبح واضحًا الآن سبب أهمية واجهة المستخدم الحركية واستخدام العناصر المتحركة في تحسين تجربة المستخدم. لمزيد من المعلومات حول هذا الموضوع، انضم إلينا واحجز مقعدًا في الدورات التدريبية في منصتنا.
الأسئلة الشائعة
ما أهم قاعدة لاستخدام العناصر المتحركة في تجربة المستخدم؟
لا بد أن تكون العناصر المتحركة دقيقة وموجزة وغير مزعجة.
كم من الوقت يفضل أن تستغرق العناصر المتحركة في واجهة المستخدم؟
بشكل عام، ينبغي ألا تتجاوز المدة 100-500 ميللي ثانية.
