Caouinche

n.f : tête.

étym : bourguignon

syn : binette, bourrichon, caboche, ciboulot, caillou, trogne, tronche…

Analyse de sites

Trouver le sens en émettant des hypothèses

On continue l’analyse avec une nouvelle thématique, celle du vin.

Si vous devez créer ou refondre le site d’un viticulteur il faut, bien entendu dans un premier temps analyser le site du client pour comprendre comment il avait été conçu, déterminer des soucis d’ergonomies ou de cohérence, et voir quels éléments intéressants seraient à garder, car oui, si l’ancien prestataire avait mis en place quelque chose d’intéressant et de fonctionnel il serait ridicule de supprimer cette partie.

Mon client est donc viticulteur, j’analyse sa communication, son site.
Puis je vais aller analyser des sites d’autres viticulteurs qui sont dans le même département, ses confrères/concurrents directs, qui proposent les mêmes appellations.
Puis je vais aller analyser des sites de viticulteurs qui sont dans la région et qui ont aussi certains types d’appellations.
Puis je vais aller analyser d’autres viticulteurs qui proposent d’autres types de vins, en France ou à l’étranger.

Là où je veux en venir, c’est qu’il faut analyser les concurrents directs, et élargir pour s’ouvrir à la thématique et trouver du sens ailleurs.

Bien sûr rien n’empêche d’avoir une pige associée à ces analyses, bien au contraire, c’est même très important

Quelque chose qu’il est intéressant de faire lorsque l’on va sur des sites que l’on trouve intéressants c’est d’aller voir qui l’a créé. Certaines agences sont spécialisées dans une thématique, ceci peut être dû à un souhait personnel du gérant ou à une localisation géographique. Si je suis en bourgogne et que je souhaite travailler avec des viticulteurs ça se tient… tout comme si je me trouve dans le Bordelais, en anjou, alsace ou champagne. J’aurai un nombre potentiel de clients très important, ce qui ne sera pas le cas si je suis en Bretagne et que je souhaite faire des sites de viticulteurs (par contre les crêperies…).

hulki-okan-tabak-x3kQTL7yw30-unsplash
Contenance des bouteilles de vins, nom, et équivalent en bouteilles et verres
source
hulki-okan-tabak-x3kQTL7yw30-unsplash
Contenance des bouteilles de vins, nom, et équivalent en bouteilles et verres
source
hulki-okan-tabak-x3kQTL7yw30-unsplash
Contenance des bouteilles de vins, nom, et équivalent en bouteilles et verres
source
hulki-okan-tabak-x3kQTL7yw30-unsplash
Carte des vignobles de France
source
hulki-okan-tabak-x3kQTL7yw30-unsplash
Présentation des différentes formes de bouteilles
source
hulki-okan-tabak-x3kQTL7yw30-unsplash
Anatomie d'une bouteille
source

Domaine Bellang

Viticulteur à Merusault en Bourgogne

web
Domaine Bellang
source

Général :

Logo

Stylisation d’un blason, symbole ancien et peut être propre à la famille Bellang
Fort contraste coloré avec utilisation du rouge, blanc et noir. Au sein du blason les initiales de Christian Bellang, CB



Accueil

Page sans scroll, image en noir et blanc, toujours pour évoquer l’ancien

Hover des items de la nav passage du blanc au rouge. Souci de lisibilité du rouge sur un fond sombre

Présence en bas page et sur toutes les pages du site d’un footer fixe, accès rapide aux coordonnées.

Domaine Bellang. Page Accueil
source

Domaine

Présence d’image encore en noir et blanc présentant à la fois des hommes, des futs et un verre de vin : Ce sont ces hommes qui créent le vin, notion d’artisanat

Noir et blanc présent aussi pour la notoriété et souligné la longévité de la société. Dans texte mention de l’année 1789

En bas à droite de la page un scroll top apparait au survol de la surface, scroll top sans intérêt, car écran fixe donc pas de scroll. Bug ?

Domaine Bellang. Page Domaine
source

Les vins et Marc de Bourgogne

