لماذا تعتبر التفاعلات الدقيقة مهمة في تصميم سمات WordPress؟

نشرت: 2016-04-06

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

من العدل أن نقول إن التفاعلات الصغيرة ستزداد في عام 2016 ، حيث يتم تنفيذها بالفعل في تطبيقات الهاتف المحمول وتصميم الويب. يرغب المزيد والمزيد من الأشخاص في الاتصال بالإنترنت وإنشاء مدونة أو موقع ويب لأسباب شخصية أو تجارية.

مثال رائع لمفهوم نموذج تسجيل الدخول / التسجيل

المصدر: http://www.materialup.com/posts/compact-login

إذن ، ما هي الوظائف التي تؤديها التفاعلات الدقيقة؟

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

  • تقديم ملاحظات أو إظهار نتيجة حدث أو إجراء.
  • إنجاز مهمة منفصلة معينة (تحويل الهاتف المحمول إلى الوضع الصامت أو إيقاف تشغيله ، أو الإعجاب بمنشور على Facebook ، إلخ).
  • تعديل بيئة الواجهة.
  • تجنب خطأ المستخدم.

كيف تعمل التفاعلات الدقيقة؟

يقدم Dan Saffer ، وهو خبير متكامل في مجال التفاعلات الدقيقة ، رؤى حول كيفية عمل التفاعلات الدقيقة بالفعل في كتابه. العملية برمتها عبارة عن تسلسل حلقي من 4 خطوات:

المصدر: http://microinteractions.com/what-is-a-microinteraction/
المصدر: http://microinteractions.com/what-is-a-microinteraction/
  • المحفز هو دافع بصري يبدأ العمل. على سبيل المثال ، عندما تضيء صورة معينة عند المرور بالماوس بينما قد يتصفح المرء معرضًا في أي من سمات WordPress للتصوير الفوتوغرافي ، تُعتبر هذه دعوة خفية لمواصلة التفاعل الجزئي. استجابة المستخدم هي الزناد.
  • تحدد القواعد شروط حدوث تفاعل دقيق. إذا أخذنا أي سمة تمهيد في WordPress كمثال ، فكلما أراد المستخدم تغيير أي قسم من أقسام موقع الويب ، فسيتعين عليه استخدام محرر السحب والإفلات المدمج (محرر MotoPress أو أي محرر آخر) للحصول على النتيجة.
  • توضح التعليقات نتيجة التفاعل الجزئي. أي كلما تم إجراء تغيير ، يأتي التعديل على الفور مع قوالب مدونة WordPress ويكون المستخدم قادرًا على مراقبة نتيجة أفعاله.
  • تتحكم الحلقات والأوضاع في التسلسل المتكرر للإجراءات للتفاعل الجزئي. تتميز موضوعات WordPress المتميزة دائمًا بآلية التفكير هذه لكيفية ولماذا سيقوم المستخدم بتنفيذ سلسلة معينة من الإجراءات المدمجة داخلها.

في ما يلي العديد من الأمثلة الواقعية الرائعة للتفاعلات الصغيرة التي يمكنك أن تتعجب منها حرفيًا:

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

المصدر: http://www.spaceneedle.com/home/

موقع ويب Amy Winehouse biopic - عند النقر على أيقونة قائمة الهامبرغر ، يظهر شريط تنقل ، يتفاعل كل عنصر في القائمة عند التمرير من خلال إظهار صورة جديدة.
موقع ويب Amy Winehouse biopic - عند النقر على أيقونة قائمة الهامبرغر ، يظهر شريط تنقل ، يتفاعل كل عنصر في القائمة عند التمرير من خلال إظهار صورة جديدة.

المصدر: http://www.amy-movie.com/

وكالة Toi الرقمية - تتحرك البلورات الموجودة في الخلفية وفقًا لحركة الماوس ، وكذلك يتحرك سهم التمرير لأسفل.
وكالة Toi الرقمية - تتحرك البلورات الموجودة في الخلفية وفقًا لحركة الماوس ، وكذلك يتحرك سهم التمرير لأسفل.

المصدر: http://toi.io/

لماذا تعمل التفاعلات الدقيقة؟

يعطي Saffer عدة أسباب لسبب نجاح التفاعل الجزئي بالفعل:

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

لماذا أصبحت التفاعلات الدقيقة اتجاهاً في تصميم سمات WordPress؟

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

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

