Conduite de projet (Web)

Conduite de projet (Web)
Sur la base de la méthode « [Re]design de sites Web » de Kelly Goto & Emily Cotler 13 mai 2004 Yannick LEJEUNE

Les différents rôles Chef de projet
Concepteur du modèle informationnel Responsable du contrôle qualité Responsable de l’ergonomie Responsable de la production et du dev Rédacteur responsable des contenus Directeur artistique, concepteur graphique Développeur, ingénieur back-office 13 mai 2004 Yannick LEJEUNE

Le chef de projet Directeur de compte, producteur de site
Organise les opérations, les échanges Définit les besoins Conseille le client Etudie la balance entre la portée, les coûts et les délais Assure la cohésion 13 mai 2004 Yannick LEJEUNE

Le concepteur du modèle informationnel
Traduit les contenus et objectifs en fonctions et visuels Développe le plan du site Structure les modalités de présentation Définit les modalités de navigation, fonctionnalités, interactions utilisateur 13 mai 2004 Yannick LEJEUNE

Le responsable de la production et du développement
Dirige une équipe de développeurs Optimise la codification et les tests Assure le contrôle du respect de la portée et des délais Dans les petits projets, il est en charge de la production Responsable des maquettes, de l’intégration et des créations personnalisées 13 mai 2004 Yannick LEJEUNE

Le rédacteur, responsable des contenus
Rédaction des textes Responsable des contenus, de la collecte des éléments, de leur livraison à l’équipe de production 13 mai 2004 Yannick LEJEUNE

Le responsable du contrôle qualité
L’exterminateur Contrôle <> Flicage Traque les bugs Construit et effectue les plans de tests Vérifie la compatibilité du site Vérifie l’adéquation aux demandes 13 mai 2004 Yannick LEJEUNE

Le responsable de l’ergonomie
Collecte les informations pertinentes sur les comportements Travail avec le concepteur du modèle informationnel pour définir la navigation et les « cheminements » Valide l’ergonomie de la maquette HTML 13 mai 2004 Yannick LEJEUNE

Le directeur artistique, concepteur graphique
Prend en compte le ton du site et les capacités techniques de l’audience cible Connaît les principaux outils de création du marché Expert de la communication Rend homogène la vision des différents créatifs 13 mai 2004 Yannick LEJEUNE

Le développeur, ingénieur back-office
Compétences d’informaticien Connaît les mots barbares : ASP, Javascript, ActionScript, CGI… Agent de liaison entre l’équipe « front-office » et l’équipe système 13 mai 2004 Yannick LEJEUNE

Sommaire Les différents rôles Méthodologie globale
Définition du projet Développement de la structure du site Conception graphique et validation Production et contrôle qualité Lancement et maintenance Présentation de votre projet 13 mai 2004 Yannick LEJEUNE

Le déroulement du projet
1 Définition du projet 2 Développement de la structure du site 3 Conception graphique et validation 4 Production et contrôle qualité 5 Lancement et maintenance 13 mai 2004 Yannick LEJEUNE

1 - Définition du projet DECOUVERTE PLANIFICATION SYNTHESE
Collecte d’information Identification de la cible Identification des développements de back-office nécessaires Analyse sectorielle PLANIFICATION Elaboration du budget Définition des délais Affectation de l’équipe du projet Création d’espaces d’échange Planification des tests d’utilisation Réalisation du cahier des charges SYNTHESE Définition des objectifs généraux Préparation du rapport de conception Démarrage du projet 13 mai 2004 Yannick LEJEUNE

2 – Développement de la structure du site
NIVEAU CONTENU Orientation générale Analyse de l’existant Organisation globale Planning de livraison Plan du site Prise en compte de l’existant Choix des conventions de nommage NIVEAU SITE Gabarit Principes de navigation Définition des noms et des intitulés Définition des tâches types NIVEAU PAGE 13 mai 2004 Yannick LEJEUNE

3 – Conception graphique et validation
CREATION Rappel des objectifs Développement des concepts Présentation du visuel et suggestion Conception de la maquette HTML Tests fonctionnels VALIDATION REMISE Création des modèles graphiques Définition de la charte graphique 13 mai 2004 Yannick LEJEUNE

4 – Production et contrôle qualité
PREPARATION Définition des principes généraux Procédure de suivi de l’avancement Définition de l’arborescence du site Découpage et optimisation Création des pages et des modèles HTML Conception des scripts élémentaires Alimentation des pages Intégration des développements de back-office (si nécessaire) PRODUCTION TESTS Programme de contrôle qualité Tests de contrôle qualité Hiérarchisation et résolution des bugs Validation finale 13 mai 2004 Yannick LEJEUNE

5 – Lancement et maintenance
LIVRAISON Finalisation de la charte de développement Rédaction du dossier de liaison Archivage de la documentation Réunion de bilan Planification de la formation à la maintenance Annonce du lancement Référencement auprès des moteurs de recherche Lancement du site LANCEMENT MAINTENANCE Evaluation des compétences de l’équipe de maintenance Conception du programme de maintenance Suivi des performances Sécurisation du site 13 mai 2004 Yannick LEJEUNE

Art plastique / graphisme Marketing / communication
Les formations Formation Roles Informatique Art plastique / graphisme Marketing / communication Chef de projet x Concepteur du modèle informationnel Responsable du contrôle qualité Responsable de l’ergonomie Responsable de la production et du dev Rédacteur responsable des contenus Directeur artistique, concepteur graphique Développeur, ingénieur back-office 13 mai 2004 Yannick LEJEUNE

