Webdesign et cabinets de stratégie: analyse

Ayant récemment acquis la capacité à développer (\o/), je me suis mis à faire mon propre thème pour Unite Innovation. Maintenant, il reste un challenge significatif: je ne suis pas graphiste et, si je me débrouille en termes de hiérarchie d’information, mon sens esthétique n’est pas extraordinaire.

Comment faire pour rendre mon site génial ?

Très simple : en regardant ce que font les autres. C’est un principe fondam: l’une des premières étapes est de trouver des sources d’inspiration. Beaucoup de choses ont été faites, il ne faut pas réinventer la roue. En outre, votre objectif n’est, en principe, pas de faire une oeuvre d’art, mais de transmettre un message. Pour cela, les formes les plus familières au lecteur sont souvent les meilleures. L’originalité peut être un vilain défaut (et une marque d’orgueil).

J’ai choisi comme inspiration les grands cabinets de conseil en stratégie. En effet, ils ont des contenus de qualité sur des domaines pointus et transversaux, comme nous. En outre, la posture d’expertise me semble un bon axe, même si nous seront dans un partage disons plus ouvert des connaissances.

J’en ai sélectionné plusieurs :

Outre les belles sources d’inspiration, nous relèverons aussi quelques erreurs.

Premier écran = le titre

La page d’accueil

Le point le plus évident est la présence, dans le premier écran, d’une grande image avec un titre (~ un hero)

Seul Oliver Wyman se distingue en n’utilisant pas une image, mais un grand fond blanc. Le principe est néanmoins le même: mettre en valeur le titre.

Pages de prestation

Alors cela ne me concerne pas trop (pour ce site :p), mais c’est intéressant d’étudier leurs pages de prestation, notamment l’entrée en matière (la suite est « classique » : regardez nos kpi, notre équipe, etc.)

Je trouve l’approche de Bain top: un hero qui donne le titre et présente tout de suite la valeur ajoutée. Ensuite on a le plan de la page
BCG présente aussi un beau hero en pleine hauteur. Il y a en fait 3 pages en une, l’espèce de sous-menu (« latest thinking » …) fait en fait défiler d’autres aspects de la page. C’est une mécanique peu intuitive, trop originale.
Encore sur BCG, je trouve cette présentation des articles portant sur ce thème intéressante. Néanmoins, on voit de gros problèmes de lisibilité (faible contraste titre/fond).
Oliver wyman se contente aussi d’un Hero avec seulement le titre. Rq: certains hero sont animés.
Néanmoins, dès qu’on descend, on voir une barre noir, avec le breadcrumb et le sommaire de la page.
Celle-ci va ensuite se caler en haut, en dessous du menu. C’est très bien fait, j’aime beaucoup. Contrairement à BCG, il n’y a bien qu’une seule page.
L’approche de EY est très différente, n’ayant pas de hero.
Ensuite ils amènent sur leurs publications sur le thème ou bien sur le détail de leur prestation.
L’entrée de leur page sectorielle est très intéressante. Ils amènent ensuite sur leurs publications.

Les publications

Comme on vient de le voir, les articles sont beaucoup mis en avant dans les pages d’accueil / de prestation.

