Conception de la page de destination : créer la page de destination ultime

Une page de destination efficace est essentielle au succès d'un produit

Le marketing est un concept étranger à la plupart des concepteurs et développeurs. Nous excellons dans le développement de produits et les défis techniques, mais quand vient le temps de promouvoir un produit, nous ne sommes pas très calés.

Mais le marketing est crucial pour le succès d'un produit et il ne faut pas le négliger. C'était le défi alors que je concevais et préparais le lancement du clavier le plus important au monde pour les développeurs, l'Ultimate Hacking Keyboard.

Heureusement, je faisais partie d'une équipe qui a réalisé l'importance d'une page de destination attrayante, en particulier dans les mois qui ont précédé notre campagne de financement participatif décisive. Ensemble, nous avons décidé de concevoir une page de destination qui capterait l'imagination, générerait des abonnés et préparerait notre produit pour un lancement réussi.

C'est l'histoire de la page de destination ultime pour The Ultimate Hacking Keyboard.

Conseils techniques. Étapes pratiques en avant.

Une recherche Google pour « design de page de destination » mène à des dizaines d'excellents articles, chacun contenant des conseils importants tels que :

• "Le contenu devrait se charger en un clin d'œil."
• "La photographie doit être pertinente pour le public du site."
• » et « Incluez un formulaire pour recueillir des pistes ».

Ce sont des points utiles, mais il y a plus de facteurs pour le succès de la page de destination. Ce guide de conception de page de destination fournira des conseils techniques, mais il offrira également des informations pratiques qui aideront les concepteurs et les développeurs à choisir les bons services tiers et à intégrer des technologies qui fonctionnent en arrière-plan.

En fin de compte, l'objectif de ce guide est de faire gagner du temps et de l'argent aux concepteurs et aux développeurs, qui pourraient autrement être gaspillés en essais et erreurs infructueux.

Visez la production et l'hébergement vidéo haut de gamme

Présenter une vidéo sur le Web est plus facile que jamais, mais relativement peu de sites l'utilisent. Du point de vue du Web, il ne s'agit pas d'un défi technique, mais d'un investissement de ressources, de temps et d'argent.

La vidéo de la bande-annonce de la page de destination de l'Ultimate Hacking Keyboard (UHK) a subi douze itérations, chaque nouvelle version affinant progressivement chaque petit détail. Le processus de conception a été épuisant mais gratifiant, et la vidéo de la bande-annonce est le joyau de la couronne de notre page de destination. Il différencie complètement notre produit du reste du pack.

Gardez à l'esprit que la création de contenu de haute qualité coûte cher. Des professionnels spécialisés peuvent faire briller un produit, mais il est important de comprendre ce que vous pouvez vous permettre ; sinon, votre produit pourrait se remplir avant même de décoller.

Si vous ou un autre concepteur de votre équipe avez les compétences et l'équipement nécessaires, vous pouvez essayer de créer votre propre contenu vidéo, mais gardez les vidéos courtes et simples. Les productions trop ambitieuses entre les mains d'amateurs se passent rarement bien.

L'équipe UHK a opté pour une animation 3D dynamique pour démontrer les fonctionnalités de base du clavier sur notre page de destination. Si une animation 2D est nécessaire (pour une application ou un service Web), ou si des images de caméra en direct sont nécessaires, le processus présentera différents défis.

Une fois qu'une vidéo est réalisée, elle doit être hébergée sur un site Web. Heureusement, il existe de nombreuses options :

YouTube est le leader incontesté du marché et synonyme de vidéo sur le Web. C'est un service capable et un choix raisonnable, mais son lecteur intégré n'est pas l'option la plus esthétique.

Vimeo dispose d'un lecteur intégré avec un design minimaliste assez élégant. Il est connu pour héberger du contenu de qualité et fournir une haute définition supérieure.

Wistia est un autre choix populaire parmi les spécialistes du marketing. Il fournit des fonctionnalités avancées telles que des cartes thermiques vidéo qui montrent quelles parties d'une vidéo ont été visionnées, ignorées et revues.

En fin de compte, l'équipe UHK a décidé que Vimeo répondait le mieux à nos besoins. Voici notre bande-annonce de page de destination : Ultimate Hacking Keyboard

Il convient également de noter que nous avons plongé dans l'interface de programmation d'applications (API) de Vimeo pour aider notre vidéo à mieux capter l'attention des visiteurs de la page de destination. À l'aide de l'API JavaScript de Vimeo, nous avons fait clignoter trois fois de suite les boutons « J'en veux un » sur notre site après la fin de notre bande-annonce. Utilisés correctement, de petits ajustements comme celui-ci peuvent augmenter les taux de conversion des pages de destination.