Un changement de couleur de l item de la navigation nous indiquant où nous nous trouvons dans le menu aurait été le bienvenu

Que ce soit pour les blancs ou les rouges, ici l’utilisateur n’est pas maitre de sa navigation, on lui impose a voir un vin et à découvrir les autres par la suite.
Ici image de fond et noir et blanc, mais image de la bouteille en couleur, mise en avant du produit par ce biais.

Un minimum d’information sur les vins, car la page est « fixe », pas de scroll.

Les next et prev sont en général utilisés pour changer d’image. Ici au clic changement non pas d’image du vin, mais de vin.

Cinq vins sont présents sur la page vins rouges et vins blancs. Or sur la page vous blancs six vins sont présentés. Le dernier qui est l’un des plus importants n’est pas visible directement. Il s’agit d’un Meursault 1er cru qui n’est pas visible… N’aurait il pas été plus intéressant de présenter les six vins ?

Présentation pour le marc de Bourgogne similaire à celle des vins : Photographie de la bouteille en couleur sur un fond noir et blanc pour mise en avant du produit.

Domaine Bellang. Page Les vins et Marc de Bourgogne
source

RWD ? Site responsive avec plusieurs points de rupture.

Domaine Bellang. Test RWD
source

Champagne Stephane Herbert

Viticulteur à Rilly-La-Montagne en Champagne-Ardenne

web
Champagne Stephane Herbert
source

Ici un site que j’ai vu évoluer depuis sa création, car il m’a déjà servit d’exemple pour l’analyse. Ce qui devient donc intéressant c’est de voir ce qui existait et ce qui est en place maintenant. Vous le verrez je fais des points de comparaison et vous comprendrez pourquoi plus haut je vous disais que si quelque chose avait été bien pensé initialement c’était dommage de ne pas le ré utiliser.

Général

Monogramme pour le logotype avec le S et le H, on est sur une marque de champagne, de luxe, l’utilisation de ce type de logo appuie ce positionnement.

Sur l’ancienne version du site, au reload de la page de disclaimer s’opérait un changement de couleur en random ce qui questionnait un utilisateur déjà venu sur le redesign du site. Cette notion de changement de couleur aléatoire a été retirée, dommage, car l’idée était bonne et cela dynamisait cette étape.

Accueil

On peut deviner la tendance graphique de ce site : Le flat design
Tout est tres plat, il s’agit d’un jeu de couleur et de construction, construction que l’on devine facilement.

Header fixe

Menu découpé en plusieurs parties :
– Menu « général » à gauche
– Éléments liés au e-commerce à droite
– Réseaux sociaux en dessous du menu e-commerce

On peut déterminer que le fait de laisser le menu réseau social en fixe évoque une importance pour la société qui doit, semble-t-il, beaucoup communiquer sur ces derniers.

Le menu e-commerce lui présente trois icônes, deux en lien avec le e commerce, le dernier étant un macaron de certification, donc qui n’a rien à voir avec la partie e-commerce

Sous le texte de présentation un slide qui représente 66.66%M de la largeur de l’écran et à côté une image qui permet d’accéder aux actes, margeur de 33,33 %
Un 75/25 aurait été plus cohérent avec le reste de la construction du site, car en dessous de cela on peut voir l’appel aux vins avec une construction de 50/50 découpé par zone en un nouveau 50/50

Au survol sur un vin, la couleur de fond change et se met dans celle faisant référence au vin.
Il aurait été plus intéressant qu’au hover sur la bouteille le border au niveau du nom apparaisse, et vis versa.

Cohérence au niveau des pictos à retravailler pour avoir quelque chose de plus homogène.

Au clic sur Cuvée on pense arriver à une page listant le tout. Ici c’est une ancre douce qui déplace l’utilisateur à la partie de la home présentant les vins.

Champagne Stephane Herbert. Page Accueil
source

Page vin Construction différente de la home, on serait plus sûr du 60/40

Sur l’ancienne version du site, on avait la possibilité de naviguer d’un vin à l’autre via un jeu de couleur latéral, qui n’est plus présent aujourd’hui… On est donc obligé de repasser par la home pour choisir un nouveau vin.