10 règles d’or 1 – Réfléchissez avant d’agir
2 – Cernez clairement les enjeux et les objectifs 3 – Evaluez la concurrence 4 – Impliquez les utilisateurs existants 5 – Développez pour les utilisateurs, pas pour les investisseurs 6 – Impliquez très tôt les ingénieurs 7 – Faites confiance aux tests d’ergonomie 8 – Maîtrisez les contenus 9 – Définissez clairement les attentes 10 – Pensez à long terme mais agissez à court terme ! 13 mai 2004 Yannick LEJEUNE

Sommaire Les différents rôles Méthodologie globale
Définition du projet Développement de la structure du site Conception graphique et validation Production et contrôle qualité Lancement et maintenance Présentation de votre projet devant un jury 13 mai 2004 Yannick LEJEUNE

Client idéal Client à risque Est concentré sur les obj. gén.
Répond clairement aux enquêtes. A des spécifications claires Maîtrise les techno Web et le processus de dev. Sait prendre des décisions Est d’accord sur les délais, la nature des prestations et le budget Réagit rapidement Aime travailler en équipe Tient les délais des contenus Est un atout et non un frein S’attend à des délais irréalistes N’est pas précis sur ses idées Exige une maquette de présentation Ne peut prendre aucune décision et ne les fait pas prendre par ses supérieurs N’a jamais le temps A un budget réduit Est indécis et change souvent d’avis Veut prendre en charge des aspects créatifs ou du dev pour économiser de l’argent 13 mai 2004 Yannick LEJEUNE

I - Définition du projet
DECOUVERTE Collecte d’information Identification de la cible Identification des développements de back-office nécessaires Analyse sectorielle PLANIFICATION Elaboration du budget Définition des délais Affectation de l’équipe du projet Création d’espaces d’échange Planification des tests d’utilisation Réalisation du cahier des charges SYNTHESE Définition des objectifs généraux Préparation du rapport de conception Cahier des charges Démarrage du projet Rapport de conception 13 mai 2004 Yannick LEJEUNE

1 - Collecte d’information
L’enquête clients (support papier) Personnalisation de l’enquête clients Analyse de l’enquête clients support pour le rapport de conception L’enquête de maintenance (support papier) 13 mai 2004 Yannick LEJEUNE

2 – Identification de la cible
Synthèse des contraintes techniques Evaluation du niveau d’équipement des utilisateurs Etablissement du profil technique de la cible Détermination des besoins techniques (spécif tech) 13 mai 2004 Yannick LEJEUNE

Rapport de conception Synthèse Public Perception, style, principes
Stratégie de communication Positionnement concurrentiel Mot d’ordre 13 mai 2004 Yannick LEJEUNE

Synthèse de l’étape découverte
Société, client Contexte Stratégie, marketing, marque Site actuel Concurrence Public potentiel Produits, services Autres 13 mai 2004 Yannick LEJEUNE

Synthèse Grandes lignes du projet et de son contexte.
Objectif principal du site rénové. Objectifs secondaires. Objectifs à long terme. 13 mai 2004 Yannick LEJEUNE

Public visé Quelle est l’audience cible ?
classe d’âge, son sexe, sa fréquence de connexion, ses habitudes d’utilisation, etc. Quelle opération type les utilisateurs effectueront-ils sur le futur site s’inscrire, s’identifier, rechercher des informations, acheter un produit, communiquer son adresse électronique, solliciter des informations complémentaires, etc. 13 mai 2004 Yannick LEJEUNE

Perception, style, principes
Perception du site actuel par le public potentiel et impressions ressenties. Objectif de perception et de satisfaction du site réaménagé. En quoi le nouveau site permettra-t-il d’atteindre cet objectif ? Quels adjectifs décrivent le mieux la façon dont le site et l’entreprise doivent être perçus par le public ? Objectifs visuels spécifiques 13 mai 2004 Yannick LEJEUNE

Stratégie de communication
Quel est le premier message adressé aux utilisateurs Économie, Sécurité, efficacité, fiabilité, etc. Comment transmettrez-vous ce message générique messagerie, cheminement dirigé, offre spéciale en page d’accueil, Indiquez, si nécessaire, les phases de développement requises par ces objectifs. Quels vont être les critères de mesure du succès du site rénové ? 13 mai 2004 Yannick LEJEUNE

Positionnement concurrentiel
Particularités du positionnement Web de la société par rapport à ses concurrents. Facteurs de différenciation entre la société et ses concurrents. Parties du site actuel ayant le plus grand succès. Raisons. 13 mai 2004 Yannick LEJEUNE

1 – Elaboration du budget
Introduction Glissements et dérapage Estimation et valorisation Comptabilisation des heures 13 mai 2004 Yannick LEJEUNE

6 – Réalisation du cahier des charges
Présentation générale du projet Planning (livraisons et méthodologie) Répartition du budget Rapport de conception Public cible Profils des utilisateurs Niveau d’équipement technique Plan des tests d’utilisation Caractéristiques et hypothèses Signature (indispensable) 13 mai 2004 Yannick LEJEUNE