لا تساعد التجارب الصغيرة المستخدمين على التفاعل مع موقع ويب معين يستند إلى WordPress فحسب ، بل إنها تجعلهم مرتبطين بالمورد لفترة أطول من الوقت ، وحثهم على التمرير ومشاركة المحتوى. يجب مراعاة كل التفاصيل في التصميم ، لأنه حتى نموذج الاشتراك المصمم بشكل سيئ يمكن أن يؤدي إلى إيقاف تشغيل المشاهدين. يتم تقديم التفاعلات الصغيرة الأكثر فاعلية فقط عندما يفهم المطورون احتياجات الجمهور.

يحتوي موضوع Deltex Business WordPress بواسطة TemplateMonster على أزرار شبح تغير لونها عند تمرير الماوس.
يحتوي موضوع Deltex Business WordPress بواسطة TemplateMonster على أزرار شبح تغير لونها عند تمرير الماوس.

المصدر: http://www.templatemonster.com/wordpress-themes/deltex-wordpress-theme-58517.html

يحتوي DW Agro WordPress Theme by Design Wall على قائمة تلتصق بأعلى والتي تتفاعل عن طريق تغيير لون الرموز من الأبيض إلى الأحمر عند تحريك الماوس.
يحتوي DW Agro WordPress Theme by Design Wall على قائمة تلتصق بأعلى والتي تتفاعل عن طريق تغيير لون الرموز من الأبيض إلى الأحمر عند تحريك الماوس.

المصدر: https://www.designwall.com/wordpress/themes/dw-argo/

نصائح لتصميم التفاعلات الدقيقة في قوالب ووردبريس

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

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

  • استخدم إرشادات WordPress للتأكد من أنك تفهم من هو المستخدم النهائي وما هي متطلباته التجارية أو الشخصية لجعل تجربة المستخدم أكثر توجهاً نحو الإنسان.
  • ضع في اعتبارك الأخطاء المحتملة ، وتأكد من أن عملية التفاعل الجزئي لا تؤدي إلى كسر التفاعل نفسه.
  • حاول استخدام وظيفة WordPress على أكمل وجه ، وتجنب إضافة ميزات أو عناصر إضافية إذا لم يكن ذلك ضروريًا. تتمثل إحدى أفضل الممارسات في إنشاء عناصر مدمجة مثل المؤشرات والأزرار وأشرطة التمرير للمشاركة في التفاعلات الدقيقة وتقديم الملاحظات.
  • استخدم لغة موجهة نحو الإنسان ، مفهومة لمعظم الناس ، ما لم تكن هناك حاجة إلى شيء أكثر تحديدًا.
  • تأكد من أن التفاعلات الجزئية لا تزال في محلها وواقعية مع مرور الوقت ، وتجنب جعلها مزعجة أو مبالغ فيها.
  • لا تفرط في زيادة التفاعلات الصغيرة مع الرسوم المتحركة ، استخدمها بخفة حتى لا تبتلع عناصر تصميم الويب الأخرى أو تعيق الوظيفة.
  • كن متسقًا مع مخططات الألوان في التصميم العام وتصميم التفاعل الجزئي ، على وجه الخصوص ، مع ضمان عمل الألوان معًا بشكل جيد.
  • اكتشف الطرق التي سيتطور بها التفاعل الجزئي بمرور الوقت - ما إذا كانوا سيحتاجون إلى التغيير وفقًا لتحديثات WordPress أو بالأحرى تركهم كما هو.
يحتوي موضوع Sky High Business WordPress من TemplateMonster على قائمة علوية كاملة العرض تتفاعل مع القوائم المنسدلة عند تمرير الماوس.
يحتوي موضوع Sky High Business WordPress من TemplateMonster على قائمة علوية كاملة العرض تتفاعل مع القوائم المنسدلة عند تمرير الماوس.

المصدر: http://www.templatemonster.com/wordpress-themes/55048.html

DW Trendy Business WordPress Theme من DesignWall يحتوي على شريط تمرير للصور في رأس موقع الويب يغير لون أزرار الأسهم السابقة / التالية على تمرير الماوس لتبديل الشريحة.
DW Trendy Business WordPress Theme من DesignWall يحتوي على شريط تمرير للصور في رأس موقع الويب يغير لون أزرار الأسهم السابقة / التالية على تمرير الماوس لتبديل الشريحة.

المصدر: https://www.designwall.com/wordpress/themes/dw-gamez/

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