Bayle SAE 101

Enzo

Audit d’un site Web

La vie est belt :

Partie SEO (Search Engine Optimisation)

Pour commencer quand l’on effectue une recherche en tapant “la vie est belt” sur le moteur
de recherche Google le lien vers le site du fabriquant est juste après des annonces de pour acheter
leurs produits ; nous pouvons donc dire que le site est à la première place.

Les premiers renseignements que l’on a quand on arrive sur la page des résultats son en premier :

L’URL : https://lavieestbelt.fr/

Le titre : La Vie est Belt – Accessoires à impacts positifs

Et la description : La Vie est Belt a pour mission de valoriser l'emploi et les savoir-faire locaux. Pas
besoin de prendre l'avion pour visiter nos ateliers partenaires. Nos …

Ensuite quand nous cliquons sur le lien menant sur le site et que l’on affiche le code source
de la page, nous pouvons apercevoir plusieurs informations. Ces informations son indiquer dans
différente balises du code source.

<Title> La Vie est Belt – Accessoires à impacts positifs

<Meta keywords> Aucun mot clé

<Meta description> Nous concevons et démocratisons des accessoires de mode en

matières revalorisés, confectionnés solidairement dans le nord de la France. Découvrez nos
ceintures en pneus de vélo et nos caleçons 2.0 en draps.

Pour faire une recherche plus approfondit, prenons l’exemple de la ceinture “belt vélo noir fine”

Quand on affiche le code source nous pouvons observez que les titres relatifs aux descriptifs
sont encadrés par des balises <h1> et des balises <h2>.

Cependant le site n’est pas bien référencé ; quand on tape juste le mot "ceinture" dans la
barre de recherche google on ne trouve le site que à partir de la 8ème page, le site se trouve aussi
sur la 8ème page si l'on tape ceinture française. Cependant quand on recherche "ceinture recyclée"
c’est le premier site sur lequel on peut cliquer. Le site n'est pas bien référencé, car comme vue
précédemment il n'y a pas de mot clés qui ont désigné pour que le site apparaissent plus vite dans
les recherchent.

Partie design Pour ce qui est de la partie design du site ; nous pouvons tout d'abord
remarquer qu'il est adaptatif sur plusieurs points. Le ou plutôt les premiers points sont sur la page
d'accueil du site. Tout d'abord, nous avons les 3 menus en haut à gauche de la page d'accueil

Qui quand on réduit la page de moitié passe en dessous du logo de la vie est belt.
 Et ensuite quand on réduit encore la page et quelle passe en mode portrait, les trois menus
se transforment en un icone qui quand l'on clique dessus, ça nous affiche les trois menu.

Ensuite nous avons les trois menu en haut à droite

qui une fois que l'on passe la page au format téléphone ne
nous affiche plus que deux logo qui sont le panier et la
recherche. Celui qui a disparue ou plutôt été déplacé est
celui du compte qu'on peut retrouver avec les autre
menus.

Pour continuer sur la responsivité du site, nous pouvons voir que les produits mis en avant
dans la section "vous les adorez" se diminuent au fur et à mesure où l'on réduit la page. Quand la
page est entre le plein écran et la moitié de l'écran ils nous présentent 4 produits, si la page passe en
dessous de la moitié de l'écran, ils ne nous présentent plus que 3 produits et enfin quand la page et
au format portrait il ne nous présente plus que un produits et l'on voit la moitié de l'article suivant.
 Quand nous descendons un peu plus bas sur la page d'accueil, nous avons trois menus qui ne
changeront pas en fonction de la taille de l'écran cependant leurs contenue si :

Pour les trois onglets, il y a 3 stades. Le premier est le normal quand la page est en grande.
Le deuxième et quand on réduit la page une scroll barre apparait sur le côté de l'écran pour pouvoir
faire défiler le texte. Et pour finir le dernier stade et celui ou le texte change de couleur (passe de
noir à blanc) et se met sur l'image.
 Et ensuite nous avons toutes les informations qui sont en bas de page qui quand on réduit la
page, les informations se déplacent et se mettent les unes en dessous des autres. Il y a juste une
chose qui n'est pas responsive sur le site et c'est le bouton pour voir son panier qui lui reste au
même endroit peu importe la taille de la page. Ce qui je trouve sur la version mobile est assez
gênant par endroit.

Nous pouvons en déduire d'après tous les éléments vus précédemment que ce site est
adaptatif.

Et pour finir nous allons, sur cette partie design, nous attarder sur le rendu visuel général du
site.
 Pour moi, le site n'a pas le même rendu visuel sur la version mobile que sur la version
ordinateur. Je trouve que la version téléphone est plus agréable à regarder que la version
ordinateur.

Pour la version ordinateur, il y a quelque endroit qui je trouve son assez vide comparer à la
version mobile.