Responsable du contrôle qualité
Fonction Taux horaire Heures Jours Sous-total Chef de projet 50 € 200 25 10 000€ Directeur artistique 20 2,5 1 000 € Concepteur 40 € 40 5 1 600 € Ergonome 30 1 500 € Développeur Programmeur 60 € 10 1,25 600 € Rédacteur 35 € 1 400 € Responsable du contrôle qualité 25 € 12 1,5 300 € X % frais généraux TOTAL 18 000 € 50 % 27 000,00 € 13 mai 2004 Yannick LEJEUNE

Tâche Taux horaire Heures Jours Sous-total Définition du projet 50 € 40 5 2 000 € Conception du modèle informationnel Conception visuelle 60 7,5 3 000 € Animations Flash 20 2,5 1 000 € Programmation 40 € 80 10 3 200 € Production 60 € 1,25 600 € Tests d’ergonomie 30 1 500 € Analyse concurrentielle Rédaction Contrôle qualité/tests 15 1,5 X % frais généraux TOTAL 17 900 € 50 % 26 850,00 € 13 mai 2004 Yannick LEJEUNE

(Modifications et ajouts)
Avenant (Modifications et ajouts) Nom du projet : Identifiant du projet : Date : Nom du client : : Téléphone : [Société] Interlocuteur : Type d’avenant : 1. Changement à l’instigation du client 2. Demande d’élément supplémentaire 3. Élément extérieur au périmètre ou au budget initial 4. Autre____________________________________ Détails des modifications ou ajouts : Description Nombre d’heures estimé Coût € Total Pour matérialiser votre accord sur la description, les délais de réalisation et le budget des ajouts ou modifications, veuillez nous retourner ce document signé par télécopie au [xx-xx-xx-xx-xx]. ______________________________________________________ ________________ Signature Date ______________________________________________________ Nom 13 mai 2004 Yannick LEJEUNE

Caractéristiques et hypothèses
Le présent projet concerne le développement, la conception graphique, la production et le développement du site Web de <client, projet>. En phase de création de l’architecture, les informations sur l’organisation et la hiérarchisation du site seront fournies par le client et complétées par les avis ou instructions de <société de développement Web>. 13 mai 2004 Yannick LEJEUNE

Le client fournira tous les contenus texte sous forme de copies validées (sur disquette et papier). Les supports audio et vidéo seront fournis sous un format numérique directement exploitable en ligne. Les calendriers de production s’appuient sur la réception, à des dates indiquées par ailleurs dans ce document, desdits supports. Tout retard de livraison est susceptible d’avoir un impact sur le budget et la durée globale du projet. La production du site recouvre la création et l’optimisation du code HTML et de tous les fichiers et images pour un maximum de <n> pages. Le site propose des scripts élémentaires limités à des rollovers en JavaScript. Le site développé fonctionnera sur des serveurs Unix ou Windows NT et sera compatible avec Netscape 3.0+ et IE 3.0+ en environnements Mac/OS et Windows. 13 mai 2004 Yannick LEJEUNE

La durée du projet est estimée à 10 semaines à compter du <date>. Compte tenu de la disponibilité des équipes de développement, le projet ne saurait se prolonger au-delà du <date>. Tout élément entraînant une augmentation ou une réduction des délais de production (livraison tardive des contenus, ajout de fonctionnalités, etc.) est susceptible de créer des charges facturables additionnelles. Le budget estimé repose sur les informations connues à ce jour. Après évaluation et finalisation des objectifs du site, des charges additionnelles seront éventuellement applicables en fonction des besoins spécifiques de programmation et de développement. 13 mai 2004 Yannick LEJEUNE

Sommaire Méthodologie globale Définition du projet
Développement de la structure du site Conception graphique et validation Production et contrôle qualité Lancement et maintenance Présentation de votre projet devant un jury 13 mai 2004 Yannick LEJEUNE

Web : un vecteur d’information
Les visites peuvent être : Un survol rapide Un parcours complet Une recherche spécifique Les objectifs sont la construction De systèmes de navigation De présentation graphique D’organisation des pages et des intitulés Pour Savoir où on est Savoir où on va Avoir envie de revenir Cohérents et efficaces 13 mai 2004 Yannick LEJEUNE

Segmentation de l’approche
Le site n’existe que par ses contenus Pour les présenter : La structure du site La structure de la page 13 mai 2004 Yannick LEJEUNE

Construire une maison = Construire un site Web
Le contexte grande, à la campagne, plein pied … = plaquette, catalogue… Les besoins manger, dormir, se laver, se divertir … communiquer sur l’entreprise, les produits, les services… Le contenu table, lit, douche, télé… texte, image, vidéos, sons… Les pièces salle à manger, chambre, SDB, salon… L’entreprise, les produits, les services … La navigation Couloir = Menu ; Portes = Liens 13 mai 2004 Yannick LEJEUNE

II – Développement de la structure du site

Introduction Contenu = substance Pas de contenu = pas de site
Pas de structure = contenus inexploitables 13 mai 2004 Yannick LEJEUNE

Orientation générale des contenus
Filtrage des contenus (plaquette, site Web, démo, business plan …) Élimination de contenu non pertinents sur Internet Tri des supports Les sujets Niveau de détail Hiérarchisation du plus général au plus spécifique Rester simple 13 mai 2004 Yannick LEJEUNE

Analyse de l’existant Audit du contenu à ce stade sinon jamais
Choix de quels contenus font le « déménagement » Stimulant et décourageant à la fois (nouvelle maison) C’est le rôle du client, le prestataire ne doit que le conseiller 13 mai 2004 Yannick LEJEUNE

