Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Refont ea

Axe d'amélioration pour la refonte du portail Web EA.

  • Login to see the comments

  • Be the first to like this

Refont ea

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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....
  10. 10. Version finale :

×