1. Objectif du site, simplifier la lecture des différends éléments du site. Favoriser au maximum la
réalisation de l'objectif principal (à savoir la vente en ligne)
Pour cela le site utilise principalement deux couleurs, qui sont celles du logo ! L'apport de nouvelles
couleurs sont uniquement utilisées pour l'auto-promo. Ainsi on se démarque du reste du site !
Les box sont réutilisées, car, elles fonctionnent bien, elles sont identifiables par les internautes,
constituant un élément caractéristique à EA ! Elles sont, sur le site actuel, une zone de clique
importante pour l'accès aux pages descriptives (environ 5 000 cliques sur le mois de juin) alors que
le bouton « faire un devis » lui, a une capacité d'affordance moindre avec 3 000 cliques sur le même
2. mois.
Cette faiblesse du « bouton « faire un devis » et comblé par son détachement visuel, seul élément
circulaire de la page, il permet donc de retenir un peu plus l'attention que sur la version actuel où il
utilise la même forme que le reste du site.
Ainsi les box gardent leurs affordances, actuel tout en essayant de relever celle du bouton « devis »
par un procédé graphique différent.
Répartition par nature d'élément :
Auto-promo représentant 34,38% de la page.
Contenu informatif représentant 17,38% de la page.
3. Navigation représentant 15,26% de la page.
Identification du site représentant 4,5% du site
Communauté représentant 0,22% du site
Partenaire représentant 0,5% du site
Inutilisé représentant 27,76% du site
Ligne de flottaison, 570 pixel
Ces pourcentages sont basés sur un format de 1300 pixel en totalité. La partie « auto-promo
s'adaptant à la largeur du site, elle occupera ainsi toujours plus de place que le reste.
Le contenu principale du site lui se situant dans un cadre de 980 pixel.
66 % de nos visiteurs sont au-dessus de 1200. Cela donnera une impression supplémentaire de
clarté.
De même qu'au-dessus de la ligne de flottaison, les proportions restent les mêmes à l'exception de
l'identité du site qui prend plus d'importance que sur la navigation et le contenu informatif.
Au-dessus de cette ligne de flottaison, nous communiquons ainsi premièrement sur l'auto-promo
puis l'identité du site et son message, promesse...
La partie navigation comprend des liens du footer qui devraient être épuré pour occuper moins de
place.
On voit donc que le site axe principalement sur l'auto-promo et la mise en avant de nos produit.
Tout en ayant un design épuré et un zoning clair. Le design se veut simple.
Répartition par objectif :
1. Acquisition souscription, devis et événementiel, contenus dans la partie auto-promo soit
34,38 %
2. Information : 17,35 % situé dans le contenu informatif
3. Fidélisation : 0,22 % contenu dans communauté (bouton facebook... news... salon ea ...)
4. Identité de notre site, communication de nos valeurs, promesse 4,5 %
4. Entête plus box :
Visuel aérien en fond du header qui déborde sur l'arrière plan des box pour donner de la profondeur
au plan sur lequel elles sont posées. Le menu ne casse plus la lecture grâce à la continuité du fond.
Présentation de notre charte de qualité non plus rattaché à un produit, mais à la « box » EA, nos
engagements ne correspondent pas à un produit mais à EA est donc à tous nos produit. La box EA
installe une identité forte dès le départ.
Les phrases sur la charte qualité sont appuyées par un mot la résumant « simplicité » à chaque
phrase correspond donc un mot. Pour un soucis de clarté, de facilitation de lecture.
Le fond est un mélange de nuage qui a un côté apaisant et de lignes. La perspective des lignes
amène l'oeil à se diriger vers notre charte de qualité. Elles apportent également un côté moderne «
technologique » au header.
Le menu est simple et claire. Le picto « maison » est préféré au mot « accueil » car plus facilement
identifiable.
Le bouton de validation de la newsletter s'intitule « s'abonner » toujours pour facilité la
compréhension de l'internaute et éviter qu'il ne confonde pas avec une barre de recherche. La zone
de saisie pour l'adresse mail peut contenir 24 caractères, cela permet à l'internaute de relire plus
facile son adresse pour vérifier si oui ou non elle est correcte. Une zone trop courte ne donne pas la
totalité des caractère entré ce qui gêne la relecture. 24 caractères, permettra à une majorité de
personne de pouvoir rentrer entièrement leur adresse.
Le sous menu est disposé à l'horizontale pour ne pas passer au-dessus de nos offres « box » laissant
ainsi leurs visibilités propres.
Les box sont les seuls éléments avec des couleurs différentes, elles se différencient complètement
du reste du site. Elles sont dans un espace ouvert et rien ne gêne leurs présences.
Les bouton en cercle sont plus dynamiques que des boutons rectangle dans ce site rectangulaire. Ils
se dénotent ainsi du reste.. Ils peuvent être animés avec un reflet ou une lueur lors de leur survole.
La box amène sur la page qui détaille l'offre alors que le bouton « devis » lui amène sur le
formulaire. Pas de bouton « découvrir l'offre », il est directement rattaché à la box qui possède une
5. forte affordance, avec un taux de cliques supérieures au bouton « devis ».
Le détail des offres n'est plus sur la page d'accueil qui n'a pas vocation à informer en détails. Les
personnes qui viennent sur le site connaisses en général déjà ce pourquoi elles sont venus et
chercheront directement à avoir le plus d'information sur l'assurance recherchée et cliqueront donc
la box (stat actuel) afin d'avoir plus d'information sans lire les quelques lignes qui apparaissent
aujourd'hui.
La souris rattachée à la petite voiturette appuis notre identité/message tout en ligne il peut
éventuellement devenir un « bouton action » en mettant en évidence la main avec la souris, nous
pourrions amener l'utilisateur à cliquer sur la main! La voiture alors roulerait en tournant autour des
box avant de percuter l'une d'elle pour dévoiler son contenu (offre spéciale, détails basique de
l'offre....) l'idée étant d'introduire une partie de design émotionnel dans notre page d'accueil)
La main avec la voiture peut également lors d'opérations spéciales offres spéciale) être retirée pour
laisser la place à une « skin » promotionnel. Les parties latéral de l'auto-promo deviendrait un
habillage de la page d'accueil mettant en avant notre offre spéciale. Notre offre spéciale retiré du
contenu principale pourrait s'exprimer pleinement. Et être plus facilement identifiable que si c'était
un bloc « promo » qui passerait là inaperçus. Par convention habitude, les internaute savent que ces
zone correspondent à des publicités.
Les offres spéciales portant sur nos produits, nous pourrions ainsi toujours de pars la couleur nous
différencier du reste du site et ainsi interpeler plus facilement l'internaute.
Exemple (basique) :
L'offre pourrait prendre ce format ou comme dit plus haut, toute la partie « auto-promo » afin
d'habiller entièrement le site.
6. Exemple d'habillage :
Resterai à déterminer si le header devient lui aussi personnalisable ou non. Auquel cas, l'habillage
se ferait uniquement sur les bords
La zone d'actualité :
7. Peu de visuel pour faciliter la lecture des articles.
Un seul article à la une, le titre possède une graisse contrairement au texte courant pour bien
marquer la différence de niveau. Une barre de couleur rattache l'article à la couleur de sa catégorieet
de sa couleur de picto. On instaure un repère pour l'internaute.
Tous les textes ont pour interlignage 20 pixel pour aérer la lecture et stabiliser l'ensemble du
contenu. L'oeil ne se balade plus au grès des interlignages. Chaque paragraphe, commence sur la
même ligne, il peut plus facilement passer d'une information à une autre, sans avoir à chercher le
début. Pas de lissage de la police pour le texte courant, toujours pour faciliter la lecture.
Un lien supplémentaire amène à découvrir l'ensemble de l'actualité EA. Deuxième porte d'entrée
pour la page édito. Le lien dans le menu est utile car il s'agit d'un élément de navigation principale.
Néanmoins, il est utile de le rajouter dans cette partie qui est clairement pour l'internaute définit
comme la partie éditorial du site. Pour ne pas avoir à scroller pour aller directement à la page
d'accueil éditorial, nous lui donnons une porte d'entrée facilement identifiable. Un texte isolé et
souligné à une affordance au clique bien plus importante qu'un bouton.
Resterai à déterminer si le header devient lui aussi personnalisable ou non. Auquel cas, l'habillage
se ferait uniquement sur les bords latéral.
Le bloc des promo des services sont divisés en trois pour facilité leur lecture. Les informations
concernant l'internaute / client .
Un espace dédié à la promotion de nos concours, juste en dessous de l'espace personnel donc
directement visible et rattaché à notre internaute.
Et Le salon Ea.
Chaque bloc est identifiable rapidement par un icône visuel (les dossiers pour l'espace perso, le
visuel du concours et le fauteuil du salon Ea) !
Leur espacement et interlignage se base sur celui du texte! Dans un soucis d'homogénéité et de
facilitation de lecture.
La zone footer qui reprend tous les artifices d'un footer sans traitement graphique spécifique à
l'exception d'être en accord avec le reste de la page. Donc il est séparé par une barre grise qui
correspond aux autres des titre d'actualité et du menu.
Le site est construit sur une grille de 14 colonnes pour pouvoir s'adapter correctement aux contenus
important et à la longueur du texte. L'interlignage du site et sur 20 pixel pour faciliter la lecture et
l'aération de celui site.
8. Le site actuelle quant à lui ne possède pas d'interlignage fixe ce qui réduit la lisibilité d'un bloc à un
autre. Le site actuel est construit lui sur une grille de 10 colonnes avec le même volume
d'information ce qui le rend bancal et plus difficile à lire, il est moins aéré et moins simple de
lecture.
La version actuel est sur du 990 px pour le contenu principale, la version proposée et de 980px soit
10px de moins, mais la lecture et plus fluide.
Test avec offre spéciale dans la zone principale :
9. Nos offres sont moins visible, elles ont moins d'impact et le bloc « offre spéciale prend du coup
beaucoup trop d'importance car forcement isolé du reste. (quel que soit son aspect graphique
puisque les box impliquent un espace aéré de pars leurs présentations. La présence de ce bloc
empêcherait d'avoir la profondeur de champs réalisé avec le fond du header sur la première version
qui n'est plus possible dans cette version, car invisible à cause du bloc....