Importance stratégique de l’analyse
Contenus = cœur du besoin de refonte Minimiser les infos secondaires Mettre en valeur les msg essentiels Promouvoir l’image de marque 1ère idée de l’organisation du site Regrouper, classer, trier les pages Début de la conception du modèle informationnel Organisation des modalités de livraison Récupération des contenus à utiliser tels quels 13 mai 2004 Yannick LEJEUNE

Organisation globale Contenus pas finalisés mais organisés
Division du site en unités logiques Définition de l’organigramme Amélioration de l’organigramme Prévision de l’évolutivité (ajouts, compléments …) 13 mai 2004 Yannick LEJEUNE

Loi Informatique et libertés
Traitement automatisé d’informations nominatives (TAIN) Déclaration de la structure et du but à la CNIL Droit d’accès et de modifications Les logos, noms, marques et éléments relatifs à des sociétés sont la propriété de leur propriétaire légal. Vous disposez d'un droit d'accès, de modification, de rectification et de suppression des données qui vous concernent. (art. 34 de la loi "Informatique et Libertés"). Pour l'exercer, adressez vous à [adresse postale] ou par mail : [mail] 13 mai 2004 Yannick LEJEUNE

Planning de livraison Retard contenus = 1ère cause retard projet (99 % des cas) Sachez le soyez prêt à le facturer … Mesures à prendre : Responsable des contenus Planning de livraison (Exhaustif, Précis, Réaliste, Validé par le client) Document fourni par le client Textes + images Mise en forme Liens Version définitive RTF, HTML … 13 mai 2004 Yannick LEJEUNE

Planning détaillé de livraison des contenus
Ref Titre du lien Titre de la page Nom HTML Contenu Resp date Accueil site Web de 3IE index.htm Existant 30/01/04 1 Découvrez 3IE Présentation de 3IE presentation_3ie.htm A faire Yannick 1.1 L'équipe L"équipe de 3IE equipe_3ie.htm 1.2 Financer votre projet financement_projet.htm Benoit 1.3 3IE dans le monde Présentce internationale presence_international_3ie.htm A revoir 1.4 Revue de presse revue_presse.htm Emilie 1.5 Contactez nous Contact 3IE contacts_3ie.htm 2 Nos Services services_3ie.htm 2.1 R&D entreprise Recherche et développement à 3IE recherche_developpement.htm A reprendre 2.2 Consulting et développement Consulting et dev informatique 3IE consulting_developpement.htm 2.3 Veille stratégique veille_stategique.htm 2.4 Formations Formation informatique 3IE formations.htm 3 Nos Références Nos références references_clients_3ie.htm 3.1 ® Tous nos projets projet + [nom] + [desc] projets_3ie.htm 4 Actualités des NTIC actualite_ntic.htm 4.1 Fil d'info News [date] privacy_3ie.htm 4.2 Newsletter Newsletter [num] [date] valeurs_ntic.htm 5 Technologies Nouvelles Technologies nouvelles_technologies.htm 30/01/04 30/01/04 13 mai 2004 Yannick LEJEUNE

Plan du site Vision globale des contenus et des flux
Répertorie toutes les pages HTML De haut en bas ou de gauche à droite Signature du client Modifications => avenant Disponible pour toute l’équipe 13 mai 2004 Yannick LEJEUNE

Plan du site 13 mai 2004 Yannick LEJEUNE

Plan du site : pages avec Back Office
13 mai 2004 Yannick LEJEUNE

Conventions de nommage
Référence terminologique homogène Utilise à toute l’équipe durant tout le projet Simplicité Important pour le référencement .htm ou .html Anglais ou français Séparation : majuscule, « _ », « - » Pluriel ou singulier Majuscule ou minuscule Mots complet ou abréviations 13 mai 2004 Yannick LEJEUNE

Architecture des dossiers
1 par rubrique 1 pour les images Commence pas majuscule Fichiers Français Mots complets Minuscule Séparation par des « _ » .htm www_unat Images Membres UnatIDF Vacances membres_unat_alphabetique.htm membres_unat_activite.htm statuts_membres_unat.htm Unat IDF role_unat.htm partenaires_unat.htm actions_unat.htm professionnels_unat.htm actualite_unat.htm Formule hebergement.htm village_vacances.htm visites_franciliennes.htm centres_vacances.htm courts_sejours.htm classe_decouverte.htm seminaires.htm … voyages.htm Choix public.htm destination.htm formule.htm contact.htm index.htm 13 mai 2004 Yannick LEJEUNE

Gabarit Images, figure, illustrations Contenu
En-tête ou navigation générale Fonctionnalités Liens principaux Liens secondaires Médias Taille des la fenêtre cible En-tête et pied de page 13 mai 2004 Yannick LEJEUNE

GABARIT 13 mai 2004 Yannick LEJEUNE

Principes de navigation
4 modèles Dirigé (choix initial à l’entrée du site) Linéaire (cheminement prédéfini dans les pages secondaires) Par recherche (contenu éditorial ou moteur de recherche) Par onglets (classique, avec sous menu) Emploi simultané des modèles 13 mai 2004 Yannick LEJEUNE

Définition des tâches types
Concerne les séquences de pages Identification Recherche Commande Prototype papier interactif Définition des cheminements types Utilité : Conception de pages oubliées Test de la pertinence et de la fluidité des enchainements 13 mai 2004 Yannick LEJEUNE

