Guide pour améliorer l'expérience utilisateur (UX) du site WordPress

Optimiser un site Web pour une meilleure expérience utilisateur n'est pas un jeu d'enfant, principalement parce que les outils nécessaires et/ou les connaissances en codage ne coûtent pas cher. Mais lorsque le site Web est créé sur une plate-forme pratiquement connue et appréciée pour sa convivialité, l'UXO ( optimisation de l'expérience utilisateur ) est nettement moins pénible.

Il existe des milliers d'outils disponibles sur WordPress, dont beaucoup sont même gratuits, qui vous aident à mieux comprendre votre public (suivi et analyses), à améliorer les performances (plugins de mise en cache et d'optimisation d'image) et à tester et améliorer (A/B des logiciels de test comme Nelio, OptimizePress, etc.). Ce guide ne les concerne pas.

Ce guide détaille certains des aspects de la convivialité les plus facilement négligés dans un site Web WordPress et les meilleurs moyens de corriger ces oublis. Nous commencerons par :

Carrousels

Chaque département de chaque entreprise veut des carrousels/curseurs, simplement parce que c'est un beau juste milieu. Tout le monde obtient son produit/campagne/message placé dans un seul espace très visible sur la page : au-dessus du pli.

C'est pourquoi les thèmes WordPress les plus souhaitables contiennent au moins un plugin de curseur (généralement le Revolution Slider). Voyons les avantages et les inconvénients de cette approche :

Avantages:

• Affiche les messages les plus importants en un seul endroit.
• Les messages peuvent être hiérarchisés (le plus important obtient la première diapositive)
• Censé plaire à tous les segments de visiteurs (« quelque chose pour tout le monde »)

Les inconvénients:

• Les utilisateurs n'attendent généralement pas que les diapositives tournent et sauteront le carrousel après avoir jeté un coup d'œil sur le cadre actuellement visible.
• Le contenu des diapositives n'est pas facilement exploré par les robots de recherche, ce qui est une mauvaise nouvelle pour le référencement.

Il existe des moyens de contourner ces inconvénients et d'améliorer l'expérience utilisateur du carrousel :

1. Ne dépassez pas le nombre de diapositives/cadres de 5.
2. Donner le contrôle de la navigation du carrousel aux utilisateurs
3. N'effectuez PAS de transfert automatique.

Parfois, la solution la plus simple est la meilleure. Au lieu de vous fier à des plugins de curseur premium sophistiqués, vous pouvez utiliser des plugins JavaScript légers (jQuery) comme Slick pour créer des carrousels conviviaux sur WordPress.

Navigation avancée

Un menu principal en en-tête combiné à une navigation secondaire dans une barre latérale est un moyen quasi infaillible de garantir que votre navigation est complète et utilisable. Mais lorsqu'il s'agit d'énormes sites Web (en particulier de commerce électronique ou de grands blogs riches en contenu) avec des milliers de pages, une navigation secondaire à elle seule ne suffira pas.

C'est pourquoi nous avons besoin de Mega Menus. Mais il y a aussi deux côtés à cette médaille.

Avantages:

Visibilité uniforme : le contenu/les pages des niveaux inférieurs sont inclus dans le méga menu
Permet d'économiser une étape supplémentaire : les utilisateurs peuvent accéder plus rapidement au contenu le plus éloigné/obscur.

Les inconvénients:

• Sont connus pour causer des problèmes de performances lorsque des éléments d'interface utilisateur tels que des graphiques/icônes sont ajoutés.
• Plus ou moins inefficace sur un site web avec une mauvaise hiérarchie de contenu
• Rendre les méga menus parfaitement réactifs peut être un défi

