Sur le marché actuel des fonctionnalités en évolution du site Web, Design UX est devenu plus important que jamais pour les entreprises, à l'échelle mondiale. Voici un résumé des principales erreurs UX et comment les corriger.

Nous voulons que les utilisateurs naviguent sur notre site librement, sans obstacles et sans frictions. Si votre site rend la recherche d'informations difficile, vous pouvez parier que votre sous-revenu le sait déjà et le met à profit.

UX et SEO sont centrés sur l'utilisateur, ce qui en fait une paire redoutable lorsque vous les avez bien compris.

Mais si vous vous trompez, vous pouvez voir des taux de rebond élevés, des conversions faibles et même un léger impact sur votre classement, car John Mu de Google considère UX comme un facteur clé. «Facteur de classement souple».

Si vous constatez que les utilisateurs ne passent pas de temps sur votre site (ni à convertir), il peut y avoir des problèmes. Nous allons vous aider à découvrir ce qu’ils pourraient être.

Navigation encombrée

Votre site la navigation est la passerelle vers vos pages de contenu et de service. C’est là que vous vous concentrez (vraiment) sur la construction d’un entonnoir à la fois sans friction et facile à comprendre.

Votre navigation doit être une architecture de groupes de pages bien structurés. soit commercial ou informatif (selon votre entreprise).

Certaines des erreurs les plus courantes que nous voyons sont les suivantes:

• Liens sans valeur dans le menu principal
• Texte d'ancrage excessif
• Non réactif (oui, cela se produit encore en 2019)
• Trop de sous-menus
• S'appuie sur Javascript (sans repli)

Comment réparer la navigation de votre site

La règle d'or est de rendre votre navigation accessible, réactive et sans encombrement.

Pensez à vos catégories, à vos pages les plus utiles, aux utilisateurs qui passent le plus clair de leur temps et, plus important encore, à l'identité de vos utilisateurs.

Pour toujours 21 fait un excellent travail de liaison avec les zones principales de son site de manière structurée et visuellement agréable.

Disons que vous courez un commerce électronique stocker pour les animaux domestiques (parce que tout le monde aime les animaux).

Vous vendez des produits pour chiens, chats et lapins. Voici comment structurer votre navigation…

L'esthétique est tout

Les gens sont des créatures visuelles. Nous aimons que les sites Web soient esthétiques.

L'un des plus grands péchés cardinaux de l'expérience utilisateur est la médiocrité des images, le choix des couleurs et la sélection des polices. En fait, je vais étendre cela à la plupart des domaines du marketing en ligne; médias sociaux et annonces graphiques.

Voici un exemple des trois sur un seul site:

Je ne pense pas que j’ai besoin d’aller beaucoup plus loin pour savoir pourquoi cela pourrait être amélioré. Mais, je vais aller dans le comment.

Même les grandes marques se trompent…

Remarquez comment une seule image de taille médiocre a affecté le toucher de la page entière?

Correction d'une structure de page médiocre

Les éléments à prendre en compte lors de la mise en page du site sont les suivants: marges, remplissage et alignement.

Comme vous pouvez le voir dans l'exemple ci-dessus, l'alignement est un gros problème et même une petite quantité de contenu / d'images mal alignés peut sembler peu professionnelle. Les pages Web fonctionnent en colonnes, ce qui permet aux concepteurs de créer des pages de renvoi pouvant influencer l'attention des utilisateurs.

La combinaison de texte et d’images est généralement ce qui rend difficile la gestion des modèles, comme nous l’avons déjà vu.

Heureusement pour vous, nous avons rassemblé ci-dessous un certain nombre d’exemples de mise en page qui simplifient la structuration de votre contenu et de vos images.

• Image alignée à droite du texte:

• Zone de texte superposée sur l'image du carrousel:

Travailler avec des polices

Lorsque vous examinez les polices, vous devez réfléchir à la manière dont votre contenu apparaîtra dans toutes les tailles. De votre hiérarchie d'en-tête à vos points de balle.