Maquette papier Avis des utilisateurs Souple Économique
Rajout de petits oublis Tout au long du projet Outils de prototypage papier : 13 mai 2004 Yannick LEJEUNE

Sommaire Téléchargements Résumé Plus d’info L’acheter 13 mai 2004
Yannick LEJEUNE

Sommaire 1/2 Préface Principes de conception
L’art de la page d’accueil Sommaire Téléchargements Résumé Plus d’info L’acheter Sommaire 1/2 Préface Principes de conception Présentation de l’objectif du site Présentation d’informations sur l’entreprise Rédaction du contenu Illustration du contenu du site par des exemples Archivage et accès au contenu archivé Liens Navigation Recherche Outils et raccourcis aux fonctions Images et animations Conception graphique Éléments d’interface utilisateur Barre de titre URL Événementiel et communiqués de presse Fenêtres popup et pages intermédiaires Publicité Messages de bienvenue Communication des problèmes techniques et gestion des crises Crédits Rechargement et actualisation de la page Personnalisation Collecte des données clients Communautés Date et heure Cours de la Bourse et affichage des nombres 13 mai 2004 Yannick LEJEUNE

Téléchargements Extrait du chapitre Principes de conception
L’art de la page d’accueil Sommaire Téléchargements Résumé Plus d’info L’acheter Téléchargements Extrait du chapitre Principes de conception (fichier pdf - 278 Ko) Analyse du site amazon.com (fichier pdf - 445 Ko) Analyse du site gateway.com (fichier pdf - 293 Ko) Table des matières et index des sites (fichier pdf - 97 Ko) 13 mai 2004 Yannick LEJEUNE

Sommaire 2/2 Les pages d’accueil en chiffres
L’art de la page d’accueil Sommaire Téléchargements Résumé Plus d’info L’acheter Sommaire 2/2 Les pages d’accueil en chiffres Temps de téléchargement Paramètres élémentaires de mise en page Largeur de la page Présentation en 100 % (liquid) ou en largeur fixe (frozen) Longueur de la page Cadres (frames) Principaux éléments de la page Logo Moteur de recherche Navigation Navigation de bas de page Plan du site Pages d’accueil générales (routing pages) Écrans fugitifs (splash pages) Rubriques et fonctions courantes Identification (sign in) Informations sur l’entreprise (About Us) Contacts Confidentialité Offres d’emploi Aide Illustrations et Multimédia Images Texte de remplacement d’image (texte ALT) Musique Animation Publicité Typographie Couleurs du texte et de l’arrière-plan Mise en forme des liens Nos recommandations 13 mai 2004 Yannick LEJEUNE

L’art de la page d’accueil
Sommaire Téléchargements Résumé Plus d’info L’acheter Résumé 10 secondes, c’est le temps dont vous disposez pour convaincre vos visiteurs de rester sur votre site Web. Votre page d’accueil est-elle à la hauteur ? La page d’accueil de votre site Web est l’image que votre entreprise donne au monde. L’enjeu est de taille : pour de nombreux clients potentiels, la consultation du site Web d’une entreprise fait partie des démarches préalables à tout contact commercial. Votre site réussirait-il le test ? L’ergonomie des pages d’accueil en 113 points Rôle de la page d ’accueil, contenu, navigation, images, animations : rien n’est laissé au hasard dans ces 113 points qui permettent de différencier une page d’accueil ergonomique d’un point d’entrée sur le Web mal pensé et mal conçu. 50 sites Web passés au crible D ’Amazon à Yahoo!, 50 sites – et non des moindres – sont passés au crible dans la seconde partie de l’ouvrage, résolument visuelle, qui met en lumière les erreurs à ne pas commettre et les exemples à suivre. 13 mai 2004 Yannick LEJEUNE

Rôle de la page d’accueil
Couverture de magazine Image de l’entreprise Œuvre d’art Hotesse d’accueil Table des matières La Une d’un journal Une brochure 13 mai 2004 Yannick LEJEUNE

Présentation de l’objectif du site
Nom et logo en gros et bien en vue Signature : activité de l’entreprise Eléments qui démarquent des concurrents Point d’orientation Page d’accueil officielle Page d’accueil ≠ autres pages Affichez le nom et le logo de l’entreprise en gros et bien en vue. Ajoutez la signature (tag line) qui résume explicitement l’activité du site ou de l’entreprise. Mettez en relief les éléments qui valorisent votre site aux yeux des utilisateurs et ce qui le démarquent de ses concurrents. Mettez en valeur les fonctions principales pour que la page d’accueil joue pleinement son rôle de point d’orientation. Désignez clairement une des pages du site comme page d’accueil officielle. Sur le site principal de votre entreprise, réservez l’expression « site web » à la présence globale de votre société sur le web. Différenciez bien la page d’accueil des autres pages du site. 13 mai 2004 Yannick LEJEUNE

