ما هي التفاعلات المصغرة في WordPress؟

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

• كيفية استخدام التفاعلات الدقيقة في ووردبريس
• كيفية الاستفادة القصوى من التفاعلات الدقيقة

بعد ذلك ، سنستعرض بعض النصائح لمساعدتك في إنشاء تفاعلات دقيقة فعالة لموقعك على الويب.

فلنسرع.

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

التفاعلات الدقيقة عبارة عن رسوم متحركة صغيرة يمكن ملاحظتها بسهولة يتم تشغيلها عند النقر فوق أو تحريك مؤشر الماوس فوقها أو التفاعل مع عناصر معينة على موقع ويب.

إليك مثال - إذا قمت بالتمرير فوق زر أعجبني:

ويتم مكافأتهم برسوم متحركة:

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

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

• قدم المزيد من الملاحظات المرئية لتمكين المستخدمين من معرفة كيفية استخدام عناصر معينة على موقعك
• اجعل الغرض من العناصر الموجودة على موقع الويب الخاص بك أكثر وضوحًا للزوار

لمساعدتك على فهم التفاعلات الدقيقة بشكل أفضل ، من الضروري مناقشة نقطة واحدة أولاً ؛ كيفية الحصول عليها على موقع الويب الخاص بك.

كيفية إضافة Microinteractions لـ WordPress

هناك عدة طرق لإضافة تفاعلات دقيقة إلى موقع WordPress الخاص بك. هؤلاء هم:

• عبر CSS
• عبر JavaScript
• عبر الإضافات

أدناه هو توزيع مفصل لكل طريقة.

عبر CSS

يلعب CSS بالفعل دورًا أساسيًا في تصميم موقع الويب الخاص بك ، مما يجعله أداة مثالية لإضافة تفاعلات دقيقة إلى موقعك.

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

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

جافا سكريبت

قبل CSS ، كان هناك JavaScript. ولا تزال طريقة ممتازة لتحريك عناصر موقع الويب. الأزرار هي عناصر مرغوبة أكثر للتفاعلات الدقيقة ، وفي بعض الحالات ، يمكن أن تكون JavaScript خيارًا أفضل من CSS.

تعد Ladda Buttons ، مكتبة مجانية من أزرار التحميل ، مثالًا جيدًا على أنه يمكنك استخدام JavaScript لإضافة تفاعلات دقيقة إلى موقع ويب WordPress.

إضافات ووردبريس

يمكنك الاستفادة من العديد من مكونات WordPress الإضافية التي تأتي مع وظائف تفاعل دقيقة مضمنة. وتشمل هذه:

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

كيفية استخدام Microinteractions في WordPress

هناك العديد من الطرق لاستخدام التفاعلات الدقيقة داخل WordPress ، لكن دعنا نلقي نظرة على بعض أكثرها شيوعًا.

الفوري للمشاركة الاجتماعية للمحتوى الخاص بك

مع وجود أكثر من 50 ٪ من سكان العالم على وسائل التواصل الاجتماعي ، تعد منصات مثل Instagram و Facebook و TikTok و Twitter أماكن رائعة للوصول إلى آفاق جديدة ومستهدفة للغاية. سواء كنت تقوم بالتدوين للأعمال أو تدير مدونة شخصية ، فإن تشجيع الناس على مشاركة المحتوى الخاص بك على وسائل التواصل الاجتماعي يسمح لك بإضفاء الطابع الإنساني على علامتك التجارية.

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

يكمن جمال هذا في أنه يمكنك استخدام التفاعلات الدقيقة لتسهيل مشاركة المتابعين للمقتطفات التي يجدونها ذات قيمة من خلال المكون الإضافي Highlight and Share.

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

اعرض تلميحات أدوات مفيدة لقرائك

بالنسبة للمبتدئين ، فإن تلميحات الأدوات عبارة عن مقتطفات معلومات صغيرة تظهر عند التمرير فوق قسم معين من ارتباط أو عنصر أو نص. الغرض الأساسي منها هو توفير معلومات إضافية لقرائك.

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

مرة أخرى ، يمكنك استخدام مكون إضافي يسمى WordPress Tooltips لتنفيذ التفاعلات الدقيقة لتلميحات الأدوات في موقع WordPress على الويب.

أضف رسوم متحركة ممتعة

فكر في زر "أعجبني" على Facebook. في كل مرة تقوم فيها بتمرير الماوس فوق الزر ، يتم تكبيره ويتحرك ،

يمكنك إنشاء نفس التأثير للعناصر على موقع WordPress الخاص بك باستخدام تفاعلات دقيقة. كيف؟ ... باستخدام مكون إضافي يسمى بسهولة Animate It!

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

يمكنك أيضًا استخدام Lottie Animations لتجميل صفحاتك وتحسين تجربة المستخدم. إليك منشور مدونة يوضح كيفية استخدام Lottie Animations في WordPress.

أفضل ممارسات التفاعلات الدقيقة

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

حدد العناصر المطلوب تحريكها

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

على سبيل المثال ، شريط البحث القياسي يكتب الرسوم المتحركة:

إنه بسيط للغاية ويمكن ملاحظته. على الرغم من أن النص صغير ، إلا أنه يزيد من سهولة الاستخدام ويميزه.

كقاعدة عامة ، عند تحريك العناصر على موقع الويب:

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

حدد أي تفاعلات دقيقة لاستخدامها

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

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

ضع في اعتبارك ما يلي إذا كنت تريد أن تفضل التفاعلات الدقيقة سهولة الاستخدام:

• اعرض كيف يعمل عنصر معين
• استفد من التفاعلات الدقيقة للإشارة إلى النجاح عندما يستخدم الزوار العناصر بشكل مناسب

بعد ذلك ، اختر أفضل مكون إضافي لتنفيذ تفاعلاتك الدقيقة اعتمادًا على ما تريد القيام به أو تحقيقه.

نصائح لإنشاء تفاعلات دقيقة فعالة في WordPress

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

الوظيفة هي المفتاح

قبل كل شيء آخر ، يجب أن يكون لديك هدف لإنشاء تفاعلاتك الدقيقة.

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

البساطة هي اسم اللعبة

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

تجنب ازدحام تفاعلاتك الدقيقة بنصوص أو صور غير ضرورية. أقصر وأحلى ، كان ذلك أفضل.

مسائل الهيكل

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

طول العمر أمر حاسم

من أهم الأشياء التي يجب وضعها في الاعتبار عند تنفيذ التفاعلات الدقيقة هو أنها يجب أن تشعر بأنها طبيعية؟ لماذا ا؟ ... لأنك لا تريد أن يشعر الزوار وكأنك تقصفهم برسوم متحركة غير ضرورية طوال الوقت.

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

التجربة والاختبار

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

أفضل طريقة للقيام بذلك هي جمع ملاحظات حول تفاعلاتك الدقيقة من المستخدمين الفعليين. جرب أيضًا تفاعلات دقيقة مختلفة للعثور على ملاءمة جيدة لموقعك.

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

نأمل أن تكون هذه المقالة قد أجابت على بعض الأسئلة المهمة التي قد تكون لديك حول التفاعلات الدقيقة وكيفية تنفيذها بشكل صحيح على موقع WordPress الخاص بك.