1 Atelier projet Web. 2 Objectifs de latelier Compétences pilotage d'un projet Web Etude des besoins Stratégie des contenus et des services Navigation.

Présentation au sujet: "1 Atelier projet Web. 2 Objectifs de latelier Compétences pilotage d'un projet Web Etude des besoins Stratégie des contenus et des services Navigation."— Transcription de la présentation:

1 1 Atelier projet Web

2 2 Objectifs de latelier Compétences pilotage d'un projet Web Etude des besoins Stratégie des contenus et des services Navigation et ergonomie Planification et budget Pilotage des métiers

3 3 Le chef de projet Le chef de projet en entreprise: - Il intervient en amont du projet dans la phase de création, sur la faisabilité du projet, les aspects stratégiques, éditoriaux, financiers et juridique. - Il coordonne la réalisation du projet et en assure ensuite lanimation. - Il ne dispose pas de connaissances techniques approfondies mais doit suivre « létat de lart » en matière de technologies web. Qualités nécessaires: sens de l'organisation, rigueur, méthode, management, goût du contact et réactivité.

4 4 Letimotivs du chef de projet Respect de lobjectif qualité Respect de lobjectif temps Respect de lobjectif argent Communication Vision utilisateur Bon sens Fiabilité Clarté Exhaustivité

5 5 Musts dun site Web Vocation Liberté Facilité Rapidité Espace Ciblage Harmonisation Actualisation Compatibilité Esthétique

6 6 Un site, pour quoi faire ?

7 7 vendre promouvoir l'image servir une communauté (échanges) diffuser des connaissances (médias et encyclopédies) partager des connaissances recruter (salariés ou prospects) augmenter la mobilité assurer le SAV réduire les coûts internes gérer ou anticiper une crise Un site peut servir à :

8 8 Un site didentité ? 70% image de marque, 15% offre, 15% ergonomie Un site de e-commerce ? 60% produits, 30% ergonomie, 10% image Un site communautaire ? 70% services, 20% ergonomie, 10% image X personnalités de site, x démarches

9 9 Processus changement Ce à quoi on veut arriver Situation actuelle Changement s nécessaires

10 10 Graphisme Besoins Cahier de conception Objectifs Publics Analyse technique Services Contenus Scénarios Développements Gabarits Intégration Mise en production Planification Mesure résultats Benchmark

11 11 Contenu du cahier des charges Ce quon voudrait et à quelles conditions Objet du cahier Présentation générale de la problématique Enoncé du besoin Environnement Fonctions de service principales et complémentaires Contraintes Critères dappréciation Cadre de réponse Budget escompté ? Planning escompté ?

12 12 Contenu du cahier de conception Ce que le client veut et comment on va le faire Descriptif et objectifs du projet Contexte Publics cibles et besoins Expression fonctionnelle des besoins Structure du site Structure des pages Ressources matérielles Ressources humaines Budget Planning

13 13 Organisation des contenus Plan du site Services Consultations types Rôles Navigation Zoning des pages essentielles Définition des noms et intitulés Contenus Ce dont informaticiens et graphistes ont besoin de notre part…

14 14 Qui sont les utilisateurs ? De quoi ont-ils besoin ? Quelle expérience doivent-ils connaître ? En quelle durée ? A quel prix ? Avec quelles priorités ? Etude des besoins

15 15 Se mettre dans la peau de lutilisateur » Jai besoin de… Je cherche la réponse à… Chez « qui » suis-je ? (arrivée Google) Où suis-je dans le site ? Je peux faire quoi ? Ce lien…, ça fait quoi ? Je peux aller où ? Comment retourner à …? Ai-je tout vu - tout compris ?

16 16 Vos publics / leurs besoins …

17 17 Contenus et services

18 18 Examiner les contenus disponibles Site web Brochures Rapports … Distinguer leurs fonctions Découvrir Sinformer Soutenir un produit ou service … Contenus

19 19 A quels besoins peuvent-ils répondre ? Obtenir une réponse Obtenir un service Obtenir un produit Réserver, sinscrire Acheter Contacter … Avec quelles priorités ? Associés à quels contenus ? Gérés par quelles fonctionnalités ? Services

20 20 Evaluation des services ServiceFaisabilitéImportanceUrgence

21 21 Architecture

22 22 Création dune arborescence A partir des contenus existants et à créer, Découpez-les et disposez-les sur une table, Cherchez à créer des ensemble en fonction de dénominateurs communs, Répétez lexercice avec divers groupes, Concluez en gardant ce qui fait le plus sens et respecte le confort de visite. Attention: un plan de site est une vision du monde, pas la réalité…

23 23 Outils arborescence Logiciel « Inspiration » « Word » (permet la participation du client) Mind mapping (ex: « Freemind ») En ligne: www.bubbl.us

24 24 Navigation