Présentation d’informations sur l’entreprise
Zone distincte : description, investisseurs, attachés de presse, offres d’emploi 1 page pour une vue d’ensemble de l’entreprise Espace presse Point de contact avec l’entreprise ≠ une entité autonome Contacter-nous : toutes les coordonnées de l’entreprise. Vos impressions : précisez l’objectif Pas d’informations internes à l’entreprise Clause de confidentialité. Regroupez les renseignements sur l’entreprise (description, investisseurs, attachés de presse, offres d’emploi) dans une zone distincte. Créez un lien vers une rubrique présentant une vue d’ensemble de l’entreprise, des produits aux équipes, par exemple. Si vous souhaitez donner accès aux communiqués de presse consacrés à votre entreprise, incluez un lien Espace presse sur votre page d’accueil. Donnez une image unifiée de l’entreprise à vos clients en présentant le site Web comme un des points de contact possibles avec l’entreprise et non comme une entité autonome et distincte. Incluez sur la page d’accueil un lien Contacter-nous qui pointe sur une page contenant toutes les coordonnées de l’entreprise. Si vous recueillez les impressions des visiteurs (rubrique Vos impressions), précisez l’objectif du lien concerné et indiquez s’il est traité par le service clients ou par le webmaster. Sur le site Web destiné au public, n’incluez pas d’informations internes à l’entreprise (et qui devraient figurer sur intranet). Si votre site contient des informations sur les clients, ajoutez sur la page d’accueil un lien Clause de confidentialité. Si besoin est, explicitez la nature des revenus du site. 13 mai 2004 Yannick LEJEUNE

Rédaction du contenu Vocabulaire centré sur le client
Evitez les redondances. Bannir les termes trop subtils et le jargon commercial Veillez à la cohérence de la casse (majuscules et minuscules). Pas de nom aux zones dont le contenu est explicite. Pas de listes à puces contenant un seul élément. Espaces insécables dans les termes ou expression qui doivent rester groupés. Impératif pour les action (inscivez vous …) Développement de la 1ère occurrence de chaque abréviation Evitez les points d’exclamation. N’abusez pas des majuscules. N’utilisez pas les espaces et la ponctuation pour faire ressortir des mots Privilégiez un vocabulaire centré sur le client ; choisissez des noms de sections et de catégories en fonction de leur signification pour le client, non pour votre société. Evitez les redondances. Bannissez les termes trop subtils et le jargon commercial, susceptibles de nuire à la compréhension de votre message. Veillez à la cohérence de la casse (majuscules et minuscules). N’attribuez pas de nom aux zones dont le contenu est suffisamment explicite. Evitez les catégories et les listes à puces contenant un seul élément. Utilisez des espaces insécables dans les termes ou expression qui doivent rester groupés. Décrivez les cations à accomplir avec précision ; employez si possible l’impératif. Développez la première occurrence de chaque abréviation et de chaque sigle. Evitez les points d’exclamation. N’abusez pas des majuscules. N’utilisez pas les espaces et la ponctuation pour faire ressortir des mots ou des expressions. 13 mai 2004 Yannick LEJEUNE

Illustration du contenu du site par des ex
Illustrez le contenu du site par des exemples Lien menant directement à la page traitant de cet exemple Placez un lien vers la catégorie à côté de l’exemple. Liens menant aux informations détaillées ≠ ceux pointant vers des catégories. Archivage et accès au contenu archivé Illustrez le contenu du site par des exemples ; ne vous contentez pas de le décrire. Pour chaque exemple, proposez un lien menant directement à la page traitant de cet exemple, plutôt qu’à une page de catégories qui cite cet exemple parmi d’autres. Placez un lien vers la catégorie à côté de l’exemple. Distinguez les liens menant aux informations détaillées de ceux pointant vers des catégories. Facilitez l’accès à tous les éléments qui ont récemment figuré sur la page d’accueil : établissez-en une liste et stockez-les dans des archives permanentes. Accès aux éléments ayant récemment figuré sur la page d’accueil 13 mai 2004 Yannick LEJEUNE

Liens Rapidement identifiables. Pas de « Cliquez ici ».
Pas de « Autre… » Différence : liens visités, liens non visités. Ne signalez pas les liens au moyen du terme Liens : Liens explicite vers PDF, vidéo, mail Différenciez les liens et rendez les rapidement identifiables. N’utilisez pas d’instructions génériques telles que Cliquez ici comme intitulés de liens. Ne terminez pas une liste de liens par un lien générique du type Autre… Attribuez une couleur différente aux liens visités et aux liens non visités. Ne signalez pas les liens au moyen du terme Liens : utilisez plutôt le soulignement et la couleur bleue. Si vous créez un lien qui ne mène pas à une autre page Web mais à un fichier PDF, ou bien qui lance un lecteur audio ou vidéo, qui envoie un message électronique ou qui exécute une autre application, attribuez-lui un nom suffisamment explicite. 13 mai 2004 Yannick LEJEUNE

Navigation Point stratégique
Regrouper les contrôles de navigation similaires. Liens de même type dans une zone de navigation unique. Pas de lien actif pointant sur soi-même. Choix pertinent des intitulés Lien vers le panier sur la page d’accueil Icônes de navigation (nouveautés, soldes, vidéos, etc.). Installez la zone de navigation principale en un point stratégique, de préférence juste à côté du contenu principal de la page. Regroupez les contrôles de navigation similaires. Regroupez tous les liens de même type dans une zone de navigation unique. Supprimez de la page d’accueil tout lien actif pointant sur elle-même. N’attribuez pas d’intitulés de votre invention aux catégories de navigation. L’internaute doit pouvoir différencier ces catégories instantanément ; or, il n’y a parviendra pas s’il ne comprend pas votre terminologie. Si votre site propose une fonction de panier, insérez sur la page d’accueil un lien vers cette fonction. Utilisez des icônes de navigation seulement si elles permettent à l’utilisateur d’identifier instantanément un type d’éléments (nouveautés, soldes, vidéos, etc.). 13 mai 2004 Yannick LEJEUNE

