Download Evolution graphique et ergonomique du comparateur ANNEXE AU
Transcript
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