Pourquoi votre site WordPress devrait avoir des éléments d’interface utilisateur collants et comment les créer

Pourquoi votre site WordPress devrait avoir des éléments d’interface utilisateur collants et comment les créer

Pourquoi votre site WordPress devrait avoir des éléments d’interface utilisateur collants et comment les créer
СОДЕРЖАНИЕ
02 июня 2020

Cette contribution sur les éléments collants de l’interface utilisateur dans WordPress est de Lexie Lu.


Il y a des sentiments mitigés en ce qui concerne les éléments collants de l’interface utilisateur. Certains disent qu’ils – qui peuvent inclure tout, des options de partage des médias sociaux aux informations de l’entreprise – conduisent à une mauvaise expérience utilisateur. toutefois, même les détracteurs concéder que ceux-ci peuvent être des choix de conception très efficaces lorsqu’ils sont bien faits.

Éléments collants (boutons, blocs de contenu, ainsi que d’autres formes de soi-disant "navigation collante") sont des éléments fixes de la page qui restent en place lorsque l’utilisateur fait défiler vers le bas. Lorsque les éléments de l’interface utilisateur collants sont bien conçus et avec un objectif clair, la recherche montre ils sont un excellent moyen d’obtenir l’action souhaitée d’un visiteur de votre site Web.

En bref, votre site WordPress peut utiliser des éléments d’interface utilisateur collants afin de maximiser la valeur de chaque visite sur votre site. Ces éléments peuvent aider à mener à des inscriptions à des newsletters, à des suivis sur les réseaux sociaux et à d’autres appels à l’action importants..

Peut-être plus important encore, ils peuvent améliorer l’expérience utilisateur. Avec tous ces avantages, il n’est pas étonnant que la navigation de plus en plus courant à mesure qu’il grandit en popularité.

Note de l’éditeur. Nous avons également grandi pour profiter de divers éléments collants du site. Le blog CodeinWP utilise lui-même un de ces éléments, et nous avons également fait de la navigation collante l’une des principales caractéristiques de Zerif – notre thème le plus populaire (voir la démo). Pourquoi? Cela fonctionne juste pour l’utilisateur. Mais laissez Lexie expliquer cela en détail:

Pourquoi les éléments collants de l’interface utilisateur dans WordPress fonctionnent

L’utilisation efficace d’éléments collants dans WordPress peut aider à transmettre des informations importantes et à faciliter le parcours du visiteur sur votre site. Un site Web de commerce électronique a découvert que l’intégration de la navigation collante a contribué à augmenter les conversions de 30% à 33%.

Un test A / B distinct effectué à des fins de recherche a révélé que 100 pour cent des visiteurs préféré les éléments de conception collants – même si beaucoup d’entre eux ne savaient pas exactement pourquoi.

Pour exploiter la puissance des éléments d’interface utilisateur collants dans WordPress, vous ne pouvez pas simplement télécharger un plugin WordPress et regarder vos chiffres s’améliorer à tous les niveaux. Vous devez soigneusement planifier les éléments qui fonctionneront le mieux pour votre site. Vous devez également vous assurer que ces éléments – qui peuvent parfois être difficiles si vous n’avez pas d’expérience en codage – fonctionnent comme prévu.

Heureusement, il existe différents types d’éléments d’interface utilisateur et de plugins pour vous aider à les intégrer à votre site WordPress:

Boutons de partage des médias sociaux collants

La façon dont les gens rencontrent les sites Web a changé. Il est loin le temps où la plupart des visiteurs arrivent en tapant une URL, puis en fouillant pour le contenu. Bien que ce soit toujours le cas à certains moments, beaucoup plus de trafic provient désormais des réseaux sociaux.

En moyenne, les lecteurs des médias sociaux 31 pour cent de tout le trafic aux sites Web. Bien que ce chiffre soit sans aucun doute plus faible pour certains sites Web (et plus élevé pour d’autres), il souligne l’importance de créer un contenu convaincant.

(Graphique par Graphiques et graphiques WordPress Lite.)

