Conception d'une page Web d'application Exemples, conseils et astuces

Le Web est complètement saturé d'applications avec des applications qui vous aident à vous connecter à un réseau social, à dresser une liste d'épicerie, à gérer des projets volumineux, à décider qui fera le thé et à toute autre tâche folle que vous pouvez imaginer.

Avec toute cette concurrence, comment pouvez-vous convaincre les visiteurs que votre application est une aiguille proverbiale parmi le foin? Aujourd'hui, nous allons examiner quelques exemples concrets pour voir si nous pouvons savoir quelles stratégies imiter et quelles stratégies éviter.

La page d'accueil de votre application est extrêmement importante

Vous avez consacré des tonnes de temps, d'argent et d'efforts à la création d'une application Web. C’est une entreprise de premier ordre qui, vous en êtes certain, s’accroche comme une traînée de poudre. Il n'y a qu'un seul problème, il faut convaincre les gens d'essayer.

Quelle que soit la qualité de votre application Web, vous devez toujours disposer de tactiques de vente solides qui finissent par convaincre les internautes de cliquer sur le bouton "s'inscrire". bouton. 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 supposez jamais que, simplement parce qu'un utilisateur a atterri sur votre page d'accueil, il est véritablement 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. Les chances sont, ils ont suivi un lien avec seulement une idée vague de l'endroit où ils se retrouveraient et sont dans une phase délicate dans laquelle ils sont susceptibles de passer sur un autre site en quelques secondes si vous ne les attirez pas.

La page d'accueil de votre application Web est l'un de vos outils de marketing les plus précieux. Résistez à l'envie de bricoler rapidement quelque chose et de déployer tous vos efforts. Regardons quelques exemples pour voir ce que nous pouvons apprendre.

Astuce: gardez la conception simple et le message fort

Notre premier exemple provient d'un nouveau service appelé Kroud. Jetons un coup d'œil à la partie du site située 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 avec des affirmations vides sur la façon dont le service va changer votre vie, ni ne tourne autour du pot pour ce qui est du 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 votre application fait en cinq secondes, je passe à autre chose.

Kroud a vraiment pour objectif de relier un service complexe à un message clair qui incite également à 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 indique immédiatement ce que fait le site.

Le gros bouton

Une autre chose que nous pouvons apprendre de Kroud est que les gros boutons d’inscription audacieux sont une bonne chose! Voici le bouton Kroud en 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 non seulement sur la taille, mais aussi sur la couleur. Il est tellement plus lumineux que les autres contenus que vos yeux sont immédiatement attirés par celui-ci.

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 publicité dans un magazine ou un site Web pour une nouvelle Corvette. À quoi ressemblerait cette page? Il y a 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 ils savent que la meilleure façon de montrer leur dernier exploit consiste à vous montrer une photo de ce dernier 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 coûtent une douzaine de dollars et personne n'a jamais entendu parler du vôtre. Sauf si vous avez honte de vos faibles compétences en conception, les utilisateurs voudront savoir exactement à quoi ressemblera le service avant de prendre le temps de s'inscrire.

Les gens de Freckle le savent bien et ont choisi de placer en haut de la page cinq tableaux d’écrans.

Même si de grandes parties de celles-ci sont couvertes, l’image dans son ensemble vous donne vraiment un bon aperçu de ce à quoi le service ressemble.

Caractéristiques en tant que captures d'écran

La tendance actuelle dans la conception de pages d'accueil d'applications Web consiste à afficher les fonctionnalités de votre page d'accueil avec de petites icônes. C’est une excellente idée qui augmente réellement la valeur esthétique de la page et aide à casser de gros blocs de copie. Voici un exemple tiré de Ballpark Invoicing.

Bien que les icônes soient meilleures que le texte, dans le cas où vous avez une interface solide, je pense en fait que les captures d'écran peuvent être un élément visuel beaucoup plus puissant. Les captures d'écran communiquent directement avec 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 caractéristiques.

Voyez comment la messagerie ici est renforcée par une image de ce à quoi cela va ressembler dans l'application? C’est une tendance que je constate de plus en plus récemment et je pense que c’est une bonne tendance qui améliore véritablement l’idée des icônes de la génération précédente d’applications Web.

À titre d’exemple, TodayPulse montre trois de leurs principales fonctionnalités dans une bande horizontale de captures d’écran:

Peeve: No Screenshots

Vous pensez peut-être 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 indication de ce à quoi ressemble réellement l'application.

Même si ces pages sont assez attrayantes, comme Wordfaire ci-dessous, les chances que je l’essaye sont beaucoup moins simples car je ne peux pas en voir un aperçu.