Pour la même page, celle de l'ordinateur un moins bon rendu visuel

que celle de la version mobile car nous pouvons observer qu'il y a sur le
format ordinateur des zones blanches sans informations comme indiquée
ci-dessus.

Mais sinon appart ça, je trouve que le site rend visuellement bien
grâce aux couleurs qu'ils ont utilisé qui ne sont pas trop vive, aux photos
utilisé qui ne sont pas agressive et qui ne comporte pas trop d'élément
important.

Partie ergonomie

Pour cette partie, nous allons voir si le site est intuitif dans sa navigation, s'il est le plus
interactif possible, c’est-à-dire qu'il ne soit pas statique et qu'il invite le client a toujours cliqué sur
quelque chose pour que le client puisse découvrir tout ce que le site as à proposer et donc rester un
maximum sur le site. Suite à cela nous pourrons conclure sur la structure du site.
 Pour le premier point qui est la navigation intuitive, nous allons observer comment l'on peut
se déplacer sur le site. Nous pouvons tout d'abord voir sur le site que nous avons deux groupes de
menus. Ces deux groupes sont soumise à une loi qui est la loi de proximité.

Le premier groupe de menus est celui en haut à gauche. Dans ce premier groupe nous avons
trois menus qui sont : "E-shop", "L'aventure" et "L'upcycling". Pour le menu "E-shop", nous pouvons
voir que quand l'on passe notre souris dessus sans cliquer ça nous affiche toutes leurs gammes de
produits.
 Ensuite pour les deux autres menus, ils nous présentent tout ce qu'il y a à savoir sur eux
comme par exemple leurs valeurs et leur équipe. Et aussi ils nous parlent de quelle matériaux ils
utilisent pour faire leurs produits et de comment ils collectent ces matériaux. Nous pouvons donc
dire que ce premier groupe de menus est une présentation de leur site et je pense que regrouper
tous les menus qui présentent leur site est un bon point pour une navigation intuitive. Après nous
avons le deuxième groupe de menus qui se trouve en haut à droite. Ce groupe-ci comporte aussi
trois menus qui sont le menu "compte", le menu "recherche" et celui du "panier" ce sont des menus
basiques que l'on retrouve très souvent sur des sites qui proposent des produits. Nous pouvons donc
dire que ce deuxième groupe de menus est pour une approche commerciale. C'est deux groupes de
menus sont très bien placer car pour une personne qui va arriver pour la première fois sur le site va
en premier voir tous ce qui présente la marque et après ça, elle verra les outils pour commander sur
le site. Voilà pour ce qui en est du premier aperçu pour la navigation. Ensuite, pour naviguer sur les
différentes pages, nous avons une scroll bar sur le côté de l'écran.

Pour une navigation plus précise, nous avons le bouton "recherche" qui apparait toujours en
haut peu importe on l'on se trouve sur le site. Quand l'on clique sur ce bouton recherche, ça nous
propose une zone de texte dans laquelle on peut effectuer nos recherches. Prenons l'exemple ici
d'un potentiel client qui recherche une ceinture noir comme ci-dessous.
 Nous pouvons voir dans un premier temps que ça nous affiche directement quelques
propositions. Jusque-là, tout est intuitif jusqu'à ce que l'on veuille voir les autres propositions. Nous
sommes obligé de cliquer sur le bouton "voir tout" et non pas comme l'on peut penser appuyer sur
la touche entré du clavier. Donc pour conclure sur l'intuitivité de la navigation, je peux dire que le
site est très intuitif est simple dans sa navigation avec des menus simples et des interfaces simples
pour une navigation optimal.
Le second point porte sur l'interaction que nous pouvons trouver sur le site.
Nous pouvons trouver des interactions un peu partout. Peu importe ou l'on peut être sur le site il y
aura une interaction qui nous incite à aller autre part sur le site ; comme si dessous.

Comme on peut le voir, rien que sur la page d'accueil il y a trois interactions possibles. Mais
sur tout le site, on peut aussi réagir avec des images, des boutons et même des icônes comme on
peut le voir ci-dessous avec les icones dans le carré rouge qui nous renvoient vers des vidéos à leur
sujet.
 Et pour la dernière partie de l'ergonomie nous allons voir les zones de confort.

Pour ordinateur :

Pour téléphone :
 Les parties en rouge sont les parties les plus atteignables par les utilisateurs, celles en
marron les parties atteignables et les parties en jaune sont les moins atteignables. Nous pouvons
donc voir que l'application est plus confortable sur la version pour ordinateur.

Comme nous avons pu le voir, le site contiens beaucoup d'interaction qui peuvent vous
emmené soit sur un autre onglet du site ou bien même comme on la vue sur des vidéos qui les
concerne et aussi leurs réseau sociaux.