Au-delà de la réactivité : tendances de conception et de développement pour les spécialistes du marketing adaptables

Un de mes amis m’a récemment demandé d’examiner et d’expliquer une série de recommandations de sites envoyées par une agence de marketing numérique bien connue ayant des racines dans le référencement. Nous avons parlé des recommandations (généralement bonnes) pour l’optimisation du contenu et de la recherche, puis nous sommes arrivés à ceci :

“* Le mobile représente 53 % de votre trafic. Nous vous recommandons de créer un site Web réactif et adapté aux mobiles. Google recommande d’utiliser un design réactif afin que votre site s’affiche bien sur tous les appareils, et cela peut contribuer à améliorer le classement des mobiles.”

Et c’était tout. Une puce qui dit “construire un site réactif” revient à obtenir une inspection de la maison avec un tas de réparations mineures et une puce qui dit : “Construisez également une nouvelle maison avec des spécifications modernes”.

En tant que professionnels du marketing, nous devons réaliser que ce conseil est ne pas assez bien. Nous n’aidons personne avec des déclarations générales qui ne donnent aucune indication sur où commencer ou sur quoi penser. Google peut recommander responsive, mais cela ne signifie pas que c’est la seule option ou que c’est toujours la bonne option. Même si c’est la bonne option, nous devons avoir une idée sur comment faire le bon responsive.

Si nous allons dire aux gens de repenser leurs sites Web, nous ferions mieux d’avoir quelque chose de plus profond qu’un seul point sur un document de 20 pages. Insinuer que “Google vous récompensera pour votre réactivité” et le laisser ainsi pourrait faire plus de mal que de bien. Il manque également une formidable opportunité d’aider les clients à créer un excellent site Web avec une expérience utilisateur exceptionnelle.

Ce n’est pas grave si vous ne maîtrisez pas bien l’architecture, la conception, l’expérience utilisateur et/ou l’intention de l’utilisateur du site. Ne mentionnez pas un projet gargantuesque comme une refonte de site si tout ce que vous avez à dire est “créez un site réactif, parce que Google”.

Cet article est un aperçu de la façon dont les entreprises gèrent l’avenir du Web, pour le meilleur ou pour le pire. Mon objectif est d’aider les référenceurs, les spécialistes du marketing de contenu et tous les autres spécialistes du marketing numérique à parler plus intelligemment des tendances de conception et de développement réactives, mobiles et autres.

Ne suivez pas la foule : vous risquez de passer à Windows 8 complet.

Nous avons tiré des leçons importantes sur la conception multiplateforme de la catastrophe de Windows 8. C’était un gâchis pour de nombreuses raisons – et pourtant je vois les mêmes personnes qui se moquaient de Windows 8 commencer à faire certaines des mêmes erreurs sur leurs sites Web. Pour ceux qui n’ont jamais utilisé Windows 8 à ses débuts, laissez-moi vous expliquer pourquoi c’était si mauvais.

• « Métro » (ou « Moderne » ou autre) a évité la navigation pour une simplicité moderne. Il comportait de grandes icônes – et aucun moyen clair de faire plus que de cliquer sur des icônes. Les utilisateurs de bureau l’ont détesté.
• Il y avait un tas de fonctionnalités et d’options utiles que la plupart des gens ignoraient, cachées dans la sous-navigation. Windows 8 pouvait en fait faire de nouvelles choses intéressantes – mais peu de gens savaient que c’était possible, car ce n’était pas visible.
• Les utilisateurs ne savaient pas comment faire ce qu’ils voulaient. Les menus et les boutons ont été évités au profit d’images gonflées d’icônes d’applications. Des fonctionnalités communes telles que le menu Démarrer, le panneau de configuration et la recherche de fichiers ont été soudainement déplacées vers des emplacements non standard. Des milliers de personnes se sont tournées vers Google chaque mois pour savoir comment faire des choses simples comme éteindre leur ordinateur et lancer une recherche. C’est RIDICULE.

Un petit échantillon de personnes demandant à Google de les aider à naviguer dans un produit Microsoft. Aussi intéressant : Windows 7 a toujours eu plus bas recherche ces termes malgré 4-5x le nombre d’utilisateurs actifs.