Nous vous recommandons de limiter le nombre de polices différentes que vous utilisez sur votre site. Il est facile de s’emballer pour donner à différentes sections de votre site sa propre «sensation».

Une fois que vous avez sélectionné une ou plusieurs familles de polices, réfléchissez à la manière dont vous pouvez créer un contraste entre le contenu de l’en-tête et du corps.

Des sélections de polices uniques avec différentes épaisseurs de police peuvent créer un contraste très agréable visuellement entre les sections de votre page.

Une sélection de polices médiocre peut même donner à un géant de la vente au détail, tel qu'Amazon, un aspect peu fiable et peu professionnel.

Si vous avez du mal à trouver des idées sur le couplage des polices, vous pouvez utiliser Paire de polices mettre en place différents types de polices. Il est important de se rappeler que la lisibilité de la police de caractères joue un rôle déterminant dans la façon dont les utilisateurs consomment le contenu.

Considérer:

• Taille
• Largeur
• Espacement des paragraphes
• Poids

Si votre contenu ressemble actuellement à ceci:

Je suis désolé, mais vous le faites mal.

Même une modification mineure des polices peut causer de gros problèmes aux utilisateurs. Il suffit de demander à Amazon comment ça s'est passé.

La plupart des plates-formes CMS seront livrées avec des polices préinstallées, mais si vous avez besoin de plus d'une sélection, vous pouvez toujours utiliser Google Fonts.

Enfin, réfléchissez à la manière dont votre police apparaît sur le bureau et sur le mobile.

Si votre taille de police est trop grande, cela prendrait trop d'un écran mobile. S'il est trop petit, les utilisateurs auront du mal à le lire. Il est utile de tester différentes tailles pour assurer la lisibilité globale.

C’est un exemple de la manière dont la page d’accueil de Zazzle apparaît sur un iPhone X – avec une taille de police de 18 pixels.

Temps de chargement des pages

Cela ne devrait pas être nouveau pour vous maintenant.

Plusieurs études de cas sont disponibles sur comment les temps de chargement peuvent avoir un impact sur les conversions. Donc, je ne vais pas entrer dans cela ici.

Les images sont la principale raison du temps de chargement élevé des pages. Les images sont quelque chose que la plupart des propriétaires de sites peuvent modifier avec une petite contribution de dev. En fin de compte, il s'agit de sauvegarder le bon type de fichier, d'utiliser les bonnes dimensions et de compresser en haute résolution pour préserver la qualité tout en réduisant la taille.

Les économies en ko peuvent souvent faire une énorme différence.

Jetez un coup d'œil à ce qui se passe lorsque l'optimisation de l'image est ignorée.

Par souci d’anonymat, nous avons caché l’identité de la marque.

Cependant, cette page nous a été accueillie pendant plus de cinq secondes. C’est un site Web de commerce électronique de taille moyenne qui s’occupe des vêtements pour enfants.

En optimisant les images, nous avons constaté des économies pouvant atteindre 900 Ko – un poids considérable tiré d'un navigateur.

Considérez ce que cela fait pour les utilisateurs? Les premières impressions sont tout. Qu'est-ce qui empêche le trafic de rebondir à cause du contenu / des images qui ne se chargent pas?

Réfléchissez y un peu!

Comment réparer l'image

Tout d'abord, vous devez déterminer s'il s'agit d'un problème.

Vous pouvez effectuer des tests de vitesse en utilisant Google Phare ou GTMetrix pour savoir quels fichiers sont trop lourds. Il est simple de trouver des images mal optimisées pour des pages individuelles.

Pour l'analyse par lots, nous vous recommandons d'utiliser un outil tel que Sitebulb, qui possède une section extrêmement détaillée attribuée aux vitesses de page.

Si vos images se trouvent déjà sur votre site et que vous n'avez pas vraiment envie d'ouvrir Photoshop et de toutes les redimensionner, vous devez exécuter des compressions par lots pour réduire la taille du fichier.

Il y a une gamme de compression d'image outils disponibles en ligne, nous vous recommandons Compressor.io ou TinyPNG.

