Meilleures pratiques de conception Web SaaS : normes et tendances de conception à connaître

Quelles sont les meilleures pratiques pour la conception Web SaaS ?

C'est la question à laquelle j'ai voulu répondre après être tombé sur un site SaaS, après un site SaaS, après un site SaaS... Ils se ressemblaient à peu près :

Comprendre les meilleures pratiques peut être un excellent moyen pour les concepteurs Web (et les fondateurs de SaaS) de réfléchir à la présence de leur propre marque. C'est une approche qu'Andy Crestodina a adoptée il y a quelques années lors de l'analyse des normes Web pour les 50 meilleurs sites marketing . Il peut également aider les concepteurs, les stratèges et les fondateurs à planifier leurs initiatives de conception en utilisant des structures filaires et en identifiant les éléments de conception clés qui doivent figurer sur leur page d'accueil.

Le groupe Nielsen / Norman a publié l'un des premiers documents autour des normes de conception Web et a défini trois niveaux de normalisation :

• Standard : plus de 80 % des sites utilisent la même approche
• Convention : 50 à 79 % des sites Web utilisent la même approche
• Confusion : 49 % ou moins de sites Web utilisent une approche

Alors que j'avais à l'origine beaucoup de frustration avec les marques SaaS similaires, plus j'examinais le raisonnement pour suivre les normes de conception et les meilleures pratiques, plus je comprenais l'avantage de la cohérence. Certains des avantages qui accompagnent les normes Web de conception suivantes incluent :

• Un sentiment de sécurité et de confiance lorsque vous voyez des éléments de conception communs
• Savoir exactement où aller quand vous avez besoin de quelque chose (c.-à-d. Accueil via. clic sur le logo)
• Aucune incertitude autour des nouvelles icônes, boutons et éléments de conception. Aucun élément clé (c.-à-d. Obtenir une démo) manqué

Toutes ces choses peuvent rendre l' expérience utilisateur plus fluide et plus intuitive.

Mais il y a beaucoup de choses dans l'espace SaaS qui semblent être reproduites sans aucune bonne raison.

Donc, pour mieux comprendre les normes de conception Web SaaS, nous avons pris les 250 meilleurs sites du SaaS 1000 pour créer un ensemble de données qui nous a montré ce qui était devenu des normes, ce qui était conventionnel et ce qui était un tirage au sort.

Voici un aperçu des meilleures pratiques de conception SaaS en 2022 :

Les logos de marque sont toujours sur le côté gauche

Donc, vous avez décidé de créer un logo (ou de mettre à jour votre logo existant) et vous vous demandez où le placer sur votre site Web. Le placement de votre logo en haut à gauche d'un site Web est une pratique exemplaire courante en matière de conception. On a même constaté une augmentation de 1% des logos à gauche de la navigation depuis 2019 ! C'est une approche que la plupart des concepteurs exploitent à l'intérieur et à l'extérieur du SaaS. C'est un choix logique de reconnaître que la plupart des gens en Amérique du Nord voient un site de gauche à droite.

Mais parfois (dans nos recherches, une fois), un designer décide de placer le logo ailleurs. Bien que nous n'ayons vu aucun site placer son logo à droite; nous avons trouvé DataDog qui a placé son logo directement au milieu de son site :

Dans une étude de recherche sur les logos , les gens de Venngage ont découvert que 35 % des gens préféraient les logos à dominante textuelle et de style horizontal pour les entreprises technologiques.

La plupart des sites Web SaaS sont adaptés aux mobiles

Nous vivons dans un monde mobile.

Les sites mobiles réactifs sont un excellent moyen de vous assurer de ne pas offrir d'expériences interrompues aux personnes sur un ordinateur de bureau ou en visite sur mobile.

En 2018, 52,2% de tout le trafic en ligne mondial a été généré via les téléphones mobiles. C'est pourquoi il est si formidable de voir que presque toutes les entreprises SaaS investissent dans une conception réactive et les meilleures pratiques de page de destination mobile plutôt que de créer uniquement pour les ordinateurs de bureau.

La vidéo peut être trouvée sur un tiers des sites

Bien que la vidéo ait pris d'assaut les réseaux sociaux, elle n'est pas aussi populaire sur les sites Web SaaS. Parmi les sites Web qui comportaient une vidéo sur leur page d'accueil, la plupart des vidéos obligeaient les utilisateurs à cliquer pour démarrer la vidéo. Ces vidéos étaient généralement de courts clips, la plupart de moins de 5 minutes, qui fournissaient un contexte sur l'histoire, la proposition de valeur ou la démonstration de produits de l'entreprise.

Nous avons été très surpris de constater que la plupart des sites Web n'ont pas de vidéos sur leurs pages d'accueil et encore plus surpris de voir une baisse de 13 % depuis notre précédente étude en 2019.

Les attentes en matière de coûts hérités de la production d'une vidéo de haute qualité peuvent encore empêcher les marques de cet investissement. Les explicateurs de produits illustrés ont gagné en popularité il y a quelques années et sont devenus un service populaire acheté via des sites comme Fiverr et Upwork.

Aujourd'hui, la demande pour ce type de vidéos est encore assez forte (plus de 14 800 recherches de vidéos explicatives par mois), pourtant seulement un peu plus de la moitié des entreprises SaaS les utilisent.

Il y a toujours un appel à l'action principal au-dessus du pli

Il existe une pratique exemplaire claire dans la communauté SaaS selon laquelle votre appel à l'action qui pousse les gens à faire quelque chose doit être au-dessus du pli. Plus de 90 % de tous les sites inclus dans cette recherche SaaS Design avaient un bouton ou un appel à l'action au-dessus du pli.