Avant de débattre du pour et du contre (et si vous avez même besoin d'un méga menu sur votre site Web ou non), vous devez classer soigneusement votre contenu. La taxonomie WordPress est là pour une raison. Utilise le.

Une fois que votre hiérarchie de contenu est suffisamment apprivoisée et organisée, vous pouvez utiliser des plugins WordPress comme Max Mega Menu, uberMenu, etc. pour ajouter un méga menu déroulant au site Web. Les extensions WooCommerce comme Ajax Layered Navigation ajoutent une interface de filtrage au magasin.

Performance

Peu importe ce que vous voudriez croire : vous n'êtes PAS exclusif.

Les utilisateurs ne veulent pas attendre le contenu, alors ne les obligez pas à attendre le contenu ou ils iront le chercher ailleurs. Même vos rangs souffrent de sites Web lents. C'est la somme totale du besoin d'optimisation des performances dans l'expérience utilisateur.

Optimisez les performances de votre site WordPress avec :

CDN : une option viable pour les sites Web qui reçoivent un public mondial et ont un trafic moyen à élevé. Le plugin MaxCDN et W3 Total Cache est une alliance faite dans le paradis du chargement rapide.

Cache : comme mentionné ci-dessus, W3 Total Cache est le seul plugin de mise en cache dont vous avez besoin (même sans le support CDN). Renseignez-vous également auprès de vos développeurs sur les solutions côté serveur comme Redis et Memcached

Optimisation frontale : des plugins comme EWWW Image Optimizer compressent les images (sans compromettre la qualité). Assurez-vous également qu'il y a aussi peu de CSS et de JS en ligne que possible dans vos fichiers de thème. Compressez et minifiez également les feuilles de style et les fichiers JavaScript.

Réduisez les dépendances externes, utilisez des sprites CSS et soyez extrêmement pointilleux lors du téléchargement de plugins (le moins, le mieux). Vous pouvez même contacter votre fournisseur d'hébergement Web et demander de l'aide. Parfois, votre hébergeur crée des problèmes liés aux performances.

Pop-ups modaux

Ne soyez pas odieux au nom de l'interactivité et des conversions.

Oui, le pop-up modal (marketing d'interruption) est un excellent outil de conversion. Il existe littéralement des milliers de plugins (la plupart des plugins de réseaux sociaux ont maintenant cette fonctionnalité) qui vous permettent de coller un message aux utilisateurs, leur rappelant « poliment » de partager/suivre/aimer le contenu sur les réseaux sociaux, de s'abonner ou de s'inscrire, bénéficier d'une remise, et al.

Il y a tellement de choses qui ne vont pas avec ça… mais nous y reviendrons dans un instant.

Avantages:

• Prouvé pour améliorer les taux de conversion

Les inconvénients:

• Distrayant : le visiteur est là pour le contenu et la fenêtre contextuelle gêne.
• Les popups sont traités comme du bruit blanc (comme tant d'annonces) à moins qu'ils ne correspondent correctement au parcours de l'utilisateur.
• MAUVAIS pour l'accessibilité

Il existe des exemples de popups bien utilisés dans le contexte. BrainPickings.org comprend son public et fait la promotion de son lien « faire un don » uniquement lorsque l'utilisateur a accédé au site de manière répétitive et lorsqu'il a fini de lire le contenu. Le popup Reebok Crossfit a un mauvais timing mais le compense légèrement avec une remise sur l'abonnement sur la page des produits.

Source : REEBOK

Le temps et les retards de déclenchement sont bien, mais il est également nécessaire de se concentrer sur la situation dans son ensemble et de lier une fenêtre contextuelle d'une manière qui sera pertinente pour les utilisateurs qui le souhaitent.

Jusqu'à présent, l'augmentation de la conversion est davantage due à une force contondante, mais la qualité des conversions et des prospects ultérieurs peut être augmentée lorsque vous le faites intelligemment. Demander à un visiteur pour la première fois de s'abonner à un site Web ne vous permettra pas d'obtenir des prospects de qualité 99/100 fois.

Essayez d'utiliser intelligemment les plugins WordPress pour les popups. Il y en a (comme Popups de Supsystic) qui sont bons. Travaillez avec ceux-ci au lieu de vous concentrer uniquement sur l'interaction sur une seule page.

Note de fin

Pour améliorer l'expérience utilisateur, j'espère que vous vous assurez de prendre ce conseil avec précaution et de tout tester (Utilisez Google Analytics ou Nelio A/B testing, ou tout autre outil : à vous de voir).

Et promettez-vous de continuer à vous améliorer.

Lire la suite Plugins WordPress | 5 correctifs rapides pour votre site WordPress