Recherche Zone de saisie Pas un lien vers une page de recherche.
La taille : 25 caractères min Pas de titre mais bouton Recherche Recherche simplifiée, lien vers recherche avancée Recherche sur l’ensemble du site Pas de recherche sur l’ensemble du Web. Proposez sur la page d’accueil une zone de saisie des critères de recherche au lieu d’un lien vers une page de recherche. La taille de la zone de saisie doit être suffisante pour permettre au visiteur de visualiser et d’éditer des requêtes standards. N’attribuez pas de titre à la zone de recherche ; placez plutôt un bouton Recherche à droite de la zone de saisie. Sur la page d’accueil, contentez vous de proposer une recherche simplifiée et un lien vers une fonction de recherche avancée et/ou une rubrique d’aide (sauf si la recherche avancée est la seule possible sur votre site). Par défaut, une recherche effectuée à partir de la page d’accueil doit porter sur l’ensemble du site. Ne proposez pas de fonction de recherche s’étendant à l’ensemble du Web. 13 mai 2004 Yannick LEJEUNE

Outils et raccourcis aux fonctions
Accès direct aux fonctions principales Pas d’outils sans rapport avec votre société Pas de choix de la page de démarrage ou l’ajout du site aux favoris. Donnez aux utilisateurs un accès direct aux fonctions principales sur la page d’accueil. Ne créez pas d’outils n’ayant aucun rapport avec les fonctions que l’utilisateur vient chercher sur votre site. Ne fournissez pas d’outils qui se contentent de dupliquer des fonctionnalités disponibles dans les navigateurs, comme le choix de la page de démarrage par défaut ou l’ajout du site aux favoris. 13 mai 2004 Yannick LEJEUNE

Conception graphique Surabondance d’effets graphiques sur le texte => oublie du sens Contraste marqué entre le texte et l’arrière plan. Pas de défilement horizontal avec une résolution d’écran Les principaux composants visibles d’emblée. Utilisez intelligemment les logos. Utilisez avec subtilité les différentes polices de caractères et autres enrichissements typographiques (taille, couleur, etc.) ; une surabondance d’effets graphiques sur le texte risque de reléguer le sens au second plan. Rendez le texte aussi lisible que possible au moyen d’un contraste marqué entre la couleur du texte et celle de l’arrière plan. Evitez le défilement horizontal avec une résolution d’écran 800 x 600 (actuellement la plus courante). A une résolution d’écran de 800 x 600, les principaux composants de la page doivent être visibles d’emblée. Préférez une conception en 100% (liquid) à une conception en largeur fixe (frozen) ; la page d’accueil s’ajustera automatiquement en largeur en fonction de la résolution d’écran. Utilisez intelligemment les logos. 13 mai 2004 Yannick LEJEUNE

Images et animations Pour mettre en valeur le contenu, pas pour décorer la page Légende si pas explicites Evitez les éléments graphiques en filigrane Pas d’animations permanentes logo, titre, signature : pas d’animations Passer l’intro Servez vous des images pour mettre en valeur le contenu réel, pas seulement pour décorer la page. Ajoutez une légende aux images et aux photos si le contexte ne les rend pas suffisamment explicites. Ajustez au mieux les photos et les dessins à la taille d’affichage. Evitez les éléments graphiques en filigrane (image en arrière-plan et texte au premier plan). N’utilisez pas d’animations dans le seul but d’attirer l’attention sur un élément de la page d’accueil. Les animations conviennent mal aux pages d’accueil parce qu’elles détournent l’utilisateur du contenu véritable. Ne proposez jamais sous forme d’animation les éléments essentiels de la page (logo, titre, signature, etc.). Donnez aux utilisateurs la possibilité de sauter l’introduction animée de votre site ; laissez leur le choix. 13 mai 2004 Yannick LEJEUNE

Barre de titre Commencez par le nom de l’entreprise
Pas de nom de domaine si ≠ nom entreprise Pas de « Page d’accueil » Bref descriptif du site 7 – 8 mots : 65 caractères 13 mai 2004 Yannick LEJEUNE

URL http://www.entreprise.com
Site associé à un pays => suffixe du pays Variantes du nom de domaine différentes graphies possibles, abréviations fautes d’orthographe courantes. Adresse officielle. Les pages d’accueil de sites Web commerciaux doivent posséder une URL du type (ou un suffixe de pays ou de type d’activité). Si l’identité du site Web est étroitement associée à un pays, utilisez le suffixe de ce pays. Référencez aussi les noms de domaine dans leurs principales variantes afin de couvrir les différentes graphies possibles, les abréviations et les fautes d’orthographe courantes. Si votre nom de domaine possède plusieurs orthographes, faites de l’une des variantes le nom officiel et redirigez les internautes qui utilisent d’autres graphies vers l’adresse officielle. 13 mai 2004 Yannick LEJEUNE

Fenêtres popup et pages intermédiaires
URL => vraie page d’accueil Pas de popups Pas de choix de langue en 1ère page : langue prédominante 13 mai 2004 Yannick LEJEUNE

Publicité Publicité pour les entreprises Zone des bannières
pourtour de la page petites et discrètes Zone des bannières Avertissement aux internautes pour pas confondre avec le contenu Placez la publicité pour les entreprises tierces sur le pourtour de la page. Rendez les publicités pour les entreprises tierces aussi petites et discrètes que possible par rapport au contenu de la page d’accueil. Si vous placez la publicité ailleurs que dans la zone des bannières (c’est-à-dire en haut de l’écran), indiquez clairement qu’il s’agit de publicité afin que les visiteurs ne les assimilent pas au contenu du site. Evitez d’appliquer au contenu du site les conventions de présentation propres à la publicité. 13 mai 2004 Yannick LEJEUNE

