Chocomize est une petite entreprise de Miami qui vend et personnalise des chocolats pour les entreprises. Ses clients comprennent Netflix, Amazon, Porsche, Google, Nike et American Airlines.
Chocomize a élargi sa gamme de produits pour proposer des truffes en chocolat, des cadeaux de mariage, des paniers-cadeaux, des produits de boulangerie, des formes de chocolat personnalisées, du chocolat chaud sur un bâtonnet, et plus encore. La société a réalisé un chiffre d’affaires annuel estimé à 5 millions de dollars en mars 2022.
Vous souhaitez une analyse UX plus poussée de votre site ou vous aimeriez mieux connaître nos méthodes d’analyses pour vous aider à rendre plus performants votre site ecommerce ? Contactez-nous ou bien découvrez notre méthode de tests utilisateurs.
Apparence graphique/impression visuelle
Page d’accueil de Chocomize sur desktop
Version desktop 👍👍
Chocomize est un site à la limite du B2C et en reprend les codes.
Mise en avant des produits en héros
Haut de page proche d’une landing page marketing classique
Gros call-to-action en haut de page
Design graphique clean avec codes couleurs type marque grand public
L’organisation de la page est proche de celle d’un site mono-produit.
Mise en forme agréable grâce à des blocs espacés, des gros titres guidants, de nombreux éléments créant de la diversité.
Version mobile 👍👍👍
La version mobile est très propre et parfaitement responsive.
Grâce au call-to-action, situé très visiblement au-dessus de la ligne de flottaison, on crée de l’engagement.
Page d’accueil de Chocomize sur mobile
Présentation de l’offre et recherche 👍👍
Chocomize est un site comportant peu de références, aussi le moteur de recherche n’a-t-il pas été favorisé visuellement.
En revanche, le menu de navigation offre différentes possibilités d’entrée qui prennent en compte les différents modes de recherche des clients potentiels.
Par catégories
Par budgets
Par occasions
Menu de recherche dans Chocomize
Dommage que le module personnalisation ne soit pas plus mis en avant
Les visuels ne sont pas toujours très parlant, donc pas guidants
Mobile 👎
Sur mobile, on perd la lisibilité du menu à cause de la disparition des vignettes produits.
Menu de navigation mobile de Chocomize
Page liste 👍👍
Page liste dans Chocomize
La page liste présente vraiment les produits de manière classique et n’appelle pas de commentaire particulier, hormis le fait que la qualité des photos ne soit pas au rendez-vous.
Fiche produit 👍
La fiche produit est riche, mais manque de clarté et d’organisation. 👎
Le bloc en haut à droite est difficile à lire et peu hiérachisé
Les visuels produits ne sont pas variés, de mauvaise qualité, et le zoom n’apporte pas d’informations supplémentaires
Les call-to-action sont trop bas, mais leur distinction par couleur est très claire
Milieu de page de la fiche produit de Chocomize
Le milieu de page offre une expérience dégradée à cause de blocs textes trop longs et pas assez fragmentés. L’information ne donne pas envie d’être lue. Le schéma relatif à la personnalisation n’apporte pas une information claire.
Le même problème se retrouve plus bas dans la page.
Conclusion
Chocomize présente une expérience client relativement classique, mais avec un site simple, clair et relativement agréable à regarder. Sans doute qu’il pourrait encore être amélioré avec un configurateur en ligne et une présentation plus attractive et interactive de l’offre.
Vous souhaitez une analyse UX plus poussée de votre site ou vous aimeriez mieux connaître nos méthodes d’analyses pour vous aider à rendre plus performants votre site ecommerce ? Contactez-nous ou bien découvrez notre méthode de tests utilisateurs.
« Notre nouvelle identité de marque est pleine de dynamisme, nettement plus numérique et en même temps clairement centrée sur l’humain », déclare Pirjo Niemi, CMSO, à propos du nouveau design.
Pour ses 70 ans, le distributeur allemand Bürklin s’est offert un rebranding qui le distingue fortement de ses concurrents.
Qui dit rebranding dit refonte des parcours clients et, dans cet article, on vous donne notre première analyse sur un site qui se veut à tout point de vue innovant.
Vous souhaitez une analyse plus poussée de Bürklin Elektronik ou vous aimeriez mieux connaître nos méthodes d’analyses pour vous aider à rendre plus performants votre site ecommerce ? Contactez-nous !
A propos de Bürklin Elektronik
Bürklin Elektronik est une entreprise allemande spécialisée dans la distribution de composants électroniques et d’équipements de haute qualité. Fondée en 1954 et basée à Oberhaching, près de Munich, l’entreprise offre une large gamme de produits incluant des composants passifs et actifs, des connecteurs, des câbles, des outils, et des équipements de mesure.
75 000 : Nombre d’articles en stock disponibles pour livraison immédiate.
1954 : Année de fondation de l’entreprise.
500 000 : Nombre total de produits disponibles à la commande via leur catalogue en ligne.
98% : Taux de livraison dans les délais promis.
30 : Nombre de pays où Bürklin Elektronik assure des livraisons directes.
D’un point de vue graphique, on peut dire que Bürklin ne fait pas dans la dentelle. Des couleurs fluos, presque criardes. Un design très flashy, mais aussi très tendance. Et une police de caractère à pas fixe, au style électronique, qui vient renforcer l’impression de société de matériel électronique.
Version desktop
Un moteur de recherche proéminent 👍👍
Un best-practice évident : rendre le moteur de recherche le plus utilisable et le plus visible possible, surtout quand on a une offre aussi large que Bürklin.
Un design minimaliste facilitant la lisibilité de la page 👍👍
Les nouveaux choix de design de la marque favorise une simplicité visuelle. Peu de couleurs, une typo impactante, mais lisible. Une organisation simple et espacée.
Un grand menu de navigation responsive 👍👍
Il est toujours très difficile de créer un menu de navigation avec une offre aussi large. Le choix fait ici est très simple, sans fioriture, mais efficace.
Bémol : une partie éditoriale compliquée à lire 👎
Partie éditoriale de la page d’accueil de Bürklin Elektronik
La partie éditoriale de la page d’accueil est placée bas dans la page. Son organisation et surtout la diversité de sa mise en forme donne une impression de confusion.
Version mobile 👍👍
La page d’accueil sur mobile semble mieux structurée que sur desktop. Tous les éléments s’organisent parfaitement. L’ensemble et cohérent et facile à parcourir.
En fait, on a l’impression que le site a d’abord été conçu sur mobile.
Version mobile de Bürklin Elektronik
Navigation/présentation de l’offre
Page liste 👍
Les pages listes présentent une complexité inhérente à l’offre Bürklin. On imagine le casse-tête que cela a du être pour les concevoir.
A noter :
Couleurs radicales qui créent un guidage fort
Affichage malin des prix par quantité
Bonne mise en avant de la disponibilité
Possibilité d’ajout au panier directement depuis la liste
Affiche de la liste produit sur Bürklin elektronik
Un menu filtre extrêmement complexe visuellement 👎
Le menu de recherche des composants est extrêmement complexe visuellement. Il est aussi assez peu pratique à utiliser. Difficile de juger les choix qui ont été faits ici. Sans doute qu’une solution plus simple aurait été extrêmement coûteuse à réaliser.
Quelques remarques :
Complexité visuelle, mais bon rangement de l’information
Problème : rechargement de la page à chaque choix de filtre
Slider latéral malvenu
Filtres de recherche dans la liste produits
Version mobile 👎👎
Sur la version mobile, cette page est très dégradée en terme d’utilisabilité.
Le menu filtres devient extrêmement difficile à utiliser
Boutons « cases à cocher » trop rapprochés
Choix de présentation en carrousel des produits très peu pratique
Disparition de l’affichage du prix par quantité
Page produit 👍👍👍
La page produit est bien organisée et bien rangée. C’est un bon exemple de fiche produit pour des produits aussi complexe que des composants électroniques.
Un haut de page clair et guidant
Beaucoup d’informations
Fiche produit chez Bürklin Elektronik
Conclusion
Le rebranding de Bürklin montre qu’on peut créer un site moderne, dynamique dans un domaine réputé pour sa « sécheresse ».
Ce qu’il faut retenir :
Un design réussi
Une interface simple qui met en œuvre plusieurs best-practices du ecommerce digital
Une grande complexité, parfois, dans les outils de configuration, inhérent à la typologie de l’offre
Vous souhaitez une analyse plus poussée de Bürklin Elektronik ou vous aimeriez mieux connaître nos méthodes d’analyses pour vous aider à rendre plus performants votre site ecommerce ? Contactez-nous !
Blake-envelopes.com est le site de la société Blake Envelopes, basée au Royaume Uni, et dont les origines remontent aux années 70.
Offrant plus de 1 600 produits exceptionnels de papier et d’enveloppes, Blake est synonyme de qualité. Fournissant des marques telles qu’Amazon, Cartier et HMRC, ils sont véritablement un leader du marché dans les solutions de papeterie et d’enveloppes.
Vous souhaitez une analyse plus poussée de Blake Envelopes ou vous aimeriez mieux connaître nos méthodes d’analyses pour vous aider à rendre plus performants votre site ecommerce ? Contactez-nous !
Qui est Blake Envelopes ?
Créée en 2000
Plateforme : Magento 2 open source
CA > 250M£ / an
Site réalisé par Pixie Commerce
Page d’accueil de Blake Envelopes
Apparence graphique / impression visuelle
Répétons encore que l’apparence graphique et l’impression visuelle sont des vecteurs d’une bonne UX. Plus le site sera perçu comme beau, plus l’engagement sera élevé. D’où l’importance de travailler le design.
Desktop
Magnifique page d’accueil, visuels très travaillés 👍👍
Le haut de page est très attractif avec un visuel sobre et clean qui incite à regarder. Il ne faut pas que le haut de page sera la première chose regardée et son apparence est donc extrêmement importante.
Mise en page aérée et simple 👍👍
Moins d’infos à l’écran, plus d’espaces entre les blocs favorisent le décryptage de la page et améliorent l’engagement. Il est important de laisser au regard le temps de se reposer entre deux blocs d’infos et de ne pas lui donner trop de choses à analyser au pixel carré.
Couleurs douces 👍👍
On peut choisir des couleurs fortes, mais des couleurs plus douces faciliteront l’engagement. Dans le cas des enveloppes, c’est un choix pertinent pour un produit « soft ».
Mobile👎👎
Le site est responsive, mais l’analyse de la version mobile montre que le site a d’abord été designé en « desktop » avant d’être décliné en mobile. Conséquence : beaucoup de problèmes de mise en page + un site qui fait presque amateur par rapport à la version desktop.
Mise en forme dégradée
Apparence visuelle non contrôlée
Trop de textes et textes trop longs
Textes sur les images
–> conception moins bien contrôlée sur mobile
Navigation/présentation de l’offre
Menu de navigation
Pour des produits comme ceux de Blake où il est assez difficile de décrire ce qu’on recherche, un menu de navigation complet qui guide l’utilisateur dans sa recherche en lui apportant des indices de recherche est primordial. De ce point de vue là, Blake-envelopes.com est très bien fait.
Menu très simple. Libellé d’items très courts. Utilisation des majuscules pour augmenter leur impact visuel.👍
Pour éviter d’avoir trop d’infos dans le menu du haut, il est indispensable de réduire au maximum les items visibles, mais aussi de réduire les titres.
Magnifiques panneaux de sous-menu montrant la profusion de l’offre tout en la rendant parfaitement accessible👍👍👍
Etant donné la quantité d’informations sur chaque panneau de menu, il a fallu alléger la charge visuelle. C’est très bien sur Blake-envelopes.com grâce à des techniques d’optimisation de la charge visuelle des contenus.
Interactions au rollover qui rendent plus agréable l’expérience 👍
Même en B2B, on a le droit d’ajouter quelques effets au cours de la navigation. Dans le menu principal, ceux-ci s’activent au rollover. Leur but est de générer de l’engagement en créant une expérience plus « fun ».
Plusieurs clés d’entrée 👍👍
Indispensable à une bonne UX, le choix de plusieurs clés d’entrée permet d’appréhender les différents moyens de chercher un produit. C’est comme un système de filtres, mais avant l’affichage des filtres.
Les clés d’entrée sont souvent déterminés par une recherche utilisateur et une analyse des statistques web.
Menu de navigation de Blake Envelopes
Version mobile
Réadaptation complète du menu sur desktop, mais trop long. Les visuels enveloppes sont renvoyés en bas de menu.
Page liste
Page liste de Blake Envelopes
Perte d’espace dans les entêtes de page, à cause du SEO 👎
Consacrer une moitié de l’écran à un visuel et un texte SEO n’est pas une bonne chose. Ça n’apporte rien en terme d’information et ça complexifie la navigation, car cela oblige l’utilisateur à scroller quand il recharge la page, ce qui arrive quand il sélectionne un critère dans les filtres
Textes sur photo illisibles 👎
Erreur classique. Augmente la charge cognitive.
Page complexe à lire : trop détails sont directement affichés dans la liste 👎
Le nombre de détails sur les produits aurait pu être réduit ou caché dans un panneau coulissant. Ici, il y a trop d’informations qui alourdissent la navigation.
Pas de possibilité d’avoir un affichage alternatif en colonnes 👎
Dommage, car il est important de pouvoir avoir 2 modes d’affichage des produits. Le mode en colonne est moins informatif, mais permet de « surfer » plus vite sur l’offre.
Wording des boutons perturbant (« Buy now » au lieu de « Add to cart ») 👎
Les wordings sont toujours plus importants qu’on ne pense. Un wording imprécis ou incorrect peut faire hésiter l’utilisateur et lui faire perdre du temps. Le libellé « Acheter » n’est clairement pas le bon, puisque l’action est « Ajouter au panier ». Cepandant, on peut se poser la question d’un choix résultant d’un test A/B qui serait contre-intuitif.
Filtres parfois mal segmentés 👎👎
Les listes de filtres sont parfois trop longues et diffiiles à lire.
Liste de critères dans un filtre. Il y en a beaucoup trop !
Version mobile
A cause de la mise en forme complexe, beaucoup de place perdue en hauteur, obligation de scroller beaucoup pour voir toute une catégorie de produits.
Apparence visuelle étriquée. L’intégration sur mobile n’a pas été poussée.
Filtres non sticky. Oblige à scroller de haut en bas sur de longues distance pour aller les utiliser. 👎👎
Page produit
Page produit de Blake Envelopes
En première analyse, il n’y a pas grand chose à dire sur la page produit qui est très classique et bien réalisée.
Page bien agencée
L’agencement est classique et respecte les conventions, ce qui simplifie sa lecture par l’utilisateur.
Infos claires et courtes, mais complètes
Les textes ont été optimisés et raccourcis pour une lecture simplifiée. Il faut toujours essayer de les réduires au maximum.
Bon guidage
La page est bien structurée en terme de guidage, grâce à une bonne utilisation des couleurs de bouton, l’utilisation de différentes tailles de police de caractères et un agencement des informations bien ordonné.
Conclusion
C’est tout pour l’instant ! Il serait possible d’aller beaucoup plus loin dans l’analyse en étudiant chaque détail. Mais, le mieux, sur un site déjà bien designé comme celui là, serait de pratiquer un ou plusieurs tests utilisateur, afin de trouver des enseignements plus pertinents qui aillent plus loin que les seuls aspects ergonomiques.
Vous souhaitez une analyse plus poussée de Blake Envelopes ou vous aimeriez mieux connaître nos méthodes d’analyses pour vous aider à rendre plus performants votre site ecommerce ? Contactez-nous !
Berlinpakaging.eu est le site e-commerce de Berlin Packaging qui cible les marchés B2B et B2C pour les industries de l’alimentaire et des boissons dans toute la région EMEA. Il propose un vaste catalogue de solutions de packaging (bouteilles, bocaux, boîtes de conserve, seaux, fûts et bien plus encore) disponibles sur commande, y compris en petites quantités
Vous souhaitez une analyse plus poussée de Berlin Packaging ou vous aimeriez mieux connaître nos méthodes d’analyses pour vous aider à rendre plus performants votre site ecommerce ? Contactez-nous !
Qui est Berlin Packaging ?
Berlin Packaging est le plus grand Hybrid Packaging Supplier® au monde de récipients en verre, plastique, métal et fermetures.
L’aventure EMEA a commencé en 2016 avec l’acquisition de la société Bruni Glass , jouissant de plus de quarante ans d’expérience dans la fourniture d’emballages en verre de haute qualité dans les secteurs du vin, des spiritueux, de l’alimentation, de la gastronomie et des parfums d’ambiance.
Depuis lors, la présence en EMEA s’est considérablement développée par le biais d’acquisitions stratégiques jusqu’à la création de Berlin Packaging EMEA qui dispose maintenant une présence géographique dans 15 pays : Afrique du Sud, Albanie, Allemagne, Bulgarie, Danemark, Espagne, France, Grèce, Italie, Irlande, Pays-Bas, Portugal, Roumanie, Royaume-Uni et Suisse.
Quelques chiffres
1.000+ Employés dans la région EMEA
900+ Fournisseurs dans la région EMEA
50.000+ Articles dans le monde entier
550K+ m² d’entrepôts dans le monde entier
100+ Sites dans le monde entier
Page d’accueil du site Berlin Packaging
Apparence graphique/impression visuelle
Version desktop :
Bonne impression visuelle
Il est primordial de faire une bonne première impression. Ici, le design soigné, les espaces aérés, le graphisme simple, la qualité des visuels favorisent cette bonne première impression. Cela permet d’augmenter l’engagement du visiteur.👍 👍 👍
Espaces aérés, clairs
Ne jamais surcharger l’interface. Ne pas utiliser toute la surface de l’écran, mais laisser des espaces vides entre les blocs permet de rendre l’interface plus attractive visuellement, mais aussi de la rendre plus facile à utiliser. 👍 👍
Visuels agrandis, belles photos d’ambiance
60% du travail de séduction est fait par les photos. Plus les visuels sont soignés, meilleure est l’impression, et plus grande sera l’appétence à découvrir l’offre. 👍 👍 👍
Grand carrousel immersif en haut de page
Plus les images sont grandes, plus elles engagent. Un carrousel permet de démultiplier la force de séduction. Attention, cependant à ne pas le faire dérouler trop vite.
Des boutons saillants, grands, faciles à lire donneront plus envie à l’utilisateur de cliquer et d’avancer dans le site. Il est primordial aussi que ces boutons aient une cohérence entre eux. 👍
Merchandising façon B2C
Un merchandising type B2C encourage l’utilisation du site, car il est permet de capitaliser sur l’apprentissage des best-practices en B2C beaucoup plus courants qu’en B2B
La bonne idée pour créer de l’engagement : formulaire pour trouver le bon produit 👍 👍 👍 🥇
Rien de mieux qu’un outil de recherche ou un configurateur pour engager l’utilisateur. Ici, configurateur simple à comprendre, placé juste sous le carrousel.
Configurateur de la page d’accueil de Berlin Packaging
Version mobile :
Apparence simple et facile à appréhender
Mêmes remarques que plus hauts.
Gros titres, grands espace blanc
Sur mobile, faire très attention à ce que le responsive design ne viennent pas transformer l’interface en « champ de bataille ». La simplicité doit être maintenue.
Manque d’éléments pour l’engagement (plus de call-to-action)
Il n’y a pas de boutons pour engager, ce qui est dommage. 👎
Version trop dégradée par rapport à la version desktop (Eshop rejeté en bas de menu) 👎 👎
Navigation/présentation de l’offre
Menu principal 👍 👍 👍
Grand menu de navigation très clair, très lisible grâce à un wording très court des catégories
Belle présentation des produits dans le sous-menu / bonne homogénéité des visuels
Affichage du nombre d’articles par catégorie ! 👍 👍
Menu de navigation du site Berlin Packaging
Page liste
Entête de page beaucoup trop haut. Perte de temps pour la lecture de la page et oblige à scroller légèrement à chaque page 👎
Beau merchandising des produits
Bon système de filtres. Beaucoup de catégorisations. Ergonomie simple.
Page liste du site Berlin Packaging
Page produit
Très belle présentation classique, très similaire à du B2C 👍 👍
Call-to-action principal très visible, très saillant, très gros
Pas de zoom 👎
Très bon guidage
Textes de description courts et partiellement dissimulés pour alléger charge cognitive
Cross-selling et produits complémentaires bien présentés
Fiche produit du site Berlin Packaging
Conclusion
C’est tout pour l’instant ! Il serait possible d’aller beaucoup plus loin dans l’analyse en étudiant chaque détail. Mais, le mieux, sur un site déjà bien designé comme celui là, serait de pratiquer un ou plusieurs tests utilisateur, afin de trouver des enseignements plus pertinents qui aillent plus loin que les seuls aspects ergonomiques.
Vous souhaitez une analyse plus poussée de Berlin Packaging ou vous aimeriez mieux connaître nos méthodes d’analyses pour vous aider à rendre plus performants votre site ecommerce ? Contactez-nous !
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
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
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
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
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.
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
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
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
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
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.
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
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
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
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
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.
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
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
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
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.
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
Best-practices apparence esthétique
Design enjoué et coloré
Favorise les émotions positives (mais attention à ne pas mettre trop de couleurs)
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
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.