Nous voici maintenant, trois ans plus tard, en train de regarder le Web passer de Windows 8 à ses utilisateurs. Les menus sont réduits en petits hamburgers sur le bureau. Ne fais pas ça ! Vous aliénez les utilisateurs de votre ordinateur de bureau, tout comme Windows 8 l’a fait. Les utilisateurs doivent cliquer deux ou trois fois au lieu d’une seule fois pour trouver ce dont ils ont besoin dans votre menu. Et ne vous leurrez pas : vous n’êtes pas Windows. Personne ne demandera à Google comment utiliser la navigation de votre site. Ils vont juste regarder le résultat numéro deux.

Regardons un exemple de l’erreur de Windows 8 sur le Web. Allons gros. Allons Honda.

C’est ce qui se passe lorsque vous prenez une tendance en matière de design et que vous essayez de la forcer sur votre site d’entreprise sans penser aux utilisateurs ni à la raison pour laquelle ils viennent sur votre site. Que vend ce site ? Rêves? Des nuages? Images d’archives ? Le texte de la page pourrait être placé sur presque n’importe quel site d’entreprise dans le monde. Honda a opté pour Windows 8 complet sur son site d’entreprise.

A part: Je m’en prends à Honda parce que je sais qu’ils peuvent prendre une raclée ici et continuer à courir – tout comme mon CR-V (que j’adore).

Je ne suis évidemment pas un fan du menu de navigation de style mobile en expansion sur le bureau, mais Honda m’a époustouflé avec un désordre trop compliqué d’un menu.

Je comprends que l’entreprise fabrique des moteurs, des bateaux et des pièces d’avions majeurs. Avoir beaucoup de parties dans votre entreprise ne signifie pas que chaque partie mérite une importance égale. Honda doit prendre du recul et demander ce que les utilisateurs veulent lorsqu’ils accèdent au site, et se rendre compte qu’il est impossible de servir toutes les intentions, surtout si elle veut conserver sa conception simpliste.

Qu’en est-il de la concurrence ?

Toyota et d’autres concurrents savent plus les utilisateurs qui visitent le site souhaitent consulter les options automobiles ou trouver un concessionnaire. Honda et Toyota ont toutes deux des sites de course et les deux sociétés vendent des moteurs industriels. Mais Toyota comprend que la plupart des utilisateurs qui atterrissent sur Toyota.com veulent la marque grand public, et que les passionnés de course rechercheront plutôt “Toyota racing” sur Google. Il y a aussi un lien vers le bas dans le pied de page.

L’exception à la règle d’éviter ce que j’appelle la conception uniquement mobile pourrait être une entreprise de conception. Voici le site de Big Spaceship. C’est une agence de design qui en sait plus que moi sur la conception de sites Web. C’est un excellent site, et il va probablement leur rapporter des ventes. Fais ne pas copiez-les. N’imitez pas le site Web d’une agence de design, sauf si vous êtes une agence de design. Je te parle, Honda.

Lorsqu’un utilisateur visite le site d’une entreprise de design, il souhaite voir les compétences de l’entreprise. Les agences de conception comme Big Spaceship sont avisées de présenter et de vendre immédiatement aux utilisateurs leurs capacités de conception. Essentiellement, la page d’accueil agit comme une pleine page coup de produit et page de vente.

J’ai vu des agences de référencement/conception/marketing créer des sites Web essentiellement conçus uniquement, puis je me demande pourquoi personne ne s’intéresse à leurs services de référencement. J’ai vu des entreprises de produits utiliser un logo + un menu hamburger + une mise en page massive d’images de produits et avoir des problèmes pour vendre autre chose que le produit présenté dans la première image. C’est ce que vous obtenez pour copier les enfants cool.

Cela n’a de sens que de Afficher une chose si vous seulement fais une chose. Un bon design dans le cas d’Amazon est très différent. Amazon a des millions de produits, et ils ne veulent pas que les gens cliquent sur les catégories, choisissent les mauvaises et se perdent ou soient frustrés. La fonction de recherche est essentielle avec un méga-site : ainsi la barre de recherche pas si jolie sur chaque page Amazon.

Alignez les intentions de vos utilisateurs avec les éléments de navigation et le contenu de la page de destination. Montrez-leur comment parcourir ou rechercher vos produits et services sans les faire cliquer inutilement. Gardez les éléments navigables à un niveau gérable et assurez-vous d’avoir un chemin de clic simple vers les choses que les gens veulent faire sur votre site. Regardez comment Medium aligne l’intention avec le design.