Le vieil adage "une image vaut mille mots" prouve vraiment vrai dans ce domaine.Il est tout simplement impossible que je lise les sept paragraphes de texte sur la page d'accueil de Wordfaire. J'en échangerais au moins cinq contre une capture d'écran sans réfléchir.

Astuce: laissez les utilisateurs jouer avec un exemple en direct

Le concept de? 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 nuls, surtout en cas d'incertitude. En laissant un utilisateur essayer d'abord votre application Web, l'incertitude disparaît.

Il est extrêmement important de garder à l’esprit que vous essayez avant d’acheter. s'applique même aux services gratuits! Cela semble déroutant mais c'est vraiment très simple. Même un service gratuit me prend beaucoup de temps, une ressource que je trouve très utile et qui ne négociera rien. L'inscription à un service Web gratuit est toujours un engagement. un que je ne veux pas faire, sauf si je suis vraiment sûr d'aimer le produit.

Le concept est simple: créez un moyen par lequel les utilisateurs peuvent fouiller et cogner les pneus de votre application sans saisir un seul élément d'information. Nous voyons cela en action ci-dessous pour Pen.io. Ceci est une autre page sans captures d'écran mais 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 formidable 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: Longs Tours

Certaines applications Web vous feront faire 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 faut-il? Une visite du produit? vraiment être si exigeant?

Si je clique sur un lien qui dit "Faites un tour", ce que je veux vraiment faire, c'est voir l'application. Un exemple concret comme celui que nous venons de décrire est bien plus fort que 2 000 mots et explique ce que ce sera comme si vous atteignez enfin le point où vous êtes autorisé à l'essayer. Certains sites construisent même un? Smart? Modifié? exemple vivant qui vous guide à travers le processus. C'est un excellent moyen de permettre aux utilisateurs d'essayer votre service tout en veillant vraiment à ce qu'ils comprennent le point et à voir ce que vous voulez.

Encore une fois, il n’est pas forcément 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 consiste à inclure une courte vidéo directement sur la page d'accueil. Si une image vaut mille mots, une minute à 15-30 images par seconde n'a pas de prix! Une vidéo remplit le même objectif que l’exemple et les captures d’écran, mais elle est plus dynamique que les captures d’écran et offre une expérience plus structurée qu’un terrain d’essai libre.

Aviary fait un bon travail en montrant un laps de temps de son éditeur d'image créant une manipulation photo complexe.

Greplin est l’une de mes applications préférées actuelles de la vidéo d’une 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 un diaporama de captures d'écran.

Peeve: des dessins animés qui ne montrent jamais l'application

Pour une raison quelconque, la meilleure chose à faire en ce moment est de réunir l'une de ces vidéos comme un petit dessin amusant. C'est souvent une bonne idée, mais le problème que j'ai, c'est qu'après deux minutes d'une petite animation ennuyeuse, je n'ai toujours aucune idée de ce à quoi ressemble réellement l'application!

Les deux vidéos ci-dessous de Minus et Summify en sont de bons exemples. Certes, ils finissent par se déplacer pour presque vous montrant une version illustrée de l'application, mais seulement à la toute fin et même dans ce cas, c'est un petit coup d'oeil abstrait.

Réflexions finales: la recette du succès

Tous les conseils de cet article visent les deux objectifs principaux de la page d'accueil de votre application Web, dont nous avons déjà parlé: éducation et incitation. Tout d'abord, éliminez tout le fouillis de votre conception et ramenez-le aux éléments les plus importants pour que le visiteur puisse se concentrer sur les informations vitales sans être dérangé.

Dans votre message, énoncez de manière audacieuse 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 de poids 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 sur les clients et les projets? est meilleur que "MyCoolWebApp organise les informations sur le client et le projet". Assurez-vous également de signaler toute fonctionnalité importante et pourquoi les visiteurs doivent utiliser l'application.

Une fois que vos messages ont été définis, il est temps de vous concentrer sur la présentation de votre produit à votre public. Les captures d'écran (plusieurs si vous le pouvez), trois exemples de comptes en direct et des visites vidéo (du type montrant réellement le produit) sont trois excellentes solutions. Son objectif est de réduire l’incertitude entourant votre produit. Moins il y a d'incertitude, moins les utilisateurs hésiteront à s'inscrire.

Bien entendu, tout cela suppose que vous ayez un produit de qualité. Si votre interface est boiteuse, alors cachez-la du public et tenez-vous-en à de longues descriptions ennuyeuses!