Un bon contenu, cependant, n’est que la première étape. Vous pouvez également pousser les utilisateurs et augmenter le trafic de référence en facilitant ridiculement le partage de votre contenu. Un bon moyen de le faire est d’utiliser des boutons adhésifs sur les réseaux sociaux pour accompagner votre contenu.

WordPress ne manque pas de plugins pour ajouter des boutons de médias sociaux collants / flottants. L’important est d’en choisir un qui se comporte intuitivement avec la conception de votre thème. Il y a tellement d’exemples de boutons flottants de médias sociaux qui se comporter assez étrangement sur mobile ou lorsque la taille des fenêtres du navigateur de bureau est modifiée.

Un mauvais design peut avoir l’effet inverse comme prévu, car les boutons collants des médias sociaux qui masquent le texte et les photos ne mèneront à aucun partage sur les réseaux sociaux. Jetez un œil aux sites qui parviennent à offrir une expérience utilisateur optimale.

Expérimentez avec les nombreux plugins de WordPress sur autant d’appareils et de systèmes d’exploitation que possible, pour vous assurer que vos boutons de réseaux sociaux se comportent comme prévu.

Il y a une liste en deux parties de plus de 30 plugins de médias sociaux publiés ici sur CodeinWP. Je suis sûr que vous y trouverez le plugin parfait pour vous.

Boîte d’information collante

Selon votre site Web, votre élément collant doit parfois simplement transmettre des informations supplémentaires dans la barre latérale. La mise en évidence des informations de contact sur votre site est un appel à l’action simple mais efficace. 12Keys le fait à bon escient en fournissant des informations de contact en un coup d’œil, ce qui est particulièrement important pour les visiteurs qui peuvent être en crise.

12keysrehab

Cela peut également être un endroit où vous contribuez à instaurer la confiance en mettant en évidence vos références, récompenses et tout le reste dans ce sens. C’est aussi un bon endroit pour ajouter une touche personnelle en expliquant un peu plus sur vous ou votre site Web.

Heureusement, c’est le type d’élément le plus simple à implémenter sur votre site. Vous n’avez à vous soucier de rien, sauf du texte et peut-être d’un lien hypertexte vers votre e-mail. Ce plugin devrait pouvoir vous aider:


Élément collant Élément collant

Auteurs): Stew Heckenberg

Version actuelle: 1.3.5

Dernière mise à jour: 26 janvier 2019

sticky-element.1.3.5.zip


74% Évaluations


600 + installations


WP 3.0 + nécessite

Le but est de ne pas rendre l’élément de la barre latérale trop flashy ou distrayant. Il sera là aussi longtemps que le visiteur sera sur le site, donc vous ne voulez pas les désactiver avec quelque chose de mal conçu ou de trop envahissant. Par souci de simplicité, la barre latérale flottante devrait être la cerise sur le gâteau pour le contenu qui l’accompagne.

Les menus collants sont peut-être le type le plus terre-à-terre de tous les éléments collants de l’interface utilisateur dans WordPress, mais ils sont également l’un des plus utiles.

L’idée est simple. Pendant que l’utilisateur fait défiler vers le bas, le menu reste fermement en place.

Mais vous pouvez l’implémenter de différentes manières:

a) Vous pouvez opter pour le placement standard en haut.

C’est ce que l’équipe ThemeIsle a fait avec son Thème Zerif, par exemple (vous pouvez voir le démo en direct ici):

Éléments collants Zerif

Un bonus supplémentaire ici est que le menu n’est pas un simple menu à une rangée, mais un méga menu – lorsque vous survolez chacun des éléments, ils révèlent une structure plus élaborée:

méga menu

b) Mettez le menu de côté.

C’est une bonne option pour certains designs, et surtout pour les sites photo-lourds qui misent sur des visuels pour raconter leur histoire.

Voici un exemple de RichBrown.info:

RichBrown

Le menu est fixé à droite lorsque vous faites défiler vers le bas.

c) Mettez-le au fond.

Le bas est un autre emplacement intéressant pour un menu fixe, et surtout si vous voulez rendre le menu un peu plus haut qu’une seule ligne de texte.

Voici un exemple de bulletpr:

bulletpr