La simplicité fonctionne pour les publications moyennes : l’utilisateur veut pour lire le message sur lequel ils ont atterriet la conception du site est centrée sur lire le message. Medium attendra de vous faire lire ou partager plus jusqu’à ce que vous ayez fini de lire. La plupart de ces appels à l’action se trouvent au bas de l’article. Regardez maintenant la page d’accueil.

Intelligent. Quand quelqu’un atterrit sur un message, il veut lire le message. Alors montrez-leur la publication ! Lorsqu’une personne arrive sur la page d’accueil, ses intentions varient. Donnez-leur des options qui ne sont pas cachées derrière un menu hamburger. Montrez-leur ce qu’ils boîte fais.

Déterminez ce que vos utilisateurs veulent savoir ou voir, et mettez ces éléments en évidence sur le site. Ne copiez pas aveuglément la conception Web, ou vous risquez de suivre Windows 8 en aliénant vos principaux utilisateurs, en particulier sur le bureau.

Alors, comment savez-vous ce que vos utilisateurs veulent voir ?

1. Exécutez des sondages sur la page

L’une des meilleures façons de comprendre ce que les gens recherchent est de leur demander. N’ennuyez pas continuellement les gens avec des popups, mais si vous débutez, cela vaut la peine de rassembler les informations à l’avance. Demandez aux gens ce qu’ils recherchent lorsqu’ils visitent votre site. Nous utilisons Qualaroo, mais il existe de nombreux outils simples qui peuvent être mis en œuvre rapidement.

Si vous savez déjà ce que les gens recherchent, vous devez vous assurer que vous savez quelles sont leurs principales considérations pour l’achat. Le prix compte-t-il plus pour eux que la puissance ou la qualité ? Si le prix compte le plus pour vos acheteurs, le prix doit figurer en bonne place dans la conception.

2. Utilisez des tests fractionnés pour comprendre l’intention

Il existe de nombreuses raisons d’exécuter des tests fractionnés, et l’accent doit généralement être mis sur la conversion. Le problème est que parfois nous nous concentrons exclusivement sur quelle version converti mieux, et oublier de demander pourquoi.

Nous utilisons Optimizely, et c’est génial. Nous gardons également un journal des résultats des tests avec notre hypothèse de pré-test, les pages testées, un lien vers les résultats et pourquoi nous pensons qu’il a gagné. Ensuite, nous essayons de réfléchir aux implications si nous avons raison dans notre conclusion.

• Où d’autre pourrions-nous commettre l’erreur de la version perdante ?
• Quelles autres pages sont impactées si nous avons raison sur ce que veulent nos utilisateurs ?
• Y a-t-il du contenu que nous pouvons créer pour résoudre les problèmes des utilisateurs ? Manque-t-il des pages clés ou des explications ?

Il est un peu dangereux de trop appliquer les conclusions d’un seul test sur l’ensemble du site, ce qui conduit généralement à plus de tests. Après trois ou quatre tests, vous serez peut-être prêt à apporter des modifications modérées sans exécuter de test fractionné, ce qui vous permettra de passer au prochain gros test.

3. Examinez les segments du marché

Essayez de déterminer où se situent mentalement vos utilisateurs en examinant les segments du marché. Ne confondez pas les segments du marché avec ce que les utilisateurs essaient d’acheter. Au lieu de cela, utilisez-le pour comprendre ce que l’utilisateur a regardé d’autre. Voici un site sur lequel nous travaillons, par exemple :

Alors qu’est-ce que cela me dit sur notre site de services à domicile ? Quel est le point commun entre l’immobilier, l’emploi, les hôtels, les voitures neuves et les meubles de maison ? Ce sont toutes les choses dont les gens ont besoin s’ils sont en mouvement. Si nous sommes intelligents, notre site devrait avoir des options de messagerie et de navigation clairement destinées aux personnes qui déménagent. Peut-être que déplacer des guides serait une bonne idée de contenu. Ce sont toutes des opportunités qui passent inaperçues si nous nous concentrons uniquement sur ce que les gens veulent acheter.

Certains sites reviennent aux sites mobiles, et ce n’est pas grave

Il a été dit que Google “aime” la conception réactive et récompensera les sites réactifs avec des classements de recherche plus élevés. Je ne suis pas d’accord sur ce deuxième point. Google aime les sites qui donnent à l’utilisateur ce qu’il veut, quelle que soit la technologie utilisée.

