4 طرق لاستخدام الرسوم المتحركة الوظيفية في تصميم واجهة المستخدم
تم قبل عشر سنوات فقط تجنب استخدام واجهات المستخدم التي استخدمت الرسوم المتحركة ، وغالبًا ما تكون مرتبطة بالنوافذ المنبثقة وإعلانات اللمعان ، ولكن هذا قد تغير. تقدم اليوم تفاصيل تصميم التفاعل والرسوم المتحركة اختلافًا أساسيًا على مواقع الويب الحديثة والتطبيقات الحديثة. هذا التحول الذهني يظهر بوضوح في تصريح زرب:
لم نعد نصمم شاشات ثابتة. نحن نصمم لكيفية وصول المستخدم من تلك الشاشات لعرض المحتوى فعليًا.
إذا أردنا تصميم منتجات رقمية أفضل ، فنحن بحاجة إلى احتضان الطبيعة التفاعلية للتطبيق ومواقع الويب منذ البداية.
لماذا يعمل الرسوم المتحركة
الحركة ، بطبيعتها ، لديها أعلى مستوى من الأهمية في واجهة المستخدم. لا يمكن للنسخة النصية أو الصور الثابتة أن تتنافس مع الحركة. نظرًا لأن عيوننا متيقنة للاهتمام بالأشياء المتحركة - فهي تقريبًا منعكس. يمكننا الاستفادة من هذا مع هذه الرسوم المتحركة الوظيفية.
ما هي الرسوم المتحركة الوظيفية؟
الرسوم المتحركة الوظيفية عبارة عن رسم متحرك دقيق مضمن في واجهة المستخدم كجزء من وظائف هذا التصميم. لها أغراض واضحة ومنطقية للغاية:
- تقليل الحمولة المعرفية
- منع تغيير العمى
- إنشاء استدعاء أفضل في العلاقات المكانية
في نهج التصميم الذي يركز على الإنسان ، حيث يكون المستخدم هو التركيز الأساسي ، يجب أن تكون واجهة المستخدم بديهية وسريعة الاستجابة وإنسانية. الرسوم المتحركة وظيفية يساعدك على تحقيق هذه الأهداف.
كيف تعمل الرسوم المتحركة الوظيفية على تحسين UX
يتم تشكيل خبرتنا وانطباعنا بتطبيق أو موقع من خلال مجموعة من العوامل ، حيث يلعب التفاعل دورًا أساسيًا. يمكن أن تكون إضافة اقتراح لتصميمنا مجدية وعملية ، عندما نجد الظروف المناسبة. تتميز الرسوم المتحركة الوظيفية المدروسة والتي تم اختبارها جيدًا بإمكانية تنفيذ وظائف متعددة بما في ذلك:
1. ملاحظات مرئية
يوفر تصميم التفاعل الجيد ملاحظات. تقر الملاحظات بأن النظام قد تلقى تصرف المستخدم ويوضح نتيجة التفاعل سواء كان ناجحًا أم لا. يجب أن تكون الرسوم المتحركة في هذه المجموعة دقيقة للغاية ويجب تصميمها بشكل متجاوب.
ملاحظات الزر
في الحياة الحقيقية ، تستجيب الأزرار لتفاعلنا ، وهذه هي الطريقة التي نتوقع أن تعمل الأشياء بها. لكي تكون قابلة للتنبؤ للواجهة الرقمية للمستخدم يجب أن تعمل بنفس الطريقة.
مصدر: جارون بيفر
تصور نتيجة عمل
باتباع عرض المبدأ ، لا تخبر ، يمكنك استخدام ملاحظات متحركة لإبراز أن هناك خطأ ما. على سبيل المثال ، اهتزاز حركة مرئية على إدخال رمز المرور غير صحيح. إنه مثل اهتزاز الرأس كما لو كان يقول "لا ، حاول مرة أخرى". يلاحظ المستخدم الرسوم المتحركة ويفهم الحالة الحالية على الفور.
يمكنك أيضًا تعزيز الإجراءات التي يقوم بها المستخدم. في المثال أدناه ، عندما ينقر المستخدم على "إرسال" ، يظهر زر الدوار لفترة وجيزة قبل أن يعرض التطبيق حالة النجاح. تجعل علامة الاختيار علامة التبويب المستخدم يشعر أن العملية قد انتهت بنجاح.
رصيد الصورة: كولين غارفين
2. التغييرات الدولة تليين
الأماكن الجيدة الأخرى لإضافة الرسوم المتحركة في التصميم هي في لحظات التغيير. غالبًا ما تنطوي التغييرات التي تطرأ على واجهة المستخدم ، خاصة على الويب ، على عمليات قطع صعبة قد تجعل من الصعب تتبعها. لا شيء يبدو غير طبيعي أكثر من التغيير المفاجئ. من الصعب على المستخدمين معالجة التغييرات المفاجئة في الواجهة. يجب تخفيف هذه اللحظات من خلال إضافة بعض الرسوم المتحركة إلى واجهة المستخدم.
إقامة اتصالات
يجب أن تعمل التحويلات المتحركة كوسطاء بين الحالات المختلفة لواجهة المستخدم ، مما يساعد المستخدمين على فهم ما يحدث عندما تتغير حالة الشاشة. يتابع المستخدم ببساطة الحركة ويفهم كيفية ارتباط حالتَي واجهة المستخدم.
ائتمانات الصورة: آنيش تشاندران
كما أنه يعمل بشكل جيد لربط الصور المصغرة وتفاصيل العرض:
تتحرك البطاقة من موضعها الأصلي إلى موضع في الوسائط ، مما يوضح أنها نفس العنصر ، فقط بمزيد من التفاصيل.
ائتمانات الصورة: تشارلز باترسون
دعوة الانتباه إلى التغييرات
يمكن للرسوم المتحركة أن تساعد العين على معرفة أين يأتي كائن جديد من عند كشفه أو عندما يذهب كائن مخفي ، ويمكن العثور عليه مرة أخرى. يمكننا استخدامه للفت الانتباه إلى التغييرات التي تخفي أو تكشف المعلومات ، مثل فتح الأدراج الجانبية للمحتوى. في المثال أدناه ، تنزلق الملاحة الرئيسية بعيدًا عن الطريق عند النقر فوق رمز هامبرغر. تتيح لك هذه الحركة معرفة أن القائمة الرئيسية لم تختف.
ائتمانات الصورة: تماس كوجو
3. رؤية حالة النظام
كواحد من أصل الأساليب العشر لـ Jakob Nielsen من أجل قابليتها للاستخدام ، تظل رؤية حالة النظام من بين أهم المبادئ في تصميم واجهة المستخدم. بالنسبة للمستخدمين ، من المهم جدًا معرفة سياقهم الحالي وفهمه في النظام في أي وقت.
مؤشرات التقدم
تعتبر عمليات تحميل البيانات وتنزيلها فرصًا رائعة للرسوم المتحركة الوظيفية. تحدد أشرطة التحميل المتحركة توقعًا لمدى سرعة معالجة الإجراء. يمكن أن تكون الرسوم المتحركة مفيدة في حالة الإخفاقات. حتى الإخطار اللطيف ، مثل فشل تحميل البيانات ، يجب أن يتم تسليمه بطريقة لطيفة.
ائتمانات الصورة: xjw
سحب لتحديث
يبدأ وقت انتظار المستخدم في اللحظة التي يبدأ فيها الإجراء ، وتكون أسوأ الحالات هي عندما لا يكون لديه أي مؤشر على استلام النظام له. يجب أن يكون للسحب لتحديث الإجراء رد فعل فوري . من الضروري إعطاء بعض الملاحظات المرئية فور تلقي الطلب من المستخدم للإشارة إلى بدء العملية. سوف تساعدك الرسوم المتحركة في ذلك.
ائتمانات الصورة: توني بابل
4. الرسوم التوضيحية
في بعض الأحيان يحتاج المستخدمون إلى القليل من المساعدة الإضافية لفهم تدفق المستخدم أو كيفية التفاعل مع عناصر واجهة معينة. وينطبق ذلك بشكل خاص على واجهات المستخدم التي تحتوي على ميزات أو تفاعلات جديدة أو غير مألوفة للمستخدم.
التأهيل ل
تتطلب تهيئة المستخدم وجود تجربة مستخدم لا تشوبها شائبة ، كما أن الرسوم المتحركة في تدفق الإعداد لها تأثير هائل على كيفية تفاعل المستخدمين لأول مرة مع أحد التطبيقات. يمنحك الرسم المتحرك حرية غير محدودة لنقل أي شيء ، بغض النظر عن مدى تعقيده أو مدى تجفيفه ، بطريقة مسلية.
ائتمانات الصورة: أناستازيا أندريتشوك
تلميحات مرئية
يمكن أن تقدم الرسوم المتحركة بعض الإشارات المرئية المفيدة. غالبًا ما يتم عرض الرسوم التوضيحية التوضيحية عند فتح صفحة لأول مرة ويظهر الرسم المتحرك كيفية استخدام عناصر معينة من الصفحة. يمكن العثور على هذا النوع من الرسوم المتحركة في الألعاب التي غالبًا ما تتعامل بشكل جيد مع الكشف التدريجي ، وتكشف عن ميكانيكا اللعبة كلما تقدمت إلى لعبة أخرى. يتم تشغيل هذه التلميحات فقط عندما يصل المستخدم إلى النقطة المناسبة في تجربته.
استنتاج
الرسوم المتحركة هي أداة قوية عند استخدامها بطرق متطورة.
يجب أن نحتضن الحركة منذ البداية ونفكر بها كجزء طبيعي من تصميمنا ، لأن التصميم أكثر من مجرد عرض تقديمي مرئي. كما قال ستيف جوبز عن التصميم: إنه ليس فقط ما يشبه ويشعر به. التصميم هو كيف يعمل؟