Le guide Ultrō du site corporate : les meilleures pratiques UX/UI.

Et les erreurs à ne pas commettre.

Par

Slide suivante : touche → de votre clavier ou glisser sur mobile.

Pourquoi ce guide ?

Après 15 années passées à accompagner des entreprises de toute taille dans leur communication digitale, nous avons fait le constat que la plupart d’entre elles n’ont pas toujours les mots, ni les repères pour construire une expérience digitale corporate de qualité.
Même avec l'aide d'un prestataire.

Pourquoi est-ce donc si difficile ?

Parce que les sites internet sont des produits complexes, techniques et que le succès ne s'obtient que par la maîtrise de toutes ces composantes : l'identité, le contenu, les parcours, les interactions, la rapidité. Chacune contribue à élever ou dégrader la qualité de la fameuse «expérience utilisateur» que va vivre votre visiteur. Nous allons au travers de quelques exemples vous aider à y voir plus clair.

Allons-y !


Google

Pénalisant

Google

À éviter

Google

Recommandé

Google

Bien joué !

1. Identité
& positionnement

1.1 L’expression du métier

L’expression du métier est un premier indice de la maturité digitale de l’entreprise. Est-elle capable de l’exprimer clairement, sans abuser de technicité ou d’anglicismes ?

Ces pratiques qui visaient à traduire une forme de modernité, ou de dynamisme, vont dans le sens inverse de ce que nous attendons aujourd’hui d’une marque digitale.

Présentez-vous donc avec la volonté d’écrire pour une audience élargie (ce qui est le cas désormais en B2B). N'oubliez pas que vous ne disposez que de quelques secondes, choisissez vos mots.

À vous : Quel est le métier de votre entreprise ? Pour quelle raison l’exerce t'elle ?

Avant: la baseline métier/vision

Ce sous-titre peu lisible apposé sous le logotype, qui permet de revendiquer un métier, parfois une vision, n'est en rien adapté à la communication digitale. Préférez une expression franche et claire dans la partie supérieure de la page.

Ipsen

Le métier par le texte et le visuel

Exploitez le premier tiers de la page d’accueil pour délivrer les messages stratégiques. Chez Lacroix, le visuel vient en support du message. Si la signature métier est volontairement anglaise pour accentuer la dimension internationale du groupe, une introduction vient compléter le propos sous le bloc principal.

Lacroix

Mention spéciale

L’utilisation de la vidéo est particulièrement réussi sur le site d'Icade. La partie supérieure de la page d'accueil coche toutes les cases : métier, contexte, accès directs sur les activités.

1.2 L’offre

Contrairement aux supports papier où il faut pouvoir tout dire dans un format inextensible, le digital permet de séquencer. C’est à dire d'engager progressivement un utilisateur, à partir d’une représentation d’ensemble, dans le détail d’un contenu technique ou commercial. Le contexte devient alors favorable pour stimuler une prise de contact.

Mais pour espérer transformer ce visiteur en prospect, il est indispensable qu'il ait au préalable une lecture claire de l’offre, qu’il s’agisse de produits, de services ou de solutions.

Définissez donc précisément vos cibles, leurs besoins et les arguments qui répondent à leurs problématiques.

Sogetrel

La navigation à l’aveugle

Un travers fréquemment observé : une liste d'offres dont les dénominations ne permettent pas à l'utilisateur de faire un choix rationnel. Quel que soit le type d'accès proposé (menu, blocs, listes), il est préférable d'accompagner chaque offre d'une courte description.

Cartographie

Le propre des grands groupes industriels : des activités diversifiées et en quantité. La vue d'ensemble proposée sur Orano permet de les avoir toutes à l'écran, de choisir de les consulter en détail mais aussi d'accéder directement aux cas clients. Bien joué !

Orano

Offre et langage visuel

Ce travail de recherche graphique associant pictogrammes et secteurs d'activité nous permet d'introduire le chapitre suivant, celui de de l'identité visuelle. Le recours à l'illustration permet d'affirmer l'identité globale de la marque et de créer une signalétique forte pour la communication digitale.

Rexel

1.3 L’identité visuelle

La marque digitale est appelée régulièrement à représenter son métier, ses collaborateurs, ses produits et ses services. Le sujet de l'identité ne se limite pas uniquement aux pages web, il inclut les composants que sont la photographie, la typographie, l’illustration et même l'ergonomie pour les marques issues de la technologie dont le seul point de contact avec le consommateur est une interface.

Cette identité visuelle doit être durable, singulière, attractive, basée sur des choix inspirés de mise en page et de typographie, détachée des effets de mode qui favorisent l'obsolescence. 

Elle doit être suffisamment flexible, évolutive, pour s’adapter aux spécificités des services numériques : la surface utile, la lisibilité, le volume, tout en maintenant une cohérence forte sur l’ensemble des supports.

Orano

Structure et composition

L’absence de structure (alignements, rythme, hiérarchie) dans la composition des pages demande un effort de lecture conséquent pour l’utilisateur.

Dans le cas présent, la rupture avec les standards est telle qu'elle pénalise l'expérience.

Structure et composition

Comme pour le cas précédent, les standards élémentaires ont été délaissés au profit d'une originalité qui dessert l'expérience.

iPhone

Iconographie

Le traitement du visuel a largement profité du développement des connexions haut débit, y compris sur mobile. Les contraintes techniques sont devenues moindres si bien que les images en haute définition sont de plus en plus fréquentes.

Néanmoins, malgré ces possibilités étendues, le résultat n’est pas toujours au rendez-vous.

C'est regrettable car le manque d'inspiration, l'amateurisme des prises de vue et les formats inadaptés nuisent à nombre d'expériences digitales B2B. Le savoir-faire de l'entreprise, son expertise, la recherche, l'innovation sont des sujets qui se démontrent tant par l'écrit que par l'image.

