دليل لتحسين تجربة المستخدم (UX) لموقع WordPress

نشرت: 2017-04-22

إن تحسين موقع ويب لتجربة مستخدم أفضل ليس بالأمر السهل ، غالبًا لأن الأدوات الضرورية و / أو معرفة الترميز لا تأتي مقابل عشرة سنتات. ولكن عندما يتم إنشاء موقع الويب على نظام أساسي معروف عمليًا ومحبوبًا لسهولة الاستخدام ، فإن UXO ( تحسين تجربة المستخدم ) يكون أقل إيلامًا بشكل ملحوظ.

هناك الآلاف من الأدوات المتاحة على WordPress ، والكثير منها مجانًا ، والتي تساعدك على فهم جمهورك بشكل أفضل (التتبع والتحليلات) ، وتحسين الأداء (التخزين المؤقت والمكونات الإضافية لتحسين الصور) ، والاختبار والتحسين (A / B) برنامج اختبار مثل Nelio و OptimizePress وما إلى ذلك). هذا الدليل لا يتعلق بهم.

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

دائري

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

هذا هو السبب في أن معظم سمات WordPress المرغوبة تحزم مكونًا إضافيًا منزلقًا واحدًا على الأقل (عادةً ما يكون Revolution Slider). دعونا نرى إيجابيات وسلبيات هذا النهج:

الايجابيات:

يظهر أهم الرسائل في مكان واحد.
يمكن تحديد أولويات الرسائل (الأهم هو الحصول على الشريحة الأولى)
من المفترض أن تجذب جميع شرائح الزوار ("شيء للجميع")

سلبيات:

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

هناك طرق للتغلب على هذه السلبيات وتحسين تجربة المستخدم الدائري:

احتفظ بعدد الشرائح / الإطارات بما لا يزيد عن 5.
امنح المستخدمين إمكانية التحكم في التنقل الدائري
لا تقم بإعادة التوجيه تلقائيًا.

في بعض الأحيان ، يكون الحل الأبسط هو الأفضل. بدلاً من الاعتماد على المكونات الإضافية المنزلق الممتازة الفاخرة ، يمكنك استخدام مكونات JavaScript خفيفة الوزن (jQuery) مثل Slick لإنشاء دوارات سهلة الاستخدام على WordPress.

التنقل المتقدم

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

هذا هو سبب حاجتنا لقوائم الطعام الضخمة. ولكن هناك وجهان لهذه العملة أيضًا.

الايجابيات:

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

سلبيات:

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

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

بمجرد أن يتم ترويض المحتوى الخاص بك وتنظيمه بشكل كافٍ ، يمكنك استخدام مكونات WordPress الإضافية مثل Max Mega Menu و uberMenu وما إلى ذلك لإضافة قائمة منسدلة ضخمة إلى موقع الويب. تضيف امتدادات WooCommerce مثل Ajax Layered Navigation واجهة تصفية إلى المتجر.

أداء

بغض النظر عما تحب أن تصدقه: أنت لست حصريًا.

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

قم بتحسين موقع WordPress الخاص بك للأداء باستخدام:

CDN: خيار قابل للتطبيق لمواقع الويب التي تتلقى جمهورًا عالميًا ولديها حركة مرور متوسطة إلى عالية. البرنامج المساعد MaxCDN و W3 Total Cache عبارة عن تطابق تم إنشاؤه في جنة التحميل السريع.

ذاكرة التخزين المؤقت: كما هو مذكور أعلاه ، W3 Total Cache هو المكون الإضافي الوحيد للتخزين المؤقت الذي تحتاجه (حتى بدون دعم CDN). اسأل مطوريك أيضًا عن حلول من جانب الخادم مثل Redis و Memcached

تحسين الواجهة الأمامية: تعمل المكونات الإضافية مثل EWWW Image Optimizer على ضغط الصور (دون المساس بالجودة). تأكد أيضًا من وجود أقل قدر ممكن من CSS و JS المضمنة في ملفات السمات الخاصة بك. ضغط أوراق الأنماط وملفات JavaScript وتصغيرها أيضًا.

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

النوافذ المنبثقة المشروطة

لا تكن بغيضًا باسم التفاعل والتحويلات.

نعم ، تعد النافذة المنبثقة المشروطة (تسويق المقاطعة) أداة تحويل رائعة. هناك الآلاف من المكونات الإضافية (تحتوي معظم المكونات الإضافية للوسائط الاجتماعية على هذه الميزة الآن) والتي تتيح لك إرسال رسالة إلى المستخدمين ، وتذكيرهم "بأدب" بمشاركة / متابعة / الإعجاب بالمحتوى على وسائل التواصل الاجتماعي أو الاشتراك أو التسجيل ، الاستفادة من الخصم ، وآخرون.

هناك الكثير من الأشياء الخاطئة في ذلك ... لكننا سنصل إلى ذلك في لحظة.

الايجابيات:

ثبت لتحسين معدلات التحويل

سلبيات:

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

هناك أمثلة على استخدام النوافذ المنبثقة بشكل جيد في السياق. يتفهم موقع BrainPickings.org جمهوره ويروج لرابط "التبرع" فقط عندما يقوم المستخدم بالوصول إلى الموقع بشكل متكرر وعندما ينتهي من قراءة المحتوى. نافذة Reebok Crossfit المنبثقة لها توقيت سيئ ولكنها تعوضها قليلاً بخصم على الاشتراك في صفحة المنتجات.

المصدر: REEBOK

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

حتى الآن ، ترجع زيادة التحويل بشكل أكبر إلى القوة الفظة ، ولكن يمكن زيادة جودة التحويلات والعملاء المتوقعين اللاحقين عندما تقوم بذلك بذكاء. إن مطالبة الزائر لأول مرة بالاشتراك في موقع ويب لن يمنحك جودة عالية 99/100 مرة.

حاول استخدام مكونات WordPress الإضافية بذكاء للنوافذ المنبثقة. هناك بعض الأشياء الجيدة (مثل Popups by Supsystic). اعمل مع هؤلاء بدلاً من التركيز فقط على التفاعل على صفحة واحدة.

تعليق ختامي

لتحسين تجربة المستخدم ، آمل أن تتأكد من اتباع هذه النصيحة بحذر واختبار كل شيء (استخدم Google Analytics أو اختبار Nelio A / B ، أو أي أداة أخرى: الأمر متروك لك).

وعد نفسك بمواصلة التحسن.

قراءة المزيد WordPress Plugins | 5 إصلاحات سريعة لموقع WordPress الخاص بك