Une page de destination efficace est essentielle au succès d’un produit
Le marketing est un concept étranger à la plupart designers et développeurs . Nous excellons dans le développement de produits et les défis techniques, mais lorsque vient le temps de promouvoir un produit, nous ne sommes pas très avertis.
Mais le marketing est essentiel au succès d’un produit et il ne doit pas être négligé. C’était le défi que j’avais conçu et préparé pour lancer le clavier mondial pour les développeurs, le Clavier de piratage ultime .
La photographie de produits haut de gamme est un élément crucial des pages de destination du commerce électronique.
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écisif. Ensemble, nous avons entrepris 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 du page de destination ultime pour le clavier de piratage ultime .
Conseils techniques. Étapes pratiques en avant.
Une recherche Google sur la «conception de la page de destination» conduit à 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 l'audience du site.'
- et 'Incluez un formulaire pour recueillir des prospects.'
Ce sont des points utiles, mais il y a plus de facteurs à 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 les technologies qui fonctionnent dans les coulisses.
En fin de compte, l'objectif de ce guide est d'économiser 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 des vidéos sur le Web est plus facile que jamais, mais relativement peu de sites l'utilisent. Du point de vue du Web, ce n’est pas un défi technique, mais un investissement en ressources, en temps et en argent.
La vidéo de la bande-annonce de la page de destination pour l'Ultimate Hacking Keyboard (UHK) a subi douze itérations, chaque nouvelle version affinant progressivement chaque petit détail. La procédé de design était épuisant mais enrichissant, et la vidéo de la bande-annonce est le joyau de notre page de destination. Cela différencie complètement notre produit du reste du pack.
programmes c++ amusants
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; dans le cas contraire, votre produit peut être stocké avant même qu'il ne décolle du sol.
Si vous ou un autre designer sur votre équipe a les compétences et l'équipement, 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:
Lequel des outils suivants est le mieux adapté pour visualiser les données ?
Youtube est le leader incontesté du marché et synonyme de vidéo sur le Web. C’est un service performant 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é au 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é regardées, ignorées et revisitées.
Finalement, l'équipe UHK a décidé que Vimeo répondait le mieux à nos besoins. Voici notre bande-annonce de la page de destination: Clavier de piratage ultime
L'animation 3D est un excellent moyen de démontrer la fonctionnalité d'un produit.Il est également intéressant de noter que nous avons plongé dans Vimeo Interface de programmation d'application (API) pour aider notre vidéo à mieux capter l'attention des visiteurs de la page de destination. En utilisant API JavaScript de Vimeo , nous avons fait vibrer les boutons «Je veux un» sur notre site trois fois de suite 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
Il est parfois important de proposer aux visiteurs de la page de destination une expérience immersive. Nous voulions que nos visiteurs puissent explorer l'Ultimate Hacking Keyboard en 3D, nous avons donc dû étudier les services WebGL créés spécifiquement à cet effet.
Sketchfab est le service WebGL le plus populaire. Il est facile à maîtriser, fournit un éventail de paramètres visuels et peut être intégré dans 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 un support limité pour certaines textures haute résolution.
Après mûre réflexion, nous avons choisi Sketchfab. Voici à quoi ressemble le clavier de piratage ultime 3D .
Visualisez les problèmes et les solutions avec des animations 2D
L'un des principaux avantages de l'Ultimate Hacking Keyboard est qu'il réduit considérablement les mouvements de la main. L'équipe voulait visualiser cela sur notre page de destination en affichant une animation de l'UHK fonctionnant côte à côte avec un clavier ordinaire. La mise en œuvre n’a pas été aussi simple qu’il y paraît.
L'utilisation d'une vidéo intégrée semblait exagérée et 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 aux graphiques de nos mains de se déplacer indépendamment des autres graphiques de la page.
Créer notre animation de page de destination de cette manière a pris plus de temps que prévu. Nous avons dû parcourir des problèmes multi-navigateurs, des bogues de bibliothèque JavaScript et d'autres défis techniques imprévus juste pour créer une animation simple. Cependant, le résultat final est plutôt joli et s'est avéré qu'il valait bien le travail supplémentaire.
Un mot au sage - ne sous-estimez jamais le nombre de choses qui peuvent mal tourner!
obtenir un élément par classe angularjs
Mesurer les analyses en temps réel
Google Analytics est génial. Il est largement utilisé et facile à utiliser. 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 sommes en mesure de rejoindre rapidement la conversation en cours.
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 fonction de carte thermique impressionnante qui révèle où les visiteurs cliquent sur un site. En fonction 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 uniques, 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’information est le plus précieux à des fins de marketing.
Consigner les erreurs et éviter les maux de tête inutiles
Les sites Web dépendent de plus en plus 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 de destination Ultimate Hacking Keyboard est déclenchée par le code JavaScript.
Lors de la mise en œuvre de la fonctionnalité d'abonnement, nous l'avons testée sur les principaux navigateurs et nous étions 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 fonctionnalité d'abonnement à la page de destination ne fonctionnait pas.
comment vérifier une fuite de mémoire
Il s'est avéré que le visiteur en question utilisait Adblock Plus dans son mode le plus strict, ce qui a bloqué 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. Ainsi, 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. L'équipe a pensé que nous devrions utiliser le gestionnaire d'événements global window.onerror pour détecter et consigner ces erreurs. Ensuite, nous avons cherché des services de journalisation appropriés et avons fini par choisir Erreur .
Errorception est incroyable car elle 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 permet à l'administrateur du site de visualiser les erreurs individuelles et d'enquêter sur les traces de pile. Mieux encore, il en offre pour votre argent.
Depuis l’intégration d’Errorception, nous avons résolu une douzaine de bogues, dont certains étaient improbables et inattendus. Par exemple, nous avons reçu une fois un localStorage erreur associée et a découvert que lorsque Safari est en mode de navigation privée, localStorage.setItem() entraîne une erreur .
Il est impossible de prendre en compte tous les cas d’erreurs aberrants. La journalisation est donc un excellent moyen de capturer les failles avant qu’elles ne deviennent des maux de tête majeurs.
Concevoir un processus de construction nécessitant peu d'entretien
Au départ, la page d'index UHK a commencé comme une seule page HTML hébergée dans WordPress, et elle contenait tous les CSS , HTML et code JavaScript. Au début, c'était une solution réalisable, mais à mesure que la page se développait, elle 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 un certain nombre de fichiers séparés. 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.
Optimisez toujours les performances
L'équipe UHK sait par expérience que les performances du site Web sont cruciales, comme à l'époque où notre page de destination était Slashdotted et nous avons reçu 260 visiteurs simultanément. Heureusement, notre VPS Linode à 20 $ par mois a fonctionné comme un champion, mais cela nécessitait plus qu'une chance aveugle, alors voici quelques conseils pour améliorer les performances:
- Le chargement paresseux des images est votre ami, surtout si votre page, comme la nôtre, contient beaucoup d'images. Nous utilisons WordPress Dévoilez Lazy Load brancher.
qu'est-ce qu'un directeur financier et que font-ilsLe chargement des pages de destination contenant beaucoup d'images peut prendre beaucoup de temps. Les techniques de chargement paresseux augmentent la vitesse en révélant les images de manière conditionnelle, comme lorsqu'elles apparaissent dans la fenêtre d'un navigateur.
- Vous pouvez également charger des actifs paresseux. Si une section d'une page dépend d'un script supplémentaire, il est possible de la charger différemment lorsqu'elle pénètre dans la fenêtre. Vérifiez la visibilité de la fenêtre avec plugin jQuery inview et chargez le script avec jQuery.getScript () ou tout autre chargeur de script.
La conception de la page de destination est une discipline de conception vitale
Nous en avons évoqué plusieurs conception de page de destination problèmes dans cet article, résumons donc les points les plus importants:
- Allez au-delà du contenu textuel et incluez des médias riches tels que 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 les autres.
- Utilisez des analyses en temps réel pour pouvoir réagir rapidement aux pics de trafic soudains et rejoindre la conversation en cours.
- Consignez 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 reste performant même sous les charges de trafic les plus élevées.
Comme pour toute discipline de conception, la conception de pages de destination nécessite un engagement continu à apprendre 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 de pages 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 est principalement motivé par le fait de poser les bonnes questions et de gérer 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 de tout nouveau plan marketing de marque ou de produit. Dans notre monde axé sur le Web, une page de destination bien conçue a la capacité de créer des abonnés, 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.
Comprendre les bases
Pourquoi avez-vous besoin d'une page de destination?
Les pages de destination efficaces augmentent les taux de conversion et aident les marques et les entreprises à communiquer rapidement la valeur de leurs produits aux consommateurs.
Qu'est-ce qu'un taux de conversion en SEO?
Les conversions sont des événements mesurables qui se produisent lorsqu'un visiteur effectue une interaction souhaitée sur un site Web via des publicités, des formulaires de contact, des abonnements, des achats, etc. Un taux de conversion en SEO mesure le nombre de visiteurs du site Web divisé par le nombre d'interactions souhaitées sur un montant donné de temps.
Comment calculez-vous un taux de conversion?
Prenons l'exemple suivant: Si une page de destination compte 100 visiteurs par jour et que 20 visiteurs remplissent un formulaire de contact, le taux de conversion du formulaire de contact peut être trouvé en divisant le nombre de formulaires remplis (20) par le nombre de visiteurs de la page de destination (100). 20 ÷ 100 = 20% de taux de conversion
