Embed Size (px)
Citation preview
- 1 -
CAHIER DES
CHARGES Projet web « le salon du Chocolat »
Le 04/04/2018 Suivi des versions
Version 0.1.3
- 2 -
Table des matières
INTRODUCTION ...................................................................................................................................................................... - 3 -
LISTE DE DIFFUSION : ....................................................................................................................................................................... - 3 - GLOSSAIRE ..................................................................................................................................................................................... - 4 -
VISION GLOBALE DU PROJET .................................................................................................................................................. - 5 -
CADRE DU PROJET ........................................................................................................................................................................... - 5 - PRESENTATION DE L’EQUIPE .............................................................................................................................................................. - 6 - LES LIVRABLES................................................................................................................................................................................. - 6 - DIFFERENTES PHASES DU PROJET. ....................................................................................................................................................... - 7 - PUBLIC CIBLE DU SALON .................................................................................................................................................................... - 8 - COMPARAISON DES PERSONAS ........................................................................................................................................................... - 9 - IMPACT MAPPING ......................................................................................................................................................................... - 10 - BENCHMARK DES SITES CONCURRENTS ............................................................................................................................................... - 10 - LES CONCURRENTS DIRECTS ............................................................................................................................................................. - 10 - LES CONCURRENTS INDIRECTS .......................................................................................................................................................... - 11 - ANALYSE S.W.O.T BASEE SUR LE BENCHMARK : ................................................................................................................................. - 12 - LES CONTRAINTES DU PROJET ........................................................................................................................................................... - 13 - ACCESSIBILITE ............................................................................................................................................................................... - 14 - CHOIX DU CMS ............................................................................................................................................................................ - 15 - TYPE D’HEBERGEMENT (CONSEILLE) .................................................................................................................................................. - 15 - LE REFERENCEMENT (SEO) ............................................................................................................................................................. - 16 - LES OUTILS DE SUIVI : ..................................................................................................................................................................... - 16 - LE RESPONSIVE DESIGN .................................................................................................................................................................. - 17 - LES APPLICATIONS DEJA EXISTANTES .................................................................................................................................................. - 18 - ARBORESCENCE GLOBALE ................................................................................................................................................................ - 19 -
SPECIFICATIONS DU PROJET ................................................................................................................................................. - 20 -
LES DROITS D’ACCES ....................................................................................................................................................................... - 20 - ÉLEMENTS COMMUNS .................................................................................................................................................................... - 21 - HEADER ...................................................................................................................................................................................... - 21 - FOOTER ....................................................................................................................................................................................... - 22 - WIREFRAME PAGE « ACCUEIL » DESKTOP .......................................................................................................................................... - 23 - WIREFRAME PAGE « ACCUEIL » MOBILE ........................................................................................................................................... - 24 - SPECIFICATIONS FONCTIONNELLES : .................................................................................................................................................. - 24 - SPECIFICATIONS TECHNIQUES : ......................................................................................................................................................... - 24 - WIREFRAME PAGE « EXPOSANTS » DESKTOP ...................................................................................................................................... - 25 - WIREFRAME PAGE « EXPOSANTS » MOBILE ........................................................................................................................................ - 26 - SPECIFICATIONS FONCTIONNELLES : .................................................................................................................................................. - 26 - WIREFRAME PAGE « ACTUALITES » DESKTOP ..................................................................................................................................... - 27 - WIREFRAME PAGE « ACTUALITES » MOBILE ....................................................................................................................................... - 28 - SPECIFICATIONS FONCTIONNELLES : .................................................................................................................................................. - 28 - WIREFRAME PAGE « ESPACE PRO » DESKTOP .................................................................................................................................... - 29 - WIREFRAME PAGE « ESPACE PRO » MOBILE ....................................................................................................................................... - 30 - SPECIFICATIONS FONCTIONNELLES : .................................................................................................................................................. - 30 - USE CASE CONNEXION ESPACE PRO .................................................................................................................................................. - 31 - WIREFRAME PAGE « PLAN DU SALON » DESKTOP ................................................................................................................................ - 32 - WIREFRAME PAGE « PLAN DU SALON ET DES EXPOSANTS » MOBILE ........................................................................................................ - 33 - SPECIFICATIONS FONCTIONNELLES : .................................................................................................................................................. - 33 - WIREFRAME PAGE « TABLES RONDES » DESKTOP ................................................................................................................................ - 34 - WIREFRAME PAGE « TABLES RONDES » MOBILE .................................................................................................................................. - 35 - SPECIFICATIONS FONCTIONNELLES : .................................................................................................................................................. - 35 - WIREFRAME PAGE « BILLETTERIE » DESKTOP ...................................................................................................................................... - 36 - WIREFRAME PAGE « BILLETTERIE » MOBILE ........................................................................................................................................ - 37 - WIREFRAME PAGE « PLUS D’INFOS » DESKTOP .................................................................................................................................. - 38 - WIREFRAME PAGE « PLUS D’INFOS » MOBILE ..................................................................................................................................... - 40 -
- 3 -
Introduction
Liste de diffusion :
Noms
Acteurs Adresses E-mails Téléphones
Frédéric Charain
Le client [email protected] 06.85.96.47.55
Joal Duverly
Chef de Projet [email protected] 06.62.26.76.11
Guillaume Fritz
Développeur
Fullstack
Wordpress
[email protected] 07.68.25.69.85
Agnès Contaret
Web designer [email protected]
06.85.64.78.96
- 4 -
Glossaire
Nom Définition
Call to action Un Call to Action (Appel à l’action) est un élément d’une page web dont
l’objectif est d’inciter l’utilisateur à réaliser une action. Cet élément peut par
exemple prendre la forme d’un bouton, d’une image ou d’un lien. Cette
action peut être de plusieurs natures : ajout d’une observation, inscription à
une newsletter, demande d’informations...
Footer Le footer est le terme anglais pour désigner le pied de page. Sur un site web, il
s'agit donc de la partie située tout en bas des pages web. Cette zone contient
généralement un copyright.
Header Le header est le terme anglais pour désigner l’entête. Sur un site web, il s'agit
donc de la partie située tout en haut des pages web. Cette zone contient
généralement le menu de navigation.
HTML Langage informatique de base créé et utilisé pour écrire les pages Web. C’est
un langage d’affichage qui sert à afficher et présenter le contenu d’un site
web.
Nom de domaine Nom de l’URL de votre adresse Internet : nomdedomaine.com par exemple.
Référencement Le référencement est l’ensemble des techniques qui permettent d’inscrire un
site dans les moteurs de recherche ou dans les annuaires. Il est souvent au
cœur des actions faites dans le cadre d’une opération de Marketing Internet.
Responsive Design On dit d’un design de site web qu’il est responsive lorsqu’il adapte
automatiquement la mise en page et l’apparence du site en fonction de la
taille de la fenêtre d’affichage, et par conséquent du type d’appareil utilisé
pour consulter le site (ordinateur, tablette ou smartphone).
Scroll (Scrolling, Scroller) Dans une page web, l’action de scroller consiste à faire
défiler une page vers le bas de l’écran pour y voir un contenu qui est en
dehors du cadre de l’écran sur lequel la page est consultée.
SEO (Search Engine Optimization) Ensemble de techniques destinées à faciliter le
travail des moteurs de recherche internet et à obtenir un meilleur classement
des contenus.
SSL Protocole utilisé par les boutiques en ligne permettant d’établir une
connexion sécurisée sur Internet, afin d’empêcher toute tentative de fraude
lors d’une transaction bancaire. La sécurisation se fait par un cryptage des
données envoyées par le navigateur au serveur.
Wireframe Le wireframe ou maquette fonctionnelle est un schéma utilisé lors de la
conception d'une interface pour définir les zones et composants qu'elle doit
contenir.
- 5 -
Vision globale du projet
Cadre du projet
Résumé du projet Le commanditaire du projet M. Frédéric Charain organisateur du salon du chocolat a exprimé les besoins suivants : Développer site web pour communiquer sur l’évènement. Il souhaite y présenter la liste des exposants, la carte des exposants, les intervenants prévus lors des tables rondes la liste des actualités et des retombées presse. Il souhaite également que les billets d’entrées puissent être commandées directement en ligne sur le site via un système de billetterie. Dans un souci d'accessibilité il est important de souligner que le site devra être 100% responsive. Le site aura également une version Anglaise pour permettre aux nombreux touristes de la ville de Paris une meilleure accessibilité.
- 6 -
Présentation de l’équipe
Les livrables Pour atteindre cet objectif, l’agence Digitizer livrera les éléments suivants :
Cahier des charges fonctionnel et technique 18/04/2018
Conception Graphique et Design -Thème -Maquettes
08/05/2018
Conception technique -Conception de l’espace Pro - Billetterie - Plan 3D
28/05/2018
Livraison du site 31/05/2018
+Formation à WP 01/06/2018
La durée totale du projet est estimée à 33 Jours ouvrés.
- 7 -
Différentes phases du Projet.
- 8 -
Public cible du salon Le public cible est partagé entre Sympathisants /Amateurs (BtoC) et les Professionnels du secteur (BtoB).
Voici les principales catégories de personnes qui feront partie du public cible :
Sympathisants/amateurs Professionnels
Caractéristiques Sociodémographiques
● Origine : locaux et Parisiens ● Âge : 12 à 40 ans ● CSP : + ● Salaire : +30K€/an ● Loisirs : 2K€/an
● Artisans chocolatiers, ouvriers, grande distribution, restaurateurs, presse
● 18 à 70 ans ● CSP : ++ ● Salaire : 70K/an
Caractéristiques Comportementales
● Archétype : homme/femme ● Motivations : Gourmandise et
loisirs
● Archétype : homme/femme ● Motivations : Nouveautés,
technique, clientèle, reconnaissance
- 9 -
Comparaison des personas
- 10 -
Impact Mapping
Benchmark des sites concurrents
Les concurrents directs Marché des artisans du chocolat : ➡ https://marchechocolat-toulouse.fr/
Points forts Points faibles
● Contenu ● Ancienneté
● Esthétique (photos et charte graphique)
● Pas de billetterie ● Pas de plan
La fête du chocolat de Bromont : ➡ https://www.lafeteduchocolatdebromont.com
Points forts Points faibles
● Langues ● Le programme de la fête
● Langue ● Utilisabilité mobile ● Pas de plan du salon ● Design ● Billetterie
- 11 -
Les concurrents indirects Salon du Golf :➡ http://salondugolf.fr/
Points forts Points faibles
● Design ● Billetterie ● Langues ● Recommandations sociales ● Compte à rebours
● Langue ● Utilisabilité mobile ● Plan illisible ● Site non sécurisé
Salon de l’immobilier :➡ https://www.salons-immobilier.com/paris
Points forts Points faibles
● Design ● Recommandations sociales
● Langue ● Utilisabilité mobile ● Pas de plan du salon ● Pas de billetterie
Salon du tourisme à Paris : ➡ https://www.salons-du-tourisme.com/Paris
Points forts Points faibles
● Design ● Billetterie
● Langue ● Utilisabilité mobile ● Pas de plan du salon ● Finition du site ● Responsive ● Uniquement en Français
Coupe du monde de la pâtisserie : ➡ http://www.cmpatisserie.com
Points forts Points faibles
● Ancienneté 30 ans ● Arborescence
● Pas de billetterie ● Responsive ● Utilisabilité mobile
- 12 -
Analyse S.W.O.T basée sur le Benchmark :
Conclusion de l’analyse concurrentielle : Il existe peu de concurrents directs et indirects qui ont des sites plus ou moins optimisés « expériences utilisateurs ». Certains proposent un design et une ancienneté pérenne tant dis que d’autres n’ont pas de version multilingue et ni système de billetterie.
S
Développer un site complet en fonctionnalités.
Condition le contenu / Créer du contenu répondant aux critères d’optimisation SEO.
Proposer une UX optimisée et adaptée au public cible.
W
Concurrents présents depuis des années
(référencement lié au SEM).
Public large et diversifié.
O
Ajouter des Widgets RS sur l’accueil.
Back-links des différentes blogs et revues qui publieraient à propos du salon.
T
Arrivée d’un concurrent similaire.
Contenu qui ne serait pas assez optimisé.
- 13 -
Les contraintes du projet
Les contraintes juridiques
Toutes les sauvegardes de données personnelles liées à la création de compte doivent être signalées et enregistrées à la CNIL.
Il convient d’afficher un avertissement aux visiteurs sur l’utilisation des cookies.
Les mentions légales doivent être définies avec le client, ainsi que les conditions générales de ventes et les conditions générales d’utilisation.
Elles seront publiées sur le site, et accessibles via un lien présent dans le Footer.
La Sécurité
Un certificat SSL doit être installé sur le site afin de crypter et sécuriser la connexion au site. Le HTTPS, pour Hypertext Transfer Protocol Secure en anglais, protège l’intégrité et la confidentialité des données échangées entre l’ordinateur d’un internaute et un site web. Google favorisera dans son algorithme les sites Internet munis d’un certificat SSL Alors qu’ils sont de plus en plus conscientisés aux risques de l’hameçonnage (usurpation de l’identité) en ligne, les internautes s’attendent à une expérience sécurisée et confidentielle lorsqu’ils naviguent sur un site Internet. En protégeant l’information de l’utilisateur, le protocole HTTPS instaure un climat de confiance qui encourage les visiteurs à entreprendre différentes actions, en toute tranquillité.
Restriction du nombre d’essais d’identification : Plusieurs plugins permettent de protéger des attaques par “force brute”, c’est-à-dire les tentatives pour deviner votre mot de passe par une recherche de toutes les combinaisons possibles. Il conviendra donc d’Installer une extension qui bloque les tentatives répétées d’une même adresse IP. (Login Lock Down par exemple). Si un robot tente d’entrer cela bloque l’accès pendant un certain temps. Une fois l’extension installée, le paramétrage du nombre d’essais avant le blocage et le temps de connexion après le blocage.
Faire des sauvegardes : Les backups du système sont à effectuer au moins toutes les semaines pour prévenir un piratage ou un crash disque.
Faire des à jour régulières du site car cela permet d’avoir les tous derniers correctifs des failles de sécurité.
Désactiver l’éditeur de fichiers, afin d’empêcher l’édition des fichiers directement depuis WordPress. Le fichier .htaccess se situant à la racine du site web. Il permet de donner des instructions sur les modalités d’accès au contenu du site grâce à des fichiers de configuration spécifiques aux serveurs web Apache. Cela peut sous-entendre des règles d’accès, de blocage, de cache, etc…
Ne laisser aucune donnée sensible comme l’archive de base de données que certains plugins comme WP-backup stockent dans wp-content.
Ajouter des clefs de sécurité secrètes dans le fichier wp-config.php .Cette section du fichier de configuration sont des clés d’authentification SALT qui crée un cookie d’identification lequel protège l’installation.
- 14 -
Accessibilité La diversité des handicaps susceptibles d’affecter la capacité à accéder à un contenu ou à un service en ligne ceux- ci peuvent être visuels, auditifs, moteurs, cognitifs ou liés au vieillissement. Il convient, dans une démarche d’accessibilité du web d’atteindre un niveau de satisfaisant d’utilisabilité pour tous (AA). Voici les principales recommandations de W3C concernant le design d’un site web :
Proposer un contraste suffisant entre l’arrière-plan et le premier plan.
Ne pas se reposer uniquement sur les couleurs pour véhiculer une information, même si ces couleurs ont une forte signification (le vert et le rouge par exemple).
S’assurer que les éléments interactifs sont faciles à identifier.
Proposer des options de navigation claires.
S’assurer que les champs des formulaires intègrent les labels/icônes associés (par exemple la croix lorsqu’un champ a mal été complété ou n’a pas été complété).
Utiliser des titres et des espaces pour lier les contenus associés.
Créer des éléments de design s’adaptant aux différentes tailles d’écran.
Permettre à l’utilisateur de contrôler les éléments qui se déclenchent automatiquement.
Il faudra donc s’appuyer sur le guide de référence et de recommandations destinées à améliorer l’accessibilité des sites web : https://www.w3.org/WAI/WCAG20/quickref/ [WCAG 2.0]. Ainsi que sur : https://codex.wordpress.org/Accessibility afin de contrôler et corriger l’accessibilité du site, vérifiez les critères d’accessibilité officiels de WordPress. Enfin le site : http://wave.webaim.org/ permettra de visualiser et de corriger l’accessibilité.
Images
Le texte ALT est une option qui permet de décrire précisément l'image, il est donc suggéré d’ajouter du texte ALT à nos images pour qu'il soit plus facile pour les moteurs de recherche de les indexer. Le texte ALT attache une description aux images afin qu'elles apparaissent dans les résultats images de Google ou d'un autre moteur de recherche. Points importants pour référencer une image : Il faut faire la différence entre l’attribut TITLE, qui correspond à l'infobulle (l'affichage du texte lorsque la souris passe dessus). A la différence de l'attribut ALT, TITLE n'est pas pris en compte pour le positionnement dans Google. Pour l’attribut Title, il est conseillé d’utiliser entre 7 à 10 mots pour décrire l'image avec des termes légèrement différents de ceux utilisés dans l'attribut alt. L’attribut ALT : il doit correspondre à l’image et au contexte sémantique. Le nom de fichier : il est composé de mots clés en rapport avec l’image. Le temps de chargement des pages est un critère SEO et varie en fonction du nombre et de la taille de vos images (le poids). Les images doivent se trouver dans un compromis entre bonne qualité et poids peu lourd.
- 15 -
Choix du CMS Le CMS (Content Management System) choisi sur ce projet est WordPress. Open Source, il permet de personnaliser et de développer le thème choisi et les différents modules utilisés. Les mises à jour régulières sont riches en fonctionnalités. Facile d’utilisation il permettra à la livraison une prise en main rapide et claire pour le client.
Type d’hébergement (conseillé)
Le choix du type d’hébergement est une composante cruciale du projet. En effet le type de serveur sélectionné à une incidence directe sur le fonctionnement du site. Pour un site qui vise une certaine quantité de connexion quotidienne. Il est donc nécessaire d’avoir un maximum de ressources à disposition. Les raisons à cela sont multiples :
‣ L’application puise régulièrement aussi sur une base de données qui grossis avec les observations des utilisateurs enregistrées renforçant cette charge sur le serveur et demande une certaine quantité de stockage.
‣ Le nombre d’utilisateurs connectés en même temps a aussi une forte incidence. Notre choix s’est porté sur les serveurs types OVH. Les avantages sont les suivants :
‣ Hébergement industrialisé et hautement disponible.
‣ Un prix généralement plus abordable qu’un hébergement dédié pour des performances similaires.
‣ Temps de latence réduits.
‣ Et grâce à l’offre basée sur du VPS/Cloud, il est très facilement possible d’augmenter la capacité de puissance ou de stockage en cas de nécessité pour faire face à des pics de visites ou une saturation de l’espace de stockage.
- 16 -
Le référencement (SEO) Afin d’optimiser le référencement naturel du site Web il conviendra de prendre en compte les critères suivants :
1. Le choix des mots-clefs ainsi qu’une sémantique riche autour du mot-clé. 2. Certificat SSL 3. Optimisation de la balise Title 4. Mobile Friendly 5. Vitesse de chargement du site 6. La structure des URLs
Par la suite l’installation des plugins YoastSEO et EWWW Image Optimizer. https://fr.wordpress.org/plugins/wordpress-seo/ https://fr.wordpress.org/plugins/ewww-image-optimizer/ Nom de domaine préconisé : www.lesalonduchocolat.com Adresses E-mail préconisées : [email protected] Mots clés préconisés : salon du chocolat, Paris, sortir, évènement, Chocolatier, pâtissier.
Les outils de suivi : Un compte Gmail, une courte documentation ainsi que les identifiants de connexions seront remis au client. Afin d’optimiser la configuration des objectifs E-commerce et la configuration des modèles de flux de comportements.
Google Analytics (Universal Analytics) Ce gestionnaire d’audience de site web permet de récolter et d’analyser des informations sur son audience. C’est également un bon indicateur de performance.
Suivi d'objectifs
Suivi d'événements
Suivi des recherches internes
Suivi en temps réel
Import de sources de coût externes
Analyse des pages web
Mesure du temps de chargement
Création de tableau de bord
Création de rapports personnalisés
Suivi des transactions e-commerce
Il est également intéressant pour lier une propriété Analytics avec un ou plusieurs comptes Adwords.
- 17 -
Google Tag manager
A la différence de Google Analytics ce gestionnaire de balises Google permet d’ajouter des codes de tracking sans avoir à toucher au code du site.
Automatiser vos campagnes de remarketing en fonction des actions des visiteurs Suivre vos paniers e-commerce Tracker attentivement le comportement des visiteurs (sources, temps passé, degré de scroll sur la
page…) Suivre les événements sur des pages (liens sortants, clics) Obtenir des données précises sur les soumissions de formulaires Servir du contenu adapté à la taille de l’écran Mesurer l’engagement sur vos contenus interactifs (vidéos) Suivre finement les conversions…
Google Tag Manager, permet de simplifier le processus et d’éviter d’avoir à entrer le code à la main sur chaque page.
Google Search Console
Permet de vérifier l’indexation du site et d’optimiser le référencement.
Paramétrage de l’indexation du site.
Connaitre pour chaque jour : les mots clés et des recherches ayant affiché un lien vers le site et le nombre de fois où elles ont effectivement conduit à une consultation.
Voir les statistiques de visite du site par le robot indexeur de Google.
Le responsive Design
Les internautes peuvent se connecter au site internet depuis leurs téléphones, leurs tablettes et leurs ordinateurs. Afin de s’adapter aux multiples spécificités de chaque type d’appareils, le site web du salon du chocolat est conçus « Responsive Design ». Le Responsive design est une solution stratégique à long terme dont les avantages sont nombreux :
‣ Les colonnes et les images s'ajustent, se redimensionnent et se déplacent automatiquement selon que la résolution d'écran l'exige : cette solution permet une ergonomie optimale en sauvegardant intacte la qualité de l'information du site web.
‣ Aucune migration ou redirection n’est nécessaire : le contenu, l’URL et le HTML de base sont conservés.
‣ Du fait de son adaptabilité à tous les supports d'affichage, l'indexation est améliorée.
‣ Le Responsive design permet bénéficiez d’un meilleur référencement naturel : même URL et même code HTML5, recommandé par Google.
‣ Grâce au Responsive Design, de meilleures performances sont constatées et apprécié par les navigateurs (Safari, Opéra, Android...).
- 18 -
Les points de rupture : < 480px : Smartphone Portrait > 479px < 960px : Smartphone Paysage / Mini Tablettes Paysage / Tablette Portrait > 959px < 1281px : Petits et Moyens ordinateurs / Tablette Paysage > 1280px : Grands ordinateurs
Les Plugins déjà existants sur Wordpress - Woocommerce : Plugin E-Commerce : https://woocommerce.com/
- WPML pour WordPress : Plugin Multilingue : https://wpml.org/fr/
- Fooevents : Plugin de Billetterie : https://www.fooevents.com/
- Fooevents PDF Tickets + Gestion de la billetterie : https://codecanyon.net/item/fooevents-for-woocommerce/11753111
- PayPal : Systèmes de paiement : https://fr.wordpress.org/plugins/paypal-for-woocommerce/ http://www.absoluteweb.net/boutique/passerelle-monetico-woocommerce
- Google Analytics : Outil de Suivi Analytics : https://analytics.google.com/analytics/web/
-Google Tag Manager: https://www.google.com/intl/fr/analytics/tag-manager/
- Mapplic : Plan interactif de l’événement et des exposants : https://codecanyon.net/item/mapplic/6800158
- Live Chat Support : discussion instantanée : https://wordpress.org/plugins/wp-live-chat-support/
- Mini calendrier : https://www.fooevents.com/fooevents-calendar/ - Formulaire de contact : https://wordpress.org/plugins/caldera-forms/ - Gestion de connexion et enregistrement des utilisateurs Portal: https://fr.wordpress.org/plugins/client-portal/
- 19 -
Arborescence globale
- 20 -
Spécifications du projet
Les droits d’accès
Il existe trois types de comptes utilisateurs :
‣ Comptes Administrateur [Roles_Admin] : Ils permettent aux Administrateurs de gérer l’application.
‣ Comptes Naturaliste [Roles_Naturalist] : Ils permettent aux Naturalistes de se connecter, soumettre leurs observations sans besoins de validation, et de valider ou non les observations des particuliers.
‣ Comptes Particulier [Roles_User] : Ils permettent aux particuliers de se connecter et de soumettre leurs observations. Les observations des particuliers doivent être ensuite validées par les naturalistes afin d’être affichées à tous.
Contenu Espace Pro Billetterie et
Support Pro
Modification
de contenu
Publication
des Articles
Modifier et
rédiger les
articles
Visiteur X
Exposants/ Pro X X X Modérateur X X
Administrateur X X X X
- 21 -
Éléments communs
Header Le “Header “ : L'en-tête comporte les principaux éléments de navigation du site.
Logo : Affichage du Logo du site Date : Les dates du Salon
Bouton Billetterie : Bouton dirigeant l’utilisateur vers la Billetterie. Champs de recherche : Permet de rechercher une information sur le site Bouton English : Permet d’avoir la traduction du site en Anglais. Contact : Redirige vers la page plus d’infos contact Mon compte : Redirige vers le compte utilisateur BtoB. Panier : Redirige vers le compte utilisateur si celui-ci est logué. Barre de navigation : Liens vers les pages demandées ; Réseaux sociaux : L'utilisateur est redirigé vers le réseau social. Bouton d’appel à l’action : Renvoie à la page infos pratiques
CONTENU CARACTÉRISTIQUES ACTION
Logo JPEG/PNG RENVOIE PAGE ACCUEIL
Date TEXTE STATIQUE
Bouton Billetterie
SURLIGNER AU SURVOL/ BOUTON D APPEL À L'ACTION
RENVOIE PAGE BILLETTERIE
Bouton English https://wpml.org/fr/ VERS LA VERSION ANGLAISE DU SITE
Contact LIEN RENVOIE PAGE CONTACT
Mon compte LIEN INTÉGRATION AU CMS
Panier : > Utilisateur connecté : REDIRECTION VERS LA PAGE « PANIER ». > Visiteur non connecté : REDIRECTION VERS LA PAGE « CREER UN COMPTE »
INTÉGRATION AU CMS.
Barre de Navigation
SUIT LE SCROLL DE L’UTILISATEUR GÉRÉ PAR CMS /INVISIBLE MOBILE
Réseaux sociaux ICONES FACEBOOK, TWITER, LINKEDIN LIEN VERS LES RS
GERE PAR LE CMS / INVISIBLE VERSION MOBILE
Bouton d’appel à l’action
LIEN RENVOIE VERS LA PAGE PLUS D’INFOS N'APPARAIT PAS SUR LA PAGE BILLETTERIE ET PLUS D’INFOS
- 22 -
Footer
Le “Footer “ : le pied de page est composé de trois parties :
Informations sur le salon : La liste des exposants : Redirige vers la page fille La carte des exposants : Redirige vers la page fille Le programme des animations : Redirige vers la page fille
Information sur les organisateurs : Les organisateurs : Cours descriptifs des organisateurs. Icônes réseaux sociaux : Les différentes icônes des réseaux sociaux Facebook, Twitter, Google+ Infos contact : Adresse lien vers Google maps, téléphone, mail redirige vers envoyer messages. Instagram : Six petites photos redirige vers le compte Instagram du client. Autres informations : Un Chatbot : Discussion instantanée avec les organisateurs si en ligne, sinon n’apparait pas. Mentions Légales, Copyright : Liens vers les pages filles.
CONTENU CARACTÉRISTIQUES COMMENTAIRES
La liste des exposants LIEN EN SURBRILLANCE AU SURVOL
La carte des exposants LIEN EN SURBRILLANCE AU SURVOL
Le programme des animations
LIEN EN SURBRILLANCE AU SURVOL
Les organisateurs TEXTE STATIQUE
Infos contact LIEN RENVOIE PAGE CONTACT
Un Chatbot DISCUSSION INSTANTANÉE AVEC L’UTILISATEUR
A INTEGRER AU CMS https://wp-livechat.com/
Mentions Légales, Copyright.
LIENS VERS LES PAGES FILLES GÉRÉ PAR LE CMS
- 23 -
Wireframe page « Accueil » Desktop
- 24 -
Wireframe page « Accueil » Mobile
Spécifications fonctionnelles : La page d'accueil reprend les principaux éléments de navigation attendue par l’utilisateur lors de sa première visite.
Slider d’images que voit défiler l’utilisateur quand il clique dessus, il est redirigé vers le lien associé à cette image. A droite de cette image un texte présentant le salon.
Un Bouton d’appel à l’action vient se mettre entre la première partie et la seconde partie de la page d’accueil. « Pour venir ». N’apparait pas en version mobile.
Des images fixes et un court descriptif sous chaque image viennent compléter le corps de la page d’accueil. L’utilisateur voit les dernières actualités.
Spécifications techniques :
Contenu Caractéristiques Commentaires
Slider plug in Sélections d’images en PNG qui s’agrandissent au survol. Géré par le CMS
Bouton d’appel à l’action « Pour venir ». Renvoie vers la page plus d’infos Géré par le CMS
Dernières actualités Les 6 dernières actualités simplifiées vignettes + texte Géré par le CMS
- 25 -
Wireframe page « exposants » Desktop
- 26 -
Wireframe page « exposants » mobile
Spécifications fonctionnelles :
Cette page comprend un court texte décrivant la page « exposants ». L’utilisateur voit des images vignettes (logo ou images envoyés par les exposants). En dessous de cette image apparaissent le nom de l’exposant et l’emplacement du stand. Dès que l’utilisateur clique sur l’image il sera redirigé vers la page « plan du salon » afin de localiser l’exposant. Un bouton en haut à gauche permet de la liste des exposants en PDF.
Spécifications techniques :
Contenu Caractéristiques Commentaires
Vignettes + Liste défilante
Liste défilante classée par ordre alphabétique : Image PNG de l’exposant sous forme de vignette Emplacement = lien vers plan du salon
Géré par le CMS.
Bouton télécharger Téléchargement PDF. Géré par le CMS,
- 27 -
Wireframe Page « actualités » Desktop
- 28 -
Wireframe page « actualités » mobile
Spécifications fonctionnelles :
Elle comprend une grande image de la dernière actualité, en dessous apparaît le titre la date de la publication et son texte. C’est l’actualité principale.
A droite de l'image l’utilisateur voit une liste défilante des actualités en miniature avec l’image, le titre, le nom de l’auteur et la date de la publication. Dès que l’utilisateur clique sur l’image en miniature ou le titre, cela devient l’actualité principale.
Spécifications techniques :
Contenu Caractéristiques Commentaires
Actualité principale
Image png Titre, auteur et date la publication Texte de l’actualité
Géré par le CMS
Menu navigation
Navigation verticale image vignette, titre, date de la publication. (Horizontal pour la version mobile)
Géré par le CMS, élément répétable.
- 29 -
Wireframe Page « Espace Pro » Desktop
- 30 -
Wireframe page « Espace pro » mobile
Spécifications fonctionnelles :
L’« Espace pro » rassemble les fonctionnalités du site réservé aux professionnels du salon. Ils ont la possibilité de renseigner et modifier les informations concernant leur stand attribué.
Ce compose d’une image fixe et d’un texte à l’intention des professionnels.
Un formulaire de contact est à remplir afin de savoir des informations sur le professionnel.
Spécifications techniques :
Contenu Caractéristiques Commentaires
Image fixe PNG Géré par le CMS
Formulaire de contact
PLUG IN Caldera Form Création d’un space pro Demande de renseignements obligatoire : -Nom, Adresse mail, Mot de passe, spécialité, date de table rondes, pays, exposer ? participer à la table ronde ? Avoir un pass press ?
Géré par le CMS
Gestion des profils
PLUG IN Client Portal https://fr.wordpress.org/plugins/client-portal/ Lorsque l'utilisateur connecté accédera à cette page, il sera redirigé vers sa page privée.
Géré par le CMS
- 31 -
Use case connexion Espace Pro
- 32 -
Wireframe Page « plan du salon » Desktop
- 33 -
Wireframe page « plan du salon et des exposants » mobile
Spécifications fonctionnelles :
Carte interactive du salon qui permet au visiteur de se repérer sur une carte 3D du salon du Chocolat. Les différents stands, les salles des tables rondes et autres lieux importants. Si l’utilisateur clique sur un lieu, un module s’affiche avec les informations correspondant au lieu. Le client a également la possibilité de télécharger le plan en version PDF.
Spécifications techniques :
Contenu Caractéristiques Commentaires
Carte du salon interactif Plug in mapplic
Géré par le CMS
Module informations S’affiche en cliquant sur le stand : -Image de l’exposants -description du stand -Emplacement du stand
Géré par le plugin Mapplic
Bouton télécharger Plug in Fooevents Géré par le CMS
- 34 -
Wireframe page « tables rondes » Desktop
- 35 -
Wireframe page « Tables rondes » mobile
Spécifications fonctionnelles :
Cette page permet aux visiteurs de voir la liste des intervenants en fonction du jour. Un petit calendrier aide les utilisateurs à se situer dans le temps. Une liste défilante des intervenants du salon apparait par ordre Alphabétique en fonction du jour sélectionné. Le bouton « télécharger » permet d’enregistrer la liste des intervenants en PDF.
Un calendrier
Un sous menu Jour 1, Jour 2 et jour 3
Une liste défilante
Bouton « télécharger »
Spécifications techniques :
Contenu Caractéristiques Commentaires
Calendrier Plug in https://www.fooevents.com/fooevents-calendar/ Géré par le CMS
Sous menu Menu : 3 Jours Géré par le CMS
Liste avec descriptif + emplacement Liste sous forme de vignette image 128x128PX Navigation par ordre alphabétique, horizontal. Texte fixe : -Noms intervenants -Lieu
-Thème
Géré par le CMS
- 36 -
Wireframe page « billetterie » desktop
- 37 -
Wireframe page « billetterie » mobile
La version mobile de montrera pas les images. Le Header ne sera également absent pour plus de lisibilité.
Spécifications fonctionnelles : La billetterie permet aux utilisateurs d’acheter en ligne les billets pour le Salon du Chocolat. Le processus d’achat est automatisé et géré par les plugins Woocommerce et Fooevents.
Visualisation des différents types de billets et leurs tarifs.
Catcha pour plus de sécurité Le client reçoit son billet en PDF par le plug in Fooevents à l’adresse Email indiquée dans le formulaire lors du processus d’achat.
Spécifications techniques :
Contenu Caractéristiques Commentaires
Gestion de la billetterie
Plug in Woocommerce : tarifs, images, description de l’article, nombre de billet.
Géré par le CMS configuration catalogue Woocommerce.
Catcha Anti-spam Plug in
- 38 -
Use Case Tunnel de paiement
- 39 -
Wireframe Page « Plus d’infos » Desktop
- 40 -
Wireframe page « Plus d’infos » mobile
Spécifications fonctionnelles :
Cette Page permet aux visiteurs de localiser le salon grâce la carte Google Maps et d’utiliser un itinéraire. L’utilisateur a également la possibilité de contacter l’organisateur par un formulaire de contact simplifié.
Spécifications techniques :
Contenu Caractéristiques Commentaires
Formulaire de contact
Caldera Form Votre nom, Votre adresse mail champs votre message.
Géré par le CMS
Pour venir Plug in Google maps carte à gauche en dessous informations : adresse, email de contact, téléphone, transports les plus proche.
Géré par le CMS