Oui, Google a conseillé conception réactive. Moi aussi, mais je le fais parce que c’est de loin l’approche multi-appareils la plus simple à entretenir et la plus difficile à gâcher complètement. Cela ne veut pas dire que c’est le seul moyen, et cela ne ne pas Cela signifie que Google pénalisera un site pour avoir fourni une expérience mobile supérieure d’une manière différente.

Les sites mobiles présentent de nombreux avantages. Sur certains sites, l’intention et le comportement des utilisateurs mobiles sont suffisamment différents de ceux des utilisateurs de bureau pour justifier la création d’une expérience spécifique aux mobiles. Il est également compatible avec l’objectif d’un site à chargement rapide.

Les sites réactifs sont généralement beaucoup plus lents à charger, selon un rapport de The Search Agency.

Vous pouvez et devrait rendez votre site rapide avec responsive, mais il existe une foule de raisons pour lesquelles la plupart des sites responsive finissent plus lentement sur mobile. Les sites à service dynamique et les sites mobiles se prêtent naturellement à la construction dans un souci de rapidité. Un site spécifique aux mobiles peut également offrir une expérience idéale pour l’intention de l’utilisateur à ce moment-là.

En juillet dernier, Cindy Krum a parlé de “l’intention mobile” lors de sa présentation Mozcon. Cela peut sembler un mot à la mode, mais il est vrai que les utilisateurs mobiles sont dans une situation différente. Ils ne cherchent pas à comparer autant. Ils veulent soit acheter rapidement, soit obtenir rapidement des détails sur le produit.

Si vous envisagez de créer un site mobile, assurez-vous que beaucoup de personnes sont prêtes à le créer correctement. et le maintenir. Ne sous-estimez pas le temps de développement qu’il faudra pour que l’ensemble du site fonctionne. Vous aurez besoin de SEO qui savent configurer les balises rel et, idéalement, s’assurer que le site mobile a une structure d’URL identique. Vous aurez besoin de beaucoup de QA pour vous assurer que tous vos types de pages sont correctement servis.

Certains référenceurs diront qu’un sous-domaine ou un sous-dossier mobile est pire pour le référencement car les liens vers l’un ne compteront pas comme des liens vers l’autre. Absurdité! C’est à cela que servent les balises rel=”canonical” et rel=”alternate”. Tout comme s’inquiéter de la redirection non-www 301 vers la version www, ce sont des choses qui ont fait une grande différence à un moment donné, mais qui ne sont plus aussi importantes qu’elles l’étaient. Google est assez intelligent pour comprendre ce qui se passe – à moins que vous ne les implémentiez pas correctement.

La conception réactive est toujours une meilleure option pour la plupart des entreprises, mais il n’y a aucune raison d’être dogmatique à ce sujet. Il y a une raison pour laquelle Google vous propose trois options. Un site mobile peut fonctionner pour les grandes entreprises et constitue souvent la meilleure option pour les méga sites de commerce électronique.

Le développement Web continue d’évoluer – y compris les bibliothèques JavaScript

L’utilisation de JavaScript est un endroit où les référenceurs sont souvent coupables de donner des conseils datés. Le référencement devrait permettre à un contenu de qualité d’apparaître à plus de personnes dans plus de recherches. Le référencement ne doit pas être utilisé pour limiter des outils de création de contenu utiles, sauf en cas d’absolue nécessité.

La sagesse traditionnelle du référencement a toujours été d’éviter de mettre du contenu dans JavaScript que nous voulons que les crawlers voient. C’est un conseil obsolète pour les sites Web en 2015. Les bibliothèques comme React et Angular peuvent être des outils incroyables. Ils regorgent de fonctionnalités, sont amusants à utiliser et peuvent rendre votre site Web plus rapide et plus réactif.

Si Google veut récompenser une expérience utilisateur positive, et si JavaScript peut aider les propriétaires de sites à offrir une expérience utilisateur exceptionnelle, alors les référenceurs devraient embrasse JavaScript. Plutôt que de faire pression contre tout JavaScript sur le site, il est temps d’être un peu plus sophistiqué dans notre approche de aider l’équipe utilise correctement ses outils.

React et Angular peuvent certainement rendre votre contenu dynamique plus amusant à utiliser, mais ils font également un usage intensif de l’exécution côté client de type AJAX, que Google ne comprend pas vraiment (encore). Les développeurs et les référenceurs doivent savoir comment le faire fonctionner.

