Auteur/autrice : olivier

Analyse UX : Burklin Elektronik, leader de l’électronique
Un nouveau design

« 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.
- Plateforme technique : Intershop
Apparence graphique / impression visuelle

Page d’accueil de Bürklin Elektronik

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 !
18 juillet 2024
Analyse UX : Blake Envelopes, le spécialiste des enveloppes
Des enveloppes, en veux-tu, en voilà !

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 !
8 juillet 2024
Analyse UX Berlin Packaging, n°1 mondial des récipients
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.

Gros call-to-action homogène : rectangles rouges saillants

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 !
5 juillet 2024
Kiloutou : vaincre la complexité d’un tunnel de commande à 70 versions
Feedback sur la table ronde du 25 juin 2024 par MC Factory

La table ronde organisé par MC Factory, avec Kiloutou,

La semaine dernière, le magazine MC Factory organisait une table ronde autour du ecommerce en partenariat avec le magazine Stratégies et Adobe.

Invité, Cédric Tamboise, head of digital de Kiloutou, client de Wexperience, répondait aux questions de Majda Chaplain.

Pour rappel, Kiloutou est le n°2 de la location de matériel de chantier en France et 3ème en Europe. En B2B et B2C.

Voici ce que nous avons retenu de cet échange.

A problème complexe -> solution complexe

Pas possible de proposer un parcours unique pour des demandes très différentes. Du particulier, au pro, jusqu’à l’entreprise de travaux-public, les offres, les besoins sont différents, mais les points de contact sont les mêmes.

Obligation de les concilier dans une même plateforme.

Cela sous-tend une technologie capable de prendre en compte les différents parcours en une seule interface.

Mais également de pouvoir proposer des parcours personnalisés. Exemple : tunnel de commande = 70 versions pour 70 cas de figure différents

Conséquence : solution IT développée inhouse

La vérité vient du terrain

Pas possible de théoriser les parcours.

Pas de modèle concurrent -> obligation d’innover et d’inventer

L’innovation vient de l’observation de terrain :
- Remontées collaborateurs
- Tests utilisateurs
- Ambassadeurs
UX comme atout majeur

Fluidité des parcours indispensables : les visiteurs n’ont pas à se battre avec l’interface

Demandes complexes doivent être simplifiées en ligne.

Atout, car soulage les collaborateurs en magasin ou téléphone

Besoin de beaucoup d’informations sur le site, car contraintes logistiques parfois énormes (ex : livraison grue). Donc, plus claire sera l’interface, moins de temps sera perdu à trouver l’information

Kiloutou en chiffres
- Kiloutou : 40 ans, présent dans 7 pays, 600 agences, B2B, N2C, particuliers, artisans, entreprises du CAC 40
- 10% activité faite sur le digital, X3 dans 6 ans
- Site Récompensé l’année dernière trophée par Content Square
Retrouvez la table ronde complète en vidéo : https://www.mcfactory.fr/marketing-digital/comment-lacoste-accor-kiloutou-stellantis-excellent-en-e-commerce-strategies-gagnantes-2024/
2 juillet 2024
Comment RAJA est devenu n°1 du ecommerce avec Intershop

RAJA, c’est le leader européen de la vente de carton d’emballage et de matériel de bureau en France et en Europe. Créée en 1954, cette entreprise a connu une forte accélération dans les années 2020 pour atteindre un chiffre d’affaires en ligne de plus de 1 milliards d’euros.

Comment RAJA est parvenu à maintenir la cohésion au sein de ses multiples filiales ?

Quelle technologie a-t-elle employé ?

Comment a-t-elle géré sa croissance en transformant son organisation ?

A toute ces questions, Antoine Laffond, Head of Digital et Ecommerce, a répondu lors d’un passionnant webinar organisé par la plateforme de ecommerce B2B Intershop, le 18 juin 2024.

Raja, en résumé

[slide-anything id= »42684″]

Une entreprise à la longévité incomparable

Une entreprise vieille de 70 ans fondée par 2 femmes en 1954, Rachelle Markovic et Janine Rocher, d’où le nom RAJA, le deux premières lettres des préonomes des fondatrices.

Stratégie multicanale dès les premiers jours avec le premier catalogue de vente par correspondance en 1976.