Le placement du CTA se trouve généralement au-dessus du pli

La plupart des sites Web SaaS vont à l'essentiel en ce qui concerne l'emplacement du CTA. La majorité des sites Web placent leur CTA au-dessus du pli. Il s'agit d'une bonne pratique à suivre car elle garantit que les utilisateurs voient votre CTA même s'ils ne font pas défiler la page jusqu'en bas.

Le bleu passe au vert comme nouveau choix pour les boutons SaaS

Lors de l'analyse des différentes couleurs d'appel à l'action, il y avait une nette tendance vers le bleu, les CTA verts venant en deuxième position et l'orange en troisième position.

La popularité des boutons CTA bleus a considérablement augmenté depuis 2019, dépassant le vert d'environ 3 % (qui était la couleur CTA la plus populaire en 2019). Il y a une bonne raison à cela : la couleur bleue est la plus couramment utilisée pour les hyperliens, et c'est une couleur accrocheuse.

L'essai gratuit surpasse Get Started comme le CTA le plus populaire en SaaS

La majorité des marques SaaS utilisent un jargon d'appel à l'action qui est de la musique pour leurs portefeuilles : gratuit .

La plupart des sites que nous avons examinés ont opté pour la formulation « Essai gratuit » pour leur appel à l'action. Un autre CTA finaliste était un langage orienté vers l'action qui incitait le visiteur à faire quelque chose qui le poussait plus loin dans l'entonnoir. Certaines variantes incluent :

• Commencer

• Demander une démo

• Planifier une démo

• S'inscrire

• Obtenez une démo gratuite

• Obtenez X gratuitement

Les mots + phrases les plus courants dans l'appel à l'action ont tendance à être : gratuit, démo, commencer, démarrer, essayer X et demander... Certains de ces mots sont apparus ensemble (c'est-à-dire, démo gratuite ou essayer X gratuitement), mais en utilisant un la combinaison de ces mots a tendance à apparaître le plus dans les CTA primaires SaaS.

L'utilisation d'un fond clair est la meilleure pratique

Il n'est pas courant de voir un site qui a un fond noir en SaaS :

La plupart des sites (92 % d'entre eux) utilisaient des couleurs blanches ou claires comme arrière-plan principal pour leurs sites.

L'utilisation de personnes réelles est utilisée par 80 % des SaaS

Le placement de personnes réelles sur la page d'accueil était l'option favorable pour la majorité des marques SaaS. Le placement de personnes réelles sur la page d'accueil se trouvait généralement dans des sections associées à des témoignages et à des éléments de contenu. Parfois, ils apparaissaient directement au-dessus du pli dans l'en-tête, comme dans l'exemple ci-dessous, mais la plupart du temps, des images de personnes réelles figuraient plus bas sur la page.

Il s'agit d'un saut ÉNORME par rapport à la même étude que nous avons menée en 2019 . Il y a à peine 3 ans, seulement 56 % des sites Web utilisaient de vraies personnes sur leurs pages d'accueil, ce qui représente une énorme augmentation de 24 %.

C'était aussi formidable de voir un peu de diversité dans la sélection d'images. La seule chose qui manquait était de voir un niveau similaire de diversité sur ces pages "Notre équipe", mais c'est un sujet pour une autre fois.

Les illustrations personnalisées sont très courantes (70 %)

L'essor des illustrations personnalisées a balayé la communauté SaaS d'assaut. Depuis 3 ans, c'est quelque chose qui surgit site après site. Notre opinion professionnelle est qu'il s'agit d'une tendance, mais qu'elle n'est qu'à quelques points de pourcentage de devenir une pratique exemplaire.

Voici un aperçu de certains sites et leurs illustrations :

C'est une tendance intéressante.

Qu'en pensez-vous : cette approche du design aide-t-elle les startups à se démarquer ou leur permet-elle de s'intégrer ? Est-ce que ça importe? Est-ce que cela dégage un sentiment de confiance?

La moitié des marques SaaS utilisent un outil de chat en direct

L'essor du chat en direct et du marketing conversationnel est une tendance fascinante à surveiller. Les utilisateurs veulent des réponses, et ils les veulent rapidement. Alors que cette idée d'adopter des conversations en temps réel avec des prospects (ou d'utiliser des bots) continue de gagner du terrain, elle devient clairement populaire parmi les entreprises B2B SaaS.

Notre recherche a révélé qu'un peu plus de 5% des sites SaaS ont une boîte de discussion dans le coin prête à être engagée. Sur la plupart de ces sites, les services utilisés étaient Intercom ou Drift.

Alors, devriez-vous suivre les normes ?

Ça dépend.

Expérimenter avec le design est un excellent moyen de découvrir quelque chose avant le reste de l'industrie. Cela dit, le risque de l'expérimentation de conception est que les utilisateurs pourraient trouver toute l'expérience cassée et mal créée. D'un autre côté, si vous respectez les normes déjà utilisées sur les sites Web SaaS du monde entier, vous pouvez facilement vous fondre dans la masse.

Voici une liste de conseils de conception de sites Web si vous voulez un site qui ne ressemble pas à tout le monde :

• N'utilisez pas d'illustration plate comme représentation abstraite de votre marque
• N'utilisez pas de boutons orange foncé ou jaunes sur votre page d'accueil
• N'alignez pas à gauche votre proposition de valeur sur le site
• Placez votre logo au milieu ou à droite
• Utilisez un fond sombre pour votre site

Votre site respecte-t-il actuellement ces normes ? Quelque chose ici vous a-t-il surpris ?