Download Evolution graphique et ergonomique du comparateur ANNEXE AU

Evolution graphique et ergonomique du comparateur
ANNEXE AU DETAIL QUANTITATIF ESTIMATIF DE LA 1ERE COMMANDE
EVOLUTION GRAPHIQUE ET ERGONOMIQUE DU COMPARATEUR D’OFFRES – DESCRIPTIF DU BESOIN
Objectifs :
-
Simplifier le mode de saisie et rendre l’utilisation du comparateur plus ludique.
-
Faciliter l’accès à la page de résultats (Seuls 30% d’accès actuellement)
-
Intégrer de nouvelles pages d’informations autour de l’outil : Focus, Mode d’emploi, FAQ
-
Transformer le comparateur en un mini site avec la création d’une barre de navigation
1
Evolution graphique et ergonomique du comparateur
Version actuelle V.1 - écran de formulaire
2
Evolution graphique et ergonomique du comparateur
Projet de nouvelle version V.2
Page d’accueil du comparateur actuellement désigné par écran de formulaire
La nouvelle version de la page d’accueil du comparateur aura pour nouveauté :
-
La saisie des critères s’effectuera en trois étapes/écrans au lieu d’une.
-
Des pages d’aides et d’information autour du comparateur seront proposées à partir d’une barre de
navigation et d’une zone de diffusion d’information
Note :
La navigation entre les différentes pages de la barre de navigation doit permettre de revenir, dans un délai
d’une vingtaine de minutes, à l’écran « Comparez » tel qu’il a été laissé
-
Une zone de diffusion d’information s’affichera sur le bord droit de l’écran.
-
Un nouveau graphisme sera intégré dans la partie supérieure du comparateur (header) avec notamment une
nouvelle image de fond (Background), un changement de la couleur du libellé du type de client « Clients
particuliers » - « Clients professionnels ». Ce nouveau graphisme sera appliqué sur l’ensemble des pages du
comparateur d’offres.
Note :
La couleur de fond (Background), reste liée au profil de consommateur :
- vert pour les clients professionnels
- bleu pour les clients particuliers,
De même toutes les spécificités de couleurs liées aux profils de consommateurs sont conservées sur
l’ensemble du comparateur (exemple bouton « point d’interrogation », pop in, etc.).
La nuance de couleur entre les boutons points d’interrogation actif et non actif (vert clair/vert sombre –
bleu clair/bleu sombre) est conservée.
3
Evolution graphique et ergonomique du comparateur
-
Lorsque l’internaute est sur une page, l’onglet de la page correspondante est actif ; il est blanc. Les
onglets inactifs sont en gris clairs
4
Evolution graphique et ergonomique du comparateur
Page d’accueil
A. Zone de diffusion d’information sur le bord droit de l’écran
Prévoir deux possibilités d’affichage de la zone d’actualité selon le contenu à afficher.
La zone d’actualité devra être administrable par le médiateur qui pourra choisir s’il souhaite mettre, ou pas, une
information « Focus » à la une, sur la page d’accueil du comparateur.
Option 1 : Focus et FAQ
La zone FOCUS comprend :
-
Le mot Focus
Le titre du Focus (70 caractères max espace compris) sur une ou deux lignes.
Le texte du focus (350 caractères espace compris)
Un lien vers la page du focus
Un lien vers la page d’accueil des Focus
Une image 100/60 px
La zone FAQ comprend :
-
Le mot FAQ
Trois titres de FAQ avec un pictogramme flèche qui pointe vers la page du FAQ (75 caractères espace
compris). Le titre peut tenir sur deux lignes.
Un lien vers la page d’accueil des FAQ
5
Evolution graphique et ergonomique du comparateur
Option 2 : FAQ uniquement
La zone FAQ comprend :
-
Le mot FAQ
Huit titres de FAQ avec un pictogramme flèche qui pointe vers l’ancre dans la page des FAQ (75 caractères
espace compris). Le titre peut tenir sur deux lignes.
Un lien vers la page d’accueil des FAQ (Non indiqué ici dans la maquette)
6
Evolution graphique et ergonomique du comparateur
B. Formulaire
Etape 1 : Mon profil
La page d’accueil du comparateur ouvre directement sur la première étape de formulaire.
Principes d’affichage
-
Le contenu des pages doit être accessible sans faire défiler l’écran (scrolling).
-
Une barre de navigation affiche quatre onglets : Comparez, Focus, Mode d’emploi et FAQ.
L’onglet Comparez est activé par défaut.
-
Les critères de comparaison du formulaire sont identiques à la version actuelle V.1.
-
Disparition de la bulle coté droit présente sur la version actuelle V.1 : lors du survol des pictogrammes
« point d’interrogation», les textes ne s’afficheront plus dans la bulle d’aide à droite mais dans une pop-in
comme sur les écrans de tableau de résultats, de détail d’une offre et de comparaison de deux à trois
offres.
7
Evolution graphique et ergonomique du comparateur
Etape 2 : Ma consommation
La navigation « aller-retour » est possible entre les étapes n°1, 2 et 3. Le consommateur doit pouvoir retrouver les
informations qu’il a saisies dans le délai de session existant, soit une vingtaine de minutes.
Il manque sur la maquette ci-dessus les cas de recherche duale et les usages du gaz comme indiqué ci-dessous.
C’est le cas le plus long qu’il faudra prévoir d’intégrer. La page peut se rallonger en hauteur pour ce cas.
8
Evolution graphique et ergonomique du comparateur
Etape 3 : Mes critères de tri
Si l’ensemble des champs de saisies ne sont pas complétés lorsque l’internaute clique sur le bouton « Lancer la
recherche », un message s’affiche indiquant que l’ensemble des informations nécessaires à la comparaison n’ont
pas été enregistrées, avec mention des champs à compléter.
Il faudra conserver l’affichage du message de validation ci-dessous avant affichage de l’écran de tableau de
résultats et le décliner sur fond vert pour la version professionnel.
9
Evolution graphique et ergonomique du comparateur
Ecran de tableau de résultats (comparaison électricité – gaz – électricité et gaz)
Modifications à effectuer :
-
Insertion de la barre de navigation avec les quatre onglets au dessus de la grille de résultat.
Note :
La navigation entre les différentes pages de la barre de navigation doit permettre de revenir, dans un délai
d’une vingtaine de minutes, à l’écran « Comparez » tel qu’il a été laissé
-
Un nouveau graphisme sera intégré dans la partie supérieure du comparateur (header) avec notamment une
nouvelle image de fond (Background), un changement de la couleur du libellé du type de client « Clients
particuliers » - « Clients professionnels ». Ce nouveau graphisme sera appliqué sur l’ensemble des pages du
comparateur d’offres.
Note :
La couleur de fond (Background), reste liée au profil de consommateur :
10
Evolution graphique et ergonomique du comparateur
- vert pour les clients professionnels
- bleu pour les clients particuliers,
De même toutes les spécificités de couleurs liées aux profils de consommateurs sont conservées sur
l’ensemble du comparateur (exemple bouton « point d’interrogation », pop in, etc.).
La nuance de couleur entre les boutons points d’interrogation actif et non actif (vert clair/vert sombre –
bleu clair/bleu sombre) est conservée.
Les évolutions sont à appliquer également dans le cadre d’une recherche simultanée des offres de gaz
et d’électricité.
11
Evolution graphique et ergonomique du comparateur
Ecran de comparaison de deux à trois offres (comparaison électricité – gaz – électricité et gaz)
Modifications à effectuer :
-
Insertion de la barre de navigation avec les quatre onglets au dessus de la grille de résultat.
Note :
La navigation entre les différentes pages de la barre de navigation doit permettre de revenir, dans un délai
d’une vingtaine de minutes, à l’écran « Comparez » tel qu’il a été laissé
-
Un nouveau graphisme sera intégré dans la partie supérieure du comparateur (header) avec notamment une
nouvelle image de fond (Background), un changement de la couleur du libellé du type de client « Clients
particuliers » - « Clients professionnels ». Ce nouveau graphisme sera appliqué sur l’ensemble des pages du
comparateur d’offres.
Note :
La couleur de fond (Background), reste liée au profil de consommateur :
- vert pour les clients professionnels
- bleu pour les clients particuliers,
De même toutes les spécificités de couleurs liées aux profils de consommateurs sont conservées sur
l’ensemble du comparateur (exemple bouton « point d’interrogation », pop in, etc.).
La nuance de couleur entre les boutons points d’interrogation actif et non actif (vert clair/vert sombre –
bleu clair/bleu sombre) est conservée.
Les évolutions sont à appliquer également dans le cadre d’une recherche simultanée des offres de gaz
et d’électricité.
12
Evolution graphique et ergonomique du comparateur
Ecran détail d’une offre (comparaison électricité – gaz – électricité et gaz)
Modifications à effectuer :
-
Insertion de la barre de navigation avec les quatre onglets au dessus de la grille de résultat.
Note :
La navigation entre les différentes pages de la barre de navigation doit permettre de revenir, dans un délai
d’une vingtaine de minutes, à l’écran « Comparez » tel qu’il a été laissé
-
Un nouveau graphisme sera intégré dans la partie supérieure du comparateur (header) avec notamment une
nouvelle image de fond (Background), un changement de la couleur du libellé du type de client « Clients
particuliers » - « Clients professionnels ». Ce nouveau graphisme sera appliqué sur l’ensemble des pages du
comparateur d’offres.
Note :
La couleur de fond (Background), reste liée au profil de consommateur :
- vert pour les clients professionnels
- bleu pour les clients particuliers,
De même toutes les spécificités de couleurs liées aux profils de consommateurs sont conservées sur
l’ensemble du comparateur (exemple bouton « point d’interrogation », pop in, etc.).
La nuance de couleur entre les boutons points d’interrogation actif et non actif (vert clair/vert sombre –
bleu clair/bleu sombre) est conservée.
Les évolutions sont à appliquer également dans le cadre d’une recherche simultanée des offres de gaz
et d’électricité.
13
Evolution graphique et ergonomique du comparateur
Page Focus - A créer
La page Focus doit être administrée par le MNE qui pourra intégrer des textes, des liens, des images et des
vidéos. Cette administration devra s’effectuer par le biais de nouvelles fonctionnalités ajoutées dans
l’extranet fournisseurs.
A. Focus : Page d’accueil
Onglet actif = FOCUS
Contenu de la page :
Chaque bloc spécifique pour un focus devra comprendre :
- Une image 176/130 px
- Un titre (70 caractères max espace compris) sur une ou deux lignes.
- Une date
- Un chapeau (300 caractères max espace compris) sur trois lignes max.
- Un lien vers la page du focus : > Lire la suite
Il faut rajouter un lien vers la page/liste suivante intitulé > Focus suivant
14
Evolution graphique et ergonomique du comparateur
B. Focus : page interne
Onglet actif = FOCUS
Contenu de la page :
-
Une image 176/130 px
Un titre (70 caractères max espace compris) sur une ou deux lignes.
Une date
Un texte (5 000 caractères max espace compris). la page peut être plus longue selon le contenu et défiler.
Un lien vers la page d’accueil du focus : > Tous les focus
15
Evolution graphique et ergonomique du comparateur
Page Mode d’emploi – A créer
La page Mode d’emploi doit être administrée par le MNE qui pourra intégrer des textes, des liens, des images
et des vidéos. Cette administration devra s’effectuer par le biais de nouvelles fonctionnalités ajoutées dans
l’extranet fournisseurs.
A. Mode d’emploi : page d’accueil
Onglet actif = MODE D’EMPLOI
Contenu de la page (même contenu que la page d’accueil des Focus, ne pas se fier à la maquette ci-dessus) :
Chaque bloc spécifique pour une info mode d’emploi devra comprendre :
- Un titre (70 caractères max espace compris) sur une ou deux lignes.
- Un chapeau (300 caractères max espace compris) sur trois lignes max.
- Un lien vers la page du focus : > Lire la suite
- Possibilité de mettre une image ou non. Taille de l’image : 176/130 px
Il faut rajouter un lien vers la page/liste suivante intitulé > Tous les conseils
16
Evolution graphique et ergonomique du comparateur
B. Mode d’emploi : page interne option 1
Onglet actif = MODE D’EMPLOI
Contenu de la page :
Une image FACULTATIVE de 176/130 px
- Un titre (70 caractères max espace compris) sur une ou deux lignes.
- Un texte (5 000 caractères max espace compris). la page peut être plus longue selon le contenu et défiler.
- Un lien vers la page d’accueil du focus : > Tous les conseils
17
Evolution graphique et ergonomique du comparateur
C. Mode d’emploi : page interne option 2 avec vidéo
Onglet actif = Mode d’emploi
Contenu de la page :
-
Une capture d’écran vidéo (et une vidéo à lancer)
Un titre (70 caractères max espace compris) sur une ou deux lignes.
Un lien vers la page d’accueil du mode d’emploi : > Tous les conseils
18
Evolution graphique et ergonomique du comparateur
Page FAQ – A créer
La page FAQ doit être administrée par le MNE qui pourra intégrer des textes, des liens, des images et des
vidéos. Cette administration devra s’effectuer par le biais de nouvelles fonctionnalités ajoutées dans
l’extranet fournisseurs.
Onglet actif = FAQ
Contenu de la page :
-
Il n’y a pas de page interne FAQ. Toutes les FAQ s’affichent sur la même page.
Au-delà de 10 Focus, prévoir une pagination avec numéro des pages suivantes cliquables.
Chaque bloc Focus comporte un pictogramme + qui permet d’ouvrir le texte au dessous. Le pictogramme
affiche le signe moins quand le bloc texte est ouvert.
Dans le texte : possibilité d’insérer des liens, des images et des PDF (upload) dans le texte de la réponse du
Focus
Titre : 70 caractères max espace compris) sur une ou deux lignes.
Texte : 1 000 caractères max espace compris.
19
Evolution graphique et ergonomique du comparateur
Prestations attendues des prestataires
-
Etude de la faisabilité et remontée des aspects bloquants
Proposition d’un devis détaillé et d’un planning de réalisation
Les sources des maquettes seront fournies par le MNE au format PSD.
L’intégration et la découpe des images seront pris en charge par le prestataire.
20