Agence WEX

Catégorie : Pages d’accueil

  • 5 analyses UX de sites ecommerce B2B

    Le mois de juillet a été riche en nouvelles analyses, et ce mois ci, ça ne sont pas moins de 5 sites qui sont passés sous la loupe de notre expert UX, Olivier Sauvage.

    Dans cet article, on vous explique un peu mieux le concept de simplicité et d’esthétique et on vous invite à découvrir 5 sites ecommerce B2B inspirants.

    5 sites de ecommerce b2b

    La simplicité : grande gagnante des sites ecommerce B2B d’aujourd’hui

    Faut-il encore le répéter ? La simplicité fait l’essence de la réussite d’un site ecommerce B2B. Être simple, facile à utiliser, ne pas bloquer les clients dans des parcours longs et demandant trop d’interactions, voilà le challenge des entreprises B2B aujourd’hui.

    Mais qu’est-ce que la simplicité ? Comment la définir ? Et… la simplicité se voit-elle ?

    Ce n’est pas parce qu’une interface est simple visuellement qu’elle est forcément simple à utiliser. Être simple en apparence encourage l’engagement, mais la simplicité visuelle peut dissimuler une complexité d’utilisation de par sa trop grande simplicité, justement !

    Autrement dit : il ne faut pas juger la simplicité sur son apparence, mais bien sur la manière dont les utilisateurs d’un site interagissent avec ce site. Et si les utilisateurs sont satisfaits, ont l’impression d’avoir atteint leurs objectifs rapidement et simplement, c’est gagné !

    C’est pourquoi chez Wexperience, nous ne mettons jamais en avant nos maquettes de sites, mais bien nos méthodes d’analyse et de conception qui sont les véritables garanties de la simplicité.

    Et à propos, si vous avez besoin d’évaluer la simplicité de votre site, faites appel à nous, comme tous nos autres clients, dont Décathlon, Toyota, Matmut et bien d’autres.

    Comment mesure-t-on la simplicité chez Wexperience ?

    Pour toutes nos études, nous utilisons une échelle UXM. C’est un questionnaire que nous avons créé et qui nous permet de mesurer l’UX sur 4 dimensions.

    Lors d’un test utilisateur, par exemple, chaque testeur répond à l’UXM. Ses réponses sont stockées en base, puis agrégées avec les autres réponses afin d’obtenir une moyenne. C’est cela qui nous permet de définir la simplicité d’une interface.

    Pour certains projets, nous faisons jusqu’à 3 UXM afin de pouvoir comparer les évolutions de l’UX d’un site ou d’une app suite à nos recommandations.

    Illustration du questionnaire UXM : 16 paires d’adjectifs, moins de 2 minutes pour y répondre, le questionnaire UXM apporte le ressenti des utilisateurs sur leur expérience, ce qui est être très différent de nos analyses d’experts UX

    Le design, un facteur d’engagement

    En B2B, l’habitude de se préoccuper d’apparence visuelle a souvent été rejetée au profit de la technique. Or, aujourd’hui avec les nouvelles habitudes des acheteurs, l’esthétique d’une interface compte de plus en plus.

    Fini les vilains sites où les catégories et les produits s’empilent comme dans un catalogue de pièces détachées automobile. Les acheteurs veulent des expériences ! Et ils ont besoin d’être séduits !

    Même si la fidélité est plus grande en B2B qu’en B2C, il ne faut pas négliger l’aspect séduction. La concurrence n’est souvent qu’à un clic de souris, et parfois, les choses tiennent à la confiance que peut inspirer un site.

    Or, cette confiance est véhiculée par l’apparence graphique. Un beau site inspirera plus sûrement confiance qu’un site désigné comme les pages jaunes de l’annuaire (👉 voir nos réfs).

    Il faut donc changer de paradigme et accepter que, désormais, les sites de B2B soient aussi beaux que les sites de B2C.

    Voici 5 sites que nous avons sélectionné pour leur design, mais aussi leur expérience.

    Berlin Packaging : le n°1 mondial du packaging place la barre très haut

    Illustration article Berlin Packaging

    Berlin packaging est un des leaders mondiaux des récipients pour l’industrie et la grande distribution. Son site est une réelle réussite esthétique tant au niveau de la navigation et du confort d’utilisation.

    Lire l’analyse

    Blake Envelopes : le roi britannique de l’enveloppe durable fait dans l’esthétiquement correct

    Blake Envelopes est une PME britannique familiale qui vend, comme son nom l’indique, des enveloppes en gros avec une dimension développement durable forte. Son site rassemble les qualités d’une navigation de type B2C avec un réel succès.

    Lire l’analyse

    Bürklin Elektronik : une refonte réussie pour le roi de la distribution de matériel électronique allemand

    Logo Burklin

    Bürklin Elektronik est un des leaders européens de la distribution de composants électronique pour les entreprises.

    Avec une refonte graphique audacieuse, Bürklin se positionne comme un leader innovant et audacieux.

    Lire l’analyse

    Chocomize : chocolats et cadeaux d’entreprise

    Logo Chocomize

    Chocomize est une petite PME de fabrication de chocolats. Elle vend ses produits directement à de grandes entreprises. Un joli site qui donne envie d’être très très gourmand.

    Lire l’analyse

    Shoprelevant : expérience simplifiée pour un équipementier dans l’industrie du pétrole

    Illustration article Relevant

    Relevant est une grosse PME texane qui fournit l’industrie gazière et pétrolière. La refonte récente de son site a été fait dans l’optique de proposer des services en ligne simple à utiliser à ses clients.

    Lire l’article

    Conclusion

    De plus en plus d’entreprises B2B investissent dans le design d’expérience et leur identité de marque. Non seulement pour se détacher de leur concurrence, mais aussi pour répondre à la demande croissante de leurs clients d’expériences simples, de facilité et de rapidité.

    Et à propos, si vous avez besoin d’évaluer la simplicité de votre site, faites appel à nous, comme tous nos autres clients, dont Décathlon, Toyota, Matmut et bien d’autres.

  • Best practices avancées en UX/UI pour le succès des pages d’accueil en B2B

    Nous explorons aujourd’hui les pratiques essentielles qui façonnent les premières impressions digitales les plus captivantes au monde. De Figma à Calendly, en passant par Google Chrome et Duolingo, ces géants numériques ont chacun une histoire unique à raconter à travers leur page d’accueil.

    Quels secrets se cachent derrière ces interfaces utilisateurs qui captent instantanément l’attention et fidélisent les utilisateurs ?

    Plongeons ensemble dans les éléments clés qui transforment une simple visite sur une page d’accueil en une expérience utilisateur exceptionnelle et mémorable.

    Top 5 des Stratégies UX/UI pour Pages d’Accueil

    Sur la base d’une analyse approfondie des pratiques UX de plusieurs plateformes leaders, et en tirant parti de plus de 15 ans d’expérience dans la conception UX et le commerce électronique, voici les cinq principes UX les plus importants qui ressortent constamment des conceptions de pages d’accueil réussies :

    Clarté et simplicité de la navigation

    Le parcours de l’utilisateur doit commencer par une structure de navigation claire et simple. Cela signifie avoir un menu principal visible et intuitif, limiter le nombre d’options de navigation pour éviter de submerger l’utilisateur, et utiliser un placement familier pour les éléments de navigation afin de répondre aux attentes des utilisateurs.

    Il est essentiel que les utilisateurs trouvent ce dont ils ont besoin avec un effort minimal. Des plateformes comme Calendly illustrent ce principe en rationalisant les processus d’inscription et en utilisant un libellé direct et concis.

    Haut de la page de Calendly.com
    Faites toujours porter l’attention au meilleur endroit d’une page

    Appel à l’action (CTA) proéminent et engageant

    Les pages d’accueil efficaces, comme celles de Figma et Duolingo, utilisent des CTA bien placés, visuellement frappants et textuellement persuasifs. Ces CTA guident rapidement les utilisateurs vers l’entonnoir de conversion, réduisant les obstacles à l’entrée.

    Par exemple, l’utilisation de verbes qui incitent à l’action ou l’offre de services d’essai sans nécessiter d’informations de carte de crédit peuvent augmenter significativement l’engagement des utilisateurs et les taux de conversion.

    Page d'accueil de Duolingo sur desktop
    Page d’accueil de Duolingo sur desktop

    Hiérarchie visuelle et design esthétique

    Les éléments de design doivent être stratégiquement utilisés pour créer un flux visuel qui guide l’utilisateur à travers la page. Cela inclut l’utilisation de la couleur, du contraste, de la typographie et de l’espacement. La page d’accueil de Miro utilise une disposition propre et organisée avec des indices visuels qui guident l’œil de l’utilisateur dans une progression logique d’un élément à l’autre.

    Contenu visuel réactif et engageant

    Des visuels de haute qualité et des animations peuvent améliorer l’engagement des utilisateurs et transmettre des informations complexes de manière accessible.

    Cependant, comme on le voit dans le cas de Google Chrome, il est crucial de trouver un équilibre entre l’esthétique et la performance pour s’assurer que les éléments visuels ne compromettent pas le temps de chargement ou n’accablent pas l’expérience utilisateur.

    Capture de la page d'accueil de Google Chrome au-dessus de la ligne de flottaison
    Page d’accueil de Google Chrome : trop d’animations tue l’animation ?

    Confiance et transparence

    Les utilisateurs sont plus susceptibles de s’engager avec une plateforme en laquelle ils ont confiance. Cela peut être réalisé par des messages clairs qui abordent les préoccupations de sécurité et de confidentialité dès le départ, comme le fait Calendly en rassurant les utilisateurs qu’aucune information de carte de crédit n’est nécessaire pour s’inscrire.

    De plus, les témoignages d’utilisateurs, les badges de confiance et les liens clairs vers les politiques de confidentialité peuvent renforcer la crédibilité.

    Ces principes sont fondamentaux non seulement pour créer une page d’accueil attrayante, mais aussi pour assurer son fonctionnement efficace afin de répondre aux objectifs commerciaux et aux besoins des utilisateurs dans un paysage numérique compétitif. Ces éléments combinés fournissent un cadre robuste pour analyser et élaborer des stratégies UX réussies dans le commerce électronique et au-delà.

    Principaux points forts des sites analysés

    Voici un résumé des meilleures pratiques en UX/UI pour la conception des pages d’accueil basées sur les analyses des pages de Figma, Google Chrome et Canva, extraites de Wexperience.

    Pratiques Clés de Figma

    • Titre clair et concis : Utilisation de gros titres bien contrastés pour faciliter la lecture.
    • Bouton d’action direct : Positionnement immédiat sous le titre pour encourager l’action rapide.
    • Grand visuel : Intégration de visuels attrayants et d’animations pour enrichir l’expérience utilisateur.
    • Disposition en quinconce : Améliore la navigation sur la page et réduit la charge cognitive grâce à un espacement généreux entre les éléments

    Découvrir l’analyse complète

    Innovations Visuelles de Google Chrome

    • Animations interactives : Utilisation extensive d’animations pour captiver l’attention, bien que leur excès puisse nuire à l’expérience utilisateur.
    • Structures surprenantes : Mise en forme variée des blocs d’informations pour susciter l’intérêt et encourager l’exploration.
    • Focus sur les animations : Les animations sont utilisées pour expliquer des fonctionnalités, mais elles doivent être gérées avec soin pour ne pas surcharger la page.

    Découvrir l’analyse complète

    Simplicité Centrale de Canva

    • Simplicité et centralité : La page est divisée en trois sections principales pour une compréhension rapide.
    • Présentation directe des offres : Affichage des différentes options dès la page d’accueil pour un accès immédiat.
    • Absence d’animations : Contrairement à Google Chrome, Canva opte pour une approche plus statique pour une expérience reposante.
    • Ton de voix inclusif : Utilisation d’un langage accueillant et respectueux pour s’adresser à une large audience.

    Découvrir l’analyse complète

    Duolingo: L’Engagement par le Jeu

    Capture d'écran de la présentation en quinconce ces arguments de Duolingo
    Capture d’écran de la présentation en quinconce ces arguments de Duolingo
    • Simplicité et clarté: La page d’accueil est très épurée, mettant en avant un visuel, un titre, et deux boutons d’action, ce qui centralise l’attention de l’utilisateur sur l’essentiel.
    • Wording direct et efficace: Utilisation de phrases courtes et directes pour communiquer efficacement l’offre.
    • Utilisation de l’animation: Les animations ludiques et les illustrations colorées augmentent l’engagement et renforcent l’identité visuelle de Duolingo.
    • Approche gamifiée: La ludification est un élément central, rendant l’apprentissage plus amusant et interactif, ce qui peut augmenter la motivation intrinsèque des utilisateurs.

    Découvrir l’analyse complète

    Ergonomie et Clarté d’Airtable

    Bloc d'argument sur Airtable
    Bloc d’argument sur Airtable
    • Organisation et clarté: Airtable utilise une mise en page claire avec une navigation intuitive pour présenter ses fonctionnalités et offres directement sur la page d’accueil.
    • Esthétique minimaliste: L’interface épurée aide à focaliser l’utilisateur sur les fonctionnalités sans distractions superflues.
    • Hiérarchie visuelle forte: Utilisation efficace des couleurs et des tailles de police pour guider l’utilisateur à travers les informations les plus importantes.

    Découvrir l’analyse complète

    Miro: Collaboration et Design Interactif

    Capture d'écran de la page d'accueil de Miro.com
    • Interface collaborative: Miro met en avant ses outils de collaboration directement sur la page d’accueil pour démontrer rapidement ses capacités à de nouveaux utilisateurs.
    • Design interactif et attractif: L’utilisation de visuels dynamiques et interactifs pour attirer l’attention des utilisateurs et les encourager à explorer plus avant.
    • Cohérence de la marque: Miro utilise une palette de couleurs et un style visuel qui sont cohérents avec son image de marque, renforçant la reconnaissance visuelle.

    Découvrir l’analyse complète

    Calendly: Inscription Simplifiée et Engagement

    Photo de l'animation de la page d'accueil de Calendly
    • Inscription Simplifiée : Calendly utilise des systèmes de login déportés (comme Google et Microsoft), facilitant grandement l’inscription en connectant rapidement les calendriers des utilisateurs à l’application
    • Clarté et Incitation : La page mise sur un wording clair et incisif, avec des éléments tels que « gratuit » et « aucune carte de crédit requise » placés stratégiquement à côté des boutons d’action pour rassurer les utilisateurs sur la nature gratuite du service.
    • Design et Ergonomie : Calendly adopte un design épuré et une hiérarchisation visuelle claire, où les éléments les plus importants comme les titres et les boutons d’action sont agrandis.
    • Processus d’Onboarding : Une fois inscrit, l’utilisateur est guidé à travers ses premiers pas avec une barre de progression et un onboarding dans l’application qui encourage la configuration complète du profil.

    Découvrir l’analyse complète

    Conclusion

    À travers cet exploration des meilleures pratiques UX des pages d’accueil de quelques-uns des services les plus populaires, nous avons découvert comment des éléments apparemment simples peuvent profondément influencer l’engagement et la conversion.

    De la clarté de la navigation à l’impact visuel des call-to-actions, chaque détail compte et contribue à la construction d’une expérience utilisateur qui non seulement répond aux attentes des utilisateurs mais les dépasse.

    Chez Wexperience, nous croyons que comprendre ces principes est essentiel pour tout concepteur UX aspirant à créer des interfaces qui marquent les esprits.

    Rejoignez-nous dans ce voyage continu à la découverte des meilleures pratiques UX pour transformer les interactions digitales en expériences enrichissantes et captivantes.

    Pour plus d’insights et d’analyses approfondies, continuez de suivre notre blog et nos études de cas sur wexperience.fr/blog

  • 5 best-practices UX de la page d’accueil de Calendly

    Cet article est une analyse des best-practices UX de la page d’accueil de Calendly, une application de prise de rendez-vous en ligne qui compte plus de 2 millions d’utilisateurs actifs.

    Découvrez les best-practices de cette page d’accueil et réutilisez-les pour vos propres projets.

    Best practice n°1 : faire pointer le design vers le CTA principal

    Haut de la page de Calendly.com
    Faites toujours porter l’attention au meilleur endroit d’une page

    On sait tous très bien qu’il est possible de guider le regard grâce au design. Calendly le fait encore plus que les autres avec une simple astuce –> Mettre des flèches.

    Ça parait idiot, mais c’est très efficace.

    Les petites flèches autour des avatars font porter le regard au centre de l’écran, qui est le meilleur emplacement pour cliquer. Et ça marche très bien !

    Best practice n°2 : Sachez mettre en valeur vos chiffres

    Chiffres argumentés sur Calendly.com

    Les chiffres sont toujours un bon moyen de convaincre. Mais leur efficacité réside aussi dans leur mise en forme.

    -> Agrandissez-les démesurément

    -> Accompagnez-les de wordings très très courts

    -> Mettez beaucoup d’espace autour.

    Ainsi, ils ressortiront mieux sur la page et attireront fatidiquement l’attention.

    Best practice n°3 : arrêtez les carrousels qui défilent tous seuls

    Carrousel sur Calendly.com

    Les règles de bases des carrousels, c’est :

    • Ne les faites pas défiler automatiquement
    • Ne les faites pas défiler trop vite
    • Donnez le contrôle à l’utilisateur puisqu’il puisse choisir les slides qu’il veut afficher

    Exactement ce que ne fait pas Calendly pour les deux premières règles. La carrousels va si vite qu’il n’est pas possible de lire tous les textes affichés dans chaque slide.

    Best practice n°4 : Ne faites pas de votre page une démonstration de votre savoir-faire

    La page d’accueil de Calendly est typique d’une équipe de design qui veut en mettre plein la vue et montrer son savoir-faire.

    C’est beau.

    C’est animé de partout.

    L’intégration a du être compliquée et longue.

    Mais ça n’apporte rien en terme d’expérience client.

    C’est un défaut qu’on va trouver dans de nombreuses équipes de design (oui, dans ce genre de site, on a beaucoup de monde qui travaille sur une page).

    N’oubliez pas qu’une page d’accueil n’a qu’une fonction : bien accueillir pour la première fois les nouveaux visiteurs et les accrocher. Tout le reste n’est que de l’art.

    Autrement dit :

    • Bannissez les animations si c’est juste pour faire jolie
    • Ne multipliez pas les effets si c’est juste pour essayer d’exploiter au maximum votre librairie de script d’animation
    • Ne multipliez pas les effets de mise en page : ok, c’est créatif, mais tout ce que demande le visiteur, c’est de vite comprendre votre offre et pouvoir prendre une décision. A force de multiplier les effets visuels, il va finir par perdre de vue son objectif

    En conséquence de ça :

    • soyez sobre
    • faites une page courte et homogène
    • limitez-vous à une animation
    • scandez trois idées principales
    • Indiquez précisément où l’utilisateur doit aller ensuite : principal CTA très saillant

    Best practice n°5 : grandes animations en SVG

    Photo de l'animation de la page d'accueil de Calendly

    Tout comme dans Miro, il est très utile d’expliquer le concept de votre service via une animation. Une image valant plus que 1000 mots, une animation, alors, c’est encore beaucoup plus !

    Placez une image d’explication de votre service, mais surtout, n’oubliez pas : pas de vidéo ! Préférez, comme c’est le cas ici, une animation à partir d’une image vectorielle SVG.

  • 5 best-practices UX de la page d’accueil de Miro

    Cet article est une analyse des best-practices UX de la page d’accueil de Miro, une application de travail collaborative qui compte plus de 60 millions d’utilisateurs en 2023.

    Découvrez les best-practices de cette page d’accueil et réutilisez-les pour vos propres projets.

    Best practice n°1 : faire une animation qui explique le concept

    Animation de la page d'accueil de Miro
    Animation de la page d’accueil de Miro

    On vous le disait déjà dans notre dernier article, si vous utilisez des animations, faites qu’elles aient un sens pour votre utilisateur. Ne faites pas d’animation pour le plaisir de faire joli.

    Sur sa page d’accueil, Miro affiche une énorme animation plein-écran qui montre très concrètement comment fonctionne l’application.

    Plutôt que des mots, mieux vaut parfois des images, surtout si elles sont simples, claires et didactiques.

    Best practice n°2 : Mettez des témoignages clients qui ressemblent à de vrais témoignages clients

    Exemple de témoignages clients sur la page d'accueil de Miro.com
    Exemple de témoignages clients sur la page d’accueil de Miro.com

    Tout le monde est d’accord pour dire qu’il faut mettre du crédit social sur sa page d’accueil, mais, très souvent, cela est mal fait.

    Les témoignages sont trop courts.

    Ils sont banals.

    Ils n’apportent aucune information.

    Les témoins ont l’ai fake.

    Miro a particulièrement soigné cet aspect en rendant vraiment réaliste de vrais témoignages :

    • Vraie photo de la personne (pas de photo super léchées et retouchées
    • Vrai insight du client
    • Et évidemment, logo de la société cliente (surtout si c’est une grosse société)

    Best practice n°3 : utilisez le mode accordéon pour gagner de la place

    Exemple d'accordéon sur Miro.com
    Exemple d’accordéon sur Miro.com

    Si vous avez beaucoup d’informations à mettre sur votre page, n’essayez pas de tout afficher en une fois. Utilisez plutôt des formats qui dévoilent le contenu à la demande.

    Miro utilise des accordéons qui ont l’avantage de ne pas prendre beaucoup de place à l’affichage et qui peuvent vraiment démultiplier la taille de l’écran quand on les ouvre.

    Best practice n°4 : utilisez le format SVG pour faire des animations

    On l’a déjà dit dans une autre analyse, utilisez les vidéos avec parcimonie.

    Mais si vous devez vraiment mettre de la vidéo, alors essayez, si possible, d’utiliser le format SVG qui est beaucoup plus léger que les autres formats.

    Bien sûr, le format SVG n’est pas un format vidéo, mais bien un format vectoriel (d’où sa légèreté) que l’on peut animer avec du javascript.

    Vous devriez essayer, le gain de poids peut être énorme (cf notre webinar sur le sujet).

    Best practice n°5 : faites découvrir ce qu’on peut faire avec votre produit ou service

    Capture d'écran de la page d'accueil de Miro.com

    Dans le cas d’un service comme Miro, faire découvrir ce d’autres sociétés ont pu faire avec est une très bonne idée et doit être mis en avant.

  • 5 best-practices UX de la page d’accueil de Airtable

    Cet article est une analyse des best-practices UX de la page d’accueil de Airtable, une solution de création d’applications webs qui comptait 300,000 utilisateurs en 2021.

    Découvrez les best-practices de cette page d’accueil et réutilisez-les pour vos propres projets.

    Best practice n°1 : Ne mettez pas de chat directement sur la page d’accueil

    Chatbot sur la page d'accueil de Airtable
    Chatbot sur la page d’accueil de Airtable

    S’il y a bien quelque chose qui nous énerve, chez nous, à Wexperience, ce sont les fenêtres de chat inopinée qui s’ouvrent avant même que vous ayiez commencé à faire quelque chose.

    Ça ne sert à rien.

    Ça énerve l’utilisateur.

    Ça provoque la même sensation que ce vendeur ou cette vendeuse en magasin qui vous saute dessus aussitôt que vous avez franchi le seuil de la porte de son magasin.

    Ça bloque l’interface que vous voulez utilisez.

    Et souvent, c’est nul.

    Ne faites donc pas ça !

    Best practice n°2 : ne mettez pas d’animations en vidéo pour illustrer vos propos

    Ne mettez pas de vidéos qui surchargent la page !
    2,8 Mo juste pour afficher un petit effet lumineux qui ne sert à rien

    Vous allez nous dire qu’ils font n’importe quoi chez Airtable, mais force est de reconnaître que mettre des vidéos en animation pour illustrer des arguments, ça n’est pas une très bonne idée.

    C’est lourd à télécharger (2,6Mo pour une seule)

    Ça prend de la bande passante

    On a toujours dit que quand on pouvait éviter la vidéo, il ne fallait pas en mettre.

    Ça n’apporte rien au propos.

    Notre conseil : ne mettez de vidéos au format vidéo que si vous ne pouvez pas faire autrement. Sinon, ne mettez pas de vidéos ou bien faites comme sur Duolingo en utilisant le format SVG, bien plus léger.

    Best practice n°3 : arrêtez avec les animations qui ne servent à rien

    Logos sur la page d'accueil de Airtable
    Les logos qui défilent, c’est joli, mais ça n’apporte rien en terme d’UX

    Les designers ont mis beaucoup d’animations pour … eh bien… animer la page…

    Des petits effets de carrousels, des barres de progression (c’est la mode, en ce moment) qui ne servent à rien, des cars qui défilent sans qu’on leur ait rien demandé.

    Encore une fois, une animation doit être justifiée et servir un propos.

    • Elle doit créer de l’émotion
    • Elle doit sous-tendre une identité de marque (encore une fois, l’exemple de Duolingo est très bon)
    • Elle peut servir à animer un schéma pour expliquer un concept compliqué

    Mais mettre de l’animation juste pour mon montrer qu’on a bien utilisé toute la librairie possible d’effets javascript et parce que ça fait joli, non !

    Ça surcharge en scripts inutiles la page.

    Ça surcharge visuellement la page. (Si vous voulez voir ce que donne une page surchargée en animations, allez donc voir celle là).

    Bref, si vous mettez des animations, faites-le avec parcimonie.

    Best practice n°4 : utilisez un langage direct

    Bloc d'argument sur Airtable
    Bloc d’argument sur Airtable

    On n’allait pas faire que critiquer, quand même.

    Airtable fait aussi des choses bien.

    Par exemple, ces petits blocs directs, efficaces qui viennent impacter le regard aussi finement qu’une pointe de flèche dardée par Robin des bois devant le méchant Prince Jean.

    -> Le texte est court

    -> Il est écrit en très grosses lettres : impacte le regarde et fixe l’attention

    -> Il affiche une promesse concrète.

    (Bon, on ne comprend rien à l’illustration, mais, ici, ça vaut mieux que pas d’illustration du tout)

    Best practice n°5 : utilisez des espaces blancs

    Bon, ok, il n’y a pas que Airtable qui fait ça, mais il le fait bien.

    Laissez vivre votre page, laissez-la respirer et laissez vos utilisateurs se reposer un peu en laissant des espaces vides autour de vos contenus.

    C’est quand même pas compliqué, bon sang !

    Utiliser les espaces vides permet de créer du rythme, de regrouper les bonnes informations ensemble (la fameuse Loi de proximité) et aussi de ne pas surcharger visuellement la page, ce qui donnerait trop de travail au cerveau pour arriver à comprendre quelque chose.

    Besoin d’en savoir plus sur ce sujet, consultez cette vidéo de Nielsen Norman Group ou bien regardez ces quelques explications (en anglais) sur la bonne manière de ménager ses espaces dans une page.

  • Best-practices UX de la page d’accueil de Duolingo

    Cet article est une analyse des best-practices UX de la page d’accueil de duolingo, la startup leader mondiale de l’apprentissage des langues en ligne. Elle compte en 2024 plus de 70 millions d’utilisateurs en ligne.

    Découvrez les best-practices de cette page d’accueil et réutilisez-les pour vos propres projets.

    Best-practices organisation générale

    Page d'accueil de Duolingo sur desktop
    Page d’accueil de Duolingo sur desktop

    Haut de page hyper épuré et très efficace

    • Page très épurée avec uniquement un visuel, un titre et deux boutons d’action. C’est très efficace
    • Beaucoup d’espace blanc favorise le regard porté vers le centre de l’écran, zone privilégiée
    • Wording hyper court et direct : gratuit, fun et efficace
    • Call-to-action hypersaillant (vert brillant sur fond blanc)
    • Attention au taux de contraste non accessible (2,51)
    • Présentation des langues par leur drapeau, juste au-dessus de la ligne de flottaison : à noter, que les drapeaux sont accompagnés de libellés. Règle importante : toujours accompagner les icones, symboles d’un libellé pour s’assurer que l’utilisateur les comprends bien

    Présentation du contenu en quinconce, également très épuré

    Capture d'écran de la présentation en quinconce ces arguments de Duolingo
    Capture d’écran de la présentation en quinconce ces arguments de Duolingo
    • Beaucoup d’espaces blancs, ce qui est très reposant et favorise une lecture rapide
    • Des titres très très courts pour une lecture rapide (mais toujours pas aux normes d’accessibilité)
    • Des blocs de textes également très courts
    • Des visuels et/ou animations très funky (marque de fabrique de Duolingo)

    Best-practices apparence esthétique

    Un style reconnaissable entre tous

    • Duolingo a forgé une identité visuelle très particulière. Enfantine, mais immédiatement reconnaissable. On la retrouve tout au long de la page d’accueil, notamment à travers des personnages récurrents qui sont les héros de la plateforme.

    Animations

    • Beaucoup d’illustrations sont animées et rappellent l’esprit jeu vidéo de Duolingo. Cela crée une animation agréable à regarder et augmente l’engagement.
    • Pour alléger la page et éviter les temps de chargement trop long, le format SVG a été utilisé (voir notre webinar sur le sujet)

    Wording / tone of voice

    • Tutoiement : le tutoiement est approprié pour une cible jeune
    • Un wording plutôt sérieux, contrairement aux visuels. Il vient renforcer la crédibilité de l’offre

    Conclusion

    La page d’accueil de Canva.com est efficace

    • Mise en page classique
    • Esprit graphique joyeux engageant
    • Simplicité de la mise en forme en haut de page et clarté de l’offre
    • Bonne hiérarchisation visuelle

    Lisez tous nos autres articles sur les pages d’accueil des services en Saas.

  • Best-practices UX de la page d’accueil de Canva

    Cet article est une analyse des best-practices UX de la page d’accueil de canva, une solution polyvalente de création de contenus pour le digital : animations, cartes interactives, carte de visite, médias pour les réseaux sociaux, etc.. En 2024, Canva comptait environ 85 millions d’utilisateurs répartis dans 95 pays !!

    Découvrez les best-practices de cette page d’accueil et réutilisez-les pour vos propres projets.

    Regardez l’analyse en vidéo

    Best-practices organisation générale

    Haut de la page d'accueil de Canva.com, une solution qui compte plus de 90 millions d'utilisateurs.
    Haut de la page d’accueil de Canva.com, une solution qui compte plus de 90 millions d’utilisateurs.

    Page simple et centralisée

    • Décomposition du contenu de la HP en 3 blocs : titre, bouton d’incitation à l’action, visuels qui montrent l’étendue des possibilités
    • Très bonne simplicité qui va droit au but et permet très rapidement de comprendre l’offre
    • Phrase d’accroche très explicite sur ce que fait Canva

    Présentation des offres directement dans la HP

    • Montre directement dans la homepage les différentes offres, contrairement à beaucoup d’autres sites
    • Fait gagner du temps à l’utilisateur
    • Mise en forme efficace avec des blocs délimités par un trait fin (loi de la clotûre)
    • Titres courts (max 2 lignes)
    • Sous-titres courts
    • Call-to-action très saillants (violet foncé sur fond blanc) et très grands (faciles à cliquer)
    • Bonne hiérarchie visuelle

    Présentation en quinconce classique

    • Favorise l’apprentissage de la lecture de la page
    • Titres courts pour accélérer la lecture et le repérage dans la page
    • Call-to-action pour chaque bloc afin de favoriser l’engagement
    • Bonne hiérachie visuelle des boutons (les boutons secondaires sont en gris clair, les boutons principaux en mauve –> bon guidage (critère de Bastien et Scapin)
    • Très grands visuels pour augmenter l’effet d’immersion de l’utilisateur
    • Visuels très gais pour augmenter positivement émotion des utilisateurs
    • Grands espaces entre les éléments de page pour réduire la charge cognitive
    Capture complète de la page d'accueil de Canva.com
    Capture complète de la page d’accueil de Canva.com

    Best-practices apparence esthétique

    Design enjoué et coloré

    • Favorise les émotions positives (mais attention à ne pas mettre trop de couleurs)

    Pas d’animations

    Wording / tone of voice

    • Vouvoiement de politesse
    • Inclusivité ++ : « Idéal pour tous et toutes »
    • Mise en avant de la fonction du produit

    Performances

    Voir les résultats sur Lighthouse

    Conclusion

    La page d’accueil de Canva.com est efficace

    • Mise en page classique
    • Esprit graphique joyeux engageant
    • Simplicité de la mise en forme en haut de page et clarté de l’offre
    • Bonne hiérarchisation visuelle

    Lisez tous nos autres articles sur les pages d’accueil des services en Saas.

  • Best-practices UX de la page d’accueil de Google Chrome

    Cet article est une analyse des best-practices UX de la page d’accueil de Google Chrome, sans doute le navigateur Web le plus utilisé au monde (3,4 milliards en 2024).

    Découvrez les best-practices de cette page d’accueil et réutilisez-les pour vos propres projets.

    Remarques générales

    Page très animée, pleine d’interactions et d’animations. L’accent est mis sur l’expérience.

    Best-practices organisation générale

    Capture de la page d'accueil de Google Chrome au-dessus de la ligne de flottaison
    Capture de la page d’accueil de Google Chrome au-dessus de la ligne de flottaison

    Haut de page qui invite à l’exploration

    • Visuels principaux « coupés » : le fait de masquer une partie des visuels incite à scroller
    • Menu de page en position centrale : la position centrale est la position privilégiée d’un contenu, là où se porte le plus naturellement le regard
    • Titre simple et court écrit en grosse police de caractères

    Structure surprenante

    • Plusieurs mises en forme de bloc d’information. Cela favorise la surprise et la découverte.

    Best-practices apparence esthétique

    Design enjoué et coloré

    • Favorise les émotions positives (mais attention à ne pas mettre trop de couleurs)

    Animations partout

    • Augmentent l’attention de l’utilisateur
    • Permet d’expliquer plus facilement des concepts

    Attention à ne jamais trop mettre d’animations. Cela peut finir par nuire au guidage dans la page

    Focus sur les animations

    Il y a beaucoup de sortes d’animation dans la page. En voici quelques unes :

    Cartes

    Plusieurs cartes permettent de découvrir des fonctionnalités de Chrome. On peut les retourner en 1 clic. Le bouton d’action est situé en bas à droite.

    Best-practices

    • Bouton d’action suffisamment gros pour être facile à cliquer
    • Bouton unique pour ouvrir et fermer, pas besoin de bouger la souris
    • Animation rapide < 1s
    • Animation « douce » : l’apparition des éléments se fait de façon progressive

    Avantage des cartes : permet de réduire l’espace occupé à l’écran et de n’afficher des contenus qu’à la demande

    Timer de lecture

    Des barres d’affichage du temps se remplissent pour animer la lecture de petits paragraphes.

    Notre avis : animation amusant, mais alourdit les contenus de la page. Nous ne recommandons pas.

    Autre animation

    On trouve encore d’autres types d’animation dans la page. Mais il y en a tellement que cela finit par rendre l’expérience pénible.

    Performances

    Voir les résultats sur Lighthouse

    Analyse des performances de la page

    Conclusion

    La page d’accueil de Google Chrome est sans doute beaucoup trop chargée en animations.

    • Beaucoup d’animations qui nuisent à la performance de la page
    • Sensation de parc d’attraction
    • Malgré une belle apparence graphique, la page est difficile à comprendre
    • Manque d’homogénéité

    Vous avez aimé cet article ? Découvrez l’analyse de la page d’accueil de Figma.

  • Best-practices UX de la page d’accueil de Figma

    Cet article est une analyse des best-practices UX de la page d’accueil de Figma, une solution collaborative de design de produits numériques : sites webs, app mobiles, applications pros. En 2024, Figma compte environ 100 millions d’utilisateurs.

    Découvrez les best-practices de cette page d’accueil et réutilisez-les pour vos propres projets.

    Best-practices organisation générale

    Capture d'écran de la page d'accueil de Figma

    Gros titre avec grosse police de caractères

    • Inférieur à 3 lignes
    • Moins de 20 mots
    • Bien contrasté (noir sur blanc) pour une meilleure lisibilité
    • Icônes dans le texte qui animent le titre, mais diminuent la lisibilité

    Principal bouton d’action immédiatement sous le titre

    • Incite directement à l’action
    • Guide l’utilisateur rapidement
    • Ne propose pas de s’inscrire, mais d’essayer, ce qui est moins freinant

    Grand visuel attrayant

    • Donne une impression de richesse fonctionnelle
    • Animations sympas qui augmentent l’attractivité de la page
    • Certaines fonctionnalités sont déjà visibles à travers les animations

    Présentation en quinconce classique

    • Favorise l’apprentissage de la lecture de la page
    • Titres courts pour accélérer la lecture et le repérage dans la page
    • Call-to-action pour chaque bloc afin de favoriser l’engagement
    • Très grands visuels pour augmenter l’effet d’immersion de l’utilisateur
    • Grands espaces entre les éléments de page pour réduire la charge cognitive
    Capture d'écran complète de la page d'accueil de Figma

    Best-practices apparence esthétique

    Design enjoué et coloré

    • Favorise les émotions positives (mais attention à ne pas mettre trop de couleurs)

    Animations partout

    • Augmentent l’attention de l’utilisateur
    • Permet d’expliquer plus facilement des concepts
    • Effet de dégradés colorés qui changent au scroll : effet super positif !

    Attention à ne jamais trop mettre d’animations. Cela peut finir par nuire au guidage dans la page

    Style graphique créé uniquement par la typographie et les couleurs

    Wording / tone of voice

    • Vouvoiement pluriel : traduit l’approche collaborative du produit
    • Phrases d’engagement sur des bénéfices pour des équipes
    • Mise en avant d’une promesse : augmentation de la productivité, amélioration de la collaboration, raccourcissement des délais de production

    Le wording de la page d’accueil s’adresse avant tout à des équipes de design.

    Conclusion

    Figma est un bon exemple de page d’accueil attractive et efficace.

    • La page n’est pas trop surchargée ce qui lui permet d’être parcourue rapidement du regard
    • Les titres sont assez gros et suffisamment espacés entre eux pour créer un rythme de lecture agréable
    • Les call-to-action ressortent bien et sont guidants
    • Les visuels sont colorés et animés, ce qui renforcent l’attractivité de la page. Cela renforce aussi l’état émotionnel de l’utilisateur dans un sens positif.

    Vous avez aimé cet article ? On en a un autre pour vous sur l’onboarding de Figma.