wireframes et spécications ergonomiques › wp-content › uploads › 2016 › 09 ›...

Iperia.eu - Refonte UX

Wireframes et spécifications ergonomiques1 août 2016

00 Accueil

_

00.1 Header00.2 Recherche00.3 Description du secteur et des métiers00.4 Actualités00.5 Recommandations00.6 Footer

Iperia.eu - Refonte UX1 août 2016

00 Accueil

00.1 Header

Comportement identique au site actuel. Certaines informations ont été supprimées, la navigation a été réorganisée.

1. L’onglet «A propos d’Iperia» ouvre un sous-menu :

00.2 Recherche

2. Menus déroulants :

Choix d’un métier obligatoire pour pouvoir rechercher. Le bouton rechercher est inactif tant qu’un métier n’a pas été sélectionné. Choix de la situation facultatif.

3. Si seulement le métier est sélectionné, le bouton Rechercher renvoie vers la page métier.

Si le métier et la situation sont sélectionnés, le bouton Rechercher renvoie vers la page métier activée sur la situation correspondante.

2 3

1


00.3 Description du secteur et des métiers

4. Masque toute la partie concernant la description du secteur et des métiers (jusqu’à la partie Blog, voir page suivante). Si possible : garder en cache le choix de l’utilisateur.

5. Zone de texte modifiable par Iperia (à rédiger). Elle peut contenir différents styles de texte : - titre - sous-titre - corps de texte

6. Bloc «Pourquoi se former» : zone de texte modifiable (à rédiger) composée d’un titre, le corps de texte et une vidéo (source Youtube) avec un titre. L’image en aperçu est chargée depuis BackOffice (différente de l’aperçu Youtube). La video s’ouvre et se lance en popup.

7. Présentation des 4 métiers représentés par Iperia. Les informations à afficher par bloc : - titre - description : modifiable par Iperia (à rédiger) - bouton «Découvrir» : renvoie vers la page métier correspondante. Tout le bloc est cliquable.

4

6

7

00 Accueil

5


8. Version masquée. Au clic sur cette barre, la partie concernant la description du secteur et des métiers réapparaît (voir page précédente)

8

00 Accueil


9. Bloc de contact (présent sur plusieurs écrans) - format linéaire. Sur desktop, seulement le bouton «Contactez-nous» est actif et renvoie vers la page de Contact.

00.4 Actualités

10. Mise en avant du dernier article de blog : identique page blog (voir page «Actualités» pour les différents formats). Le lien «Lire la suite» renvoie vers le contenu de l’article.

11. Le bouton «Voir le blog» renvoie vers la page «Actualités»

12. Bloc promo proposé par Iperia. Il existe plusieurs formats possibles car tous les éléments sont facultatifs : image de background, titre, description, bouton. Tout le bloc est cliquable et renvoie vers une page du site ou un site externe.