25 25 Mission navigation « Il sagit de développer des systèmes de navigation cohérents et efficaces en matière de navigation, de présentation graphique, dorganisation des pages et dintitulés afin que lutilisateur sache à tout moment où il se trouve, où aller, et quil soit encouragé à revenir… » Peter Morville, Web Review

26 26 Faciliter laccès à linformation Offrir une vue densemble de la proposition, Donner une idée des volumes dinformation, Permettre le choix entre lessentiel et approfondir, Offrir divers langages (textes, photos, diagrammes, vidéos, sons, …), Offrir des sources complémentaires, Distinguer entre le site, les documents et lextérieur, Donner les moyens de se situer en permanence, Fournir une information facile à lire et compréhensible

27 27 Chek-list navigation Compréhension instantanée ? Nommage ? Consultations essentielles? Nombre de clics ? Taille des titres et menus ? Accueil des pages stratégiques ? Maîtrise permanente de la navigation ?

28 28 Nommage des pages et menus De la lecture à la reconnaissance Distinguer le menu de la vitrine Des menus qui envoient vers des pages uniquement

29 29 Structure des pages

30 30 Objet: donner sa place, à lécran, à la navigation, à linformation (contenus) et aux services. Un réflexion qui doit mêler finement les priorités définies au lancement du projet et la vision utilisateur Structure des pages

31 31 Gabarits Permet de placer les éléments de la page dans lespace. Permet de dimensionner les textes et photos avant de passer au montage réel. Permet de premiers tests avec de futurs utilisateurs. Cadre la mission du graphiste

32 32 Zones ou blocs pour les gabarits Zone identité Zone navigation primaire Zone navigation secondaire ? Zones « promotionnelle-s » ? Zones de flux actualisés? Zones doutils ou services Zone administrative ? Zone participative

33 33 Outils pour les gabarits Word Excel Logiciel Balsamiq Logiciels Photoshop ou Indesign Logiciel Dreamweaver Lire nos tests : http://www.vocables.com/drupal/content /de-lusage-des-gabarits http://www.vocables.com/drupal/content /de-lusage-des-gabarits

34 34

35 35

36 36 Scénarios

37 37 Scénarios Exercice ultime pour vérifier lexpérience client à laide des gabarits prévus… Exemples: je veux minscrire à une formation 1. Home page : découverte école 2. Visite du catalogue des formations 3. Choix et lecture dune formation 4. Demande de prise de contact pour info, ou 5. Inscription directe via formulaire 6. Confirmation Quelles étapes, quelle expériences, quel temps ?

38 38 Scénario découverte de service

39 39 Synthèse scénarios / gabarits Les scénarios sont-ils pertinents ? Que nous apprennent-ils sur nos gabarits et notre arborescence ? Quelles modifications imposent-ils ?

40 40 Graphisme

41 41 Brief graphique Graphistes « web » de préférence Respect du cahier de conception Contexte, cible, histoire,… Objectifs en terme didentité Objectifs en terme de discours Mots-clés représentatifs Ton Contraintes (ex.: type de contenus) Inspirer

42 42 Brief graphique: mots clés

43 43 Chronologie graphisme 1. Définition objectifs à linterne 2. Brief du graphiste 3. Présentation de 2 à 3 voies (ambiance générale ou carrément pages complètes) 4. Affinage après présentations client 5. Déclinaison sur 7 à 15 pages modèles 6. Validation 7. Préparation pour linformatique

44 44 qui médiatise le lancement du site? qui assure la maintenance? qui gère les contenus? comment sont archivés les contenus? qui pratique la modération? comment sera modernisé le site? accompagnement du changement ? …. Lancement du site

45 45 augmentation des visites Web augmentation des échanges augmentation des ventes (en général ou du site) augmentation de la présence dans les moteurs réduction des demandes par le téléphone et la Poste réduction des coûts logistiques Mesure des résultats

46 46 Comment poursuivre votre projet ? Quelle première action ? Quelles connaissances réunir ? Quel soutien est nécessaire ? Nous vous souhaitons une pleine réussite ! Xavier de Stoppani xds@vocables.com Et maintenant ?

47 47 Quelques fourchettes pour des sites allant de lassociatif aux communes et ONG Analyse, concept, architecture: 2-6000 frs Design graphique: 2-6000 frs Fonctionnalités : 25 à 60 h Mise en page: 30 à 50 h Finalisation, mise en ligne, formation: 7 à 15 h Conduite du chantier: 15 % Rédaction et illustration: en sus Budget: attention aux généralités

48 48 Planning: attention au temps interne

49 49

50 50 étudier le mode de recherche des internautes cibles soumettre l'url aux moteurs "gratuits" payer voila, yahoo, nomade etc, selon mon marché acheter des mots clés optimiser les pages: mots clés dans les textes, url rewriting, nommer les images, utiliser les balises i, b, h1 \ h6, balise title, balise description, balise keywords, plan site. obtenir des liens externes : lobbying Référencement