Comme vous pouvez le voir, le menu comporte des images + du texte, il a donc été placé en bas afin qu’il n’occupe pas l’espace précieux dans l’en-tête du site.

Inscription aux e-mails collants

Comme vous le savez probablement, l’un des meilleurs moyens d’atteindre votre public est par e-mail. Un e-mail envoyé à votre liste d’abonnés est cinq fois plus susceptibles à voir qu’un post sur Facebook.

Construire une liste de qualité des abonnés au courrier électronique est essentiel pour faire passer votre entreprise au niveau supérieur. Grâce aux formulaires collants, obtenir des abonnés est plus facile que vous ne le pensez.

Il existe de nombreuses façons d’encourager un visiteur du site à s’inscrire à votre liste de diffusion. Un formulaire collant, soit dans la barre latérale ou en haut de votre page, peut être d’une grande aide. Un site qui le fait bien est TwelveSkip, une entreprise de médias numériques. Leur appel à l’action en haut de la page est clair et attire l’attention sans être trop en face ni distraire.

twelveskip

Le haut de votre barre latérale est un autre bon endroit pour obtenir des abonnés par e-mail. Parfois, cela ne fait pas de mal d’avoir plusieurs endroits où les gens peuvent s’inscrire. Les abonnés par e-mail sont si précieux qu’il vaut la peine de faire des efforts supplémentaires pour développer votre liste.

CodeinWP, par exemple, utilise plusieurs formulaires à cet effet, et la plupart des collants. Comme celui-ci:

codeinwp

Annonces collantes

Avouons-le – les publicités sont un mal nécessaire pour la plupart d’entre nous. Nos lecteurs ne les aiment pas et beaucoup de créateurs de sites Web non plus. Cependant, ils sont essentiels pour payer les factures, et c’est là que la publicité numérique entre en jeu..

Time Magazine utilise sa publicité comme un bloc collant, donc elle défile vers le bas lorsque vous lisez un article.

temps

C’est beaucoup moins intrusif qu’une annonce splash géante ou un pop-up, donc ce n’est pas une mauvaise façon de générer des revenus sans éteindre trop de lecteurs.

Comme toute publicité, cela ne doit être fait qu’avec modération. Un mur d’annonces à gauche ou à droite d’un article est une désactivation immédiate. Un ou deux, associés à des liens vers d’autres articles, est un bon moyen de faire de la publicité.

Éléments d’interface utilisateur créatifs et collants dans WordPress

Outre les éléments énumérés ci-dessus, vous pouvez être beaucoup plus créatif avec votre utilisation d’éléments d’interface utilisateur collants dans WordPress, mais cela signifie également potentiellement plus de travail pour les mettre en œuvre.

Voici un exemple, par Gavick.com:

île

Si vous allez sur ce site, vous remarquerez que toute l’île reste au centre pour la plupart pendant que vous faites défiler vers le bas. Il bascule entre le premier plan et l’arrière-plan, mais il est toujours au centre. Ce genre de chose attire vraiment l’attention de l’utilisateur.

Il semble qu’il n’y ait vraiment aucune limite à l’utilisation créative des éléments d’interface utilisateur collants dans WordPress … puisque quelqu’un a pu rendre une île collante.

Comment trouver le bon plugin?

Il y a pas de pénurie de plugins sur WordPress.org qui peut vous aider à implémenter des éléments collants dans votre thème. Certains pourraient fonctionner à merveille avec votre thème, tandis que d’autres pourraient ne pas être optimisés pour votre site. Il faudra quelques essais et erreurs pour trouver ceux qui fonctionnent le mieux.

Le résultat final en vaudra la peine, que vous souhaitiez générer du trafic sur les réseaux sociaux ou transmettre des informations importantes aux lecteurs. Assurez-vous simplement de tester vos plugins de manière approfondie pour vous assurer qu’il n’y a pas d’exception.

Lexie Lu A propos de l’auteur: Lexie Lu est une créatrice et blogueuse indépendante. Elle aime rechercher les dernières tendances et a toujours une tasse de café à proximité. Elle gère Design Roast et peut être suivi sur Twitter @lexieludesigner.

Toutes les modifications et réécritures pleines d’esprit de Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector