Les pages de tournée sont l’un des composants les plus importants des sites Web proposant des applications et / ou des services. La page de la tournée est souvent l'endroit où les utilisateurs intéressés prennent la décision ferme de s'inscrire ou passent à autre chose.
Inutile de dire que le concepteur doit faire preuve de beaucoup de pression pour réussir! Ne craignez pas cependant, de nombreux designers talentueux vous ont précédé et nous pouvons en apprendre beaucoup en consultant leurs exemples. Nous allons plonger dans les pages de visites de géants comme Mozilla, 37Signals et Mint.com et voir quels trucs communs ils utilisent tous pour gagner des conversions.
C'est plus dur qu'il n'y paraît
Vous l'avez fait, vous vous êtes disputé avec cette page d'accueil toujours insaisissable. Ils sont intéressés par votre site et veulent en savoir plus. Vous pensez être au clair, mais un nouveau défi vous attend. Vous avez maintenant une chance de les convaincre que vous pouvez tenir les promesses de la page d'accueil, que votre application fait ce que vous aviez dit et plus encore que ce que tout le monde fait.
Vous concevez une page de tournée. C'est une tâche trompeusement simple. Vous ferez bien de ne pas la parcourir sans conviction, mais de passer du temps à en faire la meilleure page possible. C’est là que les utilisateurs potentiels commenceront vraiment à se faire une idée de votre service et vous ne voudrez pas vous tromper de cette première impression importante. Jetons un coup d'œil à quelques exemples en direct de designers qui vous ont précédé pour voir ce que nous pouvons apprendre.
Menthe.com
La menthe est l'un de mes services préférés sur le Web. Non seulement est-il extrêmement utile pour le suivi de chaque centime que vous dépensez, il s'avère également extrêmement attrayant du point de vue de la conception. Étant donné que leurs concepteurs sont si talentueux, je me suis dit qu'ils pourraient probablement nous apprendre quelque chose sur le sujet d'aujourd'hui. Voici un aperçu de la page de la tournée:
Organisation du contenu
La première chose que je remarque à propos de cette page est qu’elle a un tonne de contenu. Vous ne voulez pas surcharger vos visiteurs d'informations si vous disposez d'un service relativement simple, mais un problème financier tel que Mint soulève de nombreux signaux d'alarme auprès de personnes qui, à juste titre, hésitent à donner à un site Web accès à leur compte bancaire. À la lumière de cela, Mint est très transparente sur tous les aspects du service avant de vous inscrire.
C'est un concept important. Si votre service a des raisons qui donneraient aux visiteurs une pause lorsqu’ils songent à s’inscrire, la page de la visite est votre chance d’expliquer ces problèmes en détail en faisant preuve de franchise, d’honnêteté et de sécurité pour votre produit.
Une autre grande chose que Mint comprend bien est l’organisation du contenu en petits morceaux digestibles et bien organisés. Plutôt que de tout mettre dans une page d'un kilomètre, ils ont mis en place une sorte de commutateur de contenu AJAX qui met à jour la colonne de droite lorsque vous choisissez un sujet.
Présentation à contenu fort
Une autre chose qui frappe vraiment la menthe est la présentation de leur contenu. Prenez note de cela car beaucoup de gens se trompent: des titres courts, simples et simples, associés à des captures d’écran claires et attrayantes et un texte d’appui bref mais descriptif. Voici à quoi cela ressemble en action:
Remarquez la copie ici, elle est brève et précise tout en vous indiquant ce que vous devez savoir. Découvrez également comment la capture d'écran se concentre sur la partie importante, cette astuce de loupe est très courante dans la conception web en ce moment.
La menthe a un autre tour dans son sac. Lorsque les captures d'écran peuvent ne pas suffire, elles ajoutent des indices visuels supplémentaires. Dans la capture d'écran ci-dessous, le titre d'un budget est renforcé par la lecture instantanée d'une tirelire entourée d'une ceinture pour indiquer les budgets:
La capture d’écran aurait pu le faire elle-même, mais les graphiques sont un peu vagues et n’ont donc pas été lus instantanément. Le cochon est peut-être ringard et prévisible, mais il permet de pousser cette conception là où elle doit être.
Camp de base
Laissons Mint derrière et regardons une autre page de tournée bien conçue. Les gens de 37signals sont connus pour leur style simple et épuré, qui ne sert que ce dont vous avez besoin et rien de plus. Voici une photo de la page de la tournée pour leur application Basecamp.
Différent, mais pareil
Notez deux aspects importants de cette page à la lumière de l'exemple précédent. Premièrement, le style est très différent de celui de la menthe. Cependant, les pages sont en fait incroyablement similaires. Notez les petits morceaux de contenu organisés par un commutateur de contenu à gauche, des captures d'écran, des titres puissants, des indices visuels supplémentaires pour aider les captures d'écran, même le style de mise en page précédent est presque identique à celui que nous avons vu sur Mint.
C'est une chose très importante à apprendre en tant que designer: les modèles de design existent indépendamment du style de design. La menthe a une apparence très brillante et finie avec beaucoup de brillance et de réflexion tandis que Basecamp est très plat dans sa simplicité semblable à celle de Google. C’est simplement le revêtement de bonbons, c’est le cadre essentiel d’une mise en page solide qui facilite la lecture du contenu.
Creuser plus profond
Une fois que vous avez consulté la présentation des fonctionnalités de Basecamp, vous pouvez les voir en action en cliquant sur les petits liens vidéo dispersés sur toute la page. Je suis un con pour une bonne vidéo de produit et je pense que cela aide vraiment à garder votre contenu bref et précis tout en offrant le regard en profondeur dont certains visiteurs ont besoin.
N'oubliez pas que Basecamp est fier de la simplicité et de la simplicité de ses fonctionnalités. Par conséquent, si Basecamp n'est pas trop élémentaire pour les vidéos de démonstration de produits, votre site ne l'est pas non plus. Les applications de capture vidéo sont très abordables et faciles à utiliser. Quel que soit votre budget, il n'est pas difficile d'organiser des tournées vidéo de qualité professionnelle.
Mozilla repense la page de visite
Le format de base que nous avons vu pour les deux dernières pages de la tournée est assez courant.Vous pouvez voir des tactiques presque identiques utilisées sur des dizaines de sites d'applications Web. Consultez les pages de visite pour Checkout App et Campaign Monitor et vous verrez que ce même commutateur de contenu aligné à gauche est utilisé conjointement avec de brèves listes de fonctionnalités, associées à des captures d'écran et des icônes.
Il y a une raison pour laquelle ce format est si largement utilisé: cela fonctionne. Chacune de ces pages est capable de conserver sa propre identité tout en partageant des techniques éprouvées avec ses frères. Cependant, cela ne signifie pas nécessairement que les règles de la page de visite sont écrites dans la pierre ou que nous avons atterri sur la meilleure solution possible pour tous les sites.
Mozilla est un exemple d’entreprise qui décide souvent de sortir des sentiers battus. Leur talentueuse équipe de concepteurs a décidé d'abandonner le format de page de tournée commun et de tracer leur propre chemin. Le résultat est un aperçu amusant, interactif et incroyablement simple du navigateur:
Nous voyons ici une capture d'écran du navigateur avec un tas de marqueurs placés dessus. Les instructions sont simples et peuvent être lues en une seconde: «Survolez les marqueurs ci-dessous pour obtenir des informations sur les fonctionnalités». En suivant ces conseils, vous verrez de plus près les caractéristiques importantes.
J'aime à quel point cette méthode est directe, elle explique les fonctionnalités de l'application non pas à travers des icônes génériques abstraites et des paragraphes gonflés, mais avec une capture d'écran simple qui indique tout ce que vous devez savoir.
Un mess organisé
Cette méthode de marquage d'une capture d'écran donne un design assez organique. Plutôt qu'un flux prévisible et logique, les marqueurs sont dispersés partout. Il existe cependant une astuce très subtile en matière de conception qui vous permet de voir l'ordre dans le chaos. Pouvez-vous le voir?
Ce petit chemin en pointillé est l’une de ces petites touches de conception qui peuvent vraiment tirer une page. Sans cela, il y a un tas de liens, avec, il y a une progression claire à suivre. Certes, vous n'êtes pas obligé de la suivre à la perfection et je parierais que peu d'utilisateurs le font jamais. Cependant, sa simple présence confère à la page un gain de convivialité léger mais important tout en apportant un semblant d'ordre.
Montrer le processus
Notre dernier tour de conception de page de tournée que vous devriez savoir vient de Big Cartel. Voici un aperçu de la page de leur tournée:
Il y a quelque chose de super simple mais incroyablement efficace en haut de cette page, un processus en trois étapes. Parfois, une page de tournée doit être plus qu'une simple vitrine de fonctionnalités. Par exemple, lorsque vous affirmez que votre service simplifie quelque chose de compliqué, comme la configuration d'un magasin en ligne, il est essentiel que vous expliquiez comment cela fonctionne.
Trois est un chiffre magique. Dans la mesure du possible, essayez de décomposer les processus en trois étapes simples et agréables que tout le monde peut comprendre. Il s’agit avant tout de donner à l’utilisateur le sentiment qu’il se sent habilité. Il faut examiner la question et se dire: «Je peux le faire!
Conclusion
Les exemples ci-dessus ont chacun leur propre leçon à nous apprendre. Ensemble, ils brossent un tableau de pratiques de conception de pages de tournée très courantes que vous pouvez mettre en œuvre dans vos projets à venir.
Alors que vous vous lancez dans l'aventure de votre page de visite, souvenez-vous que le Web vous offre une liberté remarquable d'expérimenter pour voir ce qui fonctionne le mieux. Essayez de proposer plusieurs conceptions différentes, puis exécutez des tests A / B pour voir quels utilisateurs répondent le mieux.
Si vous avez créé une page de tournée récemment, laissez un commentaire avec un lien ci-dessous. Quelles techniques avez-vous employées pour assurer le succès? Avez-vous appris quelque chose en expérimentant différentes dispositions et conceptions?