13. Plugin Page Facebook (https://developers.facebook.com/docs/plugins/page-plugin) vers la page Facebook Iperia (https://www.facebook.com/iperia). Affichage : pas d’onglets, ne pas afficher les visages des ami(e)s.

9

12

13

00 Accueil

11

10


00.5 Recommandations

2 types de recommandations : Nouvelles formations et Dernières places disponibles.

14. Nouvelles formations. Si possible : remonter automatiquement les 3 dernières ajoutées. Sinon, laisser la main à Iperia pour sélectionner les formations à faire remonter.

15. Les Dernières places disponibles n’apparaissent que si l’utilisateur a sélectionné une région et/ou une ville dans son historique de navigation (enregistré dans le cache). A ce moment-là on peut lui remonter les formations dans sa région pour lesquelles il reste les dernières places.

16. Un module de formation présente les informations suivantes : titre, objectif, lien «Lire la suite», les métiers concernés par ce module (entre 1 et 4) Tout le bloc renvoie vers la page du module correspondant.

17. Menu déroulant : permet de sélectionner un métier. Renvoie vers la page métier correspondante.

00 Accueil

15

17

14

16


00.6 Footer

Présent sur toutes les pages du site (sauf popup)

18. Liens rapides classés en 4 colonnes :

- Nos formations : reprend les 4 métier et renvoie vers la page métier correspondante - Besoin d’aide : pour le moment la rubrique «Vous êtes employeur» n’existe pas. - A propos - Contact

19. Bouton «Retour en haut de la page» toujours visible en bas dans le coin droit de l’écran, dès qu’on commence à scroller vers le bas de l’écran en haut de page. Il renvoie en haut de l’écran actif.

00 Accueil

19

18

Précisions techniques concernant la construction des modules / formations.

La hiérarchie des formations est la suivante :Métier > Rubrique (bloc) > Module (formation) > session de formation (date et lieu)Nous devons distinguer les informations qui sont présentes dans le webservice et donc l'ERP Ipéria des informations devant être saisie dans l'interface WP. Le webservice renvoit les données listées dans le doc suivant : CI_getModule_1.1.docx - Netemedia-clients\Playgrnd\8. Iperia\1. Conception\1.4 CDC fonctionnel et techniqueDans le BO WP l'utilisateur doit pouvoir ajoute de nouveaux modules (formations)

Ce qu'il faudrait faire c'est importer le fichier excel suivant (ou le saisir si plus simple) : 160802_Modules de formation 2017_Reepartition par catalogue_Promo - Clean.xlsxA partir de la saisie du code de référence module on récupère les infos du webservice puis on saisit les infos manquantes. Les informations qui sont remontées depuis le webservice (en rouge) ne sont pas éditables.

La construction du module est la suivante :• Métier : liste déroulante - permettre d'ajouter/modifier dans le BO• Intitulé du module : champ de saisie simple - récupérer depuis le webservice• Le module fait partie d'un bloc - string unique; nullable- récupérer depuis le webservice• Nombre de jours du module - string unique - récupérer depuis le webservice• Nombre d'heures - string unique - récupérer depuis le webservice• Actions de formation code OF - string unique - récupérer depuis le webservice• Présentiel ou FOAD - jour unique - récupérer depuis le webservice• Date - string unique - récupérer depuis le webservice• Lieu de formation (ville, adresse) - lieu multiple- récupérer depuis le webservice transmet adresse complète avec CP• Rubrique (rattachement à un bloc) : liste déroulante - permettre d'ajouter/modifier dans le BO // à confirmer avec retour Webservice• Thématique : liste déroulante - prévoir dans d'ajouter/modifier dans le BO• Référence module : champ de saisie - à partir de la saisie de ce code on récupère les infos du webservice• Nouveauté : oui / non• Intitulé d'un thème de formation : champ de saisie complet• Objectif : champ de saisie complet• Points clés : champ de saisie complet• Modalités de départ en formation

La construction d'un bloc est la suivante : (pas d'infos sur le webservice et ce qu'il renvoit)• Titre Bloc : champ de saisie• Numéro de bloc : champ de saisie• Nombre de modules composant le bloc - calcul automatique en fonction du nombre de modules liés au bloc• Nombre d'heures - calcul automatique en fonction du nombre d'heures de chaque module composant le bloc• Présentation résumé - champ de saisie complet• Présentation longue - champ de saisie complet• Mots clés : systèmes de tags de WP (administratif / droit du travail etc...) • Evaluation : champ de saisie complet

La construction d'un métier est la suivante :• Nom métier : champ de saisie• Code couleur métier : Champ de saisie Héxadécimale• Description courte : champ de saisie• Description longue : champ de saisie complet• Qualités requises : champ de saisie• Encadré gris

o Titreo Sous-titreo Texteo Visuelo Lien de destination

• Formations et diplômes non salariéo Texte d'introductiono Pictoo Légende picto

• Titre diplôme :o Image du titre (macaron)o Titre o Description

• Formations et diplôme salariéo Sélection du Bloc 1 mis en avanto Sélection du Bloc 2 mis en avanto Sélection du Bloc 3 mis en avant

Pop-Up CPF : • Titre : champ de saisie• Sous-titre : champ de saisie• Description : champ de saisie complet• Lien site externe•

Pop-Up E-formation :• Titre : champ de saisie• Sous-titre : champ de saisie• Description : champ de saisie complet

Questions :Bloc Titre de Niveau V présent sur page diplôme et formation comment est-il construit ? Comment peut-on deviner les liens de destination : ex. p19 lien vers la page du bloc correspondant

La construction du métier reposant sur le distinguo salarie / non salarié il faudrait construire le BO avec en regard les informations similaire Gauche non salarié / droite salarié

• Démarches et modalités d'accès non salariéo Colonne de gauche

Titre : champ de saisie Sous-titre : champ de saisie Description : champ de saisie complet Pop CPF activée : oui/non

o Colonne de droite Titre Sous-titre Description Lien 1 texte + url Lien 2 texte + url

• Démarches et modalités d'accès salariéo Colonne de gauche

Titre : champ de saisie Sous-titre : champ de saisie Description : champ de saisie complet

o Colonne de droite Titre Sous-titre Description Lien 1 texte + url Lien 2 texte + url

• Témoignageso Nomo Posteo Expérienceo Descriptiono Url vidéoo Image


Page 9

01 Parcours non salarié

_

01.1 Page métier

01.1.1 Header01.1.2 Choix de la situation01.1.3 Aperçu du métier01.1.4 Témoignages

01.2 Page métier > non salarié

01.2.1 Choix de la situation 01.2.2 Barre de navigation01.2.3 Le métier01.2.4 Formations et diplômes01.2.5 Les démarches et modalités d’accès

01.3 Popup CPF

01.4 Popup E-formation

01.5 Page bloc

01.5.1 Entête01.5.2 Détail des modules01.5.3 Formulaire de demande

01.6 Popup session de formation


Page 10


01.1 Page métier

01.1.1 Header

1. La rubrique active est mise en avant.

01.1.2 Choix de la situation

2. Deux boutons pour sélectionner sa situation : affiche le contenu qui correspond au choix en dessous du bloc violet.

2

1


Page 11


01.1.3 Aperçu du métier

3. Zone de texte modifiable par Iperia (à rédiger). Elle peut contenir différents styles de texte : - titre - sous-titre - corps de texte - qualités requises

4. Bloc contact - format colonne

5. Rappel du choix de la situation. Chaque bouton renvoie en haut de l’écran, en affichant le contenu correspondant à la situation sélectionnée.

43

5


Page 12


01.1.4 Témoignages

Témoignage (format carrousel) : une photo en background (différente de l’aperçu de la vidéo Youtube) et un bloc d’information (nom, métier, citation, âge, ville et département, années d’expériences).

Carrousel : s’il n’y a qu’un seul témoignage, on n’affiche qu’une seule vidéo et les flèches n’apparaissent pas. Au clic sur le bouton «Play», la video s’ouvre et se lance dans une popup (source Youtube).


Page 13


01.2 Page métier > Salarié


1. Le bouton «Je veux devenir garde d’enfants» estactif.

01.2.2 Barre de navigation

2. Les liens du menu renvoient vers une ancre plusbas dans l’écran.

Ce menu reste fixé en haut de l’écran au scroll dans la page (voir page suivante).

1

2


Page 14

3. La barre reste fixée en haut de l’écran, au scroll et dès qu’on clique sur un lien de cette barre.

01.2.3 Le métier

4. Zone de texte modifiable par Iperia (à rédiger). Elle peut contenir différents styles de texte : - titre - sous-titre - corps de texte - qualités requises - lien de téléchargement de la brochure PDF «Je veux devenir garde d’enfants».

5. Bloc d’information sur le titre de niveau V (à rédiger), peut contenir différents styles de texte : - titre - sous-titre - corps de texte et image - lien : renvoie vers la page «Titre de niveau V - Assistant maternel / Garde d’enfants»

6. Témoignage (format carrousel) - idem page métier sans choix de situation

4

6

5

3



Page 15

01.2.4 Formations et diplômes

7. Titre, description et légende (le picto indique les formations certifiantes dans l’entête de chaque bloc).

8. Filtres de rechercher : les résultats se rechargent automatiquement, dès qu’un champ de filtre est modifié : - Thématiques : menu déroulant - Lieu : menus déroulants pour la région et la ville (laisser le choix de sélectionner une ville par ordre alphabétique, même si une région n’est pas sélectionnée) - Formation à distance : case à cocher pour afficher seulement les formations incluant la formation à distance (les champs Région et ville sont désactivés) - Date de début : affichage d’un calendrier sur le mois en cours et possibilité d’entrer directement une date (format JJ/MM/AAAA) - Durée : menu déroulant (à définir)

9. Vignette - Format «Bloc» Affiche les infos suivantes : numéro du bloc, titre, nombre de modules, durée (nombre d’heures), descriptif, type d’évaluation, lien vers le descriptif. Toute la vignette est cliquable et renvoie vers la page du bloc.

7

8

9



Page 16

10. Vignette - Format «Titre»

Affiche les infos suivantes : Image du titre (macaron), titre, description, lien vers le descriptif. Toute la vignette est cliquable et renvoie vers la page du titre.

11. Bloc de contact - format linéaire

10

11



Page 17

01.2.5 Les démarches et modalités d’accès

12. Zone de texte modifiable par Iperia (à rédiger). Elle peut contenir différents styles de texte : - titre - sous-titre - corps de texte - lien vers la popup CPF (voir page suivante)

13. Bloc d’information sur la formation à distance (à rédiger), peut contenir différents styles de texte : - titre - sous-titre - corps de texte et image - le premier lien ouvre la popup E-formation - le deuxième lien renvoie vers l’ancre «Formation et diplômes» sur la même page, filtré sur les formations à distance (case cochée).

14. Lien de téléchargement du bulletin d’inscription en PDF.

15. Lien externe vers le site www.moncompteformation.gouv.fr


12

13

14

15


Page 18

01.3 Popup CPF

1. Fermer la popup ou cliquer n’importe où en dehors du la popup.

2. Contenu : - Titre - Sous-titre - Corps de texte - Lien externe vers le site www.moncompteformation.gouv.fr


21


Page 19

01.4 Popup E-formation

1. Fermer la popup ou cliquer n’importe où en dehorsdu la popup.

2. 2. Contenu :- Titre- Sous-titre- Corps de texte- Lien vers la page du bloc correspondant (pour lesnon-salariés), du module correspondant (pour lessalariés)


2

1


Page 20

01.5 Page Bloc

01.5.1 Entête

1. Retour à la liste des formations (page précédente,ancré sur l’onglet «Formations et diplômes). Si desfiltres étaient appliqués lors de la recherche, ils lerestent aussi lors d’un retour à la liste.

2. Descriptif du bloc, affiche les infos suivantes :- Métier- Numéro de bloc- Titre- Mots-clés (à renseigner par Iperia dans le CMS, ilsn’existent pas dans la version actuelle)- Icône «formation certifiante»- Description (nombre de modules, durée, textedescriptif)

3. Bouton «Envoyer une demande» : scrolle versl’ancre du formulaire en bas de page.

4. Bouton «Partager sur Facebook» : ouvre unepopup qui permet de partager un statut avec le lienpré-attaché (https://developers.facebook.com/docs/plugins/share-button)

5. Bouton «Recommander à un(e) ami(e) : ouvre unnouveau mail depuis le client mail paramétré pardéfaut


1

2

3 4

2

1

5


Page 21

01.5.2 Détail des modules

Un bloc est composé de plusieurs modules. Pour le non-salarié, il n’est pas possible de rentrer dans le détail d’un module (car il ne peut pas en faire la demande), donc il n’a pas accès aux pages de détail de chaque module.

6. Informations affichée pour chaque module : titre,durée (nombre d’heures), objectif, points clés

7. Le dernier module correspond à l’évaluation : titre,durée et description


6

7


Page 22

01.5.3 Formulaire de demande

Première partie (facultative) :

8. Titre, description dynamique (reprend le titre de la formation concernée).

8. Google maps : permet de sélectionner un organisme de formation qui dispense cette formation directement sur la carte. Une fois un point sélectionné, le formulaire à droite se met automatiquement à jour et affiche les dates disponibles dans cet organisme.

9. Formulaire à remplir :

- Lieu : menus déroulants pour la région et la ville (laisser le choix de sélectionner une ville par ordre alphabétique, même si une région n’est pas sélectionnée). Une fois la région et/ou la ville sélectionné(e)s, la carte se met à jour automatiquement (zoom sur les organismes de formation correspondants dans cette zone géographique) - Date : menu déroulant, permet de sélectionner un mois de l’année pendant lequel une formation est disponible pour le lieu sélectionné. Ce champ est inactif tant qu’un lieu n’a pas été sélectionné. - Choisir une date : cette partie est visible une fois qu’une date (mois) est sélectionnée. Il s’agit d’une liste à cocher (plusieurs choix possibles).

10. Lien «Voir le détail» : ouvre la popup «Session de formation»


9

8

11

10


Page 23

Deuxième partie (obligatoire) :

11. Formulaire à remplir :

- Civilité : radio button Monsieur / Madame(obligatoire)- Prénom, nom, ville, Email : champ à remplir(obligatoire)- Numéro de téléphone : champ à remplir (facultatif)- Date de naissance : champ préformaté JJ/MM/AAAA(obligatoire)- Opt-in : case à cocher (optionnel)

12. Bouton «Envoyer la demande de souhait» : leformulaire est envoyé à Iperia et un message deconfirmation apparaît en surimpression (contenu àdéfinir, écran à créer)

13. Bloc contact - format linéaire


11

12

13


Page 24

01.6 Popup Session de formation

1. Fermer la popup ou cliquer n’importe où en dehors du la popup.

2. Bouton «Choisir cette session» : ferme la popup et sélectionne automatiquement la date correspondante dans le formulaire :

Informations à afficher : - Titre de la formation - Ville, région - Dates de la formation - Détail des horaires par jour de formation - Date de l’évaluation


2

1


Page 25

02 Parcours salarié

_

02.1 Page métier > salarié

02.1.1 Choix de la situation 02.1.2 Barre de navigation 02.1.3 Pourquoi se former 02.1.4 Formations et diplômes ( + les différents formats de vignettes) 02.1.5 Les démarches et modalités d’accès02.2 Page bloc

02.2.1 Entête 02.2.2 Détail des modules 02.2.3 Formulaire de demande02.3 Page module

02.3.1 Entête 02.3.2 Détail du module 02.3.3 Formulaire de demande 02.3.4 Recommandation 02.3.5 Télécharger les fiches outils


Page 26


02.1 Page métier > Salarié


1. Le bouton «Je suis déjà garde d’enfants» est actif.

02.1.2 Barre de navigation

2. Identique à la situation non salarié, seul le contenuchange.

1

2


Page 27

02.1.3 Pourquoi se former

3. Zone de texte modifiable par Iperia (à rédiger). Ellepeut contenir différents styles de texte :- titre- sous-titre- corps de texte- lien de téléchargement de la brochure PDF «Je suisdéjà garde d’enfants».

4. Bloc d’information sur le titre de niveau V (àrédiger), peut contenir différents styles de texte :- titre- sous-titre- corps de texte et image- lien : renvoie vers la page «VAE : Titre de niveau V -Assistant maternel / Garde d’enfants»

3

4



Page 28

1

02.1.4 Formations et diplômes

5. Titre et légende (le picto indique les formationscertifiantes dans l’entête de chaque bloc).

6. Filtres de recherche : les résultats se rechargentautomatiquement, dès qu’un champ de filtre estmodifié :

- Type de recherche : 2 cases à cocher (nonexclusif), module court (tous les modules classéspar thématique + les autres produits) et formationcertifiante (blocs, titres et autres produits)- Autres filtres : identiques non salarié

7. Nombre de formations disponibles, se met à jouren fonction des filtres appliqués.

Formations affichées par défaut (pas de filtre appliqué) :

8. «Des modules courts pour développer vos

compétences»

Mise en avant de 3 modules (laisser la main à Iperiapour mettre en avant les modules qu’ils souhaitent).

9. Bouton qui permet d’afficher tous les modules(on reste sur la même page, la case «Je recherche unmodule court» est cochée).

Voir plus loin pour le descriptif de chaque type de vignette

5

6

7

8

9



Page 29

1

10. «Des cycles certifiants pour faire certifier vos compétences»

Mise en avant de 2 blocs et le titre (laisser la main à Iperia pour mettre en avant les blocs qu’ils souhaitent).

11. Bouton qui permet d’afficher tous les blocs et le titre (on reste sur la même page, la case «Je recherche une formation certifiante» est cochée).


13. «Nouvelles formations»

Identique à la page d’accueil

Voir plus loin pour le descriptif de chaque format de vignette

1

4

2

3



Page 30

1

14. «Dernières places disponibles»

Identique à la page d’accueil

15. «Dernières formations consultées»

Cette ligne de recommandations s’affiche lorsque l’utilisateur a déjà navigué sur le site et a consulté au moins 1 bloc ou module ou titre ou autre produit. Les 3 derniers viennent ensuite s’afficher ici dans un ordre anté-chronologique.

Voir plus loin pour le descriptif de chaque format de vignette

14

15



Page 31


Vignette - Format «Module»

- titre - durée (nombre d’heures) - disponible en FOAD (optionnel) - objectif - lien vers la page du module

Toute la vignette est cliquable et renvoie vers la page du bloc.

Un élément graphique sera dans la couleur du métier concerné.

Vignette - Format «Nouveau

Module»

- titre - label «nouveau» (attribué par Iperia) - durée (nombre d’heures) - disponible en FOAD (optionnel) - objectif - lien vers la page du module



Vignette - Format «Bloc»

- numéro du bloc - titre - nombre de modules - durée (nombre d’heures) - descriptif, type d’évaluation - lien vers la page du bloc



Vignette - Format «Titre»

- Image du titre (macaron) - titre - description - lien vers la page du titre


Un élément graphique sera dans la couleur du(des) métier(s) concerné(s).


Page 32

1

Formations affichées lorsque le filtre «Je recherche un module court» est appliqué :

Tous les modules, classés par thématique, sont affichés.

16. Supprimer les filtres : tous les filtres sont remis à 0 et la liste des formations affichée par défaut apparaît.

17. Titre de la thématique

18. Liste des modules appartenant à cette thématique

17

18

16



Page 33

1

En bas de la liste :

16. Catégorie «Autres modules» après la dernière thématique. Pour le moment : Permis de conduire seulement.


17

18



Page 34

1

Formations affichées lorsque le filtre «Je recherche un module court» et d’autres filtres sont appliqués :

Tous les modules correspondant aux filtres sélectionnés sont affichés, toujours par thématique.



Page 35

1

Formations affichées lorsque le filtre «Je recherche une formation certifiante» est appliqué :

Tous les blocs et le titre correspondant au métier sont affichés (contenu identique aux formations disponibles pour les non-salariés) et précédés d’une courte description (titre et description).



Page 36

02.1.5 Les démarches et modalités d’accès

18. Zone de texte modifiable par Iperia (à rédiger). Elle peut contenir différents styles de texte : - titre - sous-titre - corps de texte - lien (optionnel)

19. Bloc d’information sur la formation à distance (à rédiger), peut contenir différents styles de texte : - titre - sous-titre - corps de texte et image - le premier lien ouvre la popup E-formation - le deuxième lien renvoie vers l’ancre «Formation et diplômes» sur la même page, filtré sur les formations à distance (case cochée).

20. Infographie présentant les 2 parcours pour financer sa formation

19

18

20



Page 37

21. Bouton «Voir les formations» : scrolle vers l’ancre «Formations et diplômes» sur la même page.

22. Lien de téléchargement du bulletin d’inscription en PDF.

23. Lien externe vers le site www.moncompteformation.gouv.fr

21


22

23


Page 38

24. Témoignages (2 blocs) : photo de profil, prénom et nom, titre (employé ou employeur), citation, âge, ville, département, nombre d’années d’expérience (pour l’employé).

25. Bloc employeur : renvoie vers la page «Vous êtes employeur», n’existe pas encore pour cette version de la refonte.

24

25



Page 39


02.2 Page Bloc

02.2.1 Entête

Identique non-salarié


Page 40

02.2.2 Détail des modules

Un bloc est composé de plusieurs modules. Pour le salarié, il est possible de rentrer dans le détail d’un module (car il peut en faire la demande exclusive).

1. Lien «Voir le module» : renvoie vers la page correspondant au module

1



Page 41


Identique non-salarié



Page 42

02.3 Page Module

02.3.1 Entête

1. Retour à la liste des formations (page précédente, ancré sur l’onglet «Formations et diplômes). Si des filtres étaient appliqués lors de la recherche, ils le restent aussi lors d’un retour à la liste.

2. Descriptif du module, affiche les infos suivantes : - Métier - Titre - Mot-clé (pour le module, il s’agit de la thématique) - Label «Nouveau» (optionnel)

3. Bouton «Envoyer une demande» : scrolle vers l’ancre du formulaire en bas de page.

4. Bouton «Partager sur Facebook» : ouvre une popup qui permet de partager un statut avec le lien pré-attaché (https://developers.facebook.com/docs/plugins/share-button)

5. Bouton «Recommander à un(e) ami(e) : ouvre un nouveau mail depuis le client mail paramétré par défaut

6. Label «nouveau» (attribué par Iperia)


1

2

3 4

6

5


Page 43

02.3.2 Détail du module

7. Description : - Durée (nombre d’heures) - Objectif - Points clés

8. Lien «Téléchargez les fiches outils» : scrolle vers l’ancre en bas de page vers les fichiers en téléchargement

9. Mise en avant du bloc intégrant ce module (si le module figure dans un bloc).

10. Lien vers la page du bloc correspondant

11. Lien vers le titre correspondant au métier

7

8

9

10

11



Page 44


Identique à la page bloc avec une option supplémentaire :

12. Formation à distance : case à cocher. Si cette option est cochée, les champs Lieu (région et ville) sont désactivé et la carte à gauche n’affiche aucun point.

12



Page 45

Exemple de formulaire lorsque plusieurs

formations sont disponibles à une même date

(mois) dans une même ville :

13. Google maps : les organismes de formation dispensant ce module sont affichés. L’organisme sélectionné est mise en avant (en orange)

14. Formulaire : les dates proposées sont classées par organisme (on n’affiche pas le nom de l’organisme, il peut s’agir d’un quartier, d’une adresse...).


13

14


Page 46


02.3.4 Recommandation

16. «D’autres formations qui pourraient vous

intéresser»

La recommandation de ces 3 modules se base sur les mots clés du module actif, ou bien sur les autres modules du même bloc, s’il fait partie d’un bloc.

15


16


Page 47

02.3.5 Télécharger les fiches outils

17. Liste des fichiers à télécharger (génériques, ils ne sont pas liés au module actif) : titre, description, lien de téléchargement du PDF


17


Page 48

03 Actualités

_

03.1 Le blog

03.2 Page article

03.2.1 Format simple 03.2.2 Format dossier


Page 49

03.1 Le blog

1. Header de la page blog : Titre et description

2. Liste d’articles. Plusieurs formats possibles. On retrouve le dernier article en avant sur la page d’accueil.

Format image + texte : - A gauche : Image à gauche - A droite : Date, catégorie, titre (2 lignes max), jusqu’à 6 lignes de description (puis le texte est tronqué avec «...» à la fin de la ligne). - Lien «lire la suite» : renvoie vers la page de l’article

Format texte : - Date, catégorie, titre (2 lignes max), jusqu’à 3 lignes de description (puis le texte est tronqué avec «...» à la fin de la ligne). - Lien «lire la suite» : renvoie vers la page de l’article

3. Liste des catégories. Par défaut : on se trouve sur «tous les articles». En sélectionnant une autre catégorie, les articles affichés sont filtrés et corresponde à la catégorie sélectionnée.

03 Actualités

1

2

3


Page 50

4. Plugin Page Facebook : format identique page d’accueil

2. Bloc promo proposé par Iperia : format identique page d’accueil (le contenu peut être différent sur la page d’accueil et sur la page blog).

3. Bloc contact - format colonne

4

5

6

03 Actualités


Page 51

7. Pagination : lien vers les 5 pages de blog suivantes, puis bouton «page suivante».

On affiche 10 articles maximum sur une page.

7

03 Actualités


Page 52

03.2 Page article

03.2.1 Format simple

1. Retour à la liste des articles (page précédente)

2. Entête de l’article : - Catégorie - Titre - Date de publication

3. Contenu de l’article. Mise en page : prévoir différents styles, pour ce format : - Sous-titre - Texte plein - Liens - Image intégrée au contenu

4. Bloc de partage : permet de partager l’article directement sur les réseaux sociaux (ouvre une popup de partage) sur Facebook, Twitter, Google + et Linkedin, ainsi que par mail (ouvre un nouveau mail depuis le client mail paramétré par défaut). Mots clés (tags liés à l’article) : clic sur un mot clé permet d’afficher la liste des articles correspondant à ce mot clé (écran à créer)

Ce bloc reste fixe dans la colonne de droite au scroll (voir page suivante)

03 Actualités

4

1

2

3


Page 53

5. Zone de commentaires, on utilise Facebook Comments Plugin (rattaché à la page Facebook d’Iperia) pour accéder à la modération via Facebook (https://developers.facebook.com/docs/plugins/comments/)

Le plugin Comments permet aux personnes de commenter le contenu de votre site à l’aide de leur compte Facebook. Les gens peuvent également partager leurs activités de commentaire avec leurs amis (et avec les amis de leurs amis) sur Facebook. Le plugin Comments propose également des outils de modération intégrés et un classement social par pertinence.

03 Actualités

5


Page 54

03.2.2 Format dossier

1. Retour à la liste des articles (page précédente)

2. Entête de l’article : - Catégorie - Titre - Date de publication - Image de background

3. Contenu de l’article. Mise en page : prévoir différents styles, pour ce format : - Sous-titre - Titre 2 - Texte plein - Citation - Liens - Image intégrée au contenu

4. Bloc de partage : permet de partager l’article directement sur les réseaux sociaux (ouvre une popup de partage) sur Facebook, Twitter, Google + et Linkedin, ainsi que par mail (ouvre un nouveau mail depuis le client mail paramétré par défaut). Mots clés (tags liés à l’article) : clic sur un mot clé permet d’afficher la liste des articles correspondant à ce mot clé (écran à créer)

Ce bloc reste fixe dans la colonne de droite au scroll (voir page suivante)

03 Actualités

4

1

2

3


Page 55

5. Zone de commentaires, on utilise Facebook Comments Plugin (rattaché à la page Facebook d’Iperia) pour accéder à la modération via Facebook (https://developers.facebook.com/docs/plugins/comments/)

Le plugin Comments permet aux personnes de commenter le contenu de votre site à l’aide de leur compte Facebook. Les gens peuvent également partager leurs activités de commentaire avec leurs amis (et avec les amis de leurs amis) sur Facebook. Le plugin Comments propose également des outils de modération intégrés et un classement social par pertinence.

03 Actualités

5


Page 56

04 Autres produits

_

04.1 VAE - Titre niveau V

04.2 Permis de conduire

04.3 RADV


Page 57

04.1 VAE - Titre niveau V

1. Retour à la liste des formations (page métier, ancrée sur l’onglet «Formations et diplômes). Si des filtres étaient appliqués lors de la recherche, ils le restent aussi lors d’un retour à la liste.

2. Descriptif du produit, affiche les infos suivantes : - Métier(s) concerné(s) - Titre




04 Autres produits

1

2

3 4 5


Page 58

6. Infographie. Il ne doit pas s’agir d’une image (texte sélectionnable pour le référencement).

04 Autres produits

6


Page 59

7. Témoignage (format image pleine page) : une photo en background et un bloc d’information (nom, métier, citation, âge, ville et département, années d’expériences).

8. Lien : scrolle vers l’ancre du formulaire en bas de page.

04 Autres produits

7

8


Page 60


04 Autres produits

6


Page 61

10. Formulaire de demande à remplir :

- Civilité : radio button Monsieur / Madame (obligatoire) - Prénom, nom, ville, Email : champ à remplir (obligatoire) - Numéro de téléphone : champ à remplir (facultatif) - Date de naissance : champ préformaté JJ/MM/AAAA (obligatoire) - Opt-in : case à cocher (optionnel)

11. Bouton «Envoyer la demande de souhait» : le formulaire est envoyé à Iperia et un message de confirmation apparaît en surimpression (contenu à définir, écran à créer)


04 Autres produits

10

11

12


Page 62

04.2 Permis de conduire


2. Descriptif du produit, affiche les infos suivantes : - Métiers concernés : tous les métiers - Titre - Mots-clés




04 Autres produits

1

2

3 4 5


Page 63


04 Autres produits

6


Page 64

7. Témoignage (format 1 bloc) : une photo de profil, nom, métier, citation, âge, ville et département, années d’expériences).

04 Autres produits

1


Page 65

04 Autres produits





8

9

10


Page 66

04.3 RADV


2. Descriptif du produit, affiche les infos suivantes : - Métier concerné : Assistant de vie - Titre - Mots-clés




04 Autres produits

1

2

3 4 5


Page 67

6. Témoignage (format 2 blocs) : une photo de profil, nom, situation, citation, âge, ville et département)

7. Mise en avant des derniers articles parlant des rencontres RADV. Afficher les 2 derniers articles de la catégorie «Evénement» et mot-clé «RADV» : format à respecter lors de la création des articles pour les faire remonter sur cette page

Format image + texte (2 colonnes) : - En haut : Image à gauche - En bas : Date, catégorie, titre (2 lignes max), jusqu’à 3 lignes de description (puis le texte est tronqué avec «...» à la fin de la ligne). - Lien «lire la suite» : renvoie vers la page de l’article

8. Bouton «voir les autres rencontres sur le blog : renvoie vers la page de blog, liste des articles filtrée sur la catégorie «Evénement» et mot-clé «RADV» (écran à créer)

04 Autres produits

6

7

8


Page 68

04 Autres produits





9

10

11

wireframes et spécications ergonomiques › wp-content › uploads › 2016 › 09 ›...

Documents