Créez une expérience immersive avec du contenu 3D

Parfois, il est important de fournir aux visiteurs de la page de destination une expérience immersive. Nous voulions que nos visiteurs puissent explorer le Ultimate Hacking Keyboard en 3D, nous avons donc dû enquêter sur les services basés sur WebGL créés spécifiquement à cet effet.

Sketchfab est le service basé sur WebGL le plus populaire. Il est facile à maîtriser, fournit un éventail de paramètres visuels et peut être intégré à une large gamme de services d'hébergement populaires.

P3d.in est un service WebGL simple axé sur la facilité d'utilisation, mais il a une prise en charge limitée de certaines textures haute résolution.

Après mûre réflexion, nous avons choisi Sketchfab. Voici à quoi ressemble le Ultimate Hacking Keyboard en 3D.

Visualisez les problèmes et les solutions avec des animations 2D

L'un des principaux avantages du clavier Ultimate Hacking est qu'il réduit considérablement les mouvements de la main. L'équipe a voulu visualiser cela sur notre page de destination en affichant une animation de l'UHK travaillant côte à côte avec un clavier normal. La mise en œuvre n'a pas été aussi simple qu'il n'y paraît.

L'utilisation d'une vidéo intégrée semblait exagérée, et cela nécessiterait également un travail supplémentaire de rendu. Les GIF animés n'étaient pas une option en raison de leur taille de fichier énorme et de leur palette de couleurs limitée. En fin de compte, nous avons choisi de travailler avec des animations SVG en ligne car elles permettaient à nos graphiques de se déplacer indépendamment des autres graphiques sur la page.

La création de notre animation de page de destination de cette manière a pris plus de temps que prévu. Nous avons dû naviguer entre les problèmes de navigateur, les bogues de la bibliothèque JavaScript et d'autres défis techniques imprévus juste pour créer une animation simple. Cependant, le résultat final semble assez agréable et s'est avéré valoir le travail supplémentaire.

Avis aux sages : ne sous-estimez jamais le nombre de choses qui peuvent mal tourner !

Mesurer l'analytique en temps réel

Google Analytics est génial. Il est largement utilisé et facile à travailler. Cependant, il existe de meilleurs candidats pour les opérations en temps réel.

Chartbeat fait un excellent travail d'envoi de notifications lorsqu'un site Web dépasse certains seuils, notamment le nombre d'utilisateurs simultanés sur un site. Par exemple, le site UHK est parfois lié à des forums en ligne, générant des pics de trafic soudains. Grâce à Chartbeat, nous savons tout de suite et nous pouvons rejoindre la conversation en cours plus tôt.

Mixpanel aide les administrateurs Web à analyser des événements tels que les visites de sites, l'ouverture d'une boîte de dialogue d'abonnement et la confirmation d'un abonnement. Il peut également créer des entonnoirs à partir de ces événements et visualiser les taux de conversion, rendant ainsi les chiffres exploitables.

Clicky fournit une fonctionnalité de carte thermique impressionnante qui révèle où les visiteurs cliquent sur un site. Sur la base des résultats, des améliorations peuvent être apportées à la mise en page ou au contenu d'un site pour obtenir de meilleurs résultats.

HotJar permet aux propriétaires de sites Web d'enregistrer les interactions de leurs visiteurs en enregistrant chaque action de la souris et du clavier et en les transformant en vidéos.

Chacun de ces services a ses propres caractéristiques et avantages, mais ils fournissent tous des informations précieuses et instantanées sur l'activité des visiteurs d'un site Web. Il appartient aux entreprises individuelles de déterminer quel type d'informations est le plus précieux à des fins de marketing.

Enregistrez les erreurs et évitez les maux de tête inutiles

Les sites Web deviennent de plus en plus dépendants de JavaScript, à tel point que les fonctionnalités critiques du site en dépendent souvent. Par exemple, la boîte de dialogue d'abonnement sur la page d'accueil Ultimate Hacking Keyboard est déclenchée par du code JavaScript.

Lors de la mise en œuvre de la fonctionnalité d'abonnement, nous l'avons testée sur les principaux navigateurs et nous sommes convaincus que nous avions fait tout ce dont nous avions besoin. Plus tard, cependant, nous avons reçu un e-mail d'un visiteur se plaignant que la fonction d'abonnement à la page de destination ne fonctionnait pas.

Il s'est avéré que le visiteur en question utilisait Adblock Plus dans son mode le plus strict, ce qui bloquait le script d'analyse Clicky. Contrairement à d'autres services d'analyse, le code d'intégration de Clicky n'était pas résilient à cet égard, donc lors de la journalisation de l'action d'abonnement et du référencement de l'objet Clicky, le code a généré une erreur.