On pense souvent que la compression des images est synonyme de mauvaise qualité. Cependant, regardez l'image ci-dessous et évaluez vous-même la différence de qualité.

Pour ceux qui utilisent WordPress, vous pouvez utiliser le Smush.it plugin pour compresser et redimensionner les images sur votre site.

Nouveaux formats d'image

Les développeurs Google ont introduit un nouveau format de fichier considéré comme supérieur à ses équivalents PNG et JPG.

Il offre une compression fantastique sans perte ni perte pour les images.

Réduire le temps de chargement de plusieurs millisecondes, en particulier sur de mauvaises connexions mobiles, peut empêcher un utilisateur de quitter votre site. Google a déclaré récompenser activement les sites qui améliorent progressivement la vitesse de leurs sites.

La bonne nouvelle?

Plus de 70% des navigateurs supportent ce format de média!

Vous pouvez en savoir plus sur WebP avec les développeurs Google.

Pop-ups

Aucune rafle d’erreur UX ne serait complète sans mentionner les pop-ups.

Ils semblent devenir plus agressifs et plus perturbateurs chaque année. Vous aurez du mal à trouver un site Web sans eux.

Désolé Sumo, mais c'est l'un des pires.

Ceci est considéré comme un pop-up déclenché par le défilement. La page attend que j'interagisse avant que la fenêtre contextuelle ne s'affiche.

Il y a une règle majeure que vous devez respecter: ne pas perturber l'expérience d'un utilisateur avec les fenêtres contextuelles. Nous savons que c'est une déclaration audacieuse, mais… qui aime les ventes insistantes?

Si vous voulez aider les utilisateurs, faites-le en natif.

N'oubliez pas que nous créons un voyage sans friction.

Comment utiliser les pop-ups – de la bonne façon

Tout d’abord, n’utilisez jamais de fenêtres pop-up interstitielles. Cela gênerait les utilisateurs et pourrait retarder le rendu de votre page dans les moteurs de recherche.

Les deux sont mauvais pour les affaires.

Nous vous recommandons d’utiliser les pop-ups de manière plus subtile.

Top bannières

Un exemple parfait d'un CTA de marque en haut de l'écran. Il est non invasif sur les ordinateurs de bureau et mobiles.

Chatbots

Chatbots sont un excellent moyen d’aider les utilisateurs à trouver ce qu’ils recherchent sans perturber leur expérience.

Vous pouvez intégrer la génération de prospects, des codes de réduction ou simplement offrir des conseils généraux à vos clients. Cela peut contribuer à améliorer l'efficacité opérationnelle (réduction du nombre d'appels dans l'entreprise) et à améliorer les taux de conversion.

Si un client a du mal à trouver une zone particulière du site, les chatbots peuvent supprimer rapidement ces frictions afin de fidéliser les utilisateurs.

Bannières CTA locales

Un autre moyen intelligent d'offrir des réductions aux utilisateurs consiste à intégrer les CTA dans les sélections de produits, voire au niveau des catégories, en tant que bannière d'en-tête.

Nous estimons que cela constitue un excellent moyen de préserver l’UX tout en aidant à générer des clics encouragés vers les pages de vente ou de remise.

Il est toujours important de penser à concevoir des bannières adaptées à la taille et à la résolution de vos produits.

Sommaire

UX est aussi important pour votre site Web que votre contenu. Données montre que UX est encore un peu mystère à de nombreux spécialistes du marketing, mais cela devrait être le facteur le plus important dans la conception d'un site.

L'innovation dans les sites Web est encouragée, mais pas aux dépens de vos utilisateurs. Lorsque vous envisagez d'améliorer l'expérience de vos utilisateurs, vous devez vous rappeler ce que vous ressentez lorsque vous naviguez sur un site mal conçu.

Considérez les solutions faciles; polices, images, couleurs et navigation avant de penser à CRO (optimisation du taux de conversion).

N'oubliez pas que nous sommes sur un marché axé sur le comportement des utilisateurs. Essayez donc de faire de votre mieux pour y répondre le plus possible et vous gagnerez!

Ryan Roberts est un responsable SEO chez Zazzle Media.