Nous nous trouvons sur un site e-commerce, hors, ici, rien ne me permet d’acheter le vin…



Boutique

Il faut passer par l’item boutique pour arriver à la partie vente en ligne du site. Pourquoi ne pas permettre à l’utilisateur de pouvoir acheter les vins directement sur les pages liées aux vins ?

Ici plus d’information par vins. On perd cependant ce jeu coloré.
En bas de la page des vins un lien qui renvoie à la page boutique et qui nous permet de découvrir d’autres vins.

Présentation du CTA ajout au panier similaire a celui de retour à la boutique. Les deux boutons ont une fonctionnalité différente, pourquoi les traités de la même façon ?

Ici nous sommes dans une évolution de site. Connaissant l’ancienne version je sais ce qui a changé enter la dernière et la présente. Le client a sans doute voulu agrémenter son site d’une partie e-commerce sans refaire le site dans son intégralité. Il y a pour moi des soucis d’ergonomie et de cohérence quant à la duplication des pages vins et à la présence dans la partie du menu e-commerce d’un macaron de certification.

Champagne Stephane Herbert. Page Vins et Boutique
source

RWD ?

Site responsive, déformation avec plusieurs points de rupture.

Champagne Stephane Herbert. Test du responsive
source

Ancienne version du site Plutôt que de présenter les images de l’ancienne version, une petite vidéo du site grâce à Wayback. Pas d’oubli avec internet…

Wayback Machine
source

La Chablisienne

Tonnelier à Martillac en Aquitaine

web
La Chablisienne
source

Général

Logo :

Une silhouette de femme entourée de feuille de vigne. Féminité ? Jaune or : Soleil, terre, raison jaune ?
Il faut lire le texte pour émettre l’hypothèse que le nom pourrait plus faire référence a ce qu’est une sorte de coopérative plutôt que le site d’un viticulteur.




Accueil

Utilisation du vert : Nature, couleur de la vigne, vert écologie

Un vrai jeu de construction est mis en place. Le choix des images et le traitement graphique subtil du site lui donnent une posture haut de gamme, placement accentué par l’accroche visible dès l’arrivée sur la page : Le luxe à la française.

Subtilité dans l’utilisation de formes florales et dans la représentation des nœuds du bois ou des ondes du vin. Légèreté et mouvement pour ce site aux jeux de teintes dans les verts.
Tout a été travaillé, même la carte de France

Cohérence des pictos les uns avec les autres, bien que ceux-ci ne fassent pas référence au logotype

La Chablisienne. Page Accueil
source

La Chablisienne

Jeu de construction similaire a celui de la home, ré utilisation des éléments graphiques

Utilisation du jaune or pour mise en avant des contacts

Footer conséquent visible sur chaque page avec la présentation des caveaux, un plan de localisation, un formulaire, coordonnées et plan de site.

La Chablisienne. Page La Chablisienne
source

Page vin et boutique

Au survol dans la liste apparition du fond nœud de bois/vibration associé à un zoom sur l’image. On a visuellement le vin qui vient vers nous.

Avant de pénétrer dans la page des informations nous sont données sur le vin, ce qui fait qu’on n’a pas forcément besoin d’accéder à ladite page pour en voir plus

Au clic sur la fiche du vin, CTA acheter de la même couleur que celle utilisée pour les contacts, à savoir le jaune or Utilisation restreinte de cette couleur pour des éléments de grande importance
Sur cette page on a plus d’information sur le vin et l’accès aux différents millésimes.

Lien cassé sur BTN acheter.
Il faut pour pouvoir les acheter passer directement par le bouton boutique localisée en haut à gauche ou on retrouve une nouvelle page listant l’ensemble des vins.

La Chablisienne. Page Vins et Boutique
source

Château Grenouilles

Même section de construction que sur les autres pages, on est sur un camaïeu de vert, le tout est subtilement réalisé.

La Chablisienne. Page Château Grenouilles
source

Site Responsive ?

Bien évidemment qu’il l’est…

La Chablisienne. Responsive
source