Misez sur une iconographie de qualité, l'expérience digitale est avant tout une expérience visuelle.

Qualité du visuel

Format des visuels

Certains sites utilisent des images comme bandeaux décoratifs, de la largeur de l’écran. Soyons clairs : ces images ne sont d’aucune utilité pour l’utilisateur. Tronquées ou mal cadrées, leur format ne correspond à aucun ratio d’écran existant. La raison, sans fondement, de cette « bandelettisation » est souvent la suivante: la hauteur de l’image est réduite de peur que les visiteurs ne voient pas ou ne consultent pas le contenu situé sous cette image.

N’ayez crainte, les utilisateurs savent ce qu’est une barre de défilement.

Les images libres de droit

Les mises en scène artificielles sont aujourd’hui rapidement identifiées par tous les profils de visiteurs. Elles déshumanisent au lieu d’humaniser, au risque même de décrédibiliser le propos.

iPhone

Tirez vous le portrait

Préférez une mise en avant des collaborateurs (les vrais), plus sincère, plus rassurante pour vos prospects. Mais aussi de vos infrastructures, de vos outils de production. Cette matière visuelle participe à l'expression de votre identité.

Rexel

Trop technique ?

Certains produits industriels peuvent être particulièrement difficiles à photographier, en raison de leur conditionnement, texture ou comportement. Une solution est d'approcher la prise de vue par le résultat final, lorsque le produit a été appliqué ou intégré dans environnement définitif.

Rexel

Mention spéciale

Danish Crown est une entreprise agro-alimentaire danoise. Son site conjugue avec brio toutes les composantes identitaires citées précédemment : mise en page, typographie, couleurs, qualité du visuel, propos clairs. Les sites remarquables ne sont pas réservés qu'aux entreprises de services.

danishcrown

2. Architecture & navigation

2.1 Parcours utilisateurs

Il fût un temps où revenait dans mes conversations avec mes collaborateurs ou clients, l’expression « site portail ». En ce temps là, il était bien accueilli de faire une page d’accueil fournie, donnant accès à, si possible, toutes les pages et rubriques du site.

Bon courage à l’internaute, il finirait bien (au bout d’un moment dont la durée ne préoccupait personne), à atteindre ce qu’il était venu chercher en trois clics.

Puis sont arrivées l’architecture de l’information, les personae (profils d’utilisateurs) et avec la volonté de structurer les contenus. Pour que nous, visiteurs, trouvions vite et facilement notre voie dans des sites dont l’arborescence peut contenir plusieurs centaines de pages.

Les choix d'architecture sont souvent sujets à débat, le premier réflexe étant souvent de vouloir tout afficher au même niveau et au même moment. Or tous les contenus ne se valent pas. Gardez en tête que les parcours de l'internaute restent motivés par l'atteinte de ses propres objectifs.

Les entrées par profil de visiteurs

Un système d’entrée par profil de visiteurs amène une navigation superflue , voir même inadaptée. Ces raccourcis sont des hypothèses de parcours qu’une navigation principale bien pensée doit être capable de gérer.

iPhone

Préférer

Une navigation qui permet d’identifier au premier coup d’oeil les rubriques visitées par les « profils cibles » : emploi, media, presse.

Ferrovial

Arbitrer et prioriser, le moins le mieux

Une navigation de premier niveau trop chargée complexifie la prise de décision. Il est préférable de factoriser les entrées et de limiter le nombre de choix aux rubriques qui s'adressent à une majorité de visiteurs.

Tournaire

Préférer

Un choix restreint d’entrées de premier niveau qui donne accès à une arborescence organisée. Une proposition plus lisible pour l’utilisateur.

Pomona

Meilleure pratique

La navigation principale détache quelques rubriques stratégiques. Le reste de l'arborescence est proposé dans un menu burger sous forme de sitemap organisé, l'interface reste ainsi dégagée. Le bloc principal permet la cohabitation d'un message d'actualité et d'une proposition de recherche libre. Efficace.

Solvay

La recherche, tout simplement

La recherche libre reste le moyen le plus efficace et le plus rapide pour atteindre un contenu. Certains sites vont jusqu'à la positionner comme point de départ de l'expérience utilisateur. Excellent choix, sous réserve que la technologie au service de ce moteur soit à la hauteur.

Sanofi

La visite «guidée»

Malheureusement, le passage de certains intitulés en gras n'aura aucune influence sur le choix que fera l'utilisateur. Le déséquilibre créé par les variations de traité graphique entrave la lecture.

Limagrain

2.2 Menus de navigation

Les usages mobiles et la technologie ont permis une amélioration sensible des systèmes de navigation. La barre principale à onglets (qui avait la lourde tâche de porter toute l'arborescence du site) a presque disparu au profit de menus extensibles, séquencés, qui apportent un réel confort à l'usage sur toutes tailles d'écrans.

Le menu principal n'est plus un système unique, il est fréquemment relayé par d'autres composants de navigation à l'intérieur même des pages, ouvrant l'accès vers des niveaux de contenus plus profonds.

La combinaison de ces différents modules a permis d'enrichir considérablement l'exploration des contenus.

Mention spéciale

La navigation principale est suppléée par quelques raccourcis sur des fonctionnalités essentielles en bas de l'écran évitant ainsi une surcharge de la partie supérieure. La recherche libre (et de qualité) assure un accès à tout autre contenu.

Sanofi

Le menu comme écran de contenu

L'exercice est parfaitement maîtrisé sur ce cas : le menu est conçu comme un écran à part entière, distinguant les entrées principales (les solutions) des entrées secondaires. Les cartes présentant les différentes solutions apportent un premier niveau d'information utile à la compréhension.

Sanofi