Acquisitions multiples à partir des années 90 : en Belgique, aux Pays-Bas, en Allemagne et en Europe du Sud.

Premier site de commerce électronique dans les années 2000 avec la mise en place d’un modèle commun de ecommerce pour toutes les filiales.

Raja sort de l’emballage

Grand tournant en 2019 avec l’acquisition de Staples, Top Office, Bernard et Kalamazoo. Raja sort de l’emballage et doit donc adapter son modèle à des nouveaux produits.

En 2021 acquisition de Viking et Office Depot dans 7 pays. Le CA en ligne atteint plus de 1 milliard d’euros.

Chaque année, chaque client reçoit un catalogue. La relation client est locale, les forces de vente sont locales.

En 2022, 1,12 milliard de CA en ecommerce, soit 65% du CA du groupe. CA du Web a doublé en 3 ans. Neuf client sur 10 deviennent des clients en ligne.

Le choix d’Intershop

Pour accompagner une telle croissance, il a fallu adopter une plateforme souple, très évolutive, capable d’accueillir de nombreux modèles. Ce fut Intershop (dont Wexperience est partenaire).

En 2017, face à montée du mobile, création d’une app. Puis, rapidement pour des raisons de coûts de maintenance, passage à un site responsive. Et pendant la même période, création d’une Digital Factory, une équipe indépendante gérant tous les ecommerce.

Développeurs, chef de projets, designers, etc ont été rassemblés au même endroit. L’idée de la Digital Factory était d’être le meilleur ami du marketing.

La gros défi qui a suivi a été de convaincre toutes les filiales d’avoir un modèle et une marque unique. Cela a pris 12 mois. 12 mois pendant lesquels un CA de 300 millions a été migré sur une plateforme centrale. Cela représente 18 entreprises.

Durant la même période, accélération sur l’e-procurement. Seulement deux personnes y travaillaient en 2018, mais il a fallu accélérer pour s’adapter aux grand comptes.

Une organisation qui fait toute la différence

La Digital Factory n’appartient pas à l’informatique, mais à la division commerciale.

Autonomie pour créer des fonctionnalités qui ont de la valeur. Les équipes techniques se trouvent donc à l’intérieur de l’organisation de la Digital Factory.

Best-of-breed. Agnostique quand aux solutions et ouvert à toutes les solutions.

Souplesse

La Digital Factory est très souple et s’adapte en permanence à la stratégie globale de l’entreprise. Au moins deux fois par an.

Organisation souple et résiliente.

En 12 mois, par exemple, la Digital Factory été capable d’intégrer l’offre bureau. 30 nouvelles fonctionnalités ont été ajoutés. Et ces 30 nouvelles fonctionnalités ont immédiatement été disponibles pour toutes les entreprises du groupe.

Indépendance et écoute des parties prenantes

Feuille de route alignée sur le COMEX, mais aussi sur toutes les parties prenantes. Le clients sont également très écoutés. Et la feuille de route est révisée tous les 3 mois.

Beaucoup de CRO, le responsable CRO siège au centre de l’équipe de l’Usine Digital. Raja a créé une verticale qui travaille sur Google Analytics, mais aussi Content Square. Et cela lui permet de construire les meilleurs parcours clients en supprimant les frictions basées sur des données qualitatives et quantitatives.

L’UX également est très important.

Personnalisation

La personnalisation est un must-have lorsque vous savez que 80% du taux de conversion est augmenté dès que vous avez une expérience personnalisée en ligne.

Raja a commencé avec 3 ou 4 segmentations en ligne, puis a ajouté des dizaines de segments, en utilisant les fonctionnalités de segmentation d’Intershop. L’idée est de toujours faire des segments qui puissent être déployés dans les 18 autres filiales.

Personnalisation également en fonction des type de trafic. Grosse croissance du trafic payant. Donc, approche désormais très ROISTE.

Revoir le Webinar

24 juin 2024
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.

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

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.

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
- 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
- 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
- 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
- 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
10 mai 2024
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

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.
6 mai 2024
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

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.
6 mai 2024
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

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.

Besoin d’en savoir plus sur ce sujet, consultez cett e 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.
6 mai 2024
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

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
- Bonne hiérarchisation visuelle
Lisez tous nos autres articles sur les pages d’accueil des services en Saas.
1 mai 2024