Rendre AJAX compatible avec Google pourrait être son propre message. En fait, il y a déjà plusieurs bons articles. Google propose également d’excellents guides – assurez-vous également de vérifier les ressources liées. Un petit avertissement : il y a beaucoup d’informations obsolètes sur le sujet.

• Google : Guide de l’exploration AJAX pour les webmasters et les développeurs
• Google : FAQ AJAX
• Google : Rendre les applications AJAX explorables
• Built Visible: Les bases du référencement du framework JavaScript dans AngularJS (également bon pour d’autres frameworks)

Vous pouvez contourner une grande partie du SEO technique en utilisant des choses comme Prerender ou V8. Essayez de trouver un outil qui générera automatiquement une version explorable lors de l’utilisation d’AJAX. Communiquez avec vos développeurs pour trouver une solution qui fonctionne avec votre configuration.

Un exemple humble

Comme je l’ai dit, il est important de s’assurer que vous communiquez avec les développeurs avant le début de la construction. Je vais utiliser une expérience récente douloureuse comme exemple. Nous venons de créer un outil basé sur la réaction qui aide les débutants à estimer la vitesse Internet dont ils ont besoin. Il a immédiatement redirigé tous les visiteurs vers une URL avec un hashtag et le reste de l’enquête est derrière un hashtag. Et aucun texte ne peut être exploré sans exécution côté client.

Oops.

Nous avons construit un outil génial, puis l’avons caché à Google. Que quelqu’un vire le gars qui a raté ça… mais ne dis à personne que c’était moi. Nous avons utilisé React.js ici, et c’était génial. Nous avons également reçu d’excellents commentaires des utilisateurs. La leçon ici est de ne pas éviter React et AJAX. La leçon ici est de communiquer tôt les exigences SEO aux développeurs. Le correctif sera bientôt fait, mais cela a pris beaucoup plus de temps que si j’avais fait preuve de diligence raisonnable au préalable.

Comprendre la mise en œuvre de JavaScript compatible avec Google est le travail de chaque SEO. Les autres spécialistes du marketing numérique devraient au moins être conscients qu’il existe un problème potentiel et une solution technique.

J’aime les outils interactifs qui sont rapides et utiles. Les référenceurs devraient faciliter la construction de choses géniales. Cela signifie aider à trouver des solutions plutôt que de faire pression contre tout un ensemble d’outils largement utilisé sur le Web moderne.

N’oubliez pas À propos des applications indexables

Google peut désormais indexer et classer les applications, et ils ont des directives décentes sur la façon de le faire. Il est possible que les entreprises basées sur des applications avec une clientèle exclusivement mobile n’aient même pas besoin d’un site Web traditionnel.

La plupart des entreprises voudront toujours créer et maintenir des sites Web, mais soyez ouvertes à l’idée qu’un site réactif pourrait ne pas être la meilleure option pour un petit développeur de jeux mobiles. La bonne option pourrait plutôt être d’ajouter des liens vers le contenu et la discussion, puis de prendre en charge les liens profonds dans l’application.

Même si l’application uniquement n’est pas la bonne option, considérez que le contenu des applications pourrait être un support plus attrayant pour les personnes qui ont déjà installé l’application. Par exemple, un forum de discussion pour les joueurs du jeu pourrait mieux fonctionner dans l’application de jeu elle-même. Cela pourrait certainement sembler plus engageant et immersif si les utilisateurs n’avaient jamais à quitter l’application pour poser une question ou une diatribe à un autre utilisateur sur la dernière mise à jour.

Dernières pensées

Un site peut sembler génial lorsque vous réduisez et agrandissez la fenêtre tout en présentant le design à la suite c, mais si les vrais décideurs, les utilisateurs, ne savent pas ce qu’est un menu cheeseburger, vous n’allez pas vendre très de nombreuses photos de stock de la terre. La conception réactive est une excellente option – souvent la bonne option – mais ce n’est pas la seule option. J’espère que cet article pourra vous aider à réfléchir à la manière de bien réagir.

Je ne dis absolument pas que responsive est mort. Ce que je veux dire, c’est que si nos conseils dérivent vers la conception et le développement, nous devrions être en mesure de donner des conseils plus concrets. Ne vous contentez pas de créer des sites Web qui répondent à la taille de l’écran. Créez des sites Web qui répondent immédiatement aux besoins de vos clients.