Ey a plusieurs types de publications. Il y a par exemple des « web series » où le principal contenu est une vidéo. Les publications plus classiques (comme celle-ci https://www.ey.com/fr_fr/financial-services/volatilite-du-marche-pour-les-wealth-managers), sont intéressante : le hero et son texte, qui est la question à laquelle répond l’article, sont animés, ce qui capte bien l’attention. [rq: il ne faut pas trop regarder les Hn par contre, ça pique les yeux xD]. En haut une barre permet de savoir où on en est dans l’article. Leurs titres de « chapitre » sont très jolis (mais on voit qu’ils ont un problème de traduction). Il peut y avoir un problème de contraste/lisibilité font/texte pour le hero (ce qui est très commun pour ce genre de dispositions).

Une particularité des articles BCG est la quantité importante d’informations différentes dans le hero. L’encart blanc permet d’éviter le problème de lisibilité. Mais la quantité d’information fait peut-être un peu fouilli. [la structure de Hn … quelle horreur :'( ]

Les heros de certains articles de Bain est intéressant.

Les menus

Le menu avec une position fixe

Tous les sites, sauf celui de McKinsey ont une position fixe en haut de l’écran et se modifient très légèrement quand on est tout en haut et quand on descend. Je pense que c’est une bonne pratique de toujours voir le menu.

Des menus très sophistiqués

Les menus sont intéressants, car tous assez complexes et certains sont très atypiques.

Le menu Ey est très joli, très clair, avec le descriptif de la catégorie à gauche.
Vous avez même un autre niveau de menu ensuite et tout reste très beau. J’aime beaucoup.
Le Menu BCG est extrêmement complexe et riche. Je note qu’ils n’ont pas traduit les intitulés en français. Je ne comprends pas trop ces derniers du coup (même si je lis très bien l’anglais en principe ..).

Oliver Wyman est plus classique,
Le menu de Bain est clair (expertise sectorielle/fonctionnelle, c’est limpide) et les sous catégories sont bien précisées. BCG pourrait s’en inspirer.

C’est un sujet particulièrement important pour Unite Innovation. En effet, ce site aura différentes typologies :

  • Les thématiques: seo et développement aujourd’hui, mais beaucoup d’autres ensuite et des variées, qui iront au-delà du marketing digital
  • Ultimement, j’aimerais aussi avoir des analyses sectorielles.

Un point intéressant: la translucidité du menu

Il y a un sujet qui m’intéresse pas mal, c’est le fait que le menu soit translucide. Lorsque c’est bien fait, je trouve ça assez magnifique, cela renforce le choc du premier écran. Néanmoins cela pose une difficulté majeure : il faut que le menu soit lisible.

Bain réussi parfaitement l’exercice
Et dès qu’on scrolle ou qu’on passe la souris, le header redevient à fond blanc.
Mc Kinsey réussit aussi parfaitement l’exercice, avec un menu magnifique (+ la petite animation du truc bleu que je vous encourage à aller voir et qui est très belle et très adéquate, donnant un sentiment de sophistication et d’intelligence).

Commentaires

Quid des grands écrans ?

Il est intéressant d’étudier les différences de design en grands écrans. En effet, l’affichage ne va pas être le même si votre écran fait 1400px que s’il en fait 1900 ou bien 2500.

On voit que le design de McKinsey n’est pas du tout adapté.

La police du menu ne suit pas et devient donc ridiculement petite
La présentation « blog » en croix est un peu déséquilibrante et malaisante. Surtout … =>
=> En comparant avec l’entrée suivante, dont le texte n’est lui pas rapproché du centre. (et il y a encore une autre marche ensuite)

BSG a également quelques soucis avec son menu:

Il reste coincé sur la gauche
La police du menu ne change pas, même quand on double l’écran
Mais le reste est très cohérent

Surtout, on observe que le menu est différent sur la home page générale (https://www.bcg.com/) du reste (et qu’elle n’y a pas les problèmes qu’on vient de souligner, ressemblant beaucoup à celui de Bain). C’est un vrai problème et j’ai du mal à comprendre pourquoi ils n’ont pas gardé ce menu partout.

Les autres s’en sortent mieux :

Ey reste cohérent, même si le texte reste vraiment tout petit. La solution est moin satisfaisante que Bain.
Olyver Wyman a la meilleure réponse, avec une largeur max de 1200px.
Très bonne gestion par Bain. On garde l’effet imposant du hero tout en limitant la largeur de la zone de texte.

De manière générale, j’aurais tendance à agrandir le texte à mesure que l’écran grandit. Cela ne pose pas de problème avec Olyver Wyman, qui garde une largeur limitée, mais l’affichage change pas mal pour les autres et rend la police un peu ridiculement petite.

Les titres …

Alors vous l’aurez sans doute compris, je suis consultant SEO à la base, dont j’aime quand les titres sont bien organisés, bien structuré, comme il faut quoi … C’est une des bases en SEO, l’une des premières choses qu’on regarde en audit. C’est aussi important pour l’accessibilité: il ne faut surtout pas utiliser les titres pour la mise en forme. C’est aussi super simple à respecter. Rien de compliqué, on utilise des classes et voilà. Par réflexe j’ai regardé … et la structure de titre n’est correcte chez aucun de ces grands acteurs.

https://www.oliverwyman.com/our-expertise/hubs/industry-transformation.html
https://www.bcg.com/publications/2023/higher-ed-transformation-in-the-us
https://www.bain.com/fr/insights/creating-the-workforce-for-an-oil-and-gas-industry-in-transition/

Quoi garder ?

Il y a de très bonnes choses pour les menus. Ey gère très bien la quantité pléthorique de ses items. Le menu de Bain et d’Oliver Wyman sont clairs. J’aime bien le fait d’avoir un menu transparent et une image en fond, comme Bain, en page d’accueil.

La barre sommaire + breadcrumb d’Oliver Wyman est très bien faite, mais il y a un risque pour les pages qui ont plus de 3-4 H2 et je n’aime pas trop le « . » dans la barre des breadcrumbs.

S’agissant des hero, ils semblent s’imposer pour les publications. Il y a plusieurs modèles intéressants: celui de BCG, mais aussi celui de Bain. C’est aussi le cas pour les pages de catégorie: le modèle de Bain avec un hero avec un fond abstrait et une courte description est intéressante, idem pour celui de Ey, avec un texte plus fourni.