Communication des pb techniques
Messages de bienvenue Intégrer le message d’accueil à la signature Communication des pb techniques signaler clairement les problèmes techniques sur la page d’accueil. plan d’action pour gestion du contenu en cas de crise. Crédits Pas de citation de moteur de recherche concepteur du site navigateur préféré technologies sur lesquelles s’appuie le site Discrétion des récompenses obtenues par le site Web Messages de bienvenue Evitez les messages d’accueil au premier degré. Essayez d’intégrer le message d’accueil à la signature. Communication des problèmes techniques et gestion des crises Si le site Web est totalement ou partiellement hors service, signalez-le clairement sur la page d’accueil. Mettez au point un plan d’action destiné à gérer au mieux le contenu du site en cas de crise. Crédits Ne perdez pas d’espace d’écran à citer le moteur de recherche, le concepteur du site, votre navigateur préféré ou encore les technologies sur lesquelles s’appuie le site. Faites preuve de discernement lorsque vous citez les récompenses obtenues par votre site Web. Rechargement et actualisation de la page Ne recourez pas à l’actualisation automatique de la page d’accueil pour transmettre par push des mises à jour de contenu. Lors des actualisations, ne mettez à jour que le contenu qui a effectivement changé. 13 mai 2004 Yannick LEJEUNE

Collecte des données clients
Personnalisation Pas une version générique du contenu personnalisé Pas de modification de l’interface utilisateur (les couleurs, …) Liens vers page d’enregistrement + avantages Newsletter Contenu Fréquence Collecte des données clients 13 mai 2004 Yannick LEJEUNE

Date et heure Actualité récente, discussions en direct, cours de la Bourse, etc. Date et l’heure de la dernière mise à jour Pas la date et l’heure courante. Fuseau horaire. Utilisez des abréviations standards : p.m. Les mois en lettre et pas de chiffres. 13 mai 2004 Yannick LEJEUNE

Cours de la Bourse et affichage des nombres
Cotation + pourcentage de variation Développer les sigles et les abréviations Séparez les groupes de trois chiffres par un séparateur 13 mai 2004 Yannick LEJEUNE

III – Conception graphique et validation
INITIALISATION DE LA CREATION Rappel des objectifs Développement des concepts Présentation du visuel et suggestion Conception de la maquette HTML Tests fonctionnels VALIDATION DU DESIGN REMISE Création des modèles graphiques Définition de la charte graphique Charte graphique 13 mai 2004 Yannick LEJEUNE

2 - Développement des concepts
Orienté vers l’utilisateur Couleurs Animations (Flash et version HTML) Résolutions d’écrans 13 mai 2004 Yannick LEJEUNE

Palette de couleurs 13 mai 2004 Yannick LEJEUNE

3 – Présentation du visuel et suggestions
L’enjeu L’approche La prévalidation ton et style = dossier de création fonctionnalités accessibles au public cible validation de la faisabilité par l’équipe de dev couleurs adaptées au web attention a la taille des polices en HTML portabilité (Mac et PC, différents navigateurs) résolutions d’écrans 13 mai 2004 Yannick LEJEUNE

Visuel à présenter au client

1 – Validation des flux et des fonctionnalités
Maquette HTML L’importance de réaliser une maquette Tests fonctionnels Cadres complexes Rollovers en DHTML ou JavaScript Fenêtres contextuelles (taille en emplacement personnalisés) Feuilles de styles (différents selon les navigateurs) Menus déroulants Panier Les scripts 13 mai 2004 Yannick LEJEUNE

2 – Définition de la charte graphique
Spécifications Dimensions de la page En-tête Couleurs Texte HTML Traitement graphique Type Traitement des images Embellissements 13 mai 2004 Yannick LEJEUNE

4 – Production et contrôle qualité
PREPARATION Définition des principes généraux Procédure de suivi de l’avancement Définition de l’arborescence du site Découpage et optimisation Création des pages et des modèles HTML Conception des scripts élémentaires Alimentation des pages Intégration des développements de back-office (si nécessaire) PRODUCTION TESTS Programme de contrôle qualité Tests de contrôle qualité Hiérarchisation et résolution des bugs Validation finale 13 mai 2004 Yannick LEJEUNE

Développement de la structure du site Conception graphique et validation Production et contrôle qualité Lancement et maintenance Présentation de votre projet 13 mai 2004 Yannick LEJEUNE

5 – Lancement et maintenance
LIVRAISON Finalisation de la charte de développement Rédaction du dossier de liaison Archivage de la documentation Réunion de bilan Planification de la formation à la maintenance Annonce du lancement Référencement auprès des moteurs de recherche Lancement du site LANCEMENT MAINTENANCE Evaluation des compétences de l’équipe de maintenance Conception du programme de maintenance Suivi des performances Sécurisation du site 13 mai 2004 Yannick LEJEUNE

Conduite de projet (Web)

Présentations similaires

Présentation au sujet: "Conduite de projet (Web)"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back

Entrer

S'autoriser via un réseau social:

Conduite de projet (Web)

Présentations similaires

Présentation au sujet: "Conduite de projet (Web)"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back