التفاعلات الخفيفة (Micro-interactions) تمنح المستخدم تجربة استخدام رائعة، فريدة، واضحة وأفضل لمنتجك الإلكتروني
إنا نحتاج في عصرنا الحالي لجعل استخدام التكنولوجيا أكثر سهولة وأكثر راحة، وهذا ما يساعد تطبيقك أو منتجك الإلكتروني على التميز عن غيره من المنتجات المطروحة في السوق، وإبرازه للمستخدمين المستهدفين وخلق تجربة لا تنسى لعملائك.
وباعتباري مصممة جرافيك ومواقع ويب، أؤمن أن هناك العديد من الطرق التي تدفع المستخدمين إلى التفاعل على موقع أو تطبيق الويب وكذلك تطبيقات الجوّال، ولكن إحدى هذه الطرق التي تصنع الفرق وغالبًا يتم تجاهلها هي التفاعلات الخفيفة (Micro-interactions).
بحثت كثيراً عن مقالات ومراجع عربية تتحدث عنها لكن لم أجد مع الأسف.. بالرغم من أهميتها، لذلك سأحاول في هذه المقالة التطرق إلى فكرتها، فوائدها، عناصرها وبعض النقاط المهمة في تصميم هذه التفاعلات في واجهة تطبيقك أو موقعك، وسوف أذكر في نهاية المقالة بعض المراجع والكتب التي ستكون مرجعاً جيداً في حال احتجت إلى المزيد من المعلومات عنها. استمتعوا معي :)..
ما هو التفاعل الخفيفة (Micro-interaction)؟
التفاعل الخفيف هو الرسوم المتحركة الصغيرة أو الردود المرئية التي يراها المستخدمون عند قيامهم بإجراءات معينة. فمثلا لدينا هذا المثال التالي _ قد يبدو هذا المثال عادياً في البداية، ولكن التفاعل الخفيف له تأثير نفسي كبير (سلبياً كان أو إيجابياً) على المستخدمين.
تمامًا مثلما يحدث في مثال القلب الذي يوضح للمستخدم أنه قد تم إجرائه بنجاح (وعادةً يستخدم هذا المثال لوضع إعجاب \ مفضلة على صورة أو نص..). فعندما ينقر المستخدم على زر القلب تمنحه الواجهة ردةَ فعلٍ حول نشاطه (وهو الضغط على القلب) مع القليل من الرسوم المتحركة (Animations) والألوان.
بعض فوائد ومميزات التفاعلات الخفيفة (micro-interactions) التي ستجعلك تركز عليها في منتجك الإلكتروني:
كل يوم نتعامل مع الكثير من التفاعلات الخفيفة التي لا تعد ولا تحصى بدون أن ندرك ذلك. منها عندما تقوم بإغلاق شاشة هاتفك الجوال فإنك تواجه تفاعلاً خفيفاً. والتفاعلات دائما تبدأ بإجراء أو فعل ينفذه المستخدم وبعدها تقوم الواجهة بتنفيذ ردة فعل لإعلام المستخدم بأنه قد تم الإجراء بنجاح.
ومن فوائد هذه التفاعلات:
- خلق تأثير عاطفي إيجابي على المستخدم بسبب سهولة وسلاسة واجهة المستخدم.
- تقديم ملاحظات فورية للمستخدم استنادًا إلى الإجراءات التي اتخذها.
- توجيه المستخدمين لاستخدام تطبيقك بطريقة أكثر سهولة وبديهية.
- تشجيع المستخدمين على التفاعل مع أحد التطبيقات عن طريق الرد على إشعار أو عند مشاركة المحتوى.
- منع وقوع المستخدم في الأخطاء.
هذا مثال يمر علينا عندما نقوم بتحميل ملف او أي شيء من شبكة الإنترنت. عندما ننقر على زر التنزيل سترى عملية تنزيل تجري وتتم من خلال الرسم المتحرك الذي يقوم بإكمال دائرة تساعدك على معرفة أن عملية التنزيل جارية وما تبقى عليها. في هذه العملية الطويلة يساعد هذا التفاعل الخفيف المستخدم على التفاعل مع نفسه وأيضا الواجهة بحيث لا يشعر بالإحباط من الوقت الذي تستغرقه عملية التنزيل. تؤثر التفاعلات الخفيفة (Micro-interactions) على تفاصيل بسيطة في منتجك فنحن عادة نجدها حولنا في كل مكان مثلاً عندما:
- تقوم بإيقاف ميزة أو تُشغِلُها
- التعليق على الوسائط الرقمية (صور، فيديوهات، نصوص)
- تغيير إعدادات هاتفك أو بعض العمليات فيه
- عرض الإشعارات أو الرسائل من التطبيقات
- سحب “الشاشة” إلى أسفل لتحديث محتوى التطبيق أو الموقع الإلكتروني
- التفاعل مع عناصر البيانات، مثل التحقق من حالة الطقس
- إنجاز أي مهمة في الجوال
- توصيل الأجهزة، مثل توصيل هاتفين لأجل ألعاب متعددة اللاعبين، أو الطباعة من كمبيوترك المحمول
- مشاركة إعجابك بصورة أو مقطع فيديو على موقع ويب او تطبيق جوال
العناصر الأساسية الأربع للتفاعل الخفيف (Micro-interaction)
- المشغل (Trigger): هذا هو ما يبدأ التفاعل الخفيف وينفذه. في معظم الواجهات او التطبيقات يتمثل في النقر على عناصر معينة في الواجهة أو لمسها او سحبها.
- القواعد (Rules): تحدد القواعد وتنص على شرط حدوث التفاعل الخفيف.
- ردود الفعل (Feedback): ردود الفعل تساعد المستخدمين على معرفة ما يحدث وأن الإجراءات التي يقومون بها تعمل وناجحة.
- الحلقات والأوضاع (Loops & Modes): يظهر هذا في المرحلة الأخيرة من التفاعل. تقرر الحلقات المدة التي يجب أن يستمر فيها التفاعل وإذا كان هناك حاجة إلى التكرار.
تُعد التفاعلات الخفيفة ذات أهمية بالنسبة للمصممين كما هي بالنسبة للمستخدمين لأنها توفر للمصممين الفرصة لتجربة حلول التصميم الجديدة التي يمكن أن تجعل تجربة المستخدم أكثر سلاسة وطبيعية.
إذن هل قررت التركيز على هذه التفاعلات الخفيفة في منتجك الإلكتروني! ضع في اعتبارك هذه النقاط المهمة:
- البساطة.. البساطة.. البساطة: نوع بسيط، لغة بسيطة، ألوان بسيطة، وتصميم بسيط. لا تجعل التصميم أكثر تعقيدًا من الإجراء.
- اعطِ التفاعل الخفيف صوت بشري:بحيث يجب أن يقرأ النص كما يتحدث الناس وليس كالآلة.
- أضف الحيوية إليها من خلال الرسومات المتحركة والألوان الجذابة: ولكن احذر من المبالغة. فكر في أيقونة الموجود في قفص الاتهام في جهاز MacBook الخاص بك أثناء تحميل البرنامج. فهو يتيح لك معرفة أن البرنامج يستجيب من خلال رسم متحرك بسيط ولكنه لا يعترض طريق ما تقوم به.
- أخلق الانسجام البصري مع العناصر الأخرى في تطبيقك:فإذا كان تطبيقك يحتوي على عناصر باللون الأزرق، فيجب أن تستخدم التفاعلات الخفيفة الألوان نفسها بحيث يكون الاتصال المرئي بالتصميم أو التطبيق الأصلي واضحاً للمستخدمين.
- انظر في كل التفاصيل بعناية: نظرًا لأن التفاعلات الخفيفة صغيرة جدًا، فكل عنصر من عناصر التصميم مهم. تأكد من اكتمال كل تفاصيل منتجك، وصولاً إلى البيكسل الأخير قبل الإطلاق.
- فكر في كيفية تطوير هذه التفاعلات مستقبلاً وكيف ستعمل التفاعلات مع المستخدمين: هل يحدث نفس التفاعل بالضبط في كل مرة لكل مستخدم؟ أم هل هناك تغييرات في التفاعل الخفيف مع مرور الوقت؟ (ضع في اعتبارك مثال صوت المنبه الذي يعلو في كل مرة بعد الضغط على زر الغفوة). هذه التفاصيل الذكية ستساعدك على إتقان تصميم هذه التفاعلات بشكل أفضل.
الخلاصة
تُعد التفاعلات الخفيفة جزءًا مهمًا في تصميم واجهات المشاريع التقنية والرقمية. وستصبح مضطرًا لتصميم موقع ويب أو تطبيق جوّال يتضمن بعض العناصر أو اللحظات التي يحتاج المستخدم إلى التفاعل معها. فالمفتاح في جعل هذه اللحظات غير مرئية وفعالة تمامًا للمستخدم هو في الاهتمام بالتفاصيل، صمّم بعناية.. فكّر في كيفية تعامل الأشخاص مع أجهزتهم واستخدامها ومراعاة الأنماط الشائعة لتفكير المستخدمين أثناء تصميم هذه التفاصيل الصغيرة. لا تُبالغ في التفكير في الجماليات، بل ضع كل تركيزك على العمل بناءاً على مبادئ تصميم هذه التفاعلات. شكراً لك على قراءتك لمقالتي الأولى يسعدني أن تشاركني رأيك وإذا أردتم أن اتكلم عن موضوع معين في التصميم والبرمجة أخبروني بذلك!
المراجع:
في الحقيقة موضوع رائع
شكرا جزيلا 🌹