Après cet incident, nous avons soigneusement réfléchi à la manière d'éviter des situations similaires à l'avenir. Il est apparu à l'équipe que nous devrions utiliser le gestionnaire d'événements global window.onerror pour intercepter et consigner de telles erreurs. Ensuite, nous avons recherché des services de journalisation appropriés et avons fini par choisir Errorception.

Errorception est incroyable car il fait un travail et le fait extrêmement bien : trouver des erreurs JavaScript. Son interface utilisateur est minimaliste et fonctionnelle, le support est excellent et il permet à l'administrateur du site de visualiser les erreurs individuelles et d'enquêter sur les traces de la pile. Le meilleur de tous, il offre un véritable coup pour votre argent.

Depuis l'intégration d'Errorception, nous avons résolu environ une douzaine de bogues, dont certains étaient improbables et inattendus. Par exemple, nous avons reçu une fois une erreur liée à localStorage et avons découvert que lorsque Safari est en mode de navigation privée, localStorage.setItem() entraîne une erreur.

Il est impossible de tenir compte de chaque cas d'erreur aberrant, donc la journalisation est un excellent moyen de capturer les défauts avant qu'ils ne deviennent des maux de tête majeurs.

Concevoir un processus de construction nécessitant peu de maintenance

Initialement, la page d'index UHK a commencé comme une seule page HTML hébergée dans WordPress et contenait tout le code CSS, HTML et JavaScript. Au début, c'était une solution réalisable, mais au fur et à mesure que la page grandissait, cela devenait un fardeau de maintenance et une approche plus modulaire était nécessaire.

Notre solution ? Tout d'abord, nous divisons le code CSS, HTML et JavaScript en plusieurs fichiers distincts. Ensuite, nous avons converti les fichiers CSS en fichiers Less pour rendre la maintenance encore plus facile. Enfin, nous avons conçu un processus de construction pour assembler tous nos petits fichiers.

Toujours optimiser pour les performances

L'équipe UHK sait par expérience que la performance du site Web est cruciale, comme la fois où notre page de destination a été Slashdotted et nous avons reçu 260 visiteurs simultanément. Heureusement, notre VPS Linode à 20 $ par mois a fonctionné comme un champion, mais cela a nécessité plus qu'une chance aveugle, alors voici quelques conseils pour améliorer les performances :

• Le chargement paresseux d'images est votre ami, surtout si votre page, comme la nôtre, contient beaucoup d'images. Nous utilisons le plugin WordPress Unveil Lazy Load.

• Vous pouvez également charger les actifs paresseux. Si une section d'une page dépend d'un script supplémentaire, il est possible de la charger paresseusement lorsqu'elle entre dans la fenêtre d'affichage. Vérifiez la visibilité de la fenêtre d'affichage avec le plugin jQuery inview et chargez le script avec jQuery.getScript() ou tout autre chargeur de script.

La conception de pages de destination est une discipline de conception vitale

Nous avons abordé pas mal de problèmes de conception de pages de destination dans cet article, résumons donc les points les plus importants :

• Allez au-delà du contenu textuel et incluez des médias riches comme des vidéos, des modèles 3D et des animations 2D. Ce type de contenu rend une page de destination plus attrayante et encourage les visiteurs à partager avec d'autres.
• Utilisez des analyses en temps réel pour pouvoir réagir rapidement aux pics de trafic soudains et rejoindre la conversation en cours.
• Enregistrez toujours les erreurs. Il y a beaucoup de choses qui peuvent (et vont) mal tourner, il est donc important de garder une trace.
• Optimisez les performances afin que votre site continue à fonctionner même sous les charges de trafic les plus élevées.

Comme pour toutes les disciplines de conception, la conception de pages de destination nécessite un engagement continu à se familiariser avec de nouveaux outils, techniques et processus. La technologie et les goûts évoluent inévitablement - la pointe d'aujourd'hui est la relique de demain.

Heureusement, la conception d'une page de destination qui communique clairement et captive un public ne dépend pas entièrement de la technologie. Les concepteurs chevronnés savent comment intégrer les derniers outils, mais leur processus de conception repose principalement sur le fait de poser les bonnes questions et de résoudre habilement les problèmes qui menacent de faire dérailler un projet.

En fin de compte, une page de destination attrayante doit être un élément essentiel du plan marketing de toute nouvelle marque ou produit. Dans notre monde axé sur le Web, une page de destination bien conçue a la capacité de créer un public, de générer du buzz et d'augmenter les ventes, ce qui est essentiel à la prospérité continue d'une entreprise en plein essor.