Conception d'une page d'accueil d'application Web: exemples, conseils et informations
Le Web est complètement saturé d'applications qui vous aident à vous connecter à un réseau social, à créer des listes d'épicerie, à gérer de grands projets, à décider qui fera du thé et toutes les autres tâches folles que vous pouvez imaginer.
Avec tout ce concours, comment pouvez-vous convaincre les visiteurs que votre application est l'aiguille proverbiale parmi le foin? Aujourd'hui, nous allons examiner de vrais exemples pour voir si nous pouvons apprendre quelles stratégies imiter et lesquelles éviter.
La page d'accueil de votre application est extrêmement importante
Vous avez passé des tonnes de temps, d'argent et d'efforts à créer une application Web. C'est une entreprise de premier ordre qui, vous en êtes sûr, se développera comme une traînée de poudre. Il n'y a qu'une seule prise, vous devez convaincre les gens de l'essayer.
Quelle que soit la qualité de votre application Web, vous devez toujours avoir de solides tactiques de vente qui finissent par convaincre les gens de cliquer sur le bouton «S'inscrire». Même si le service est entièrement gratuit et offre une tonne de fonctionnalités, vous devez vraiment travailler pour gagner ces conversions.
Ne présumez jamais que, simplement parce qu'un utilisateur a atterri sur votre page d'accueil, il est vraiment intéressé par ce que vous avez à offrir et n'a donc besoin que d'un léger coup de pouce pour aller plus loin. Il y a de fortes chances qu'ils aient suivi un lien avec seulement une vague idée de leur destination et se trouvent dans une phase délicate dans laquelle ils sont susceptibles de se déplacer vers un autre site en quelques secondes si vous ne les tirez pas.
La page d'accueil de votre application Web est l'un de vos outils marketing les plus précieux. Résistez à l'envie de simplement bricoler quelque chose rapidement et faites plutôt de votre mieux. Regardons quelques exemples pour voir ce que nous pouvons apprendre.
Astuce: Gardez la conception simple et le message fort
Notre premier exemple vient d'un nouveau service appelé Kroud. Jetons un coup d'œil à la partie du site au-dessus du pli.
Il y a beaucoup de choses que j'aime dans cette page. Tout d'abord, c'est très simple et ciblé. Cela ne vous submerge pas de déclarations vides sur la façon dont le service changera votre vie, ni ne tourne autour du pot sur ce qu'est le site. Il n'y a rien de pire qu'une page qui ne se définit pas bien. Si je ne peux pas dire ce que fait votre application en cinq secondes, je passe à autre chose.
Kroud cloue vraiment la tâche de relier un service complexe en un message clair qui sert également de puissant appel à l'action: «Créez une page de FAQ interactive en quelques secondes». Cette ligne est l'une des premières choses que je vois lorsque je charge la page et elle transmet immédiatement exactement ce que fait le site.
Le gros bouton
Une autre chose que nous pouvons apprendre de Kroud est que les gros boutons d'inscription en gras sont une bonne chose! Voici le bouton Kroud à sa taille réelle.
Ce bouton est énorme et très clair sur ce qui se passe lorsque vous appuyez dessus: "Démarrer un Kroud", avec le message secondaire, "C'est gratuit!". Remarquez comment ce bouton attire votre attention avec non seulement la taille, mais aussi la couleur. Il est tellement plus brillant que les autres contenus que vos yeux y sont immédiatement attirés.
Astuce: les captures d'écran sont un must!
La page d'accueil de votre application Web a deux objectifs principaux: éduquer les gens sur votre produit et les convaincre de l'essayer. Ce sont les mêmes objectifs que vous voyez dans le marketing et la publicité de presque toutes les entreprises de la planète.
Imaginez une annonce dans un magazine ou un site Web pour une nouvelle Corvette. À votre avis, à quoi ressemblerait cette page? Il existe un million de modèles possibles, mais une chose resterait probablement constante: vous verriez la voiture. Les Corvettes ont un héritage de bon design et elles savent que la meilleure façon de montrer leur dernier exploit est de vous en montrer une photo dans toute sa splendeur. Qui pourrait être convaincu d'acheter une voiture de sport sans même la voir? Ce serait encore plus le cas si la voiture de sport n'était pas une Corvette mais plutôt quelque chose dont personne n'avait jamais entendu parler.
Cela fonctionne comme une métaphore de la page d'accueil de votre application Web. Les applications Web sont un centime et personne n'a jamais entendu parler de la vôtre. À moins que vous n'ayez honte de vos faibles compétences en conception, les gens voudront voir exactement à quoi le service va ressembler avant de prendre le temps de s'inscrire.
Les gens de Freckle le savent bien et ont choisi de compléter leur page avec un tableau de cinq captures d'écran.
Même si de grandes parties de certaines d'entre elles sont couvertes, l'image dans son ensemble vous donne vraiment un aperçu décent de ce à quoi ressemble le service.
Fonctionnalités en tant que captures d'écran
La tendance actuelle dans la conception de pages d'accueil d'applications Web est de montrer les fonctionnalités de votre page d'accueil avec de petites icônes. C'est une excellente idée qui augmente vraiment la valeur esthétique de la page et aide à briser de gros blocs de copie. Voici un exemple de Ballpark Invoicing.
Bien que les icônes soient meilleures que le texte, dans le cas où vous avez vraiment une interface solide, je pense que les captures d'écran peuvent être un élément visuel beaucoup plus fort. Les captures d'écran communiquent directement votre service tandis que les icônes génériques présentent simplement une représentation abstraite de ce que les utilisateurs peuvent s'attendre à voir. Découvrez comment Freckle discute de leurs fonctionnalités.
Voyez comment la messagerie ici est renforcée par une image de ce à quoi cela ressemblera exactement dans l'application? C'est une tendance que je vois de plus en plus récemment et je pense que c'est une bonne qui améliore véritablement l'idée d'icône de la génération précédente d'applications Web.
Comme autre exemple, TodayPulse montre trois de leurs principales fonctionnalités dans une bande horizontale de captures d'écran:
Peeve: pas de captures d'écran
Vous pouvez penser que les captures d'écran sont assez basiques et que personne n'a besoin de ce rappel, mais la vérité est qu'il existe d'innombrables pages d'accueil d'applications Web qui ne vous donnent pas la moindre idée de ce à quoi ressemble réellement l'application.
Même si ces pages sont assez attrayantes, comme Wordfaire ci-dessous, les chances pour moi de l'essayer sont beaucoup moins simplement parce que je ne vois pas d'aperçu.
Le vieil adage «une image vaut mille mots» s'avère vraiment vrai dans ce domaine. Je ne vais tout simplement pas lire les sept paragraphes de texte de la page d'accueil de Wordfaire. J'échangerais au moins cinq d'entre eux pour une capture d'écran sans arrière-pensée.
Astuce: laissez les utilisateurs jouer avec un exemple en direct
Le concept «essayer avant d'acheter» existe depuis l'aube du vendeur. C'est un concept simple qui persistera tant qu'il y aura des produits. Les engagements sont nulles, surtout en cas d'incertitude. En laissant d'abord un utilisateur essayer votre application Web, l'incertitude est supprimée.
Il est extrêmement important de garder à l'esprit que «essayer avant d'acheter» s'applique même aux services gratuits! Cela semble déroutant mais c'est vraiment assez simple. Même un service gratuit me fait perdre mon temps, une ressource que je trouve très précieuse et que je n'échangerai pour rien. L'inscription à un service Web gratuit ressemble toujours à un engagement; celui que je ne veux pas faire, sauf si je suis vraiment sûr que je vais aimer le produit.
Le concept est simple, créez un moyen permettant aux utilisateurs de fouiner et de botter les pneus de votre application sans entrer un seul élément d'information. Nous voyons cela en action ci-dessous pour Pen.io. Il s'agit d'une autre page sans captures d'écran, mais elle est un peu améliorée par l'inclusion d'un lien vers un exemple afin que vous puissiez voir ce que vous obtenez du service.
Encore une fois, c'est génial que Pen.io inclue cela, mais l'exécution est plus forte sur Kroud où le lien vers la page exampe est renforcé par un aperçu.
Peeve: Longues visites
Certaines applications Web vous emmèneront dans une excursion de dix minutes qui explique leur service en détail. Ne vous méprenez pas, les informations sont bonnes et si je paie pour un service, je le veux. Mais un «tour de produit» devrait-il vraiment être aussi intensif en travail?
Si je clique sur un lien qui dit «Faites un tour», ce que je veux vraiment faire, c'est voir l'application. Un exemple vivant comme nous venons de le discuter en beaucoup plus de 2 000 mots expliquant à quoi cela ressemblera lorsque vous atteindrez enfin le point où vous pourrez réellement l'essayer. Certains sites créent même un exemple en direct «intelligent» modifié qui vous guide tout au long du processus. C'est un excellent moyen de laisser les utilisateurs essayer votre service tout en s'assurant qu'ils obtiennent le point et voient ce que vous voulez qu'ils fassent.
Encore une fois, il n'est pas nécessairement mauvais de parler de vos fonctionnalités, mais rappelez-vous qu'il est important de permettre aux utilisateurs d'intervenir et de voir ce qu'ils pensent.
Inclure une vidéo
Une autre idée pour montrer votre application Web en action est d'inclure une courte vidéo directement sur la page d'accueil. Si une image vaut mille mots, alors une minute à 15-30 images par seconde n'a pas de prix! Une vidéo atteint le même objectif que l'exemple et les captures d'écran, seulement elle est plus dynamique que les captures d'écran et une expérience plus structurée qu'un terrain d'essai de forme libre.
Aviary fait un bon travail en montrant un time-lapse de leur éditeur d'image créant une manipulation de photo complexe.
Greplin est l'une de mes implémentations préférées actuelles d'une vidéo de page d'accueil d'application Web. Ici, une vidéo apparaît lorsque vous chargez la page, mais si vous ne démarrez pas la vidéo après quelques secondes, elle se transforme en diaporama de captures d'écran.
Peeve: des dessins animés qui ne montrent jamais l'application
Pour une raison quelconque, la chose cool à faire en ce moment est de rassembler l'une de ces vidéos comme un petit dessin animé amusant. C'est souvent une excellente idée, mais le problème que j'ai, c'est qu'après deux minutes de quelques petites animations ennuyeuses, je n'ai encore pratiquement aucune idée de ce à quoi ressemble l'application!
Les deux vidéos ci-dessous de Minus et Summify en sont de bons exemples. Certes, ils finissent par vous montrer presque une version illustrée de l'application, mais seulement à la toute fin et même alors, c'est un petit aperçu abstrait.
Pensées de clôture: une recette pour réussir
Tous les conseils de cet article visent les deux principaux objectifs de la page d'accueil de votre application Web, dont nous avons déjà discuté: l'éducation et l'attrait. Tout d'abord, éliminez tout l'encombrement de votre conception et réduisez-le aux éléments les plus importants afin que le visiteur puisse se concentrer sur les informations vitales sans distraction.
Dans votre messagerie, faites une déclaration audacieuse sur ce que fait l'application et à qui elle est destinée. Nous n'avons pas beaucoup discuté de ce dernier point aujourd'hui, mais il existe un argument solide qui suggère que vous gagnerez plus de conversions en identifiant clairement votre public cible. Exemple: «MyCoolWebApp aide les concepteurs et les développeurs à organiser les informations client et projet» est mieux que «MyCoolWebApp organise les informations client et projet». Assurez-vous également de signaler toutes les fonctionnalités importantes et pourquoi les visiteurs devraient utiliser l'application.
Une fois que vous avez mis votre message au clair, il est temps de vous concentrer sur la présentation de votre produit à votre public. Trois excellentes façons de le faire sont des captures d'écran (plusieurs si vous pouvez le faire pivoter), des exemples de comptes en direct et des visites vidéo (le genre qui montre réellement le produit). Son objectif est de réduire l'incertitude entourant votre produit. Moins il y a d'incertitude, moins les utilisateurs hésiteront à s'inscrire.
Cela suppose bien sûr que vous ayez un produit de qualité. Si votre interface est boiteuse, alors par tous les moyens, cachez-la au public et respectez plutôt les descriptions ennuyeuses et longues!
